Thẻ là nơi chứa nội dung linh hoạt và có thể mở rộng. Nó bao gồm các tùy chọn cho đầu trang và chân trang, nhiều loại nội dung, màu nền theo ngữ cảnh và các tùy chọn hiển thị mạnh mẽ
Nếu bạn đã quen thuộc với Bootstrap 3, các thẻ sẽ thay thế các bảng, giếng và hình thu nhỏ cũ của chúng tôi. Chức năng tương tự cho các thành phần đó có sẵn dưới dạng các lớp sửa đổi cho thẻ
nội dung
Ví dụ
Thẻ yêu cầu một lượng nhỏ đánh dấu và các lớp để cung cấp cho bạn nhiều quyền kiểm soát nhất có thể. Mặc dù vậy, các lớp và đánh dấu này rất linh hoạt và thường có thể được phối lại và mở rộng một cách dễ dàng. Ví dụ: nếu thẻ của bạn không có nội dung tuôn ra như hình ảnh, vui lòng đặt lớp
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
5 trên phần tử
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
6 để củng cố đánh dấu của bạn
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereLoại nội dung
Thẻ hỗ trợ nhiều loại nội dung, bao gồm hình ảnh, văn bản, nhóm danh sách, liên kết, v.v. Trộn và kết hợp nhiều loại nội dung để tạo thẻ bạn cần
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card link Another link
Danh sách có thể được thêm vào thẻ bằng cách thêm nhóm danh sách
- Cras justo odio
- Cơ sở Dapibus ac ở
- Tiền đình ở eros
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
7 đặt một hình ảnh lên trên cùng của thẻ. Với
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
8, văn bản có thể được thêm vào thẻ. Văn bản trong
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
8 cũng có thể được tạo kiểu bằng các thẻ HTML tiêu chuẩn
Some quick example text to build on the card title and make up the bulk of the card's content.
0 vào thẻ
Some quick example text to build on the card title and make up the bulk of the card's content.
1. Theo cách tương tự, các liên kết được thêm vào và đặt cạnh nhau bằng cách thêm
Some quick example text to build on the card title and make up the bulk of the card's content.
2 vào thẻ
Some quick example text to build on the card title and make up the bulk of the card's content.
1tiêu đề thẻ
Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
Phụ đề được sử dụng bằng cách thêm một
Some quick example text to build on the card title and make up the bulk of the card's content.
4 vào một thẻ
Some quick example text to build on the card title and make up the bulk of the card's content.
1. Nếu các mục
Some quick example text to build on the card title and make up the bulk of the card's content.
0 và
Some quick example text to build on the card title and make up the bulk of the card's content.
4 được đặt trong một mục
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
5, tiêu đề thẻ và tiêu đề phụ được căn chỉnh độc đáoCó thể dễ dàng kết hợp nhiều loại nội dung để tạo thẻ bạn cần. xem ví dụ bên dưới
tiêu đề thẻ
Phụ đề thẻ hỗ trợ
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkđịnh cỡ
Hạn chế độ rộng của thẻ thông qua CSS tùy chỉnh, các lớp lưới được xác định trước của chúng tôi hoặc với các kiểu tùy chỉnh bằng cách sử dụng mixin lưới của chúng tôi
Sử dụng lưới
Xử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Xử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Sử dụng chiều rộng tùy chỉnh
Xử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
căn chỉnh văn bản
Bạn có thể nhanh chóng thay đổi cách căn chỉnh văn bản của bất kỳ thẻ nào—toàn bộ hoặc từng phần cụ thể—với
Xử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Xử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Xử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Thêm đầu trang và/hoặc chân trang tùy chọn trong thẻ
Xử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Tiêu đề thẻ có thể được tạo kiểu bằng cách thêm các phần tử
Some quick example text to build on the card title and make up the bulk of the card's content.
9 vào
Some quick example text to build on the card title and make up the bulk of the card's content.
1Xử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card link
Another link
0Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card link
Another link
1Xử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card link
Another link
2Sử dụng các tab hoặc tab điều hướng của Bootstrap trong tiêu đề thẻ. Đảm bảo luôn bao gồm lớp tiện ích
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
1 để căn chỉnh phù hợpXử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card link
Another link
3Xử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card link
Another link
3Mũ hình ảnh
Tương tự như đầu trang và chân trang, thẻ bao gồm mũ hình ảnh trên cùng và dưới cùng
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card link Another link
5Lớp phủ hình ảnh
Biến hình ảnh thành nền thẻ và phủ lên văn bản trên thẻ của bạn. Tùy thuộc vào hình ảnh, bạn có thể cần hoặc không cần
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
2 [xem bên dưới]
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card link Another link
6đảo ngược văn bản
Thẻ bao gồm một lớp để nhanh chóng chuyển đổi màu văn bản. Theo mặc định, thẻ sử dụng văn bản tối và có nền sáng. Thêm
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
2 cho văn bản màu trắng và chỉ định
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
4 và
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
5 đi cùngBạn cũng có thể sử dụng
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
2 vớiXử lý tiêu đề đặc biệt
Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card link
Another link
7biến thể nền
Thẻ bao gồm các lớp biến thể của riêng chúng để thay đổi nhanh chóng
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
4 và
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
5 của thẻ. Màu tối hơn yêu cầu sử dụng
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card link
Another link
8Truyề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
Card title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
0các biến thể phác thảo
Cần một thẻ màu, nhưng không phải là màu nền đắt tiền mà họ mang lại?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card link
Another link
9Các nhóm
Sử dụng các nhóm thẻ để hiển thị thẻ dưới dạng một phần tử được đính kèm với các cột có chiều rộng và chiều cao bằng nhau. Theo mặc định, các nhóm thẻ sử dụng
Card title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
3 và
Card title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
4 để đạt được kích thước thống nhất. Tuy nhiên, bật chế độ flexbox có thể chuyển chế độ đó sang sử dụng
Card title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
5 và mang lại hiệu quả tương tựChỉ áp dụng cho các thiết bị nhỏ trở lên
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link 6 và một
Card title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
7. Chúng tôi sử dụng các kiểu bảng để định cỡ và máng xối trên
Card title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
7.
Card title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
6 được sử dụng để trừ đi số dư của
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
0 trên
Card title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
7Chỉ áp dụng cho các thiết bị nhỏ trở lên
Mẹo chuyên nghiệp. Nếu bạn bật chế độ hộp linh hoạt, bạn có thể xóa
Card title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
6tiêu đề thẻ
Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút
Cập nhật lần cuối 3 phút trước
tiêu đề thẻ
Thẻ này có văn bản hỗ trợ bên dưới để dẫn đến nội dung bổ sung một cách tự nhiên
Cập nhật lần cuối 3 phút trước
tiêu đề thẻ
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một phần mở đầu tự nhiên cho nội dung bổ sung. Thẻ này thậm chí còn có nội dung dài hơn thẻ đầu tiên để hiển thị hành động có chiều cao bằng nhau đó
Cập nhật lần cuối 3 phút trước
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
1Cột
Các thẻ có thể được sắp xếp thành các cột giống như Masonry chỉ bằng CSS bằng cách gói chúng trong
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
3. Các quân bài được sắp xếp theo thứ tự từ trên xuống dưới và từ trái sang phải khi gói trong
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
3Chỉ áp dụng cho các thiết bị nhỏ trở lên
Đứng lên. Điều này không khả dụng trong IE9 trở xuống vì chúng không hỗ trợ cho các thuộc tính CSS
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
5Tiêu đề thẻ xuống dòng mới
Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
tiêu đề thẻ
Thẻ này có văn bản hỗ trợ bên dưới để dẫn đến nội dung bổ sung một cách tự nhiên
Cập nhật lần cuối 3 phút trước
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat
tiêu đề thẻ
Thẻ này có văn bản hỗ trợ bên dưới để dẫn đến nội dung bổ sung một cách tự nhiên
Cập nhật lần cuối 3 phút trước
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante
tiêu đề thẻ
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một phần mở đầu tự nhiên cho nội dung bổ sung. Thẻ này thậm chí còn có nội dung dài hơn thẻ đầu tiên để hiển thị hành động có chiều cao bằng nhau đó
Cập nhật lần cuối 3 phút trước
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
2Các cột thẻ cũng có thể được mở rộng và tùy chỉnh bằng một số mã bổ sung. Hiển thị bên dưới là một phần mở rộng của lớp
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
3 sử dụng cùng một CSS mà chúng tôi sử dụng—cột CSS— để tạo một tập hợp các tầng phản hồi để thay đổi số lượng cột