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?