Người Viết : ViKiMi Editor

Hướng dẫn sử dụng Bootstrap Classes quen thuộc. Xây dựng & Phát triển nhanh Website !
Các Class được sử dụng bởi Bootstrap thực sự rất hữu ích. Nên việc sử dụng Class được thiết kế bởi Bootstrap là điều mọi người không thể bỏ qua. Nếu so sánh việc sử dụng Class được thiết kế bởi Bootstrap và CSS đơn thuần, đúng là một cách mới mẻ so sánh với cách thủ công nhiều thời gian và công sức.
Trong một loạt những Class của Bootstrap, phần này chúng ta sẽ biết thêm về những Class cần thiết nhất được cung cấp:
A ) Class .badge
Nếu bạn có hiển thị số lượng bài Đăng trong các chuyên mục hoặc bất kỳ thẻ hoặc bất kỳ lưu trữ nào. Bạn muốn nó hiển thị một cách đẹp mắt nhất. Có lẽ đây là Class bạn phải sử dụng. Hãy chọn Class .badge
Mã HTML :
<div class="container"> <h2>Danh Sách Lưu Trữ</h2> <a href="#">Tháng 1 <span class="badge">15</span></a><br> <a href="#">Tháng 2 <span class="badge">15</span></a><br> <a href="#">Tin Tức <span class="badge">200</span></a> </div>
B ) Class .bg-danger (Background Danger)
Nếu bạn có một phàn tử bất lỳ trên Website, bạn muốn thay đổi màu nền cho phần tử ấy, thay đổi background-color. Bạn chọn Class .bg-danger giúp thêm màu nền đỏ cho phần tử, đại diện cho sự nguy hiểm.
Mã HTML :
<div class="container"> <h2>Background Color to an Element :</h2> <div class="bg-danger"> Cảnh báo nguy hiểm.</div> </div>
C ) Tương tự chúng ta có các Class giúp thay đổi màu nền của phần tử:
+ ) Class .bg-info
Giúp thiết lập màu nền cho phần tử là màu xanh lam nhạt. Có tác dụng tăng thiết kế đưa ra những thông tin
+ ) Class .bg-primary
Giúp thiết lập màu nền cho phần tử là màu xanh lam. Có tác dụng tăng hiển thị thiết kế cho những thông tin quan trọng
+ ) Class .bg-success
Giúp thiết lập màu nền cho phần tử là màu xanh lục. Có tác dụng tăng hiển thị thiết kế cho những thông tin thành công
+ ) Class .bg-warning
Giúp thiết lập màu nền cho phần tử là màu vàng. Tăng tính Hiển thị những thông tin cảnh báo hoặc thông tin cho những hành động tiêu cực
D ) Class .breadcrumb
Khi bạn thực hiện tạo một Menu Breadcrumb trên một Website, ví dụ trong các Category hay bài Posts v.v… Có lẽ Class .breadcrumb là không thể thiếu. Nó giúp bạn định hình hiển thị thiết kế cho phần Menu Breadcrumb. Kết hợp Class .active sẽ giúp bạn biết vị trí của trang hiển thị hiện tại
Mã HTML:
<div class="container"> <p>Breadcrumb Navigation:</p> <ul class="breadcrumb"> <li><a href="https:yousite.vn">Trang chủ</a></li> <li><a href="https:yousite.vn/tintuc">Tin Tức</a></li> <li><a href="#">Tin Teen</a></li> <li class="active">Hot Line dành cho liên hệ hẹn hò 19008987</li> </ul> </div>
E ) Class .btn
Khi thiết kế các Button cho một Page. Chắc hẳn bạn cần Class để tăng tính thiết kế cho Button. Vậy bạn chọn Class .btn, Class này cho phép thiết kế nút Cơ bản màu xám & bo góc
<div class="container"> <h2>Create Button</h2> <button type="button" class="btn">Original btn</button> </div>
F ) Những Class giúp thiết kế một Button
+ ) Class .btn-block
Khi bạn muốn tạo một Button có độ rộng bao phủ hết phần tử cha. Bạn hãy chọn Class .btn-block! Giúp tạo một Button có độ lớn mong muốn.
<div class="container-fluid"> <h2>Nút Có Độ Lớn Large</h2> <button type="button" class="btn btn-primary btn-lg btn-block">Sign Up</button> <button type="button" class="btn btn-default btn-lg btn-block">Login</button> </div>
+ ) Class .btn-danger
Khi bạn muốn tạo một nút màu đỏ biểu thị cho sự nguy hiểm, hãy chọn Class .btn-danger!
+ ) Class .btn-default
Sử dụng Class này khi bạn tạo một nút mặc định màu trắng và đường viền xám.
Hãy chọn Class .btn-default !
+ ) Class .btn-info
Thiết kế một Button có màu xanh nhạt, thông tin đại diện. Hãy sử dụng .btn-info !
+ ) Class .btn-link
Khi bạn muốn tạo một Nút nhưng lại hiển thị giống như một link liên kết. Hãy chọn Class .btn-link
Hình Ảnh

