Người Viết : ViKiMi Editor

Khi Bootstrap Classes đã trở nên quen thuộc và sử dụng PT trong tất cả các Website !!!
Những Class của Bootstrap dường như không thể thiếu được. Một Website thiết kế có thực sự nhanh hoặc thực sự mạnh cũng nhờ khả năng linh hoạt do Framework hỗ trợ mang lại. Lý do đó khiến Bootstrap được sử dụng cho hầu hết Website. Những Class của Bootstrap là cách nhớ và học nhanh nhất.
Danh sách các Class của Bootstrap được sử dụng :
A ) Class .collapse :
Đây là thiết kế cho phép một Phần tử có thể thực hiện thu gọn – Tức là ẩn hoặc hiển thị theo ý muốn
Mã HTML :
<div class="container"> <h2>Thiết kế Collapsible</h2> <p>Hãy Click Button để thấy hiệu ứng.</p> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#target-element">Collapsible</button> <div id="target-element" class="collapse"> Nội Dung này sẽ được thu gọn theo yêu cầu <BR> + Có thể được hiển thị khi Button phía trên được Click + Có thể được ẩn đi khi Button phía trên được Click </div> </div>
+ ) Class .collapse in
Đây là thiết kế giúp hiển thị nội dung thu gọn theo mặc định ban đầu.
<div id=”target-element” class=”collapse in”>
B ) Class .container
Cho phép hiển thị phần tử toàn bộ chiều rộng vùng chứa, Thông thường sẽ được xác định bởi các trang màn hình. Và luôn thực căn lề bên trái & bên phải bằng nhau.
Mã HTML :
<div class="container"> <h1>About Page</h1> <p>Trang thông tin giới thiệu.</p> </div>
C ) Class .container-fluid
Cho phép hiển thị một vùng chứa kéo dài toàn bộ màn hình hiển thị của thiết bị.
Mã HTML :
<div class="container-fluid"> <h1>About Page</h1> <p>Trang thông tin giới thiệu.</p> </div>
D ) Class .control-label
Thiết kế này cho phép hiển thị nhãn với thiết kế Form
Mã HTML :
<form class="form-horizontal" action="/action_page.php"> <div class="form-group"> <label class="control-label col-sm-2">Email:</label> <div class="col-sm-10"> <p class="form-control-static">yourmail@meeting.com</p> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd"> </div> </div> </form>
E ) Class .danger
Đây là thiết kế dành cho Table : Giúp thêm màu nền đỏ / background-color vào Hàng <tr> hoặc Cột <td>. Class giúp hiển thị những thông tin nguy hiểm hoặc tiêu cực…
Mã HTML :
<table class="table"> <thead> <tr> <th>Họ</th> <th>Tên</th> <th>Website</th> </tr> </thead> <tbody> <tr> <td>Nguyên</td> <td>Tấn</td> <td>nguyentan.com.vn</td> </tr> <tr class="success"> <td>Lê</td> <td>Hùng</td> <td>lehung.net</td> </tr> <tr class="danger"> <td>Trần</td> <td>Dương</td> <td>tranduong.tk</td> </tr> </tbody> </table>
F ) Class .disable
Thiết kế này giúp vô hiệu hoá bất kỳ một : Button ; Một Mục ; Một Link liên kêt ….
+ Vô hiệu hoá một Button
<button class=”btn btn-primary disabled”>Disabled BTN</button>
+ Vô hiệu hoá một Mục trong danh sách thả xuống
Mã HTML :
<div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">DS thả xuống <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Item 1</a></li> <li class="disabled"><a href="#">Disabled Item 2</a></li> <li class="active"><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </div> </div>
+ Vô hiệu hoá một Link liên kết
<div class="container-fluid"> <h2> Phân trang :</h2> <ul class="pagination"> <li><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> <li><a href="#">5</a></li> </ul> </div>
G ) Class .divider
Thiết này giúp tạo phân tách trong Menu Thả xuống, phân tách này là một đường border mỏng.
Mã HTML :
<div class="container"> <h2>MENU THẢ XUỐNG</h2> <p>Đây là danh sách Menu thả xuống / Hãy Chọn :</p> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> Trang SP <span class="caret"></span></button> <ul class="dropdown-menu"> <li class="dropdown-header">Quần Áo (Sale 20%)</li> <li><a href="#"> Áo Thun </a></li> <li><a href="#"> Áo Boomble </a></li> <li><a href="#"> Áo Veston </a></li> <! -- Phần phân chia -- > <li class="divider"></li> <li class="dropdown-header">Flash Sale</li> <li><a href="#">Ô Tô (Flash Sale 50%)</a></li> <li><a href="#">Xe Máy (Flash Sale 30%)</a></li> </ul> </div> </div>
Hình Ảnh

H ) Class .dropdown
Thiết kế Bootstrap với Class này cho phép hiển thị một Menu Dạng Danh Sách Thả Xuống.
+ ) Class .dropdown-header
Thiết kế này cho phép bạn tạo các phần Tiêu Đề cho Menu Dạnh Danh Sách Thả Xuống.
+ ) Class .dropdown-menu
Thiết kế này tạo Nội Dung trong Menu thả xuống, thường kết hợp với Danh Sách <UL> của HTML
+ ) Class .dropdown-toggle
Thiết kế này chỉ áp dụng cho Button giúp tạo chuyển đổi hiển thị Ẩn / Hiện của Menu Dạng Danh Sách Thả Xuống.
+ ) Class .dropup
Tạo hiệu ứng lên trên thay vì xuống dưới cho Menu
K ) Class .dl-horizontal
Thiết kế này áp dụng cho Danh Sách <DL> của HTML.
+ Với của sổ trình duyệt mở rộng hoặc trên thiết bị có màn hình hiển thị lớn:
Các phần tử bên trong thẻ <DL> là :
<DT> & <DD> sẽ được sắp xếp cạnh nhau
+ Với của sổ trình duyệt nhỏ Hoặc màn hình hiên thị nhỏ :
Các phần tử bên trong thẻ <DL> là :
<DT> & <DD> sẽ được sắp xếp xuống hàng
Mã HTML :
<div class="container">
<h2>MENU Đồ uống</h2>
<p>Nhà Hàng 247 - TN :</p>
<dl class="dl-horizontal">
<dt>Cola</dt>
<dd>- America / Viet Nam</dd>
<dt>Pepsi</dt>
<dd>- European / Viet Nam</dd>
</dl>
<p>
<strong>Tip:</strong>
Hãy Thay đổi độ rộng của sổ trình duyệt để thấy hiệu ứng. </p>
</div>

Hình 1 : Hiển thị Desktop

Hình 2 : Hiển thị Mobile