Người Viết : ViKiMi Editor

Hướng dẫn thiết kế hiển thị Website trên các thiết bị thật dễ dàng khi sử dụng Bootstrap
Thiết kế bố cục Website với Bootstrap rất nhiều lợi ích. Đôi khi làm việc không có Bootstrap tất cả có vẻ khó khăn với bất kỳ một lập trình viên nào. Việc này gần như phải làm thủ công mọi thứ, và mọi thứ trở nên khó nhớ vì quá nhiều thứ với các quy định được đặt ra. Nhưng khi có Bootstrap thì tất cả lại trở nên hoàn hảo vì tất cả những gì cần thiết kế đã có.
Vậy điều gì làm nên sự lợi ích này? Khiến người dùng Bootstrap gần như đã quá quen và chỉ muốn dùng Bootstrap. Rõ ràng đó là các quy tắc thiết kế đã có, Các hỗ trợ thiết kế đa phương tiện cũng đã có.
+ Chúng ta chỉ cần nhớ những thiết kế cơ bản dưới đây:
Những Class chúng ta có thể sử dụng để thiết kế trên các thiết bị hiển thị:
Thiết kế với thiết bị di động : .col-xs-*
Thiết kế với thiết bị máy tính bảng : .col-sm-*
Thiết kế với thiết bị Laptop : .col-md-*
Thiết kế với thiết bị Desktop : .col-lg-*
Để dễ dàng hiểu về vấn đề này! Chúng ta sẽ xem một Demo sau :
A } Mã Code HTML
<html>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container-fluid”>
<h1>Bootstrap Grids</h1>
<p>Responsive Web Design. On extra small devices, it will stack (100% width).</p>
<div class=”row”>
<div id=”div1” class=”col-xs-12 col-sm-6 col-md-3 col-lg-4” style=”border:2px solid whitesmoke; height:200px; color:green;”>
Almost every new client these days wants a mobile version of their website. <br>
It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too.<br>
In the next five years, we’ll likely need to design for a number of additional inventions. <br>
When will the madness stop? It won’t, of course.<br>
</div>
<div id=”div2” class=”col-xs-12 col-sm-6 col-md-9 col-lg-8” style=”border:2px solid whitesmoke; height:200px; color:blue;”>
In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. <br>
For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. <br>
Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?
</div>
</div> <!– End .row –>
</div>
</body>
</html>
B } Giải thích đoạn mã Code
Đây là một ví dụ rất cơ bản để thiết kế hiển thị trên các thiết bị.
Chúng ta thấy ở trên định nghĩa một thẻ Div có Class = ‘row’ làm một hàng hiển thị và bên trong thẻ Div này có chứa 2 thẻ Div con có id lần lượt là div1 & div2.
2 thẻ Div con này có thể biến đổi thành các trường hợp sau:
+ ) Sẽ trở thành 2 cột hiển thị trên các thiết bị :
Table, Laptop, Desktop.
+ ) Sẽ trở thành 2 hàng hiển thị trên thiết bị :
Smartphone.
Tại sao lại như vậy ? Vì với 2 thẻ Div con chúng ta đã sử dụng các Class sẵn có của Bootstrap để cho phép thiết kế hiển thị tương thích trên các thiết bị.
Các Class này sẽ tương thích với từng thiết bị. Khi phát hiện thiết bị là gì (Smartphone, Table, Desktop …) thì các Class thiết kế tương ứng sẽ được sử dụng để hiển thị.
+ ) Với thiết vị Smartphone :
Div con có id là div1 : sẽ sử dụng Class col-xs-12 để hiển thị.
Div con có id là div2 : sẽ sử dụng Class col-xs-12 để hiển thị.
Hình Ảnh hiển thị trên thiết bị Smartphone:

+ Với thiết bị Table :
Div con có id là div1 : sẽ sử dụng Class col-xm-6 để hiển thị.
Div con có id là div2 : sẽ sử dụng Class col-xm-6 để hiển thị.
Hình Ảnh hiển thị trên thiết bị Table:

+ Với thiết bị Laptop :
Div con có id là div1 : sẽ sử dụng Class col-xd-3 để hiển thị.
Div con có id là div2 : sẽ sử dụng Class col-xd-9 để hiển thị.
Hình Ảnh hiển thị trên thiết bị Laptop:

+ Với thiết bị Desktop :
Div con có id là div1 : sẽ sử dụng Class col-lg-4 để hiển thị.
Div con có id là div2 : sẽ sử dụng Class col-lg-8 để hiển thị.
Hình Ảnh hiển thị trên thiết bị Desktop:

Như vậy, Chúng ta thấy rất rõ khả năng hiển thị trên các phương tiện khác nhau. Khi sử dụng Bootstrap để thiết kế hiển thị tương thích với các thiết vị. Thật dễ dàng phải không? Và để có các thiết kế tương tự thì chúng ta có thể làm dễ dàng tương tự. Phát triển Website với Bootstrap thật đơn giản!
Và có thể tham khảo thêm với thiết kế bằng Bootstrap để có một hiển thị tốt nhất.