Để tạo một bảng phản hồi với Bootstrap, hãy sử dụng lớp phản hồi bảng
Bạn có thể thử chạy đoạn mã sau để tạo một bảng đáp ứng -
Ví dụ
Bản thử trực tiếp
Bootstrap TableSubjectMarksTypeJava90Programming LanguagePHP92Scrpting LanguagejQuery80JavaScript Library
Các bảng HTML được sử dụng để trình bày dữ liệu theo kiểu lưới như hàng và cột. Sử dụng Bootstrap, bạn có thể cải thiện đáng kể diện mạo của bảng một cách nhanh chóng và dễ dàng
Xem hướng dẫn về bảng HTML để tìm hiểu thêm về bảng
Tạo một bảng đơn giản với Bootstrap
Bạn có thể tạo các bảng với kiểu dáng cơ bản có các ngăn ngang và phần đệm ô nhỏ [8px theo mặc định], chỉ bằng cách thêm lớp của Bootstrap
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2 vào lớp
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
3
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
4
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
5,
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
6,
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
7,
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
8,
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
9,
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
0,
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
1 và
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2 để tô màu các bảng, các hàng của bảng hoặc các ô riêng lẻVí dụ, bạn có thể tạo một phiên bản tối của bảng [i. e. bảng có chữ sáng trên nền tối] bằng cách thêm lớp ngữ cảnh
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2 vào lớp cơ sở
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2, như thế này
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
— Đầu ra của ví dụ trên sẽ giống như thế này
Tương tự, bạn có thể sử dụng các lớp ngữ cảnh khác. Chẳng hạn, ví dụ sau sử dụng lớp
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
7 trên
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2 để tạo biến thể màu xanh lá cây của bảng
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
— Đầu ra của ví dụ trên sẽ giống như thế này
Kiểm tra phần đoạn trích để biết ví dụ về một số bảng Bootstrap được thiết kế đẹp mắt
Mẹo. Bạn có thể sử dụng các lớp theo ngữ cảnh này trên lớp cơ sở
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2 để tạo phiên bản có màu của bất kỳ bảng nào, chẳng hạn như bảng bị tước, có thể di chuột, có viền, nhỏ gọn, v.v.Tương tự như bảng, bạn cũng có thể sử dụng các lớp theo ngữ cảnh này để nhấn mạnh các hàng trong bảng. Đây là một ví dụ về bảng có các hàng được nhấn mạnh, hãy cùng xem qua
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
9— Đầu ra của ví dụ trên sẽ giống như thế này
Tạo bảng có hàng sọc
Bạn cũng có thể thêm sọc vằn vào các hàng trong bảng bằng cách thêm một lớp bổ sung
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
8 vào lớp cơ sở
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2, như minh họa bên dưới
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2— Đầu ra của ví dụ trên sẽ giống như thế này
Tạo các bảng có viền
Bạn có thể thêm đường viền trên tất cả các mặt của bảng và các ô bằng cách thêm lớp bổ trợ
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
90 vào lớp cơ sở
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2, như minh họa trong ví dụ sau
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
5— Đầu ra của ví dụ trên sẽ giống như thế này
Tạo bảng không viền
Bạn cũng có thể tạo các bảng không viền bằng cách sử dụng lớp
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
92 trên phần tử
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
5— Đầu ra của ví dụ trên sẽ giống như thế này
Kích hoạt trạng thái di chuột trên các hàng của bảng
Bạn cũng có thể kích hoạt trạng thái di chuột trên các hàng của bảng trong một phần tử bằng cách thêm lớp công cụ sửa đổi
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
94 vào lớp cơ sở
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2. Hãy thử ví dụ sau
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
5— Đầu ra của ví dụ trên sẽ giống như thế này
Tạo các bảng nhỏ hoặc nhỏ gọn
Bạn cũng có thể làm cho các bảng của mình nhỏ gọn hơn và tiết kiệm không gian bằng cách thêm lớp sửa đổi
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
96 vào lớp cơ sở
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2. Lớp
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
96 làm cho bảng nhỏ gọn bằng cách cắt đôi tất cả phần đệm ô. Hãy cùng xem ví dụ sau
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
5— Đầu ra của ví dụ trên sẽ giống như thế này
Đặt màu đầu bảng
Tương tự như bảng sáng và tối, bạn có thể sử dụng các lớp sửa đổi
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
1 hoặc
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
2 trên phần tử để làm cho phần tử xuất hiện với màu xám nhạt hoặc tốiVí dụ sau sẽ tạo một bảng có đầu nền màu xám nhạt
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
5— Đầu ra của ví dụ trên sẽ giống như thế này
Ví dụ sau sẽ tạo một bảng có đầu nền màu xám đậm
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
5— Đầu ra của ví dụ trên sẽ giống như thế này
Tạo các bảng đáp ứng với Bootstrap
Bạn cũng có thể tạo các bảng phản hồi để cho phép cuộn ngang trên các thiết bị nhỏ
Để làm cho bất kỳ bảng nào đáp ứng, chỉ cần đặt nó bên trong một
phần tử và áp dụng lớp
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
21 trên đó. Bạn cũng có thể chỉ định khi nào bảng sẽ có thanh cuộn, dựa trên chiều rộng của khung nhìn [i. e. ], sử dụng các lớp
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
22Hãy thử ví dụ sau để hiểu cơ bản nó hoạt động như thế nào
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
1Mẹo. Văn bản bên trong các ô luôn được căn dọc xuống dưới cùng. Trong khi đó, văn bản bên trong các ô kế thừa căn chỉnh của chúng từ
#
First Name
Last Name
Email
1
Clark
Kent
clarkkent@mail.com
2
Peter
Parker
peterparker@mail.com
3
John
Carter
johncarter@mail.com
23
Làm cách nào để tôi có thể đáp ứng chiều cao bảng của mình?
Lớp Bootstrap 4 nào có thể được sử dụng để tạo bảng phản hồi?
Bảng lớp đáp ứng là gì?
Làm cách nào để tạo một bảng với div Bootstrap?
& . Chủ Đề |