Kết nối

[Bootstrap] Phần 5: Bảng

7.625 lượt xem 
 Cập nhật lần cuối: 10/01/2017 lúc 18:14:41
Thể loại: Bootstrap, Thiết kế Web 

Trong bài viết này, chúng ta sẽ học các các trang trí cho bảng trong Bootstrap.

Lớp .table: Lớp này để định nghĩa 1 bảng với các phong cách mặc định trong Bootstrap. Chúng ta xét đến đoạn mã sau:

table_bootstrap

<div class="container">
  <h2>Basic Table</h2>
  <p>Lớp .table thêm các phong cách cơ bản (padding và các dòng ngăn cách ngang) cho 1 bảng:</p>
  <table class="table">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Lớp .table-striped: Lớp này thêm các nền vạch ngang cho các dòng trong bảng

table_stripedrows

<div class="container">
  <h2>Các dòng vạch ngang</h2>
  <p>Lớp .table-striped thêm các nền vạch ngang cho bảng</p>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Lớp table-bordered: cho phép thêm viền ở các cạnh của bảng và ô.

table_border

<div class="container">
  <h2>Viền cho bảng</h2>
  <p>Lớp .table-bordered thêm các viền cho tất cả ô trong bảng</p>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Lớp .table-hover: Lớp định nghĩa phong cách khi rê chuột lên các dòng trong bảng, mặc định dòng được tô màu xám khi rê chuột lên.

table_hover

<div class="container">
  <h2>Các dòng Hover</h2>
  <p>Lớp .table-hover cho phép kích hoạt trạng thái hover cho các dòng trong bảng</p>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Lớp .table-condensed: Lớp này làm bảng hẹp hơn bằng cách giảm các padding xuống 1 nửa.

Liên quan:  [Bootstrap] Phần 3: Hệ thống lưới nâng cao

Tô màu cho các dòng trong bảng
Trong phần này, chúng ta sử dụng các lớp .active, .success, .info, .warning, .danger để tô màu cho các dòng, cột và ô trong bảng ở vị trí phần tử td hoặc tr.

table_context

<div class="container">
  <h2>Các lớp ngữ cảnh</h2>
  <p>Dùng các lớp .active, .success, .info, .warning, .danger để tô màu cho bảng</p>
  <table class="table">
    <thead>
      <tr>
        <th>Tên</th>
        <th>Họ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr class="danger">
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr class="info">
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Lớp .table-responsive: Lớp này giúp tạo ra 1 bảng đáp ứng thích hợp cho tất cả giao diện màn hình khác nhau mà không có sự thay đổi.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Như vậy, trong bài này, chúng ta đã học được các lớp cơ bản để định nghĩa cho phong cách bảng ở Bootstrap.

Trích dẫn bài viết
  • APA:
    Dammio. (2016). [Bootstrap] Phần 5: Bảng. https://www.dammio.com/2016/10/10/bootstrap-phan-5-bang.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[Bootstrap] Phần 5: Bảng},
    year = {2016},
    url = {https://www.dammio.com/2016/10/10/bootstrap-phan-5-bang},
    urldate = {2024-03-14}
    }
Theo dõi
Thông báo của
guest
2 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x