Bootstrap là gì?
Bootstrap là CSS Framework phổ biến nhất để phát triển các trang web đáp ứng và ưu tiên thiết bị di động.
Bootstrap 5 là phiên bản mới nhất của Bootstrap
Khởi động nhanh Bootstrap
Thí dụ
<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>
Nhấp vào nút "Hãy tự mình thử" để xem nó hoạt động như thế nào.
Hỗ trợ trình duyệt
Bootstrap 5 là phiên bản mới nhất của Bootstrap.
Bootstrap 5 hỗ trợ tất cả các trình duyệt chính ngoại trừ Internet Explorer 11 trở xuống.
Nếu bạn yêu cầu hỗ trợ cho IE9 hoặc IE8, bạn phải sử dụng Bootstrap 3.
Hộp đựng Bootstrap
Lớp container là một trong những lớp Bootstrap quan trọng nhất.
Nó cung cấp lề, khoảng đệm, căn chỉnh và hơn thế nữa cho các phần tử HTML.
Thí dụ
<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>
Màu sắc của Bootstrap
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Thí dụ
<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>
Màu văn bản Bootstrap
Văn bản này bị tắt tiếng.
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.