Người Viết : ViKiMi Editor

Sử dụng Bootstrap Classes khi đã thông dụng & quen thuộc. Đem lại hiệu quả tốt nhất !
Những thành phần thiết kế trở nên nổi bật khi có Bootstrap làm cho bạn hài lòng. Vậy các Classes cung cấp này còn nhiều hoặc giới hạn gì không? Tất nhiên là không thể nói hết nếu tiếp tực và thiết kế Website theo chuẩn đề ra. Một Website có bố cục chặt chẽ yêu cầu cả về phần Coding, lựa chọn Bootstrap hợp lý cho mọi lập trình viên.
Các Bootstrap Classes có thể mang lại lợi thế :
A ) Class .well
Thiết kế này cho phép tạo ra các phần tử có Border / Đường viền màu xám + Padding / phần đệm được thêm vào. Tạo một cảm giác rất giống thiết kế hộp.
Mã CSS :
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
Mã HTML :
<div class=”container“>
<h2>Thiết kế này có dùng Class .well</h2>
<div class=”well”>Class Well</div>
</div>

+ Class .well-lg
Thiết kế này tương tự với Class .well, chỉ có một sự khác biệt là tạo một Padding / Phần đệm lớn hơn. Cho phép tạo ra một phần tử trông lớn hơn.
Mã HTML :
<div class=”container“>
<h2>Thiết kế này có dùng Class .well-lg</h2>
<div class=”well-lg”>Class Well</div>
</div>
+ Class .well-sm
Thiết kế này tương tự với Class .well, chỉ có một sự khác biệt là tạo một Padding / Phần đệm nhỏ hơn. Cho phép tạo ra một phần tử trông nhỏ hơn.
Mã HTML :
<div class=”container“>
<h2>Thiết kế này có dùng Class .well-lg</h2>
<div class=”well-sm”>Class Well</div>
</div>
B ) Class .visible-*
Thiết kế này cho phép xây dựng các phần tử có thể Ẩn / Hiện tuỳ theo các loại thiết bị khác nhau.
Danh Sách :
+ visible-xs : Chỉ thực hiện hiển thị trên màn hình điện thoại
+ visible-sm : Chỉ thực hiện hiển thị trên màn hình Table
+ visible-md : Chỉ thực hiện hiển thị trên màn hình Laptop
+ visible-lg : Chỉ thực hiện hiển thị trên màn hình Desktop
Tuy nhiên, Kể từ Version 3.2.0 thì đã không dùng nữa và thay thế bởi Class .hidden-*
Mã HTML :
<h1 class = “visible-xs bg-danger”> Chỉ hiển thị với Smartphone. </h1>
<h1 class = “visible-sm bg-info”> Chỉ hiển thị với Table. </h1>
<h1 class = “visible-md bg-warning”> Chỉ hiển thị với Laptop. </h1>
<h1 class = “visible-lg bg-success”> Chỉ hiển thị với Desktop. </h1>
C ) Class .visible – print – block
Thiết kế này cho phép Hiển thị phần tử thiết kế trên màn hình in Hoặc màn hình xem trước của chế độ in.
Phần tử thiết kế sẽ hiển thị nhờ định nghĩa : ( display : block )
+ Class .visible – print – inline
Thiết kế này cho phép Hiển thị phần tử thiết kế trên màn hình in Hoặc màn hình xem trước của chế độ in.
Phần tử thiết kế sẽ hiển thị nhờ định nghĩa : ( display : inline )
+ Class .visible – print – inline – block
Thiết kế này cho phép Hiển thị phần tử thiết kế trên màn hình in Hoặc màn hình xem trước của chế độ in.
Phần tử thiết kế sẽ hiển thị nhờ định nghĩa : ( display : inline – block )
+ Class .hidden – print
Thiết kế này cho phép Không Hiển thị phần tử thiết kế trên màn hình in Hoặc màn hình xem trước của chế độ in.
Phần tử thiết kế không hiển thị nhờ định nghĩa : ( display : none )
D ) Class .table
Thiết kế này cho phép thêm các định dạng kiểu cho một Table : Padding, Border, Hover … Giúp hiển thị một Table tốt hơn.
Mã HTML : <div class="table-responsive"> <table class="table table-bordered table-hover"> <thead> <tr> <th>Họ</th> <th>Tên</th> <th>Tài Khoản</th> </tr> </thead> <tbody> <tr> <td>Nguyễn</td> <td>Đô</td> <td> TCB-1000 </td> </tr> <tr> <td>Anh</td> <td>Tu</td> <td>VCB-2222</td> </tr> </tbody> </table> </div> <!--- End Class table-responsive --->
+ Class .table-bordered
Thiết kế này giúp thêm Border / Đường viền vào tất cả thành phần của Table
+ Class .table-hover
Thiết kế này tạo hiệu ứng Hover cho các Thành phần của Table.
Thêm màu nền Nâu trên Hàng của Table khi hàng đó được Hover.
+ Class .table-responsive
Thiết kế này cho phép Table hiển thị tương thích trên mọi loại thiết bị. Nó cũng rất hữu ích.