Tài liệu và ví dụ về kiểu chọn tham gia của bảng (do chúng được sử dụng phổ biến trong các plugin JavaScript) với Bootstrap.
Trên trang này
Tổng quan
Do việc sử dụng rộng rãi các <table>phần tử trên các tiện ích của bên thứ ba như lịch và bộ chọn ngày, các bảng của Bootstrap được chọn tham gia . Thêm lớp cơ sở .tablevào bất kỳ <table>, sau đó mở rộng với các lớp bổ trợ tùy chọn hoặc kiểu tùy chỉnh của chúng tôi. Tất cả các kiểu bảng không được kế thừa trong Bootstrap, có nghĩa là bất kỳ bảng lồng nhau nào cũng có thể được tạo kiểu độc lập với bảng gốc.
Sử dụng cách đánh dấu bảng cơ bản nhất, đây là cách .tablecác bảng dựa trên trông như thế nào trong Bootstrap.
#
Ngày thứ nhất
Cuối
Xử lý
1
Đánh dấu
Otto
@mdo
2
Jacob
Thornton
@mập mạp
3
Larry the Bird
@twitter
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Các biến thể
Sử dụng các lớp ngữ cảnh để tô màu bảng, hàng bảng hoặc các ô riêng lẻ.
Lớp
Phần mở đầu
Phần mở đầu
Mặc định
Tế bào
Tế bào
Sơ đẳng
Tế bào
Tế bào
Sơ trung
Tế bào
Tế bào
Thành công
Tế bào
Tế bào
Sự nguy hiểm
Tế bào
Tế bào
Cảnh báo
Tế bào
Tế bào
Thông tin
Tế bào
Tế bào
Nhẹ
Tế bào
Tế bào
Tối
Tế bào
Tế bào
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
Truyền đạt ý nghĩa cho các công nghệ hỗ trợ
Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc hiển thị rõ ràng từ chính nội dung (ví dụ: văn bản hiển thị) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .visually-hiddenlớp.
Bảng có dấu
Hàng sọc
Sử dụng .table-stripedđể thêm dải mã vằn vào bất kỳ hàng nào của bảng trong <tbody>.
#
Ngày thứ nhất
Cuối
Xử lý
1
Đánh dấu
Otto
@mdo
2
Jacob
Thornton
@mập mạp
3
Larry the Bird
@twitter
<tableclass="table table-striped">
...
</table>
Các lớp này cũng có thể được thêm vào các biến thể của bảng:
Chúng tôi bắt đầu bằng cách thiết lập nền của một ô trong bảng với thuộc tính --bs-table-bgtùy chỉnh. Sau đó, tất cả các biến thể của bảng sẽ đặt thuộc tính tùy chỉnh đó để tô màu các ô trong bảng. Bằng cách này, chúng tôi không gặp rắc rối nếu các màu bán trong suốt được sử dụng làm nền bảng.
Sau đó, chúng tôi thêm một bóng hộp bên trong trên các ô của bảng với box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lớp trên bất kỳ được chỉ định nào background-color. Bởi vì chúng tôi sử dụng một trải rộng lớn và không bị mờ, màu sắc sẽ đơn điệu. Vì --bs-table-accent-bgkhông được đặt theo mặc định, chúng tôi không có bóng hộp mặc định.
Khi một hoặc các lớp được thêm vào, .table-stripedmàu này được đặt thành màu nửa trong suốt để tô màu nền..table-hover.table-active--bs-table-accent-bg
Đối với mỗi biến thể bảng, chúng tôi tạo ra một --bs-table-accent-bgmàu có độ tương phản cao nhất tùy thuộc vào màu đó. Ví dụ: màu nhấn cho .table-primaryđậm hơn trong khi .table-darkcó màu nhấn sáng hơn.
Màu văn bản và màu đường viền được tạo theo cùng một cách và màu của chúng được kế thừa theo mặc định.
Các ô trong bảng <thead>luôn được căn chỉnh theo chiều dọc xuống dưới cùng. Các ô trong bảng <tbody>kế thừa căn chỉnh của chúng từ <table>đó và được căn chỉnh lên trên cùng theo mặc định. Sử dụng các lớp căn chỉnh dọc để căn chỉnh lại khi cần thiết.
Tiêu đề 1
Tiêu đề 2
Tiêu đề 3
Tiêu đề 4
Ô này kế thừa vertical-align: middle;từ bảng
Ô này kế thừa vertical-align: middle;từ bảng
Ô này kế thừa vertical-align: middle;từ bảng
Đây là một số văn bản giữ chỗ, nhằm chiếm khá nhiều không gian theo chiều dọc, để chứng minh cách căn chỉnh dọc hoạt động trong các ô trước đó.
Ô này kế thừa vertical-align: bottom;từ hàng trong bảng
Ô này kế thừa vertical-align: bottom;từ hàng trong bảng
Ô này kế thừa vertical-align: bottom;từ hàng trong bảng
Đây là một số văn bản giữ chỗ, nhằm chiếm khá nhiều không gian theo chiều dọc, để chứng minh cách căn chỉnh dọc hoạt động trong các ô trước đó.
Ô này kế thừa vertical-align: middle;từ bảng
Ô này kế thừa vertical-align: middle;từ bảng
Ô này được căn chỉnh ở trên cùng.
Đây là một số văn bản giữ chỗ, nhằm chiếm khá nhiều không gian theo chiều dọc, để chứng minh cách căn chỉnh dọc hoạt động trong các ô trước đó.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Làm tổ
Các kiểu đường viền, kiểu hoạt động và các biến thể của bảng không được các bảng lồng nhau kế thừa.
Để ngăn bất kỳ kiểu nào bị rò rỉ sang các bảng lồng nhau, chúng tôi sử dụng bộ >chọn con combinator () trong CSS của chúng tôi. Vì chúng ta cần nhắm mục tiêu tất cả các tds và ths trong thead, tbodyvà tfoot, bộ chọn của chúng ta sẽ trông khá lâu nếu không có nó. Như vậy, chúng tôi sử dụng .table > :not(caption) > * > *bộ chọn trông khá kỳ quặc để nhắm mục tiêu tất cả các tds và ths của .table, nhưng không có bất kỳ bảng nào được lồng vào nhau.
Lưu ý rằng nếu bạn thêm <tr>s dưới dạng con trực tiếp của một bảng, chúng <tr>sẽ được bao bọc trong một bảng <tbody>theo mặc định, do đó làm cho các bộ chọn của chúng tôi hoạt động như dự định.
Giải phẫu học
Đầu bảng
Tương tự như bảng và bảng tối, hãy sử dụng các lớp bổ trợ .table-lighthoặc .table-darkđể làm cho <thead>các bảng có màu xám nhạt hoặc đậm.
Một <caption>chức năng giống như một tiêu đề cho một bảng. Nó giúp người dùng có trình đọc màn hình tìm bảng và hiểu nội dung của bảng và quyết định xem họ có muốn đọc bảng đó hay không.
Danh sách người dùng
#
Ngày thứ nhất
Cuối
Xử lý
1
Đánh dấu
Otto
@mdo
2
Jacob
Thornton
@mập mạp
3
Larry the Bird
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Bạn cũng có thể đặt <caption>trên đầu bảng với .caption-top.
Danh sách người dùng
#
Ngày thứ nhất
Cuối
Xử lý
1
Đánh dấu
Otto
@mdo
2
Jacob
Thornton
@mập mạp
3
Larry
con chim
@twitter
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
Bảng đáp ứng
Các bảng đáp ứng cho phép các bảng được cuộn theo chiều ngang một cách dễ dàng. Làm cho bất kỳ bảng nào phản hồi trên tất cả các chế độ xem bằng cách bao .tablegồm một .table-responsive. Hoặc, chọn một điểm ngắt tối đa để có một bảng đáp ứng bằng cách sử dụng .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Cắt / cắt dọc
Các bảng đáp ứng tận dụng overflow-y: hidden, loại bỏ bất kỳ nội dung nào vượt ra ngoài các cạnh dưới cùng hoặc trên cùng của bảng. Đặc biệt, điều này có thể loại bỏ các menu thả xuống và các tiện ích khác của bên thứ ba.
Luôn đáp ứng
Trên mọi điểm ngắt, sử dụng .table-responsivecho các bảng cuộn theo chiều ngang.
Sử dụng .table-responsive{-sm|-md|-lg|-xl|-xxl}khi cần thiết để tạo các bảng đáp ứng cho đến một điểm ngắt cụ thể. Từ điểm ngắt đó trở lên, bảng sẽ hoạt động bình thường và không cuộn theo chiều ngang.
Các bảng này có thể bị hỏng cho đến khi các kiểu đáp ứng của chúng áp dụng ở độ rộng cửa sổ xem cụ thể.
Các biến nhân tố ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) được sử dụng để xác định độ tương phản trong các biến thể của bảng.
Ngoài các biến thể bảng sáng và tối, màu chủ đề được làm sáng bởi $table-bg-levelbiến.