thẻ – thẻ trong html bootstrap

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.

Nắp ảnh thẻ

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 . 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.

Nắp ảnh 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ẻ.

  

& 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.

Nắp ảnh thẻ

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;

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ẻ.

Nắp ảnh 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

Nắp ảnh thẻ

  

& 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.

Hình ảnh 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

  

& 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.

Nắp ảnh 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

Nắp ảnh thẻ

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

Nắp ảnh 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. 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.

Nắp ảnh 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.

Nắp ảnh thẻ

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.

Nắp ảnh 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. 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.

Nắp ảnh thẻ

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

Nắp ảnh thẻ

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

Nắp ảnh 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. 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.

Nắp ảnh 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.

Nắp ảnh thẻ

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.

Nắp ảnh 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. 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.

Nắp ảnh thẻ

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.

Nắp ảnh thẻ

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

Hình ảnh thẻ

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

alt

  • 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

Xem Thêm  Trình tạo Java (Có ví dụ) - hàm tạo trong java là gì