Lớp Bootstrap 4 nào được sử dụng để thêm liên kết vào thẻ Bootstrap?

Thẻ là nơi chứa nội dung linh hoạt và có thể mở rộng. Nó bao gồm các tùy chọn cho đầu trang và chân trang, nhiều loại nội dung, màu nền theo ngữ cảnh và các tùy chọn hiển thị mạnh mẽ

Nếu bạn đã quen thuộc với Bootstrap 3, các thẻ sẽ thay thế các bảng, giếng và hình thu nhỏ cũ của chúng tôi. Chức năng tương tự cho các thành phần đó có sẵn dưới dạng các lớp sửa đổi cho thẻ

nội dung

Ví dụ

Thẻ yêu cầu một lượng nhỏ đánh dấu và các lớp để cung cấp cho bạn nhiều quyền kiểm soát nhất có thể. Mặc dù vậy, các lớp và đánh dấu này rất linh hoạt và thường có thể được phối lại và mở rộng một cách dễ dàng. Ví dụ: nếu thẻ của bạn không có nội dung tuôn ra như hình ảnh, vui lòng đặt lớp

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  

5 trên phần tử

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  

6 để củng cố đánh dấu của bạn

Card title

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

Go 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. Trộn và kết hợp nhiều loại nội dung để tạo thẻ bạn cần

Card title

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

• Cras justo odio
• Dapibus ac facilisis in
• Vestibulum at eros

Card link Another link

Danh sách có thể được thêm vào thẻ bằng cách thêm nhóm danh sách

• Cras justo odio
• Cơ sở Dapibus ac ở
• Tiền đình ở eros

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  

7 đặt một hình ảnh lên trên cùng của thẻ. Với

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  

8, văn bản có thể được thêm vào thẻ. Văn bản trong

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  

8 cũng có thể được tạo kiểu bằng các thẻ HTML tiêu chuẩn

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

0 vào thẻ

  
  

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

1. Theo cách tương tự, các liên kết được thêm vào và đặt cạnh nhau bằng cách thêm

  
  

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

2 vào thẻ

  
  

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

1

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.
  Card link
  Another link

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

  
  

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

4 vào một thẻ

  
  

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

1. Nếu các mục

  
  

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

0 và

  
  

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

4 được đặt trong một mục

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  

5, tiêu đề thẻ và tiêu đề phụ được căn chỉnh độc đáo

Có thể dễ dàng kết hợp nhiều loại nội dung để tạo thẻ bạn cần. xem ví dụ bên dưới

tiêu đề thẻ

Phụ đề thẻ hỗ trợ

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

Card link Another link

định cỡ

Hạn chế độ rộng của thẻ thông qua CSS tùy chỉnh, các lớp lưới được xác định trước của chúng tôi hoặc với các kiểu tùy chỉnh bằng cách sử dụng mixin lưới của chúng tôi

Sử dụng lưới

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

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

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

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

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

Sử dụng chiều rộng tùy chỉnh

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

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

  
Special title treatment
  
With supporting text below as a natural lead-in to additional content.
  Go somewhere

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

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

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

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

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

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

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

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

  
Special title treatment
  
With supporting text below as a natural lead-in to additional content.
  Go somewhere



  
Special title treatment
  
With supporting text below as a natural lead-in to additional content.
  Go somewhere



  
Special title treatment
  
With supporting text below as a natural lead-in to additional content.
  Go somewhere

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

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

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

  

    Featured
  
  

    
Special title treatment
    
With supporting text below as a natural lead-in to additional content.
    Go somewhere
  

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

  
  

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

9 vào

  
  

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

1

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

  
  

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

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  
  

    Card link
    Another link
  

0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

  
  

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

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  
  

    Card link
    Another link
  

1

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

  
  

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

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  
  

    Card link
    Another link
  

2

Sử dụng các tab hoặc tab điều hướng của Bootstrap trong tiêu đề thẻ. Đảm bảo luôn bao gồm lớp tiện ích

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

1 để căn chỉnh phù hợp

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

  
  

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

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  
  

    Card link
    Another link
  

3

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

  
  

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

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  
  

    Card link
    Another link
  

3

Mũ hình ảnh

Tương tự như đầu trang và chân trang, thẻ bao gồm mũ hình ảnh trên cùng và dưới cùng

Card title

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

• Cras justo odio
• Dapibus ac facilisis in
• Vestibulum at eros

