ThS. Trần Vĩnh Xuyên - http://khonggiankythuat.com

1. Giới thiệu

Bootstrap đã hỗ trợ cho chúng ta các lớp định dạng để qui định bố cục của một trang web. Chúng ta có thể sử dụng các lớp dịnh dạng này để bố cục trang web của chúng ta theo ý muốn.

2. Bố cục

2.1. Giới thiệu

Bootstrap đã hỗ trợ cho chúng ta các lớp định dạng để qui định bố cục của một trang web. Chúng ta có thể sử dụng các lớp dịnh dạng này để bố cục trang web của chúng ta theo ý muốn

2.2. Container

2.2.1. Giới thiệu

Container là một khái niệm được nhắc đến trong Bootstrap được sử dụng để bố cục một trang web. Các container có thể chứa các đối tượng khác bên trong nó, và cho phép định dạng các đối tượng ấy một các cực kỳ đơn giản.

2.2.2. Một số lớp container

Trong bootstrap đã xây dựng một số container có sẵn với mục đích sử dụng khác nhau:

- .container: gán giá trị max-width tại mỗi điểm breakpoint tương ứng với các thiết bị khác nhau.
- .container-fluid: gán giá trị width: 100% cho tất cả điểm breakpoint.
- .container-{breakpoint}: gán giá trị width: 100% tại điểm breakpoint cụ thể nào đó.

Ví dụ

3. Mô hình lưới

3.1. Giới thiệu

Trong bootstrap đã xây dựng mô hình lưới để hỗ trợ thiết kế layout cho một trang web. Trong mô hình này, màn hình thiết bị được chia ra thành 12 cột liền kề và khác nhau. Dựa vào nhu cầu sử dụng thực tế mà chúng ta có thể gộp các cột này lại với nhau để tạo ra phân vùng hiển thị riêng cho chúng ta, khi muốn hiển thị nội dung trang web.

3.2. Một số ứng dụng

3.2.1 Ví dụ 1

Phân tích ví dụ ta nhận thấy rằng:

- Bố cục này gồm 2 dòng.
- Dòng 1 gồm 2 vùng, vậy mỗi vùng sẽ gộp 6 cột lại với nhau.
- Dòng 2 gồm 3 vùng, vậy mỗi vùng sẽ gộp 3 cột lại với nhau.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

3.2.2 Ví dụ 2

Phân tích ví dụ ta nhận thấy rằng:

- Bố cục này gồm 2 dòng.
- Dòng 1 gồm 4 vùng, vậy mỗi vùng sẽ gộp 3 cột lại với nhau.
- Dòng 2 gồm 2 vùng, vùng 1 sẽ gộp 8 cột, vùng 2 sẽ gộp 4 cột lại với nhau.

<div> class="container">
  <div> class="row">
    <div> class="col">col</div>
    <div> class="col">col</div>
    <div> class="col">col</div>
    <div> class="col">col</div>
  </div>
  <div> class="row">
    <div> class="col-8">col-8</div>
    <div> class="col-4">col-4</div>
  </div>
</div>

4. Qui ước tạo khoảng trắng

4.1. Giới thiệu

Trong quá trình thiết kế chúng ta thường có nhu cầu định lề, vùng đệm, khoảng cách các đối tượng,... Chính vì thế bootstrap đã tạo ra cho chúng ta một số class để có thể áp đặt vào định dạng theo yêu cầu của chúng ta.

4.2. Cú pháp chung 1

Cú pháp:

  {property}{sides}-{size}

Property sẽ có giá trị

- m: gán giá trị cho margin.
- p: gán giá trị cho padding.

Sides sẽ có giá trị

- t: gán giá trị cho margin-top hay padding-top.
- b: gán giá trị cho margin-bottom hoặc padding-bottom.
- l: gán giá trị cho margin-left hoặc padding-left.
- r: gán giá trị cho margin-right hoặc padding-right.
- x: gán giá trị cho cả *-left và *-right.
- y: gán giá trị cho cả *-top và *-bottom.
- blank: gán giá trị cho cả margin hay padding về bốn hướng của đối tượng.

Size sẽ có giá trị

- 0: gán giá trị cho margin hay padding là 0.
- 1: gán giá trị cho margin hay padding là: giátrị * .25.
- 2: gán giá trị cho margin hay padding là: giátrị * .5
- 3: gán giá trị cho margin hay padding là: giátrị * 1
- 4: gán giá trị cho margin hay padding là: giátrị * 1.5.
- 5: gán giá trị cho margin hay padding là: giátrị * 3
- auto: gán giá trị cho margin là: auto.