Kích thước tập tin. 102 KBViews Total. 15373Cập nhật lần cuối. 23/05/2022 10. 36. 00 UTC Ngày Xuất bản. 04/12/2015 04. 15. 18 UTCTrang web chính thức. Tới trang webGiấy phép. MIT
Tải xuống bản trình diễn
Thêm trong danh mục này
Xem các plugin được đề xuất
TOP 100 Plugin jQuery 2022
Chrome, IE9+, FireFox, Opera, Safari#Bootstrap#Bootstrap 5#bootstrap 4#Mục lục
Một plugin jQuery & Bootstrap 5/4/3 nhẹ được sử dụng để tạo mục lục dính, có thể thu gọn từ các thẻ tiêu đề trong tài liệu. Giống như điều hướng nội dung thanh bên như bạn đã thấy trên trang web tài liệu Bootstrap.
Làm thế nào để sử dụng nó
1. Tải bootstrap-toc. css stylesheet trong đầu và bootstrap-toc. js ở cuối tài liệu
...
2. Tạo phần tử nav
trống cho mục lục
3. Thêm các thuộc tính data
sau vào thẻ body
để được hỗ trợ scrollspy
4. Đó là nó. Plugin sẽ tự động tạo mục lục bên trong phần tử nav
. Bạn cũng có thể khởi tạo plugin thông qua JavaScript như sau
$[function[] { var $myToc = $['...']; Toc.init[$myToc]; $['body'].scrollspy[{ target: $myNav }]; }];
5. Chỉ định phần tử mà việc tìm kiếm các tiêu đề sẽ được giới hạn ở
Toc.init[{ // The element that the navigation will be created in $nav: $['#myToc'], // The element where the search for headings will be limited to $scope: $[document.body] }];
Nhật ký thay đổi
2022-05-23
- cập nhật cho Bootstrap 5
v1. 0. 1 [2019-01-09]
- khắc phục sự cố định dạng bảng
v1. 0. 0 [2018-07-27]
- sửa lỗi điều hướng cố định định vị dọc
2015-12-13
- di chuyển định vị bố cục thành trang web cụ thể
- sửa lỗi ScrollSpy
2015-12-13
- đảm bảo rằng thuộc tính dữ liệu được đặt đúng chỗ để tạo kiểu
Plugin jQuery tuyệt vời này được phát triển bởi afeld. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức
Các bảng cho phép bạn tổng hợp một lượng dữ liệu khổng lồ và trình bày nó một cách rõ ràng và có trật tự. Các bảng MDB cung cấp các lợi ích bổ sung như khả năng phản hồi và khả năng thao tác các kiểu bảng
Do việc sử dụng rộng rãi của
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
3 đối với bất kỳ, 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, 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ốcGhi chú. Nếu bạn cần các ví dụ và tùy chọn nâng cao hơn, hãy xem các liên kết bên dưới
Ví dụ cơ bản
Sử dụng đánh dấu bảng cơ bản nhất, đây là cách các bảng dựa trên
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
4 trông trong MDB
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
5 lớpsọc
Sử dụng
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
6 để thêm sọc vằn vào bất kỳ hàng nào trong bảng
di chuột
Thêm
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
7 để bật trạng thái di chuột trên các hàng của bảng trong một
Các hàng có thể di chuột này cũng có thể được kết hợp với biến thể sọc
bảng hoạt động
Đánh dấu một hàng hoặc ô của bảng bằng cách thêm lớp
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
8
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
có viền
Thêm
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
9 cho các đường viền trên tất cả các mặt của bảng và các ô
Tiện ích màu viền có thể được thêm vào để thay đổi màu sắc
không biên giới
Thêm
0 cho một bảng không có đường viền
Bé nhỏ
Thêm
1 để làm cho bất kỳ
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
4 nhỏ gọn hơn bằng cách cắt tất cả ô
3 làm đôi
Bộ chia nhóm
Thêm đường viền đậm hơn, đậm hơn giữa các nhóm bảng—, , và —với
4. Chúng tôi tùy chỉnh màu sắc bằng cách thêm lớp
5. Bạn cũng có thể tự tùy chỉnh màu bằng cách thay đổi màu trên cùng của đường viền [hiện tại chúng tôi không cung cấp lớp tiện ích cho loại này]
Name
Title
Status
Position
Actions
John Doe
john.doe@gmail.com
Software engineer
IT department
Active
Senior
Edit
Alex Ray
alex.ray@gmail.com
Consultant
Finance
Onboarding
Junior
Edit
Kate Hunington
kate.hunington@gmail.com
Designer
UI/UX
Awaiting
Senior
Edit
1Căn dọc
Các ô của bảng luôn được căn dọc xuống dưới cùng. Các ô trong bảng kế thừa căn chỉnh của chúng từ
6 từ bảng Ô này kế thừa
7 từ bảng Ô này kế thừa
7 từ bảngNulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Tiền đình id ligula porta felis eismod semper. Ô này kế thừa
9 từ hàng của bảng Ô này kế thừa
9 từ hàng của bảng Ô này kế thừa
9 từ hàng của bảngNulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Tiền đình id ligula porta felis eismod semper. Ô này kế thừa
7 từ bảng Ô này kế thừa
7 từ bảng Ô này được căn chỉnh lên trên cùng. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Tiền đình id ligula porta felis eismod semper
4] bộ chọn trong CSS của chúng tôi. Vì chúng tôi cần nhắm mục tiêu tất cả các
5 và
6 trong
7,
8 và
9, bộ chọn của chúng tôi sẽ trông khá dài nếu không có nó. Do đó, chúng tôi sử dụng bộ chọn
0 trông khá kỳ lạ để nhắm mục tiêu tất cả các
5 và
6 của
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
4, nhưng không có bảng lồng nhau tiềm năng nàoLưu ý rằng nếu bạn thêm s làm phần tử con trực tiếp của bảng, thì các phần tử đó sẽ được đặt trong phần tử theo mặc định, do đó làm cho bộ chọn của chúng ta hoạt động như dự kiến
ví dụ bổ sung
Một vài ví dụ thực tế về việc sử dụng bảng với các thành phần điển hình như nút, hộp kiểm hoặc biểu tượng
nút
Để tìm hiểu thêm về các nút, hãy đọc Tài liệu về Nút
Name
Title
Status
Position
Actions
John Doe
john.doe@gmail.com
Software engineer
IT department
Active
Senior
Edit
Alex Ray
alex.ray@gmail.com
Consultant
Finance
Onboarding
Junior
Edit
Kate Hunington
kate.hunington@gmail.com
Designer
UI/UX
Awaiting
Senior
Edit
4hộp kiểm
Để tìm hiểu thêm về các hộp kiểm, hãy đọc Tài liệu hộp kiểm
Name
Title
Status
Position
Actions
John Doe
john.doe@gmail.com
Software engineer
IT department
Active
Senior
Edit
Alex Ray
alex.ray@gmail.com
Consultant
Finance
Onboarding
Junior
Edit
Kate Hunington
kate.hunington@gmail.com
Designer
UI/UX
Awaiting
Senior
Edit
5Biểu tượng
Để tìm hiểu thêm về các biểu tượng, hãy đọc Tài liệu biểu tượng
Name
Title
Status
Position
Actions
John Doe
john.doe@gmail.com
Software engineer
IT department
Active
Senior
Edit
Alex Ray
alex.ray@gmail.com
Consultant
Finance
Onboarding
Junior
Edit
Kate Hunington
kate.hunington@gmail.com
Designer
UI/UX
Awaiting
Senior
Edit
6Giải phẫu học
đầu bàn
Tương tự với bảng và bảng tối, sử dụng các lớp sửa đổi
4 hoặc
5 để làm cho s có màu sáng hoặc xám đậm
Name
Title
Status
Position
Actions
John Doe
john.doe@gmail.com
Software engineer
IT department
Active
Senior
Edit
Alex Ray
alex.ray@gmail.com
Consultant
Finance
Onboarding
Junior
Edit
Kate Hunington
kate.hunington@gmail.com
Designer
UI/UX
Awaiting
Senior
Edit
7
Name
Title
Status
Position
Actions
John Doe
john.doe@gmail.com
Software engineer
IT department
Active
Senior
Edit
Alex Ray
alex.ray@gmail.com
Consultant
Finance
Onboarding
Junior
Edit
Kate Hunington
kate.hunington@gmail.com
Designer
UI/UX
Awaiting
Senior
Edit
7chú 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
Name
Title
Status
Position
Actions
John Doe
john.doe@gmail.com
Software engineer
IT department
Active
Senior
Edit
Alex Ray
alex.ray@gmail.com
Consultant
Finance
Onboarding
Junior
Edit
Kate Hunington
kate.hunington@gmail.com
Designer
UI/UX
Awaiting
Senior
Edit
9Bạn cũng có thể đặt cái trên cùng của bảng với
6
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
0bả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
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
4 với
8. 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
9Cắt/cắt dọc
Các bảng đáp ứng sử dụng
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
0, 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
8 cho các bảng cuộn theo chiều ngang#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading1CellCellCellCellCellCellCellCell2CellCellCellCellCellCellCellCell3CellCellCellCellCellCellCellCellLàm cách nào để tạo các bảng đáp ứng trong Bootstrap?
Bảng đáp ứng trong Bootstrap là gì?
Làm cách nào để tạo bảng lưới trong Bootstrap?
Các lớp bảng theo ngữ cảnh trong Bootstrap là gì?
Chủ Đề