Các thẻ của 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.
Về
Thẻ là một nơi chứa nội dung linh hoạt và có thể mở rộng . Nó bao gồm các tùy chọn cho đầu trang và chân trang, nhiều loại nội dung, màu nền theo ngữ cảnh và các tùy chọn hiển thị mạnh mẽ. Nếu bạn đã quen thuộc với Bootstrap 3, thẻ sẽ thay thế các bảng điều khiển, 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ẻ.
Thí dụ
Các 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ó margintheo mặc định, vì vậy hãy sử dụng các 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 ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
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ợ.
Thân hình
Khối xây dựng của một 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ẻ.
Tiêu đề, văn bản và liên kết
Tiêu đề thẻ được sử dụng bằng cách thêm .card-titlevào <h*>thẻ. Theo cách tương tự, các liên kết được thêm vào và đặt cạnh nhau bằng cách thêm .card-linkvào <a>thẻ.
Phụ đề được sử dụng bằng cách thêm .card-subtitlevào <h*>thẻ. Nếu .card-titlevà các .card-subtitlemục được đặt trong một .card-bodymục, tiêu đề thẻ và tiêu đề phụ sẽ được căn chỉnh một cách đẹp mắt.
Tiêu đề thẻ
Phụ đề thẻ
Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
.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 bên trong .card-textcũ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 ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Liệt kê các nhóm
Tạo danh sách nội dung trong thẻ với nhóm danh sách phẳng.
Cras justo odio
Dapibus ac Operatingisis in
Vestibulum at eros
Đặc sắc
Cras justo odio
Dapibus ac Operatingisis in
Vestibulum at eros
Cras justo odio
Dapibus ac Operatingisis in
Vestibulum at eros
Bồn rửa chén
Trộn 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à một nhóm danh sách — tất cả đượ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 ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Các thẻ giả định không widthbắt đầu cụ thể, 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.
Xử lý 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 đến nội dung bổ sung.
Thẻ bao gồm một số tùy chọn để làm việc với hình ảnh. Chọn từ việc thêm "mũ hình ảnh" vào một trong hai đầu của 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ẻ.
Mũ 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 hướng dẫn 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 cách đây 3 phú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 hướng dẫn 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 cách đây 3 phút
Lớp phủ hình ảnh
Biế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 hướng dẫn 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 cách đây 3 phút
Lưu ý rằng nội dung không được lớn hơn chiều cao của hình ảnh. Nếu nội dung lớn hơn hình ảnh, nội dung sẽ được hiển thị bên ngoài hình ảnh.
Nằm ngang
Sử dụng kết hợp lưới và các lớp tiện ích, thẻ có thể được tạo theo chiều ngang theo cách thân thiện với thiết bị di động và đáp ứng. Trong ví dụ dưới đây, chúng tôi loại bỏ các rãnh lưới .no-guttersvà sử dụng .col-md-*các lớp để làm cho thẻ nằm ngang tại mdđiểm ngắt. Có thể cần điều chỉnh thêm tùy thuộc vào nội dung thẻ của bạn.
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 hướng dẫn 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 cách đây 3 phút
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.
Một số văn bản ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
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-onlylớp.
Biên giới
Sử dụng các tiện ích biên giới để chỉ thay đổi border-colorthẻ. Lưu ý rằng bạn có thể đặt .text-{color}các lớp trên trang gốc .cardhoặc một tập hợp con của nội dung thẻ như hình dưới đây.
Tiêu đề
Tiêu đề thẻ chính
Một số văn bản ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng 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 ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Tiện ích Mixins
Bạn cũng có thể thay đổi các đường viền trên đầu trang và chân trang của thẻ nếu cần, và thậm chí xóa chúng background-colorbằng .bg-transparent.
Tiêu đề
Tiêu đề thẻ thành công
Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Bố cục thẻ
Ngoài việc tạo kiểu dáng cho nội dung bên trong thẻ, Bootstrap còn bao gồm một số tùy chọn để đặt hàng loạt thẻ. Hiện tại, các tùy chọn bố cục này vẫn chưa được đáp ứng .
Nhóm thẻ
Sử dụng nhóm thẻ để hiển thị thẻ dưới dạng một phần tử đính kèm duy nhất với các cột chiều rộng và chiều cao bằng nhau. Các nhóm thẻ bắt đầu được xếp chồng lên nhau và sử dụng display: flex;để gắn với các kích thước đồng nhất bắt đầu từ smđiểm ngắ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 hướng dẫn 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 cách đây 3 phút
Tiêu đề thẻ
Thẻ này có 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.
Cập nhật lần cuối cách đây 3 phú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 hướng dẫn 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 cách đây 3 phút
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 hướng dẫn 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 sự dẫn dắt 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 hướng dẫn 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.
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 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 cách đây 3 phút
Tiêu đề thẻ
Thẻ này có 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.
Cập nhật lần cuối cách đây 3 phú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 hướng dẫn 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 cách đây 3 phút
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 hướng dẫn 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 sự dẫn dắt 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 hướng dẫn 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.
Thẻ lưới
Sử dụng hệ thống lưới Bootstrap và các .row-colslớp của nó để kiểm soát số lượng cột lưới (bao quanh thẻ của bạn) mà bạn hiển thị trên mỗi hàng. Ví dụ: đây là .row-cols-1bố trí các thẻ trên một cột và .row-cols-md-2chia bốn thẻ thành chiều rộng bằng nhau trên nhiều hàng, từ điểm ngắt trung bình trở lên.
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.
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.
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.
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.
Thay đổi nó thành .row-cols-3và bạn sẽ thấy bọc thẻ thứ tư.
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.
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.
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.
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.
Khi bạn cần chiều cao bằng nhau, hãy thêm .h-100vào các thẻ. Nếu bạn muốn chiều cao bằng nhau theo mặc định, bạn có thể đặt $card-height: 100%trong Sass.
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.
Tiêu đề thẻ
Đây là một thẻ ngắn.
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.
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ột thẻ
Các thẻ có thể được sắp xếp thành các cột giống như Masonry.card-columns chỉ với CSS bằng cách gói chúng vào trong . Các thẻ được xây dựng với các thuộc tính CSS columnthay vì flexbox để dễ dàng 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.
Đứng lên! Số dặm của bạn với các cột thẻ có thể khác nhau. Để ngăn chặn các thẻ bị vỡ qua các cột, chúng ta phải đặt chúng thành display: inline-blockgiải column-break-inside: avoidphá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 sự dẫn dắt tự nhiên cho nội dung bổ sung.
Cập nhật lần cuối cách đây 3 phút
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat.
Tiêu đề thẻ
Thẻ này có tiêu đề thông thường và đoạn văn bản ngắn bên dưới thẻ.
Cập nhật lần cuối cách đây 3 phút
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.
Tiêu đề thẻ
Đây là một thẻ khác có tiêu đề và văn bản hỗ trợ bên dưới. Thẻ này có một số nội dung bổ sung để làm cho nó cao hơn một chút về tổng thể.
Cập nhật lần cuối cách đây 3 phút
Các cột thẻ cũng có thể được mở rộng và tùy chỉnh với một số mã bổ sung. Hình bên dưới là phần mở rộng của .card-columnslớp bằng cách sử dụng cùng một CSS mà chúng tôi sử dụng — các cột CSS— để tạo một tập hợp các lớp đáp ứng để thay đổi số lượng cột.