Cách phân phân bố cơ bản trong bootstrap

• Một số kí hiệu

Cách phân bố cục giao diện cơ bản trong bootstrap

1. Tham khảo tài liệu phân vùng boostrap
   
2. Tên class cần biết đề phân vùng html cho giao diện web
   
3. Ví dụ cơ bản nhất về phân vùng giao diện html với Bootstrap
   
4. Lệnh CSS điều khiển cho kích thước màn hình
    

---

Tham khảo tài liệu phân vùng boostrap

http://getbootstrap.com.vn/css/#grid-options
https://getbootstrap.com/docs/4.0/layout/grid/

Tên class cần biết đề phân vùng html cho giao diện web

• Màn hình cỡ nhỏ (cho máy tính bảng .col-*)
• Màn hình trung bình (đối với máy tính xách tay, máy tính bảng .col-md-*)
• Màn hình lớn (cho máy tính xách tay / máy tính để bàn .col-lg-*).

   Ví dụ đơn giản về boostrap:

<div class="col-md-3 col-sm-6">..</div>

Các sm, md và lglưới tất cả sẽ "ngăn xếp" theo chiều dọc trên màn hình / khung nhìn nhỏ hơn 768 pixel. Đây là nơi xs lưới phù hợp. Các cột sử dụng các col-xs-*lớp sẽ không xếp chồng theo chiều dọc và tiếp tục thu nhỏ trên các màn hình nhỏ nhất.

Thay đổi kích thước trình duyệt của bạn bằng bản demo này và bạn sẽ thấy các hiệu ứng mở rộng lưới.

---

Trong Bootstrap 4 có một -xl-kích thước mới , hãy xem bản demo này . Ngoài ra, phần -xs-tử đã bị xóa , vì vậy các cột nhỏ nhất chỉ đơn giản là col-1, col-2.. col-12, v.v.

col-*- 0 (xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

Ví dụ phân bố cục html bootstrap

Ví dụ dưới đây cho thấy có 6 vùng DIV.
* Nếu trên máy tính bàn thì hiển thị tất cả các thẻ div - 1 dòng duy nhất vì 12 chia đề cho 6 thẻ =2
* Nếu trên máy tính bảng thì hiển thị 2 dòng vì 12 chia đề cho 4 thẻ =3 (trên 1 dòng)
* Nếu trên điện thoại hiển thị 3 dòng vì 12 chia đề cho 6 thẻ =2 (trên 1 dòng)

<div class="container">

<div class="row">

   <div class="col-6 col-md-4 col-lg-2">

       vùng 1

   </div>  

   <div class="col-6 col-md-4 col-lg-2">

     vùng 2

   </div>  

   <div class="col-6 col-md-4 col-lg-2">

     vùng 3

   </div>  

   <div class="col-6 col-md-4 col-lg-2">

     vùng 4

   </div>  

    <div class="col-6 col-md-4 col-lg-2">

     vùng 5

   </div>  

    <div class="col-6 col-md-4 col-lg-2">

     vùng 6

   </div>  

</div>

</div>

<style>

.container

{

    background-color:Aquamarine;

}

</style>

Nếu muốn fulll: container-fluid
<div class="container-fluid">
</div>

 **chạy trên máy tính bàn, máy tính bản phân làm 2, trên điện thoại chỉ 1 vùng

 

Lệnh CSS điều khiển cho kích thước màn hình

Ví dụ bootstrap:
.products_post
{
width:1000px;  
}
@media (max-width: 768px) {
 .products_post{
    font-size:0.7em;
    width:200px !important ;
  }
 }
   @media (max-width: 412px) {
 .products_post{
    font-size:0.7em;
    width:203px !important ;
  }
 }
 @media (max-width: 360px) {
 .products_post{
    font-size:0.7em;
    width:175px !important ;
  }
 }