Người Viết : ViKiMi Editor

Thiết kế Website từng phần tối ưu nhất, làm quen với Bootstrap Classes hữu ích nhất !
Những Classes của Bootstrap sẽ không có phần giới hạn về lợi ích được dùng. Càng dùng những Classes của Bootstrap càng cho thấy có nhiều khả năng sử dụng và tiết kiệm thời gian. Bootstrap Classes có thể tận dụng để thiết kế các phần tử khác nhau của một Website. Vận dụng các thiết kế mang lại này sẽ là một ưu điểm.
Những Bootstrap Class mang lại những thiết kế cơ bản:
A ) Class .show
Thiết kế này giúp hiển thị một phần tử bất kỳ của Website.
Mã HTML :
<div class="container"> <h2>Sử dụng để hiển thị một phần tử HTML</h2> <p>Class .show giúp hiển thị một phần tử nhờ định nghĩa (display : block):</p> <p class="show">Phần tử này sẽ được định nghĩa là hiển thị (display : block).</p> </div>
B ) Class .hidden
Thiết kế này giúp không hiển thị một phần tử bất kỳ của Website.
Mã HTML :
<div class="container"> <h2>SỬ DỤNG ĐỂ KHÔNG HIỂN THỊ MÔT PHẦN TỬ HTML</h2> <p>Class .hidden giúp ẩn một phần tử của Website (display : none):</p> <p class="hidden">Phần tử này sẽ được định nghĩa là không hiển thị (display : none).</p> </div>
Lưu ý : Tại sao lại thiết kế ẩn và hiện một phần tử Website. Nguyên nhân, có rất nhiều phần thiết kế của Website sẽ được ẩn hoặc hiện theo ngữ cảnh hoặc trường hợp yêu cầu.
C ) Class .hidden-*
Thiết kế này sẽ giúp không hiển thị những phần tử của Website phụ thuộc những thiết bị hiển thị.
class= “hidden-xs” : Không hiển thị với thiết bị di động
class= “hidden-sm” : Không hiển thị với thiết bị Table
class= “hidden-md” : Không hiển thị với thiết bị Laptop
class= “hidden-lg” : Không hiển thị với thiết bị Desktop
Mã HTML :
<div class="container-fluid"> <h2>KHÔNG HIỂN THỊ DỰA VÀO THIẾT BỊ HIỂN THỊ</h2> <p>Các phàn tử Website sẽ không hiển thị dựa vào thiết bị:</p> <h1 class="hidden-xs bg-danger">PHÂN TỬ NÀY KHÔNG HIỂN THỊ TRÊN DI ĐỘNG.</h1> <h1 class="hidden-sm bg-info">PHẦN TỬ NÀY KHÔNG HIỂN THỊ TRÊN TABLE.</h1> <h1 class="hidden-md bg-warning">PHẦN TỬ NÀY KHÔNG HIỂN THỊ TRÊN LAPTOP.</h1> <h1 class="hidden-lg bg-success">PHẦN TỬ NÀY KHÔNG HIỂN THỊ TRÊN DESKTOP.</h1> </div>
C – 2 ) Class .invisible
Thiết kế này cho phép không hiển thị một phần tử trên Website với CSS ( visibility : hidden ).
Tuy nhiên, phần tử được ẩn đi vẫn chiếm khoảng trống trên Website, làm ảnh hưởng tới dung lượng.
Mã HTML :
<p class="invisible"> Phần tử này sẽ không được hiển thị nhưng vẫn chiếm khoảng trống trên Website ( visibility : hidden ). </p>
D ) Class .h1 – .h6
Thiết kế này giúp hiển thị tiêu đề của Website
Mã HTML :
<h1>h1 Tiêu đề Bootstrap <small> (Font size : 36px) </small> </h1> <h2>h2 Tiêu đề Bootstrap <small> (Font size : 30px) </small> </h2> <h3>h3 Tiêu đề Bootstrap <small> (Font size : 24px) </small> </h3> <h4>h4 Tiêu đề Bootstrap <small> (Font size : 18px) </small> </h4> <h5>h5 Tiêu đề Bootstrap <small> (Font size : 14px) </small> </h5> <h6>h6 Tiêu đề Bootstrap <small> (Font size : 12px) </small> </h6>
E ) Class .img-circle
Thiết kế này giúp tạo hình dạng bức ảnh thành hình tròn. Tuy nhiên, không hỗ trợ trên Browser IE8 trở về trước.
Mã HTML :
<div class="container"> <h2>TẠO BỨC ẢNH HÌNH TRÒN</h2> <p>Class .img-circle giúp tạo một bức ảnh có hình dạng tròn</p> <img src="natural.jpg" class="img-circle" alt="Natural Circle"> </div>
F ) Class .img-responsive
Thiết kế này giúp cho bức hình có thể hiển thị tương thích trên nhiều thiết bị. Điều này giúp cho hiển thị đạt chuẩn trên các thiết bị.
Nếu không sử dụng Class .img-responsive thì tại mục E hình ảnh sẽ không thể hiển thị tương thích phù hợp cho nhiều thiết bị.
Mã HTML :
<div class="container"> <h2>TẠO BỨC ẢNH HIỂN THỊ TƯƠNG THÍCH TRÊN CÁC THIẾT BỊ</h2> <p>Class .img-responsive giúp tạo một bức ảnh hiển thị tương thích nhiều thiết bị</p> <img src="natural.jpg" class="img-circle img-responsive" alt="Natural Circle"> </div>
G ) Class .img-rounded
Thiết kế này giúp bức hình có thể được bo góc ( border-radius: 6px ) . Thiết kế này không hỗ trợ trên trình duyệt Browser IE8 trở về trước.
Mã HTML :
<img src=”img-rounded.jpg” class=”img-rounded” alt=”rounded image”>
H ) Class .img-thumbnail
Thiết kế này giúp tạo một bức hình Thumbnail trong Website. Đây là một xu hướng được dùng trong nhiều thiết kế Website hiện đại. Bức hình Thumbnail sẽ có thêm phần Borders.
Mã CSS tương ứng :
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: inline-block;
max-width: 100%;
height: auto;
Mã HTML :
<div class="container"> <h2>BỨC HÌNH Thumbnail</h2> <p>Class .img-thumbnail giúp tạo một bức hình Thumbnail</p> <img src="thumbnail.jpg" class="img-thumbnail" alt="Thumbnail Image"> </div>
K ) Class .initialism
Thiết kế này giúp hiển thị văn bản bên trong phần tử HTML <abbr> với cỡ chữ nhỏ có tác dụng hỗ trợ giải thích những văn bản ngắn gọn.
Mã HTML :
<div class="container"> <h2>SỬ DỤNG CLASS .initialism</h2> <p>The <abbr title="Tổ Chức Chém Gió">CHEMGIO</abbr> mở vào 1948. (abbr có cỡ chữ thưỡng) </p> <p>The <abbr title="Tổ Chức Chém Gió với Font size bé hơn" class="initialism">CHEMGIO</abbr> mở vào 1948. (abbr có cỡ chữ nhỏ hơn 1 chút) </p> </div>
Hình Ảnh :

