Người Viết : ViKiMi Editor

Hướng dẫn thiết kế Website sử dụng những Class thông dụng của Bootstrap cách dễ nhất
Nếu sử dụng Class được cung cấp bởi Bootstrap thì chắc rằng việc sử dụng những gì CSS cung cấp có vẻ như không trong ý định. Tuy nhiên, dù bạn có thành thao Bootstrap nhiều đến mấy thì CSS vẫn là thứ không thể thiếu trong nhiều trường hợp. Phần này sẽ tiếp tục giới thiệu các Class Bootstrap cung cấp cần phải biết với mọi nhà phát triển.
Những Class cần phải biết khi sử dụng Bootstrap :
A ) Class .caption
Bạn muốn sử dụng một ảnh Thumbnail khi xây dựng Website. Những tiêu đề dành cho ảnh Thumbnail cần thiết đến mức giúp bổ sung các thông tin quan trọng. Giống như bạn thiết kế hiển thị các bài Posts trên Website. Hãy chọn Class .caption !
Mã HTML :
<div class="container"> <h2>Image Gallery</h2> <div class="row"> <div class="col-md-12"> <div class="thumbnail"> <a href="#" target="_blank"> <img src="THUMBNAIL.jpg" alt="Lights" style="width:100%"> <div class="caption"> <p>TIÊU ĐỀ THUMBNAIL.</p> </div> </a> </div> </div> </div> </div>
B ) Class .caret
Khi thiết một Button thông thường sẽ chỉ có hình dạng nút cơ bản.
Trong trường hợp, bạn tạo một Danh sách thả xuống và Button của bạn cần bổ sung một dấu mũ để tăng hiển thị rằng đó là Button giúp hiển thị danh sách thả xuống. Hãy sử dụng Class .caret !
Mã HTML :
<div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Menu Thả Xuống <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Tin Tuc</a></li> <li><a href="#">The Thao</a></li> <li><a href="#">Seagame</a></li> </ul> </div>
C ) Class .center-block
Thiết kế Website với các phần tử khác nhau. Bạn muốn thực hiện căn giữa bất kỳ phần tử nào, Hãy chọn Class .center-block !
Mã HTML :
<div class="container"> <h2>CĂN GIỮA PHẦN TỬ DIV #DIV2</h2> <div id="div2" class="center-block" style="border:2px !important;"> <span> Thực hiện căn chỉnh phần tử </span> </div> </div>
D ) Class .checkbox
Bạn thiết kế các Nút Checkbox, Bạn muốn nó trở nên đẹp mắt mà không tốn công thiết kế. Hãy chọn Class .checkbox + vùng chứa cho từng Checkbox!
Mã HTML :
<div class="container-fluid"> <h2>THỰC HIỆN LƯU BIỂU MẪU NỘI DUNG WEBSITE</h2> <p>DƯỚI ĐÂY LÀ CÁC DẠNG BIỂU MẪU CÓ THỂ LƯU VỀ:</p> <form> <div class="checkbox"> <label><input type="checkbox" value="">Lựa chọn Save PDF</label> </div> <div class="checkbox"> <label><input type="checkbox" value="">Lựa Chọn Save Word</label> </div> <div class="checkbox disabled"> <label><input type="checkbox" value="" disabled>No Save</label> </div> </form> </div>
E ) Class .checkbox-inline
Đây là Bootstrap Class giúp hiển thị các Checkbox trên cùng một dòng.
Mã HTML :
<div class="container-fluid"> <h2>THỰC HIỆN LƯU BIỂU MẪU NỘI DUNG WEBSITE</h2> <p>DƯỚI ĐÂY LÀ CÁC DẠNG BIỂU MẪU CÓ THỂ LƯU VỀ:</p> <form> <div class="checkbox-inline"> <label><input type="checkbox" value="">Lựa chọn Save PDF</label> </div> <div class="checkbox-inline"> <label><input type="checkbox" value="">Lựa Chọn Save Word</label> </div> <div class="checkbox-inline disabled"> <label><input type="checkbox" value="" disabled>No Save</label> </div> </form> </div>
F ) Class .clearfix
Khi nội dung Website có rất nhiều phần tử. Sẽ xảy ra hiện tượng các phần tử hiển thị sẽ tồn tại chiều cao hiển thị không đều nhau do nội dung mà chúng chứa có độ lớn khác nhau.
Dẫn đến bố cục hiển thị trên các thiết bị có thể bị phá vỡ!
Và Website của bạn bị vỡ hoàn toàn. Cách khắc phục sự có này đó là dùng Class .clearfix. Nó rất quan trọng!
Mã HTML :
<div class="container-fluid"> <h1>Hãy chỉnh độ rộng hiển thị để thấy kết quả!</h1> <div class="row"> <div class="col-xs-6 col-sm-3" style="background-color:lavender;"> Column 1<br> Bạn sẽ thấy hiệu quả của dùng Class .clearfix khi hiển thị trên nhiều thiết bị </div> <div class="col-xs-6 col-sm-3" style="background-color:green;">Column 2</div> <!-- Hãy thêm clearfix cho các màn hình thiết bị được yêu cầu --> <!-- Tại đây sẽ thêm với màn hình Điện Thoại visible-xs --> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">Column 3</div> <div class="col-xs-6 col-sm-3" style="background-color:green;">Column 4</div> </div> </div>
Hình Ảnh :
Hình có sử dụng Clearfix

Hinh 1

Hinh 2
Hình khi không sử dụng Clearfix > Đã xảy ra vỡ bố cục Website !

G ) Class Close
Bạn thiết kế và muốn thêm biểu tượng cho hiển thị dấu Close / Đóng
Hãy sử dụng cùng Class .alert-dismissible để tạo một nút cho phép bạn Close / Đóng bất kỳ phần tử nội dung nào.
Mã HTML :
<div class="container">
<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert"> x </a>
<strong>Success!</strong> Bạn đã thành công.
</div>
</div>