1 Các cột có kích thước khác nhau

Một phần của tài liệu Giáo trình lập trình Web với Servlet và JSP - Đặng Thanh Dũng (Trang 123 - 125)

Hệ thống Boostrap grid có 4 lớp:

 xs – dùng cho điện thoại.

 sm – dùng cho máy tính bảng.

 md – dùng cho desktop.

Các lớp này có thể được kết hợp lại để tạo ra các cách bố trí linh động hơn. Để tạo ra một grid cho một thiết bị nào đó, ta sử dụng công thức sau:

<div class="row">

<div class="col-[xs/sm/md/lg]-[number]"></div> </div>

<div class="row">

<div class="col-*-*"></div>

<div class="col-*-*"></div>

<div class="col-*-*"></div> </div>

<div class="row">

...

</div>

Trong đó:

 Dùng <div class="row"> để tạo ra một dive span trên một dòng.

 Dùng <div class="col-[xs/sm/md/lg]-[number]"></div>

để tạo ra một dive span trên [number] cột (xem thêm Hình 12.1). Ví dụ, để tạo ra một bảng có 1 dòng và 3 cột, ta viết như sau:

<div class="row">

<div class="col-sm-4">.col-sm-4</div>

<div class="col-sm-4">.col-sm-4</div>

<div class="col-sm-4">.col-sm-4</div> </div>

Kết quả là bảng như sau:

Để tạo ra một bảng có 2 cột (một cột kích thước 4 và một cột kích thước 8), ta viết như sau:

<div class="row">

<div class="col-sm-4">.col-sm-4</div>

<div class="col-sm-8">.col-sm-8</div> </div>

12.3. BOOTSTRAP TABLE

Bootstrap table chỉ có các đường kẻ ngang (xem Hình 12.2). Ta dùng class .table để thêm phần định dạng CSS của Boostrap cho table.

Một phần của tài liệu Giáo trình lập trình Web với Servlet và JSP - Đặng Thanh Dũng (Trang 123 - 125)