BootStrap Grid System

Grid System

Grid system là khái niệm bắt nguồn từ kỹ thuật in ấn, thiết kế các poster, bìa sách, tạp chí,…. Đó là một hệ thống các đường kẻ ngang, dọc chia không gian trang thành nhiều ô để bạn đặt bố cục cho các phần của trang.

Được ứng dụng sang lĩnh vực thiết kế web, hệ thống grid chia layout web của bạn thành các hàng (row) và các cột (column). Cụ thể trong Bootstrap, layout sẽ được chia thành 12 cột, mỗi cột sẽ chiếm tỷ lệ % nhất định và bằng nhau trên layout.

Từ đây, đơn vị cơ sở để tính độ rộng cho các element mà bạn bố trí trên layout sẽ là cột. Tức là bạn sẽ chỉ định độ rộng của phần tử đó là 1, 2, 3 hay 6 cột chứ không phải là bao nhiêu pixel. Dù trang web bị co dãn thì tỷ lệ giữa các element này vẫn không thay đổi, điều này lý giải cho khả năng Responsive của Bootstrap.

Ví dụ minh họa:

<div class="container">

        <div class="row">

                <div class="col-md-12">

                <h2>Hàng 12 cột cho medium device</h2></div>

        </div>

        <div class="row">

                <div class="col-md-8">

                        <h3>Nội dung<h3>

                        <P>Bạn đang học bootstrap 3</p>

                </div>

                <div class="col-md-4">

                        <p>Đây là slidebar</p>

                </div>

        </div>

        <div class="row">

                <div class="col-md-6">

                        <h4>Hàng 6 cột cho medium device</h4>

                </div>

                <div class="col-md-6">

                        <h4>Hàng 6 cột cho medium device</h4>

                </div>

        </div>

</div>

Bạn có thể xem lại kết quả ở đây http://www.bootply.com/129278

Ở ví dụ trên, layout của chúng ta có 3 hàng. Hàng thứ nhất có 12 cột, chính là lớp .col-md-12. Hàng thứ 2 gồm 2 thành phần. Phần nội dung có 3 cột .col-md-8 còn phần slidebar có 4 cột – .col-md-4.

Hàng còn lại gồm 2 thành phần, mỗi thành phần được bao trong 6 cột, là .col-md-6.

Nhìn như vậy chắc các bạn cũng đã hiểu rõ cách hoạt động của nó, để chia làm 4 cột ta dùng đặt tên class là .col-md-4. Tương tự với 1 cột, 2 cột sẽ là .col-md-1, col-md-2,…..

md (medium devices) chính là kích thước đại diện cho thiết bị desktop, ngoài ra còn có các loại kích thước khác mà bootstrap định nghĩa như sau:

Ký tự $ trong bảng trên đại diện cho số cột chứa phần tử đó, là một số từ 1 đến 12.
Chú ý:

• Bootstrap quy định các hàng (.row) phải nằm trong lớp .container hoặc lớp container-fluid
• Nếu bạn bao các hàng bằng lớp container thì chiều rộng của lớp container của các thiết bị khác nhau được cho ở bảng trên. Còn nếu dùng container-fluid thì chiều rộng của nó sẽ full-width.

Quay lại với ví dụ trên, khi bạn thu nhỏ cửa sổ trình duyệt lại hoặc đưa nó lên chạy trên điện thoại hay thiết bị kích thước nhỏ hơn 992px. Một điều xảy ra là các thành phần sẽ xếp thành một ngăn chạy dọc trên xuống layout. Tại sao vậy? Rõ ràng là nó không responsive. Đơn giản, để làm điều đó bạn cần phải thêm vào các lớp col-sm-$ hay col-xs-$ vào cùng với các lớp col-md-$.

Ví dụ:

<div class="row">
  <div class="col-md-8 col-xs-6">Đây là slidebar</div>
  <div class="col-md-4 col-xs-6">Đây là slidebar</div>

</div>

Với ví dụ trên, khi bạn co cửa sổ trình duyệt lại, 2 thành phần 8 cột và 4 cột ban đầu sẽ chia đều thành 2 lớp 6 cột ngang hàng mà không bị tụt xuống hàng mới. Hãy xem kết quả tại đây:http://www.bootply.com/129282

Offset

Giả sử bạn có một hàng 6 cột như sau:

<div class="row">

      <div class="col-md-6 col-md-offset-3">ví dụ về offset</div>

</div>

Theo mặc định hàng trên sẽ nằm sát lề trái của container. Vậy làm sao để dịch chuyển nó sang bên phải hoặc căn ra giữa container? Khi đó bạn hãy thêm lớp .col-md-offset-$. Với $ là một số từ 0 đến 12 , chỉ số cột được căn lề trái margin-left ( chính là số cột dịch sang phải). Nếu $ lớn hơn 12 coi như là 0. Xem kết quả tại đây: http://www.bootply.com/129286

Column ordering

Bạn có thể thay đổi thứ tự các thành phần trong hệ thống cột bằng cách đẩy nó sang phải( push) hoặc kéo nó sang trái( pull) bằng cách sử dụng các lớp col-md-push-$ và col-md-pull-$. Ví dụ:

<div class="row">

<div class="col-md-3 col-md-push-3">I am bootstrap 3</div>

</div>

Ví dụ trên ta đã kéo hàng sang bên phải 3 cột.Xem minh họa ở đây: http://www.bootply.com/129291

Chú ýNhiều bạn sẽ thắc mắc việc sử dụng push và offset ở mục bên trên cho kết quả giống nhau. Tuy nhiên giữa chúng có sự khác biệt:

• Offset căn lề bằng cách sử dụng margin-left còn push căn lề sử dụng left.
• Và khi sử dụng offset các cột được offset sẽ đẩy dồn các cột bên phải nó còn nếu dùng push và pull thì các cột này sẽ chồng chéo lên các cột khác kề phía mà nó dịch chuyển.

Xem sự khác biệt này ở đây: http://www.bootply.com/129300

Sưu tầm từ: http://hoidapit.com.vn/Questions/ViewQuestions/4305/hoc-bootstrap3-lam-quen-voi-bootstrap-grid-system.html