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.
Các ví dụ
Do việc sử dụng rộng rãi các bảng trên các tiện ích của bên thứ ba như lịch và bộ chọn ngày, chúng tôi đã thiết kế bảng của mình để chọn tham gia . Chỉ cần thêm lớp cơ sở .tablevào bất kỳ <table>, sau đó mở rộng với các kiểu tùy chỉnh hoặc các lớp bổ trợ được bao gồm khác nhau của chúng tôi.
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. Tất cả các kiểu bảng đều được kế thừa trong Bootstrap 4 , có nghĩa là bất kỳ bảng nào được lồng vào nhau sẽ được tạo kiểu theo cùng một kiểu như bảng gốc.
Thêm .table-borderedđường viền trên tất cả các cạnh của bảng và các ô.
#
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-bordered"><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>
#
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-bordered table-dark"><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>
Bảng không viền
Thêm .table-borderlesscho một bảng không có đường viền.
#
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-borderless"><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>
.table-borderlesscũng có thể được sử dụng trên bàn tối.
#
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-borderless table-dark"><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 hàng có thể lưu trữ
Thêm .table-hoverđể bật trạng thái di chuột trên các hàng của bảng trong a <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-hover"><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>
#
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-hover table-dark"><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>
Bàn nhỏ
Thêm .table-smđể làm cho bảng nhỏ gọn hơn bằng cách cắt đôi phần đệm ô.
#
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"><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>
#
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 table-dark"><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 lớp theo ngữ cảnh
Sử dụng các lớp ngữ cảnh để tô màu các hàng trong bảng hoặc các ô riêng lẻ.
Lớp
Phần mở đầu
Phần mở đầu
Tích cực
Tế bào
Tế bào
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 rows --><trclass="table-active">...</tr><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-active">...</td><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>
Các biến thể nền bảng thông thường không khả dụng với bảng tối, tuy nhiên, bạn có thể sử dụng các tiện ích văn bản hoặc nền để đạt được các kiểu tương tự.
#
Phần mở đầu
Phần mở đầu
1
Tế bào
Tế bào
2
Tế bào
Tế bào
3
Tế bào
Tế bào
4
Tế bào
Tế bào
5
Tế bào
Tế bào
6
Tế bào
Tế bào
7
Tế bào
Tế bào
số 8
Tế bào
Tế bào
9
Tế bào
Tế bào
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="bg-info">...</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 .sr-onlylớp.
Tạo bảng đáp ứng bằng cách đặt bất kỳ bảng nào .tablebằng .table-responsive{-sm|-md|-lg|-xl}, làm cho bảng cuộn theo chiều ngang tại mỗi max-widthđiểm ngắt lên đến (nhưng không bao gồm) 576px, 768px, 992px và 1120px, tương ứng.
Lưu ý rằng vì các trình duyệt hiện không hỗ trợ
truy vấn ngữ cảnh phạm vi , chúng tôi giải quyết các hạn chế của
min-và max-tiền tố và chế độ xem có độ rộng phân số (ví dụ: có thể xảy ra trong các điều kiện nhất định trên thiết bị dpi cao) bằng cách sử dụng các giá trị có độ chính xác cao hơn cho các so sánh này .
Chú thích
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 thấy một bảng và hiểu nội dung của nó và quyết định xem họ có muốn đọc nó 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
con chim
@twitter
<tableclass="table"><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}.
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} 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ể.