Thẻ Bootstrap cung cấp một vùng chứa nội dung linh hoạt và có thể mở rộng với nhiều biến thể và tùy chọn.
Bạn đang xem : thẻ trong html bootstrap
Thẻ
Thẻ Bootstrap cung cấp một vùng chứa nội dung linh hoạt và có thể mở rộng với nhiều biến thể và tùy chọn.
Giới thiệu
Thẻ là một vùng 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, 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ự với các thành phần đó có sẵn dưới dạng các lớp bổ trợ cho thẻ.
Ví dụ
Thẻ được tạo với ít đánh dấu và kiểu dáng nhất có thể, nhưng vẫn quản lý để cung cấp rất nhiều quyền kiểm soát và tùy chỉnh. Được xây dựng với flexbox, chúng cung cấp khả năng căn chỉnh dễ dàng và kết hợp tốt với các thành phần Bootstrap khác. Chúng không có margin theo mặc định, vì vậy hãy sử dụng tiện ích giãn cách nếu cần.
Dưới đây là ví dụ về thẻ cơ bản có nội dung hỗn hợp và chiều rộng cố định. Các thẻ không có chiều rộng cố định để bắt đầu, vì vậy, chúng sẽ tự nhiên lấp đầy toàn bộ chiều rộng của phần tử mẹ của nó. Điều này có thể dễ dàng tùy chỉnh với các tùy chọn kích thước khác nhau của chúng tôi.
Tiêu đề thẻ
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Đi đâu đó
& lt; div
class =
"card"
style =
"width: 18rem;"
& gt; < / p>
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
Loạ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. Dưới đây là ví dụ về những gì được hỗ trợ.
Nội dung
Khối xây dựng của thẻ là . card-body . Sử dụng nó bất cứ khi nào bạn cần một phần đệm trong thẻ.
Đây là một số văn bản trong nội dung thẻ.
& lt; div
class =
"thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
Đây là một số văn bản trong nội dung thẻ.
& lt; / div & gt;
& lt; / div & gt;
Tiêu đề thẻ được sử dụng bằng cách thêm . card-title tới thẻ & lt; h * & gt; . Theo cách tương tự, các liên kết được thêm và đặt cạnh nhau bằng cách thêm . Card-link vào & lt; a & gt; thẻ .
Phụ đề được sử dụng bằng cách thêm thẻ . card-subtitle vào thẻ & lt; h * & gt; . Nếu các mục . Card-title và . Card-subtitle được đặt trong . card-body , tiêu đề thẻ và phụ đề được căn chỉnh đẹp mắt.
Tiêu đề thẻ
Phụ đề thẻ
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Liên kết thẻ
Một liên kết khác
& lt; div
class =
"thẻ"
style =
"width: 18rem;"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; h6
class =
"card-subtitle mb-2 text-muted"
& gt;
Phụ đề thẻ & lt; / h6 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; a
href =
"#"
class =
" card-link "
& gt;
Liên kết thẻ & lt ; / a & gt;
& lt; a
href =
"#"
class =
" card-link "
& gt;
Một liên kết khác & lt ; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
Hình ảnh
. card-img-top đặt một hình ảnh lên đầu thẻ. Với . Card-text , văn bản có thể được thêm vào thẻ. Văn bản trong . Card-text cũng có thể được tạo kiểu bằng các thẻ HTML tiêu chuẩn.
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
& lt; div
class =
"card"
style =
"width: 18rem;"
& gt; < / p>
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
Danh sách nhóm
Tạo danh sách nội dung trong thẻ với nhóm danh sách phẳng.
- Sự cố justo odio
- Dapibus acosystemisis trong
- Tiền đình tại eros
& lt; div
class =
"card"
style =
"width: 18rem;"
& gt; < / p>
& lt; ul
class =
"list-group list-group-flush"
& gt;
& lt; li
class =
"list-group-item"
& gt;
Cras justo odio & lt; / li & gt;
& lt; li
class =
"list-group-item"
& gt;
Dapibus acosystemisis trong & lt; / li & gt;
& lt; li
class =
"list-group-item"
& gt;
Vestibulum at eros & lt; / li & gt;
& lt; / ul & gt;
& lt; / div & gt;
Đặc sắc
- Sự cố justo odio
- Dapibus acosystemisis trong
- Tiền đình tại eros
& lt; div
class =
"card"
style =
"width: 18rem;"
& gt; < / p>
& lt; div
class =
"card-header"
& gt;
Đặc sắc
& lt; / div & gt;
& lt; ul
class =
"list-group list-group-flush"
& gt;
& lt; li
class =
"list-group-item"
& gt;
Cras justo odio & lt; / li & gt;
& lt; li
class =
"list-group-item"
& gt;
Dapibus acosystemisis trong & lt; / li & gt;
& lt; li
class =
"list-group-item"
& gt;
Vestibulum at eros & lt; / li & gt;
& lt; / ul & gt;
& lt; / div & gt;
Chậu rửa bát
Kết hợp và kết hợp nhiều loại nội dung để tạo thẻ bạn cần hoặc ném mọi thứ vào đó. Dưới đây là các kiểu hình ảnh, khối, kiểu văn bản và nhóm danh sách — tất cả đều được bao bọc trong một thẻ có chiều rộng cố định.
Tiêu đề thẻ
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
- Sự cố justo odio
- Dapibus acosystemisis trong
- Tiền đình tại eros
Liên kết thẻ
Một liên kết khác
& lt; div
class =
"card"
style =
"width: 18rem;"
& gt; < / p>
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; ul
class =
"list-group list-group-flush"
& gt;
& lt; li
class =
"list-group-item"
& gt;
Cras justo odio & lt; / li & gt;
& lt; li
class =
"list-group-item"
& gt;
Dapibus acosystemisis trong & lt; / li & gt;
& lt; li
class =
"list-group-item"
& gt;
Vestibulum at eros & lt; / li & gt;
& lt; / ul & gt;
& lt; div
class =
"card-body"
& gt;
& lt; a
href =
"#"
class =
" card-link "
& gt;
Liên kết thẻ & lt ; / a & gt;
& lt; a
href =
"#"
class =
" card-link "
& gt;
Một liên kết khác & lt ; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
Thêm đầu trang và / hoặc chân trang tùy chọn trong thẻ.
Đặc sắc
Đối xử với danh hiệu đặc biệt
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Đi đâu đó
& lt; div
class =
"thẻ"
& gt;
& lt; div
class =
"card-header"
& gt;
Đặc sắc
& lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Cách xử lý tiêu đề đặc biệt & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
Tiêu đề thẻ có thể được tạo kiểu bằng cách thêm . card-header < / code> thành phần tử & lt; h * & gt; .
Nổi bật
Đối xử với danh hiệu đặc biệt
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Đi đâu đó
& lt; div
class =
"thẻ"
& gt;
& lt; h5
class =
"card-header"
& gt;
Nổi bật & lt; / h5 & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Cách xử lý tiêu đề đặc biệt & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
Trích dẫn
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.
& lt; div
class =
"thẻ"
& gt;
& lt; div
class =
"card-header"
& gt;
Trích dẫn
& lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; blockquote
class =
"blockquote mb-0"
& gt;
& lt; p & gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante. & lt; / p & gt;
& lt; footer
class =
"blockquote-footer"
& gt;
Một người nào đó nổi tiếng trong & lt; cite
title =
"Tiêu đề nguồn"
& gt;
Tiêu đề nguồn & lt; / cite & gt; & lt; / footer & gt;
& lt; / blockquote & gt;
& lt; / div & gt;
& lt; / div & gt;
Đặc sắc
Đối xử với danh hiệu đặc biệt
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Đi đâu đó
& lt; div
class =
"card text-center"
& gt;
& lt; div
class =
"card-header"
& gt;
Đặc sắc
& lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Cách xử lý tiêu đề đặc biệt & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; div
class =
"card-footer text-muted"
< p class = "nt"> & gt;
2 ngày trước
& lt; / div & gt;
& lt; / div & gt;
Định cỡ
Các thẻ giả định không có width cụ thể nào để bắt đầu, vì vậy chúng sẽ rộng 100% trừ khi có quy định khác. Bạn có thể thay đổi điều này nếu cần với CSS tùy chỉnh, các lớp lưới, kết hợp Sass lưới hoặc các tiện ích.
Sử dụng đánh dấu lưới
Sử dụng lưới, bọc các thẻ thành các cột và hàng nếu cần.
Đối xử với danh hiệu đặc biệt
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Đi đâu đó
Đối xử với danh hiệu đặc biệt
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Đi đâu đó
& lt; div
class =
"row"
& gt;
& lt; div
class =
"col-sm-6"
& gt;
& lt; div
class =
"thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Cách xử lý tiêu đề đặc biệt & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"col-sm-6"
& gt;
& lt; div
class =
"thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Cách xử lý tiêu đề đặc biệt & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Sử dụng các tiện ích
Sử dụng một số tiện ích định kích thước có sẵn của chúng tôi để nhanh chóng thiết lập chiều rộng của thẻ.
Tiêu đề thẻ
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Nút
Tiêu đề thẻ
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Nút
& lt; div
class =
"thẻ w-75"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Nút & lt ; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card w-50"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Nút & lt ; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
Sử dụng CSS tùy chỉnh
Sử dụng CSS tùy chỉnh trong các bảng định kiểu của bạn hoặc dưới dạng các kiểu nội tuyến để đặt chiều rộng.
Đối xử với danh hiệu đặc biệt
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Đi đâu đó
& lt; div
class =
"card"
style =
"width: 18rem;"
& gt; < / p>
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Cách xử lý tiêu đề đặc biệt & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
Căn chỉnh văn bản
Bạn có thể nhanh chóng thay đổi 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ể — bằng các lớp căn chỉnh văn bản của chúng tôi.
Đối xử với danh hiệu đặc biệt
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Đi đâu đó
Đối xử với danh hiệu đặc biệt
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Đi đâu đó
Đối xử với danh hiệu đặc biệt
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Đi đâu đó
& lt; div
class =
"card"
style =
"width: 18rem;"
& gt; < / p>
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Cách xử lý tiêu đề đặc biệt & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card text-center"
style =
"width: 18rem;"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Cách xử lý tiêu đề đặc biệt & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card text-right"
style =
"width: 18rem;"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Cách xử lý tiêu đề đặc biệt & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
Điều hướng
Thêm một số điều hướng vào tiêu đề (hoặc khối) của thẻ với các thành phần điều hướng của Bootstrap.
Đối xử với danh hiệu đặc biệt
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Đi đâu đó
& lt; div
class =
"card text-center"
& gt;
& lt; div
class =
"card-header"
& gt;
& lt; ul
class =
"nav nav-tabs card-header-tabs"
& gt;
& lt; li
class =
"nav-item"
& gt;
& lt; a
class =
"nav-link active"
href =
"#"
& gt;
Hoạt động & lt ; / a & gt;
& lt; / li & gt;
& lt; li
class =
"nav-item"
& gt;
& lt; a
class =
"nav-link"
href =
"#"
& gt;
Liên kết & lt; / a & gt;
& lt; / li & gt;
& lt; li
class =
"nav-item"
& gt;
& lt; a
class =
"nav-link bị vô hiệu hóa"
href =
"#"
& gt;
Đã tắt & lt ; / a & gt;
& lt; / li & gt;
& lt; / ul & gt;
& lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Cách xử lý tiêu đề đặc biệt & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
Đối xử với danh hiệu đặc biệt
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.
Đi đâu đó
& lt; div
class =
"card text-center"
& gt;
& lt; div
class =
"card-header"
& gt;
& lt; ul
class =
"nav nav-Drugs card-header-Drugs"
& gt;
& lt; li
class =
"nav-item"
& gt;
& lt; a
class =
"nav-link active"
href =
"#"
& gt;
Hoạt động & lt ; / a & gt;
& lt; / li & gt;
& lt; li
class =
"nav-item"
& gt;
& lt; a
class =
"nav-link"
href =
"#"
& gt;
Liên kết & lt; / a & gt;
& lt; / li & gt;
& lt; li
class =
"nav-item"
& gt;
& lt; a
class =
"nav-link bị vô hiệu hóa"
href =
"#"
& gt;
Đã tắt & lt ; / a & gt;
& lt; / li & gt;
& lt; / ul & gt;
& lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Cách xử lý tiêu đề đặc biệt & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; a
href =
"#"
class =
" btn btn-primary "
& gt;
Đi đâu đó & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
Hình ảnh
Thẻ bao gồm một số tùy chọn để làm việc với hình ảnh. Chọn từ thêm “chữ viết hoa hình ảnh” ở cuối thẻ, chồng hình ảnh với nội dung thẻ hoặc chỉ cần nhúng hình ảnh vào thẻ.
Chữ hoa của hình ảnh
Tương tự như đầu trang và chân trang, thẻ có thể bao gồm "chữ viết hoa hình ảnh" trên cùng và dưới cùng — hình ảnh ở đầu hoặc cuối thẻ.
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 sự dẫn dắt 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ẻ
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt 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
& lt; div
class =
"thẻ mb-3"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt; & lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt; & lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; img
class =
"card-img-bottom"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; / div & gt;
Lớp phủ hình ảnh
Chuyển hình ảnh thành nền thẻ và phủ 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 thêm kiểu dáng hoặc tiện ích.
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 sự dẫn dắt 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
& lt; div
class =
"card bg-dark text-white"
& gt;
& lt; img
class =
"card-img"
src =
"..."
alt =
" Hình ảnh thẻ "
& gt;
& lt; div
class =
"card-img-overlay"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
Kiểu thẻ
Thẻ bao gồm các tùy chọn khác nhau để tùy chỉnh hình nền, đường viền và màu sắc của chúng.
Nền và màu
Sử dụng tiện ích văn bản và tiện ích nền để thay đổi hình thức của thẻ.
Tiêu đề
Tiêu đề thẻ chính
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ phụ
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ thành công
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ nguy hiểm
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ cảnh báo
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ thông tin
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ nhẹ
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ tối
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
& lt; div
class =
"card text-white bg-primary mb-3"
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ chính & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card text-white bg-Secondary mb-3" < / p>
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ phụ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card text-white bg-success mb-3" < / p>
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ thành công & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card text-white bg-risk mb-3" < / p>
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ nguy hiểm & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card text-white bg-warning mb-3" < / p>
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ cảnh báo & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card text-white bg-info mb-3" < / p>
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ thông tin & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ bg-light mb-3"
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ nhẹ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card text-white bg-dark mb-3" < / p>
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ tối & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
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-only < / code> class.
Đường viền
Sử dụng tiện ích border để chỉ thay đổi border-color của thẻ. Lưu ý rằng bạn có thể đặt các lớp . Text- {color} trên thẻ mẹ . hoặc một tập hợp con của nội dung của thẻ như được hiển thị bên dưới.
Tiêu đề
Tiêu đề thẻ chính
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ phụ
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ thành công
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ nguy hiểm
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ cảnh báo
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ thông tin
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ nhẹ
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiêu đề
Tiêu đề thẻ tối
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
& lt; div
class =
"card border-primary mb-3"
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body text-primary"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ chính & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card border-Secondary mb-3"
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body text-Secondary"
< p class = "nt"> & gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ phụ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card border-success mb-3"
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body text-success"
< p class = "nt"> & gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ thành công & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card border-risk mb-3"
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body text-risk"
< p class = "nt"> & gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ nguy hiểm & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card border-warning mb-3"
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body text-warning"
< p class = "nt"> & gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ cảnh báo & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card border-info mb-3"
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body text-info"
< p class = "nt"> & gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ thông tin & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card border-light mb-3"
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ nhẹ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card border-dark mb-3"
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body text-dark"
< p class = "nt"> & gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ tối & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
Tiện ích Mixins
Bạn cũng có thể thay đổi đường viền trên đầu trang và chân trang của thẻ nếu cần, thậm chí xóa background-color của chúng bằng .bg-trong suốt .
Tiêu đề
Tiêu đề thẻ thành công
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
& lt; div
class =
"card border-success mb-3"
style =
"max-width: 18rem;"
& gt;
& lt; div
class =
"card-header bg-transparent border-success"
& gt;
Tiêu đề & lt; / div & gt;
& lt; div
class =
"card-body text-success"
< p class = "nt"> & gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ thành công & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Một số văn bản mẫu nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ. & lt; / p & gt;
& lt; / div & gt;
& lt; div
class =
"card-footer bg-transparent border-success"
& gt;
Chân trang & lt; / div & gt;
& lt; / div & gt;
Bố cục thẻ
Ngoài việc tạo kiểu cho nội dung trong các thẻ, Bootstrap còn bao gồm một số tùy chọn để đặt ra một loạt thẻ. Hiện tại, các tùy chọn bố cục này chưa đáp ứng được .
Nhóm thẻ
Sử dụng các nhóm thẻ để hiển thị thẻ dưới dạng một phần tử duy nhất, được đính kèm với các cột chiều rộng và chiều cao bằng nhau. Các nhóm thẻ sử dụng display: flex; để đạt được kích thước đồng nhất.
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 sự dẫn dắt 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 như một hướng dẫn tự nhiên cho nội dung bổ sung.
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 sự dẫn dắt 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
& lt; div
class =
"card-group"
& gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt; & lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Thẻ này có văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt; & lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt 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. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt; & lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Khi sử dụng nhóm thẻ có chân trang, nội dung của chúng sẽ tự động xếp hàng.
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 sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.
Tiêu đề thẻ
Thẻ này có văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung.
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 sự dẫn dắt 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.
& lt; div
class =
"card-group"
& gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút. & lt; / p & gt;
& lt; / div & gt;
& lt; div
class =
"card-footer"
& gt;
& lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Thẻ này có văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; / div & gt;
& lt; div
class =
"card-footer"
& gt;
& lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt 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. & lt; / p & gt;
& lt; / div & gt;
& lt; div
class =
"card-footer"
& gt;
& lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Bộ bài
Bạn cần một bộ thẻ có chiều rộng và chiều cao bằng nhau không được gắn với nhau? Sử dụng bộ bài.
Tiê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 sự dẫn dắt 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 như một hướng dẫn tự nhiên cho nội dung bổ sung.
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 sự dẫn dắt 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
& lt; div
class =
"bộ bài"
& gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt; & lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Thẻ này có văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt; & lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt 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. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt; & lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Cũng giống như với nhóm thẻ, chân thẻ trong bộ bài sẽ tự động xếp hàng.
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 sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.
Tiêu đề thẻ
Thẻ này có văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung.
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 sự dẫn dắt 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.
& lt; div
class =
"bộ bài"
& gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút. & lt; / p & gt;
& lt; / div & gt;
& lt; div
class =
"card-footer"
& gt;
& lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Thẻ này có văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; / div & gt;
& lt; div
class =
"card-footer"
& gt;
& lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt 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. & lt; / p & gt;
& lt; / div & gt;
& lt; div
class =
"card-footer"
& gt;
& lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Cột thẻ
Các thẻ có thể được sắp xếp thành các cột giống như Masonry chỉ với CSS bằng cách gói chúng trong . card-cột . Các thẻ được tạo bằng thuộc tính CSS column thay vì flexbox để dễ căn chỉnh hơn. Các thẻ được sắp xếp theo thứ tự từ trên xuống dưới và từ trái sang phải.
Lưu ý! Số dặm của bạn với các cột thẻ có thể khác nhau. Để ngăn các thẻ bị phá vỡ giữa các cột, chúng tôi phải đặt chúng thành display: inline-block as column-break-inside: tránh < / code> vẫn chưa phải là một giải pháp chống đạn.
Tiêu đề thẻ chuyển sang một 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 sự dẫn dắt 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 như một hướng dẫn tự nhiên cho nội dung bổ sung.
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 như một hướng dẫn tự nhiên cho nội dung bổ sung.
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 sự dẫn dắt 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
& lt; div
class =
"thẻ-cột"
& gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tiêu đề thẻ chuyển sang một dòng mới & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút. & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"card p-3"
& gt;
& lt; blockquote
class =
"blockquote mb-0 card-body"
& gt;
& lt; p & gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante. & lt; / p & gt;
& lt; footer
class =
"blockquote-footer"
& gt;
& lt; small
class =
"text-muted"
& gt;
Một người nào đó nổi tiếng trong & lt; cite
title =
"Tiêu đề nguồn"
& gt;
Tiêu đề nguồn & lt; / cite & gt;
& lt; / small & gt;
& lt; / footer & gt;
& lt; / blockquote & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img-top"
src =
"..."
alt =
"Nắp ảnh thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Thẻ này có văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt; & lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ bg-primary text-white text-center p- 3 "
& gt;
& lt; blockquote
class =
"blockquote mb-0"
& gt;
& lt; p & gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat. & lt; / p & gt;
& lt; footer
class =
"blockquote-footer"
& gt;
& lt; nhỏ & gt;
Một người nào đó nổi tiếng trong & lt; cite
title =
"Tiêu đề nguồn"
& gt;
Tiêu đề nguồn & lt; / cite & gt;
& lt; / small & gt;
& lt; / footer & gt;
& lt; / blockquote & gt;
& lt; / div & gt;
& lt; div
class =
"card text-center"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Thẻ này có văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt; & lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; img
class =
"card-img"
src =
"..."
alt =
" Hình ảnh thẻ "
& gt;
& lt; / div & gt;
& lt; div
class =
"thẻ p-3 text-right"
& gt;
& lt; blockquote
class =
"blockquote mb-0"
& gt;
& lt; p & gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante. & lt; / p & gt;
& lt; footer
class =
"blockquote-footer"
& gt;
& lt; small
class =
"text-muted"
& gt;
Một người nào đó nổi tiếng trong & lt; cite
title =
"Tiêu đề nguồn"
& gt;
Tiêu đề nguồn & lt; / cite & gt;
& lt; / small & gt;
& lt; / footer & gt;
& lt; / blockquote & gt;
& lt; / div & gt;
& lt; div
class =
"thẻ"
& gt;
& lt; div
class =
"card-body"
& gt;
& lt; h5
class =
"card-title"
& gt;
Tên thẻ & lt; / h5 & gt;
& lt; p
class =
"card-text"
& gt;
Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt 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. & lt; / p & gt;
& lt; p
class =
"card-text"
& gt; & lt; small
class =
"text-muted"
& gt;
Cập nhật lần cuối 3 phút trước & lt; / small & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
Cá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. Hình bên dưới là phần mở rộng của lớp . Card-column sử dụng cùng một CSS mà chúng tôi sử dụng — CSS cột— để tạo một tập hợp các lớp đáp ứng để thay đổi số lượng cột.
. card-cột
{
@ bao gồm
media-breakpoint-only
(
lg
)
{
column-count
:
4
;
}
@ bao gồm
media-breakpoint-only
(
xl
)
{
column-count
:
5
;
}
}
Xem thêm những thông tin liên quan đến chủ đề thẻ trong html bootstrap
Sử dụng Bootstrap thiết Website cực đẹp trong 5 phút
- Tác giả: Alias
- Ngày đăng: 2020-04-18
- Đánh giá: 4 ⭐ ( 2744 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Bootstrap css alias
how to use bootstrap design website
Trong video này mình hướng dẫn các bạn dùng bootstrap để thiết kế 1 website 1 cách đơn giản nhé. copy code vào là xong
Link group học code: http://bit.ly/39eFZOi
Link facebook cá nhân: http://bit.ly/38fi69c
Link website: http://Alias.vn/
Link đăng kí kênh để nhận video free: http://bit.ly/2SyBebr
Đội ngũ Alias chuyên support IT cho các bạn ở đại học FPT Hà Nội - Ngoài ra còn support IT cho các bạn ở đại học Quốc Gia và Bách Khoa...
Channel hướng dẫn các bạn lập trình C, C, C++, Java, Java desk, Java Web, jsp - servlet, web service, asp.net đồng thời hướng dẫn các bạn các thủ thuật hữu ích giúp cuộc sống đơn giản và dễ dàng hơn.
Nếu nhạc nền bị gặp vấn đề bản quyền. Mong các bạn gửi mail tới trinhthehoan989@gmail.com. Mình sẽ trả lời lại trong vòng 2h ạ.
Hướng dẫn sử dụng Bootstrap cơ bản
- Tác giả: getbootstrap.com.vn
- Đánh giá: 4 ⭐ ( 3342 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Bootstrap là nền tảng framework miễn phí giúp website có thể tự động điều chỉnh kích thước với trình duyệt sử dụng. Vậy cách sử dụng bootstap như thế nào?
Bài 4: Typography trong Bootstrap 5
- Tác giả: quantrimang.com
- Đánh giá: 3 ⭐ ( 1253 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Trong bài viết này chúng ta sẽ cùng tìm hiểu về các định kiểu văn bản cơ bản trong Bootstrap 4, các cài đặt mặc định về văn bản của Bootstrap, các thẻ h và nhiều định dạng khác.
[Bootstrap] Phần 21: Input
- Tác giả: www.dammio.com
- Đánh giá: 4 ⭐ ( 7467 lượt đánh giá )
- Khớp với kết quả tìm kiếm:
Hướng dẫn và ví dụ Bootstrap Card
- Tác giả: openplanning.net
- Đánh giá: 3 ⭐ ( 4875 lượt đánh giá )
- Khớp với kết quả tìm kiếm:
Bootstrap Là Gì? Hướng dẫn tải và sử dụng Bootstrap
- Tác giả: vietnix.vn
- Đánh giá: 5 ⭐ ( 7205 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Bootstrap là gì? Cách tải và cài đặt Bootstrap hiệu quả mà bạn có thể áp dụng ngay sau khi đọc bài viết này của Vietnix. Tham khảo ngay nhé
Thư viện bootstrap
- Tác giả: viblo.asia
- Đánh giá: 3 ⭐ ( 1007 lượt đánh giá )
- Khớp với kết quả tìm kiếm: I. Giới thiệu về boostrap. Bootstrap ra đời và được xuất bản trên github vào tháng 8 năm 2011. Về cơ bản, ta hiểu nôm na nó như là một thư viện bao gồm các StyleSheet được dựng sẵn trong các file nằm...
Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình