Bootstrap 4 thẻ hiệu ứng hover codepen

Đây là một ví dụ về biểu mẫu bố cục thẻ hình ảnh có hiệu ứng di chuột, được thiết kế bằng HTML, CSS và Bootstrap framework 4. Truy vấn phương tiện đã được sử dụng để tăng khả năng phản hồi của biểu mẫu, trong khi phông chữ và hình ảnh được nhập vào mã bằng URL của chúng. Kích thước phông chữ được xác định trước là --font-sans. 'Rubik', sans-serif và --font-serif. 'Thẻ', serif. Các thẻ hình ảnh được đặt trong bố cục dạng lưới. Nội dung trang được cung cấp các kiểu hiển thị dưới dạng lưới, grid-gap là 1rem, đệm là 1rem, độ rộng tối đa là 1024px và họ phông chữ là var(--font-sans). Tiêu đề của thẻ có các kiểu cỡ chữ là 1. 3rem, độ đậm của phông chữ là đậm và chiều cao của dòng là 1. 2. Mô tả thẻ có các kiểu font-family là var(--font-serif), font-size là 1. 125rem, font-style là nghiêng, và line-height là 1. 35, trong khi nút được cung cấp các kiểu con trỏ dưới dạng con trỏ để có hiệu ứng con trỏ tay, lề trên là 1. 5rem, phần đệm là 0. 75rem 1. 5rem, cỡ chữ là 0. 65rem và chuyển đổi văn bản thành chữ hoa để chuyển văn bản thành chữ hoa. Nút có màu nền là light(black, 5%), trong sự kiện di chuột và đường viền có màu vàng nét đứt 1px, trong sự kiện tiêu điểm. Thẻ hình ảnh có hiệu ứng chuyển đổi translateY(-50%), trong sự kiện di chuột. Nguồn. https. // codepen. io/hình lục giác/bút/XWbWKwL

Thẻ là nơi chứa nội dung linh hoạt và có thể mở rộng. Nó bao gồm các tùy chọn cho đầu trang và chân trang, nhiều loại nội dung, màu nền theo ngữ cảnh và các tùy chọn hiển thị mạnh mẽ. Nếu bạn đã quen thuộc với Bootstrap 3, các thẻ sẽ thay thế các bảng, giếng và hình thu nhỏ cũ của chúng tôi. Chức năng tương tự cho các thành phần đó có sẵn dưới dạng các lớp sửa đổi cho thẻ

Thí dụ

Thẻ được tạo với ít đánh dấu và kiểu nhất có thể, nhưng vẫn quản lý để cung cấp 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. Họ không có

  

  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

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. Thẻ không có chiều rộng cố định để bắt đầu, do đó, chúng sẽ tự nhiên lấp đầy toàn bộ chiều rộng của phần tử gốc của nó. Điều này 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

Hình ảnh giới hạn

tiêu đề thẻ

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

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ợ

Cơ thể người

Khối xây dựng của thẻ là

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Đây là một số văn bản trong thân thẻ

  

    This is some text within a card body.
  

Tiêu đề, văn bản và liên kết

Tiêu đề thẻ được sử dụng bằng cách thêm

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Phụ đề được sử dụng bằng cách thêm

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

tiêu đề thẻ

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

Hình ảnh

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

Hình ảnh giới hạn

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

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

• Một món đồ
• Mục thứ hai
• Mục thứ ba

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

• Một món đồ
• Mục thứ hai
• Mục thứ ba

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

• Một món đồ
• Mục thứ hai
• Mục thứ ba

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

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 đó. Hiển thị bên dưới 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ả được bao bọc trong một thẻ có chiều rộng cố định

Hình ảnh giới hạn

tiêu đề thẻ

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

• Một món đồ
• Mục thứ hai
• Mục thứ ba

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Thêm đầu trang và/hoặc chân trang tùy chọn trong thẻ

Xử lý tiêu đề đặc biệt

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Tiêu đề thẻ có thể được tạo kiểu bằng cách thêm các phần tử

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Xử lý tiêu đề đặc biệt

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Một trích dẫn nổi tiếng, được chứa trong phần tử blockquote

  

    This is some text within a card body.
  

Xử lý tiêu đề đặc biệt

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

  

    This is some text within a card body.
  

định cỡ

Thẻ giả sử không có

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

Sử dụng đánh dấu lưới

Sử dụng lưới, bọc thẻ theo cột và hàng nếu cần

Xử lý tiêu đề đặc biệt

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

Xử lý tiêu đề đặc biệt

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

  

    This is some text within a card body.
  

Sử dụng tiện ích

Sử dụng một số tiện ích định cỡ có sẵn của chúng tôi để nhanh chóng đặt 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 cách tự nhiên dẫn đến nội dung bổ sung

tiêu đề thẻ

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

  

    This is some text within a card body.
  

Sử dụng CSS tùy chỉnh

Sử dụng CSS tùy chỉnh trong biểu định kiểu của bạn hoặc dưới dạng kiểu nội tuyến để đặt chiều rộng

Xử lý tiêu đề đặc biệt

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

  

    This is some text within a card body.
  

căn chỉnh văn bản

Bạn có thể nhanh chóng thay đổi cách căn chỉnh văn bản của bất kỳ thẻ nào—toàn bộ hoặc từng phần cụ thể—với các lớp căn chỉnh văn bản của chúng tôi

