Người Viết : ViKiMi Editor

Tăng tính Responsive của một Website, cần thiết không thể thiếu trong mọi trường hợp.
Thực hiện phát triển với Bootstrap đã quá quen thuộc. Tuy nhiên, để dễ dàng hơn về cách bố cục tổng quan phát triển một Website với Bootstrap có lẽ vẫn cần một vài tổng hợp nhỏ mang lại cách hiểu tốt nhất. Với những gì dễ dàng nhất, tổng hợp cách bố trí tổng quan với Bootstrap sẽ làm cho việc vận dụng này tốt hơn. Tổng hợp cách bố trí và vận dụng Bootstrap!
Để có thể biết được cách hiển thị trang Web bằng Bootstrap chúng ta sẽ có một vài thứ cơ bản :
Hệ thống Bootstrap Grid cho phép hiển thị trên các thiết bị hiện nay với các Class bên dưới
1 ) Class xs (dành cho điện thoại – max-width 768px)
2 ) Class sm (dành cho máy tính bảng – min-width 768px)
3 ) Class md (đối với máy tính xách tay nhỏ – min-width 992px)
4 ) Class lg (dành cho máy tính xách tay và máy tính để bàn – min-width 1200px)
Chúng ta có thể hình dung các khoảng giá trị khác nhau dành cho các thiết bị hiển thị hiện nay:
Smartphone | Table | Laptop | Laptop & Desktop
xs <768px> sm <992px> md <1200px> lg
Chúng ta biết rằng đó là các khoảng cho độ rộng màn hình hiển thị, và quy định này sẽ không thay đổi. Nhưng chúng ta cũng không cần phải nhớ nhiều như vậy, bởi vì tất cả những gì chúng ta cần làm là nhơ các Class dành cho các thiết bị. Dựa vào các Class chúng ta sẽ thiết kế Website có tính Responsive, tức là tính hiển thị tương thích các thiết bị.
EXAMPLE 1 : Chúng ta thiết kế một giao diện hiển thị tương thích chỉ cho 2 thiết bị chính là Smartphone & Laptop nhỏ. Còn các thiết bị khác sẽ hiển thị tương ứng do thiết kế của Bootstrap mang lại, có nghĩa là Bootstrap sẽ hỗ trợ tính Responsive cho các thiết bị ấy dựa vào định nghĩa hiển thị do chúng ta quy định cho 2 thiết bị Smartphone & Laptop nhỏ
<html>
<head>
<title>Bootstrap Example</title>
<!—Hãy thêm Bootstrap –>
</head>
<body>
<div class=”container “>
<h1>Thiết kế hiển thị chính cho Smartphone & Desktop</h1>
<!- – Hàng hiển thị thứ nhât- ->
Giải thích :
Hiển thị trên Smartphone :
Phần tử thứ nhất trong hàng sẽ chiếm 9/ 12 của hàng
Phần tử thứ nhất trong hàng sẽ chiếm 3/ 12 của hàng . Như vậy tổng độ rộng của cả 2 phần tử trong hàng chiếm 100% (12 phần).
Hiển thị trên Laptop nhỏ :
Phần tử thứ nhất trong hàng sẽ chiếm 7/ 12 của hàng
Phần tử thứ nhất trong hàng sẽ chiếm 5/ 12 của hàng . Như vậy tổng độ rộng của cả 2 phần tử trong hàng chiếm 100% (12 phần).
<div id=”div1″ class=”row”>
<div class=”col-xs-9 col-md-7″> Element 1 </div>
<div class=”col-xs-3 col-md-5″> Element 2 </div>
</div>
<!- – Hàng hiển thị thứ hai- ->
Giải thích :
Hiển thị trên Smartphone cả 2 phần tử trong hàng này đều chiếm độ rộng ½ độ rộng của hàng. Tổng độ rộng của cả 2 phần tử là 100% (12 phần)
Hiển thị trên Laptop nhỏ :
Phần tử thứ nhất trong hàng sẽ chiếm 10/ 12 của hàng
Phần tử thứ nhất trong hàng sẽ chiếm 2/ 12 của hàng . Như vậy tổng độ rộng của cả 2 phần tử trong hàng chiếm 100% (12 phần).
<div id=”div2″ class=”row”>
<div class=”col-xs-6 col-md-10″> Element 1 </div>
<div class=”col-xs-6 col-md-2″> Element 2 </div>
</div>
<!- – Hàng hiển thị thứ ba- ->
Giải thích : Hiển thị trên Smartphone cả 2 phần tử trong hàng này đều chiếm độ rộng ½ độ rộng của hàng. Tổng độ rộng của cả 2 phần tử là 100% (12 phần)
<div id=”div3″ class=”row”>
<div class=”col-xs-6″> Element 1 </div>
<div class=”col-xs-6″> Element 2 </div>
</div>
</div>
</body>
</html>
EXAMPLE 2 : Chúng ta cũng có tương tự việc hiển thị dành cho các thiết bị là Smartphone & Table & Desktop
<!- – Hàng hiển thị thứ nhât- ->
Giải thích :
Hiển thị trên Smartphone :
Phần tử thứ nhất trong hàng sẽ chiếm 7/ 12 của hàng
Phần tử thứ nhất trong hàng sẽ chiếm 5/ 12 của hàng . Như vậy tổng độ rộng của cả 2 phần tử trong hàng chiếm 100% (12 phần).
Hiển thị trên Table :
Phần tử thứ nhất trong hàng sẽ chiếm 6/ 12 của hàng
Phần tử thứ nhất trong hàng sẽ chiếm 6/ 12 của hàng . Như vậy tổng độ rộng của cả 2 phần tử trong hàng chiếm 100% (12 phần).
Hiển thị trên Desktop :
Phần tử thứ nhất trong hàng sẽ chiếm 8/ 12 của hàng
Phần tử thứ nhất trong hàng sẽ chiếm 4/ 12 của hàng . Như vậy tổng độ rộng của cả 2 phần tử trong hàng chiếm 100% (12 phần).
<div id=”div1″ class=”row”>
<div class=”col-xs-7 col-sm-6 col-lg-8″> Element 1 </div>
<div class=”col-xs-5 col-sm-6 col-lg-4″> Element 2 </div>
</div>
<!- – Hàng hiển thị thứ hai – ->
Giải thích :
Hiển thị trên Smartphone :
Phần tử thứ nhất trong hàng sẽ chiếm 6/ 12 của hàng
Phần tử thứ nhất trong hàng sẽ chiếm 6/ 12 của hàng . Như vậy tổng độ rộng của cả 2 phần tử trong hàng chiếm 100% (12 phần).
Hiển thị trên Table :
Phần tử thứ nhất trong hàng sẽ chiếm 8/ 12 của hàng
Phần tử thứ nhất trong hàng sẽ chiếm 4/ 12 của hàng . Như vậy tổng độ rộng của cả 2 phần tử trong hàng chiếm 100% (12 phần).
Hiển thị trên Desktop :
Phần tử thứ nhất trong hàng sẽ chiếm 10/ 12 của hàng
Phần tử thứ nhất trong hàng sẽ chiếm 2/ 12 của hàng . Như vậy tổng độ rộng của cả 2 phần tử trong hàng chiếm 100% (12 phần).
<div id=”div2″ class=”row”>
<div class=”col-xs-6 col-sm-8 col-lg-10″> Element 1 </div>
<div class=”col-xs-6 col-sm-4 col-lg-2″> Element 2 </div>
</div>
Tổng hợp 2 EXAMPLE trên chúng ta đã thấy cách mà Bootstrap giúp chúng ta thiết kế Website hiển thị trên các thiết bị khác nhau, dựa vào các Class được cung cấp bởi Bootstrap. Vậy chúng ta chỉ cần vận dụng như vậy là có thể yên tâm khả năng hiển thị trên các thiết bị khác nhau của Website. Đây là tính hiển thị tương thích trên các thiết bị mà Bootstrap đã đem lại.
Tính Responsive của một Website luôn luôn được yêu cầu. Do đó, vận dụng Bootstrap là một ưu tiên. Nếu chỉ đơn thuần với CSS bạn khó có thể làm được như vậy, tất cả chỉ với Bootstrap giúp việc này thật đơn giản.