Card link Another link

5

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

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

2 (xem bên dưới)

Card title

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

• Cras justo odio
• Dapibus ac facilisis in
• Vestibulum at eros

Card link Another link

6

đảo ngược văn bản

Thẻ bao gồm một lớp để nhanh chóng chuyển đổi màu văn bản. Theo mặc định, thẻ sử dụng văn bản tối và có nền sáng. Thêm

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




  Card link
  Another link

2 cho văn bản màu trắng và chỉ định

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

4 và

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

5 đi cùng

Bạn cũng có thể sử dụng

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

2 vớ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

  
  

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

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  
  

    Card link
    Another link
  

7

biến thể nền

Thẻ bao gồm các lớp biến thể của riêng chúng để thay đổi nhanh chóng

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

4 và

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

5 của thẻ. Màu tối hơn yêu cầu sử dụng

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

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

  
  

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

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  
  

    Card link
    Another link
  

8

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
    Support card subtitle
  

  
  

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

0

các biến thể phác thảo

Cần một thẻ màu, nhưng không phải là màu nền đắt tiền mà họ mang lại?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

  
  

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

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  
  

    Card link
    Another link
  

9

Các nhóm

Sử dụng các nhóm thẻ để hiển thị thẻ dưới dạng một phần tử được đính kèm với các cột có chiều rộng và chiều cao bằng nhau. Theo mặc định, các nhóm thẻ sử dụng

  

    
Card title
    Support card subtitle
  

  
  

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

3 và

  

    
Card title
    Support card subtitle
  

  
  

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

4 để đạt được kích thước thống nhất. Tuy nhiên, bật chế độ flexbox có thể chuyển chế độ đó sang sử dụng

  

    
Card title
    Support card subtitle
  

  
  

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

5 và mang lại hiệu quả tương tự

Chỉ áp dụng cho các thiết bị nhỏ trở lên

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

Card link Another link

6 và một

  

    
Card title
    Support card subtitle
  

  
  

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

7. Chúng tôi sử dụng các kiểu bảng để định cỡ và máng xối trên

  

    
Card title
    Support card subtitle
  

  
  

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

7.

  

    
Card title
    Support card subtitle
  

  
  

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

6 được sử dụng để trừ đi số dư của

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

0 trên

  

    
Card title
    Support card subtitle
  

  
  

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

7

Chỉ áp dụng cho các thiết bị nhỏ trở lên

Mẹo chuyên nghiệp. Nếu bạn bật chế độ hộp linh hoạt, bạn có thể xóa

  

    
Card title
    Support card subtitle
  

  
  

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

6

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

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

tiêu đề thẻ

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

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

tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một phần mở đầu tự nhiên cho nội dung bổ sung. Thẻ này thậm chí còn có nội dung dài hơn thẻ đầu tiên để hiển thị hành động có chiều cao bằng nhau đó

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

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  

1

Cột

Các thẻ có thể được sắp xếp thành các cột giống như Masonry chỉ bằng CSS bằng cách gói chúng trong

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

3. Các quân bài được sắp xếp theo thứ tự từ trên xuống dưới và từ trái sang phải khi gói trong

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

3

Chỉ áp dụng cho các thiết bị nhỏ trở lên

Đứng lên. Điều này không khả dụng trong IE9 trở xuống vì chúng không hỗ trợ cho các thuộc tính CSS

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

5

Tiêu đề thẻ xuống dòng mới

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một phần mở đầu tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

tiêu đề thẻ

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat

tiêu đề thẻ

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một phần mở đầu tự nhiên cho nội dung bổ sung. Thẻ này thậm chí còn có nội dung dài hơn thẻ đầu tiên để hiển thị hành động có chiều cao bằng nhau đó

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

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Vestibulum at eros
  

2

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. Hiển thị bên dưới là một phần mở rộng của lớp

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

  

    

      
Special title treatment
      
With supporting text below as a natural lead-in to additional content.
      Go somewhere
    

  

3 sử dụng cùng một CSS mà chúng tôi sử dụng—cột CSS— để tạo một tập hợp các tầng phản hồi để thay đổi số lượng cột

Lớp nào thêm tiêu đề vào thẻ trong Bootstrap?

Thẻ trong Bootstrap 4 là gì?

Làm cách nào để thêm đường viền vào thẻ trong Bootstrap?

Làm cách nào để thêm biểu tượng vào thẻ trong Bootstrap?