Bootstrap chiều cao thân thẻ

Bootstrap Card 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 đầ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ẽ. Thẻ thay thế các thành phần panel, well và thumbnail trong phiên bản Bootstrap 3 cũ

Trong các phần sau, bạn sẽ thấy những gì bạn có thể làm với thành phần thẻ

Tạo Bootstrap Card cơ bản

Thẻ Bootstrap có mã khá đơn giản. Trình bao bọc bên ngoài yêu cầu lớp cơ sở

    
This is some text within a padded box.

7, trong khi nội dung có thể được đặt bên trong phần tử

    
This is some text within a padded box.

8. Ví dụ sau đây sẽ chỉ cho bạn cách tạo một thẻ có hình ảnh, kết hợp với một số nội dung văn bản và một nút

    View Profile
    

Kết quả của ví dụ trên sẽ giống như sau

View pictures Discover history

Kết quả của ví dụ trên sẽ giống như sau

View pictures Discover history

1 và

    

        Eiffel Tower
        Champ de Mars, Paris, France
        
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
        View pictures
        Discover history
    

2 cũng tương ứng. Please view ví dụ sau

    
Featured
    

        NASA Launched Solar Probe
        
NASA launched Parker space probe in 2018 with the mission of making observations of the outer corona of the Sun. It is the first-ever mission to "touch" the Sun.
        Know more
    

    
3 years ago

Kết quả của ví dụ trên sẽ giống như sau

View pictures Discover history

3 và

    

        Eiffel Tower
        Champ de Mars, Paris, France
        
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.

  


        View pictures
        Discover history
    

4 để căn chỉnh nội dung của thẻ tương ứng ở giữa và cuối bên phải. Theo mặc định, chúng được căn trái

Set the list list in Bootstrap Card

Bạn cũng có thể đặt nhóm danh sách [nhóm danh sách] bên trong thẻ cùng với các loại nội dung khác, như được hiển thị ở đây

    
This is some text within a padded box.

2

Kết quả của ví dụ trên sẽ giống như sau

View pictures Discover history

5 trên phần tử

    

        Eiffel Tower
        Champ de Mars, Paris, France
        
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
        View pictures
        Discover history
    

6 cùng với Lớp

    

        Eiffel Tower
        Champ de Mars, Paris, France
        
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
        View pictures
        Discover history
    

7 để căn chỉnh cũng phù hợp

Hãy thử ví dụ sau đây để tạo một tab theo thẻ đẹp mắt

    
This is some text within a padded box.

7

Kết quả của ví dụ trên sẽ giống như sau

View pictures Discover history

8 giống với lớp

    

        Eiffel Tower
        Champ de Mars, Paris, France
        
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
        View pictures
        Discover history
    

9 trên phần tử

    

        Eiffel Tower
        Champ de Mars, Paris, France
        
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
        View pictures
        Discover history
    

6, như được hiển thị bên dưới

    
This is some text within a padded box.

7

Kết quả của ví dụ trên sẽ giống như sau

View Profile

2

Kết quả của ví dụ trên sẽ giống như sau

View Profile

4

Kết quả của ví dụ trên sẽ giống như sau

Know more

3 years ago

2 của nó để kiểm tra số lượng cột lưới [bao quanh thẻ của bạn] sẽ hiển thị trên mỗi hàng. Ví dụ. bạn có thể sử dụng lớp

    
Featured
    

        NASA Launched Solar Probe
        
NASA launched Parker space probe in 2018 with the mission of making observations of the outer corona of the Sun. It is the first-ever mission to "touch" the Sun.
        Know more
    

    
3 years ago

3 để hiển thị một thẻ trên mỗi hàng, tương tự, bạn có thể sử dụng lớp

    
Featured
    

        NASA Launched Solar Probe
        
NASA launched Parker space probe in 2018 with the mission of making observations of the outer corona of the Sun. It is the first-ever mission to "touch" the Sun.
        Know more
    

    
3 years ago

4 để hiển thị hai thẻ trên mỗi hàng, từ điểm ngắt trung bình trở lên [tức là chiều rộng khung nhìn

    
Featured
    

        NASA Launched Solar Probe
        
NASA launched Parker space probe in 2018 with the mission of making observations of the outer corona of the Sun. It is the first-ever mission to "touch" the Sun.
        Know more
    

    
3 years ago

5

    
This is some text within a padded box.

1

Kết quả của ví dụ trên sẽ giống như sau

Know more

3 years ago

6 thay thế cho Lớp

    
This is some text within a padded box.

8. Tùy thuộc vào hình ảnh, bạn có thể cần các kiểu bổ sung để điều chỉnh tốt hơn. Please view a ví dụ

    
This is some text within a padded box.

3

Kết quả của ví dụ trên sẽ giống như sau

View pictures Discover history

3 và lớp

    

        Eiffel Tower
        Champ de Mars, Paris, France
        
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
        View pictures
        Discover history
    

4 để căn chỉnh nội dung văn bản của thẻ tương ứng ở giữa và cuối bên phải

    
This is some text within a padded box.

4

Kết quả của ví dụ trên sẽ giống như sau

Bootstrap Card size only

Thẻ không có chiều rộng cụ thể, chúng có chiều rộng 100% theo mặc định. Tuy nhiên, bạn có thể thay đổi điều này nếu cần với tùy chỉnh CSS, lưới lớp hoặc lớp tiện ích định mức

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào

    
This is some text within a padded box.

5

Tạo liên kết cho toàn bộ Bootstrap Card

Bạn có thể thêm lớp

    
This is some text within a padded box.

20 vào một liên kết bên trong thẻ để toàn bộ thẻ có thể nhấp vào được [tức là toàn bộ thẻ hoạt động giống như một liên kết]