Bạn sẽ cần sử dụng truy vấn phương tiện cho những thứ mà bạn cần điều chỉnh các thành phần dựa trên kích thước màn hình
Như một ví dụ dưới đây
Đối với các thiết bị cực nhỏ [Điện thoại]
@media [max-width:767px] {
td {
width: 25px;
}
}
Đối với thiết bị nhỏ [Máy tính bảng]
@media [min-width:768px] {
td {
width: 50px;
}
}
Đối với thiết bị trung bình [máy tính xách tay]
@media [min-width:992px] {
td {
width: 75px;
}
}
Đối với các thiết bị lớn [Máy tính để bàn]
@media [min-width:1200px] {
td {
width: 100px;
}
}
Những truy vấn phương tiện đó là những truy vấn chính mà Bootstrap sử dụng, có những truy vấn khác nhưng điều này ít nhất giúp bạn bắt đầu hiểu phải làm gì
Vì đây là phát triển ưu tiên thiết bị di động, nên nếu bạn bắt đầu đặt chiều rộng TD
thành kích thước nhỏ nhất bạn muốn thì bạn không cần truy vấn phương tiện đầu tiên vì nó đã được giả định. Tuy nhiên, bạn sẽ sử dụng những cái khác để ghi đè mặc định đó dựa trên các điều chỉnh kích thước màn hình mong muốn mà bạn muốn thực hiện
Bạn sẽ có thể hiểu rõ hơn bằng cách đọc https sau. //getbootstrap. com/docs/3. 3/css/#grid-media-queries
Mẹo. Lợi ích chính của cách bố trí bảng. đã sửa; . Trên các bảng lớn, người dùng sẽ không nhìn thấy bất kỳ phần nào của bảng cho đến khi trình duyệt hiển thị toàn bộ bảng. Vì vậy, nếu bạn sử dụng cách bố trí bảng. đã sửa, người dùng sẽ nhìn thấy đầu bảng trong khi trình duyệt tải và hiển thị phần còn lại của bảng. Điều này mang lại ấn tượng rằng trang tải nhanh hơn rất nhiều
Đưa ra bản chạy thử ❯
Giá trị mặc định. tự động kế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS2JavaScript. mục tiêu. Phong cách. tableLayout="đã sửa" Hãy dùng thử
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính
Bố cục bảng thuộc tính14. 05. 01. 01. 07. 0
Cú pháp CSS
bố trí bảng. Tự động. đã sửa. ban đầu. thừa kế;
Giá trị tài sản
ValueDescriptionDemoautoBrowsers sử dụng thuật toán bố cục bảng tự động. Chiều rộng cột được đặt theo nội dung không thể chia nhỏ nhất trong các ô. Nội dung sẽ quyết định bố cục Bản trình diễn ❯cố địnhĐặt thuật toán bố cục bảng cố định. Chiều rộng của bảng và cột được đặt theo chiều rộng của bảng và cột hoặc theo chiều rộng của hàng ô đầu tiên. Các ô ở các hàng khác không ảnh hưởng đến độ rộng của cột. Nếu không có chiều rộng trên hàng đầu tiên, thì chiều rộng của cột sẽ được chia đều trên bảng, bất kể nội dung bên trong ôDemo ❯initialĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế
Tài liệu và ví dụ về kiểu dáng bảng chọn tham gia [do chúng được sử dụng phổ biến trong các plugin JavaScript] với Bootstrap
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ế các bảng của mình để được chọn tham gia. Chỉ cần thêm lớp cơ sở
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
6 vào bất kỳ , then extend with custom styles or our various included modifier classes.
nàoUsing the most basic table markup, here’s how ________4_______6-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
8#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Tùy chọn đầu bảng
Tương tự với bảng và bảng tối, sử dụng các lớp sửa đổi
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
9 hoặc
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
0 để làm cho s có màu sáng hoặc xám đậm#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
hàng sọc
Sử dụng
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
1 để thêm sọc vằn vào bất kỳ hàng nào trong bảng#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
bảng có viền
Thêm
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
2 cho các đường viền trên tất cả các mặt của bảng và các ô#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Hàng có thể di chuột
Thêm
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
3 để bật trạng thái di chuột trên các hàng của bảng trong một#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Bàn nhỏ
Thêm
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
4 để làm cho bảng nhỏ gọn hơn bằng cách cắt đôi phần đệm ô#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
các lớp theo ngữ cảnh
Sử dụng các lớp theo ngữ cảnh để tô màu các hàng của bảng hoặc các ô riêng lẻ
ClassHeadingHeadingActiveCellCellDefaultCellCellPrimaryCellCellSecondaryCellCellSuccessCellCellDangerCellCellWarningCellCellInfoCellCellLightCellCellDarkCellCell
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
1Các biến thể nền của 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 nền hoặc văn bản để đạt được các kiểu tương tự
#HeadingHeading1CellCell2CellCell3CellCell4CellCell5CellCell6CellCell7CellCell8CellCell9CellCell
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
2Truyề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 dấu hiệu trực quan, dấu hiệ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 rõ ràng từ chính nội dung [e. g. văn bản hiển thị], hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với lớp
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
5Tạo các bảng đáp ứng bằng cách gói bất kỳ
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
6 nào với
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
7, làm cho bảng cuộn theo chiều ngang tại mỗi điểm ngắt của
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
8 lên tới [nhưng không bao gồm] lần lượt là 576px, 768px, 992px và 1120pxLưu ý rằng vì các trình duyệt hiện không hỗ trợ , nên chúng tôi khắc phục các hạn chế của và chế độ xem có độ rộng phân số [chẳng hạn như có thể xảy ra trong một số điều kiện nhất định trên thiết bị có độ phân giải cao] bằng cách sử dụng các giá trị có độ chính xác cao hơn cho các phép so sánh này
chú thích
Một 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 một bảng và hiểu nội dung của bảng đó cũng như quyết định xem họ có muốn đọc bảng đó không
Danh sách người dùng#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
3bả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 nhanh trên tất cả các chế độ xem bằng cách bao bọc một
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
6 với
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
2. Hoặc, chọn một điểm ngắt tối đa để có một bảng phản hồi tối đa bằng cách sử dụng
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
7Các bảng đáp ứng sử dụng
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
4, loại bỏ bất kỳ nội dung nào nằm 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 con của bên thứ ba khácLuôn đáp ứng
Trên mọi điểm ngắt, hãy sử dụng
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
2 cho các bảng cuộn theo chiều ngang#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading1CellCellCellCellCellCellCellCellCell2CellCellCellCellCellCellCellCellCell3CellCellCellCellCellCellCellCellCell
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
4Điểm dừng cụ thể
Sử dụng
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
7 khi cần để tạo các bảng đáp ứng cho đến một điểm dừng cụ thể. Từ điểm dừng đó trở lên, bảng sẽ hoạt động bình thường và không cuộn theo chiều ngang