Người Viết : ViKiMi Editor

Cách sử dụng Class của Bootstrap nhanh chóng hiệu quả, không khó cho nhà phát triển
Việc sử dụng Bootstrap hiệu quả đem lại là lớn nhất có thể. Với cách thiết kế lưới bố cục trang Web và hiển thị đa phương tiện đã thấy ở những phần trước. Chúng ta đã thấy rõ cách sử dụng bố cục lưới của Bootstrap. Tuy nhiên, sủ dụng Bootstrap không chỉ có vậy, chúng ta cần phải biết thêm nhiều Class của Bootstrap để có thể thiết kế Layout cho Website hoàn chỉnh.
Chính bởi như vậy, Bootstrap còn cung cấp rất nhiều Class để có thể thiết kế các thành phần Website. Chúng ta có thể hình dung rằng :
Thiết kế bố cục + Thiết kế các thành phần khác nhau.
Thiết kế Website thực sự không khó. Chúng ta cần một Layout đẹp, hoàn thiện để có thể hiển thị tất cả nội dung từ Database, chúng ta đã có Bootstrap. Nghe có vẻ nhiều công đoạn để có một Website, nhưng đó là công việc buộc lòng phải có.
Vậy nên thiết kế Layout đã có Bootstrap. Sau đây là những Class do Bootstrap cung cấp mà bạn cần biết:
a ) Class .active
Đây là Class cung cấp các tính năng sau :
+ ) Bạn có một Table được thiết kế. Bạn muốn các hàng hoặc cột của Table có màu Xám vậy hãy dùng Class .active
Mã HTML :
<table class="table"> <thead> <tr> <th>Họ</th> <th>Tên</th> <th>Email</th> </tr> </thead> <tbody> <tr class="info"> <td>Nguyễn</td> <td>Long</td> <td>long@service.com</td> </tr> <tr class="active"> <td>Xuân</td> <td>Cao</td> <td>cao@roomone.com</td> </tr> </tbody> </table>
+ ) Bạn có một Menu Điều hướng Navbar, bạn muốn thêm màu nền cho một Link liên kết đang active / hoạt động. Vậy hãy dùng Class .active
Mã HTML :
<div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">TRuyện Vui</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Trang Chủ</a></li> <li><a href="#">Tám Cười</a></li> <li><a href="#">Face Fake</a></li> <li><a href="#">Cười Túi</a></li> </ul> </div>
+ ) Bạn có một List group (/ Nhóm danh sách ) , Một muốn thêm màu xanh lục cho Item đang active / hoạt động. Hãy sử dụng Class .active
Mã HTML :
<div class="container"> <h4>Bạn có một nhóm danh sach / List Group</h4> <div class="list-group"> <a href="#" class="list-group-item active">Buôn bán</a> <a href="#" class="list-group-item">Marketing</a> <a href="#" class="list-group-item">Thông tin</a> <a href="#" class="list-group-item">Rao Nhanh</a> </div> </div>
+ ) Bạn có rất nhiều Button và có một Button đang được nhấn. Vậy bạn muốn thêm màu xanh lam cho Button này. Hãy sử dụng Class .active
Mã HTML :
<div class="container"> <h2>Online Page</h2> <button class="btn btn-primary">Online</button> <button class="btn btn-primary active">Offline</button> </div>
+ ) Bạn muốn mô tả một thanh tiến trình đang hoạt động. Giống như một tiến trình Download đang diễn ra. Vậy hãy thêm Class .active
Mã HTML : Đây là đoạn Mã HTML mô tả một tiến trình đang diễn ra. Để có xử lý đầy đủ bạn cần có Javascript và ngôn ngữ dùng phát triển Website.
<div class="container"> <h2>Downloading</h2> <p>Đang diễn ra:</p> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:10%"> 10% </div> </div> </div>
+ ) Bạn có một Dropdown (/ Danh sách thả xuống ), bạn muốn thêm màu xanh lục cho Item đang hoạt động / Active. Hãy sử dụng Class .active
Mã HTML :
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Danh Sách Bán <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Nhà Phố</a></li> <li class="active"><a href="#">Nhà ĐC</a></li> <li><a href="#">Đất ĐC</a></li> </ul> </div>
+ ) Bạn có một Phân trang trên Website. Bạn muốn thêm màu xanh lục cho Trang đang hoạt động. Hãy dung Class .active
Mã HTML:
<div class="container"> <h2>Phân trang :</h2> <ul class="pagination"> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div>
b ) Class .affix
Không chỉ có các Menu được gắn cố định vị trí trên Website. Nếu bạn muốn bất kỳ thành phần nào được gắn có định trên một Website, hãy dùng Class .affix; Khi dùng Class này thành phần được gắn cố định trên Website sẽ luôn luôn hiển thị trên màn hình.
Mã HTML :
<div id="div1" class="container-fluid" style="height:100px;"> <h1>Kiểm tra kênh hiện có</h1> </div> <div id="div2" class="container"> <div class="row"> <nav class="col-sm-3"> <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="110"> <li class="active"><a href="#section1">Kênh 1.0</a></li> <li><a href="#section2">Kênh TN</a></li> </ul> </nav> <div class="col-sm-9"> <h1> Nội dung truyền hình </h1> <h1> Nội dung truyền hình </h1> </div> </div> </div>
C ) Class .alert
Bạn muốn có những cảnh báo đẹp mắt. Bạn phải tạo những hộp cảnh báo cho những thông tin cần chú ý với người sử dụng. Hãy chọn Class .alert
Mã HTML :
<div class="container"> <h2>Hộp cảnh báo Alerts</h2> <div class="alert alert-success"> <strong>Success!</strong> Bạn đã thành công. </div> <div class="alert alert-info"> <strong>Info!</strong> Hãy chú ý thông tin được cung cấp. </div> </div>
Hình Ảnh :

Tương tự chúng ta có những hộp cảnh báo khác có thể dùng với Bootstrap :
C . 1 ) Class .alert-danger
Sử dụng khi bạn muốn tạo một hộp cảnh báo MÀU ĐỎ biểu thị chị cảnh báo nguy hiểm
C . 2 ) Class .alert-dismissible
Bạn tạo ra những hộp cảnh báo, và muốn thêm vào một khả năng Close / Đóng hộp cảnh báo. Hãy sử dụng Class này và kết hợp với Class .Close
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>
C . 3 ) Class .alert-info
Class .alert-info tạo hộp cảnh báo có màu xanh nhạt, giúp đưa ra các thông tin cần thiết.
C . 4 ) Class .alert-success
Class .alert-success tạo hộp thông báo thành công màu xanh lá cây.
C . 5 ) Class .alert-warning
Class .alert-warning tạo hộp cảnh báo màu vàng / Warning, giúp thận trọng với thông tin được đưa ra.
C . 5 ) Class .alert-link
Khi bên trong hộp cảnh báo có các Link liên kết. Bạn muốn thêm màu hiển thị phù hợp khi di chuột qua Link liên kết, hãy sử dụng Class .alert-link
Mã HTML :
<div class="container">
<h2>Sử dụng Link liên kết bên trong hộp cảnh báo</h2>
<div class="alert alert-success">
<strong>Success!</strong> Hãy xem Thư của bạn <a href="#" class="alert-link">Your Letter</a>.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Sự nguy hiểm >> Hãy đọc <a href="#" class="alert-link">Your Letter</a>.
</div>
</div>