L ) Class .label
Thiết kế này tạo một Label cho Website, Label dưới dạng HỘP giúp cung cấp thông tin bổ sung. HỘP này được thêm vào phần tử cần thiết.
Mã HTML :
<div class=”container-fluid”>
<h2>BOOTSTRAP LABELS</h2>
<h1>Label Info <span class=”label label-info“>New</span></h1>
<h2>Label Success <span class=”label label-success“>New</span></h2>
<h3>Label Warning <span class=”label label-warning“>New</span></h3>
<h4>Label Danger <span class=”label label-danger“>New</span></h4>
<h5>Label Default <span class=”label label-default“>New</span></h5>
</div>
Hình Ảnh :

+ Class .label-danger
Thiết kế này tạo một Label / Nhãn màu đỏ
+ Class .label-info
Thiết kế này tạo một Label / Nhãn màu xanh nhạt
+ Class .label-success
Thiết kế này tạo một Label / Nhãn màu xanh
+ Class .label-warning
Thiết kế này tạo một Label / Nhãn màu vàng
M ) Class .lead
Thiết kế này tạo 1 phần tử nổi bật trên một Website. Thiết kế nãy sẽ tạo một Font-size lớn hơn và chiều cao dòng lớn hơn cho đoạn văn.
Mã CSS :
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}
Mã HTML :
<div class="container">
<h2> TẠO THIẾT KẾ PHẦN TỬ NỔI BẬT CLASS .LEAD </h2>
<p class="lead"> Phần tử này được làm nổi bật.</p>
<p> Đây là một phàn tử thông thường .</p>
</div>