+ ) Class .btn-lg
Tạo một nút có kích thước lớn
+ ) Class .btn-primary
Khi bạn muốn tạo một nút hiển thị đại diện chung với màu Xanh cơ bản, hãy chọn Class .btn-primary
+ ) Class .btn-sm
Tạo một nút có kích thước nhỏ
+ ) Class .btn-success
Khi bạn muốn thiết kế một nút với mục đích biểu thị cho thông tin thành công & với mãu xanh nhạt. Hãy chọn Class .btn-success
+ ) Class .btn-warning
Tạo nút thiết kế cảnh báo có màu vàng
+ ) Class .btn-xs
Thiết kế một nút có kích thước nhỏ nhất ! Hãy sử dụng Class .btn-xs
G ) Class .btn-group
Khi bạn có rất nhiều Nút được sử dụng. Bạn muốn nhóm chúng lại với nhau trên một dòng. Bạn hãy chọn Class .btn-group
MÃ HTML:
<div class="btn-group">
<button type="button" class="btn btn-primary">Sign Up</button>
<button type="button" class="btn btn-default">Login</button>
<button type="button" class="btn btn-default">LogOUT</button>
</div>
+ ) Class .btn-group-justified
Khi bạn muốn nhóm các nút lại với nhau. Và trải rộng toàn bộ các nút trên độ rộng của phần tử cha. Hãy chọn Class .btn-group-justified
MÃ HTML:
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-primary">Sign Up</button>
<button type="button" class="btn btn-default">Login</button>
<button type="button" class="btn btn-default">LogOUT</button>
</div>
+ ) Class .btn-group-lg
Khi bạn muốn tạo một nhóm các nút lại với nhau. Và tất cả các nút này có độ lớn hơn, + Font chữ lớn + phần đệm nút lớn hơn. Hãy chọn Class .btn-group-lg
MÃ HTML:
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Sign Up</button>
<button type="button" class="btn btn-default">Login</button>
<button type="button" class="btn btn-default">LogOUT</button>
</div>
+ ) Class .btn-group-sm
Giúp thiết kế một nhóm các nút nhỏ >> Làm cho toàn bộ các nút trong nhóm chỉ định nhỏ hơn.
+ ) Class .btn-group-xs
Giúp thiết kế một nhóm các nút cực nhỏ >> Làm cho toàn bộ các nút trong nhóm chỉ định sẽ cực nhỏ.
+ ) Class .btn-group-vertical
Giúp thiết kế nhóm nút hiển thị theo chiều dọc. Class .btn-group-vertical phát huy hiệu quả rất rỗ rệt cho phần thiết kế này.
MÃ HTML:
<div class="container">
<h2>NHÓM CÁC NÚT HIỂN THỊ CHIỀU DỌC</h2>
<p>Sử dụng Class .btn-group-vertical :</p>
<div class="btn-group-vertical">
<button type="button" class="btn btn-lg btn-primary">Sign Up</button>
<button type="button" class="btn btn-lg btn-default">Login</button>
<button type="button" class="btn btn-lg btn-default">LogOUT</button>
</div>
</div>
Hinh Ảnh