Xử lý tiêu đề đặc biệt

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

Xử lý tiêu đề đặc biệt

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

Xử lý tiêu đề đặc biệt

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

  

    This is some text within a card body.
  

Thêm một số điều hướng vào tiêu đề (hoặc khối) của thẻ bằng các thành phần điều hướng của Bootstrap

Xử lý tiêu đề đặc biệt

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

  

    This is some text within a card body.
  

Xử lý tiêu đề đặc biệt

Với văn bản hỗ trợ bên dưới như một cách tự nhiên dẫn đến nội dung bổ sung

  

    This is some text within a card body.
  

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ừ việc thêm "chữ hoa hình ảnh" vào một trong hai đầu của thẻ, phủ hình ảnh bằng nội dung thẻ hoặc chỉ 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ữ hoa hình ảnh” trên cùng và dưới cùng—các hình ảnh ở trên cùng hoặc dưới cùng của thẻ

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

Cập nhật lần cuối 3 phút trước

tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một phần mở đầu tự nhiên cho nội dung bổ sung. 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

  

    This is some text within a card body.
  

Lớp phủ hình ảnh

Biến hình ảnh thành nền thẻ và phủ lên văn bản trên thẻ của bạn. Tùy thuộc vào hình ảnh, bạn có thể cần hoặc không cần các kiểu hoặc tiện ích bổ sung

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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

Cập nhật lần cuối 3 phút trước

  

    This is some text within a card body.
  

Lưu ý nội dung không được lớn hơn chiều cao của ả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 các lớp lưới và tiện ích, thẻ có thể được tạo theo chiều ngang theo cách đáp ứng và thân thiện với thiết bị di động. Trong ví dụ bên dưới, chúng tôi loại bỏ các rãnh lưới bằng

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một phần mở đầu tự nhiên cho nội dung bổ sung. 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

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

phong cách thẻ

Thẻ bao gồm nhiều 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ắc

Đặt

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

Tiêu đề thẻ chính

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ phụ

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ thành công

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

tiêu đề thẻ nguy hiểm

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ cảnh báo

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ thông tin

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ nhẹ

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ tối

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

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 dấu hiệu trực quan, dấu hiệu này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung (e. g. văn bản hiển thị), hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với lớp

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

Biên giới

Sử dụng các tiện ích viền để chỉ thay đổi

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Tiêu đề thẻ chính

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ phụ

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ thành công

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

tiêu đề thẻ nguy hiểm

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ cảnh báo

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ thông tin

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ nhẹ

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

Tiêu đề thẻ tối

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

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 và thậm chí xóa

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Tiêu đề thẻ thành công

Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

bố cục thẻ

Ngoài việc tạo kiểu cho nội dung trong thẻ, Bootstrap còn bao gồm một số tùy chọn để bố trí hàng loạt thẻ. Hiện tại, các tùy chọn bố cục này vẫn chưa đáp ứng

Nhóm thẻ

Sử dụng các nhóm thẻ để hiển thị thẻ dưới dạng một phần tử được đính kèm với các cột có chiều rộng và chiều cao bằng nhau. Các nhóm thẻ bắt đầu được xếp chồng lên nhau và sử dụng

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

Cập nhật lần cuối 3 phút trước

Hình ảnh giới hạn

tiêu đề thẻ

Thẻ này có văn bản hỗ trợ bên dưới để dẫn đến nội dung bổ sung một cách tự nhiên

Cập nhật lần cuối 3 phút trước

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Thẻ này thậm chí còn có nội dung dài hơn thẻ đầu tiên để hiển thị hành động có chiều cao bằng nhau đó

Cập nhật lần cuối 3 phút trước

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

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

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

Hình ảnh giới hạn

tiêu đề thẻ

Thẻ này có văn bản hỗ trợ bên dưới để dẫn đến nội dung bổ sung một cách tự nhiên

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Thẻ này thậm chí còn có nội dung dài hơn thẻ đầu tiên để hiển thị hành động có chiều cao bằng nhau đó

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

thẻ lưới

Sử dụng hệ thống lưới Bootstrap và các lớp

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

Thay đổi nó thành

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

Khi bạn cần chiều cao bằng nhau, hãy thêm

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

Hình ảnh giới hạn

tiêu đề thẻ

Đây là một thẻ ngắn

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

Cũng giống như nhóm thẻ, chân thẻ sẽ tự động xếp hàng

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

Hình ảnh giới hạn

tiêu đề thẻ

Thẻ này có văn bản hỗ trợ bên dưới để dẫn đến nội dung bổ sung một cách tự nhiên

Hình ảnh giới hạ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 phần mở đầu tự nhiên cho nội dung bổ sung. Thẻ này thậm chí còn có nội dung dài hơn thẻ đầu tiên để hiển thị hành động có chiều cao bằng nhau đó

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  

nề

Trong

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

CSS

Biến

Là một phần trong cách tiếp cận các biến CSS đang phát triển của Bootstrap, thẻ hiện sử dụng các biến CSS cục bộ trên

  
  

    
Some quick example text to build on the card title and make up the bulk of the card's content.
  

Làm cách nào để tạo hiệu ứng di chuột cho thẻ trong Bootstrap?

Làm cách nào để thêm bóng khi di chuột trong Bootstrap?