Step 3 Angular with Bootstrap :-)

Angular 프로젝트에서 Bootstrap 을 사용 해 보겠습니다. 아주 쉬워요  :-)

npm 으로 Bootstrap 을 해당 프로젝트 경로에 설치 해 줍니다~~

 npm i bootstrap 

그리고 angular.json 파일을 열어 style 부분에 css 경로를 추가해주세요 ~~

"styles": [

"node_modules/bootstrap/dist/css/bootstrap.min.css",

"src/styles.css"

]

그럼 끝! 참 쉽죠 :-)

Bootstrap 으로 페이지를 좀 꾸며 보았습니다. 물론 내용은 아무 상관없는 템플릿입니다 ^^;;

HOME

<div class="jumbotron text-center">

<h1>My First Bootstrap Page</h1>

<p>Resize this responsive page to see the effect!</p>

</div>

<div class="container">

<div class="row">

<div class="col-sm-4">

<h3>Column 1</h3>

<p>Lorem ipsum dolor..</p>

<p>Ut enim ad..</p>

</div>

<div class="col-sm-4">

<h3>Column 2</h3>

<p>Lorem ipsum dolor..</p>

<p>Ut enim ad..</p>

</div>

<div class="col-sm-4">

<h3>Column 3</h3>

<p>Lorem ipsum dolor..</p>

<p>Ut enim ad..</p>

</div>

</div>

</div>

Intro

<div class="jumbotron">

<div class="alert alert-success">

<strong>Success!</strong> Indicates a successful or positive action.

</div>

<div class="alert alert-info">

<strong>Info!</strong> Indicates a neutral informative change or action.

</div>

<div class="alert alert-warning">

<strong>Warning!</strong> Indicates a warning that might need attention.

</div>

<div class="alert alert-danger">

<strong>Danger!</strong> Indicates a dangerous or potentially negative action.

</div>

</div>

History

<div class="container">

<h2>Contextual Classes</h2>

<p>Contextual classes can be used to color table rows or table cells. The classes

that can be used are: .active,

.success, .info, .warning, and .danger.</p>

<table class="table">

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>Default</td>

<td>Defaultson</td>

<td>def@somemail.com</td>

</tr>

<tr class="success">

<td>Success</td>

<td>Doe</td>

<td>john@example.com</td>

</tr>

<tr class="danger">

<td>Danger</td>

<td>Moe</td>

<td>mary@example.com</td>

</tr>

<tr class="info">

<td>Info</td>

<td>Dooley</td>

<td>july@example.com</td>

</tr>

<tr class="warning">

<td>Warning</td>

<td>Refs</td>

<td>bo@example.com</td>

</tr>

<tr class="active">

<td>Active</td>

<td>Activeson</td>

<td>act@example.com</td>

</tr>

</tbody>

</table>

</div>

Search

<div class="jumbotron">

<label for="search">Now Keyword : Hello Nina !</label>

<div>

<input class="form-control w-25 float-left" type="text" placeholder="Keyword">

<button class="btn btn-default">Change</button>

</div>

</div>