부트스트랩이란?
Bootstrap 은 반응형 및 모바일 우선 웹사이트를 개발하는 데 가장 널리 사용되는 CSS 프레임워크 입니다.
Bootstrap 5 는 Bootstrap의 최신 버전입니다.
부트스트랩 빠른 시작
예시
<div class="bg-primary text-white p-5 text-center">
<h1>My First Bootstrap
Page</h1>
<p>Resize this page to see the responsive
effect!</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="col-sm-4">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe,
with more than 12 million
inhabitants.</p>
</div>
<div
class="col-sm-4">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</div>
</div>
</div>
"Try it Yourself" 버튼을 클릭하여 작동 방식을 확인하십시오.
브라우저 지원
부트스트랩 5는 부트스트랩의 최신 버전입니다.
Bootstrap 5는 Internet Explorer 11 이하를 제외한 모든 주요 브라우저를 지원합니다.
IE9 또는 IE8에 대한 지원이 필요한 경우 부트스트랩 3을 사용해야 합니다.
부트스트랩 컨테이너
컨테이너 클래스는 가장 중요한 부트스트랩 클래스 중 하나입니다.
HTML 요소에 여백, 패딩, 정렬 등을 제공합니다.
예시
<div class="container">
<h1>This is a paragraph</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
부트스트랩 색상
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
예시
<div class="container bg-primary text-white p-4">
<p>London is the
most populous city in the United Kingdom, with a metropolitan area of over 9
million inhabitants.</p>
</div>
<div class="container bg-success
text-white p-4">
<p>London is the most populous city in the United
Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
부트스트랩 텍스트 색상
이 텍스트는 음소거되었습니다.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Example
<div class="container">
<p class="text-muted">This text is
muted.</p>
<p class="text-primary">This text is important.</p>
<p
class="text-success">This text indicates success.</p>
<p
class="text-info">This text represents some information.</p>
<p
class="text-warning">This text represents a warning.</p>
<p
class="text-danger">This text represents danger.</p>
</div>
Bootstrap Columns
Three equal-width columns, on all devices and screen widths:
Example
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Responsive Columns
Three equal-width columns scaling to stack on top of each other on small screens:
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Bootstrap Tables
A boredered zebra-striped table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Example
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Bootstrap Alerts
Bootstrap provides an easy way to create predefined alert messages:
Example
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Bootstrap Buttons
Bootstrap provides different styles of buttons:
Example
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
Bootstrap Cards
Example
<div class="card" style="width:400px">
<img src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Full Bootstrap Tutorial
This has been a short description of Bootstrap.
For a full Bootstrap 5 tutorial go to W3Schools Bootstrap 5 Tutorial.