Hệ Thống Grid Layout

Container

Trong Twitter Bootstrap thì toàn bộ nội dung trang sẽ được đặt trong các phần tử container. Và mỗi phần tử container này sẽ ba gồm các dòng khác nhau. Để đánh dấu các phần tử container và các dòng chúng ta sử dụng hai tên lớp CSS tương ứng là .container (hoặc container-fluid) và .row.

<body>
    <div class="container-fluid">
      <div class="row"></div>
    </div>
    <div class="container">
      <div class="row"></div>
      <div class="row"></div>
      <div class="row"></div>
    </div>
</body>

Grid Layout

Bố cục grid layout của Twitter Bootstrap chia màn hình của tất cả các thiết bị thành 12 cột với độ rộng bằng nhau.

                       
     
   
   
 

Thiết Kế Responsive

Twitter Bootstrap cung cấp hệ thống đặt tên lớp CSS với các tiếp vị ngữ khác nhau cho phần tử HTML để quy định độ rộng của phần tử khi hiển thị trên các loại thiết bị có kích cỡ màn hình khác nhau.

Điện Thoai (<768px) Máy Tính Bảng (≥768px) Desktop Trung Bình (≥992px) Desktop Cỡ Lớn (≥1200px)
Tiếp đầu ngữ .col-xs- .col-sm- .col-md- .col-lg-

Ở ví dụ dưới đây chúng ta có một dòng <div class="row"><div> và dòng này chứa hai cột với nội dung bên trong mỗi cột chính là giá trị tương ứng của lớp CSS mà chúng ta gán cho cột đó .col-xs-12.col-md-8.col-xs-12.col-md-4.

<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12.col-md-8</div>
    <div class="col-xs-12 col-md-4">.col-xs-12.col-md-4</div>
</div>
Twitter Bootstrap
Thêm Bình Luận: