Thẻ bootstrap

Trong bài viết này, mình sẽ giới thiệu cho các bạn một thành phần rất hay được sử dụng trong Bootstrap đó là Bootstrap Card Component. Mỗi một định nghĩa của mình sẽ có một ví dụ kèm theo, chắc chắn sau bài viết này các bạn đều có thể sử dụng nó một cách thành công vì nó rất đơn giản. Hi vọng các bạn có thể áp dụng được vào project của mình

Bootstrap là một framework HTML, CSS và Javascript phổ biến nhất hiện nay

Nó cung cấp rất nhiều lợi ích cho nhà phát triển như là

• Dễ dàng và nhanh chóng tạo ra một bố cục đáp ứng mà chỉ cần biết những kiến ​​thức đơn giản về HTML và CSS
• Vì ngày nay người dùng di động truy cập các trang web rất nhiều, nên thiết kế Mobile-first cũng được ưu tiên. Bootstrap được xây dựng theo triết lý Mobile-first
• Nó tương thích với tất cả các trình duyệt
• Use Flexbox for grid system
• Nó cung cấp rất nhiều tính năng và thành phần

Phiên bản mới nhất của Bootstrap cung cấp rất nhiều tính năng mới, chẳng hạn như hỗ trợ Flexbox, thành phần thẻ mới, thay thế các bảng, hình thu nhỏ

Bootstrap Card Component is what

Đây chính là một ví dụ sử dụng Bootstrap Card.

Flexbox là một kiểu trang mới của CSS3 [https. //viblo. asia/p/gioi-thieu-ve-css3-flexbox-3P0lPM785ox], và Bootstrap Card Component được xây dựng dựa trên cơ chế này

Bạn có thể có rất nhiều tùy chọn trong Bootstrap Card như định nghĩa đầu trang & chân trang, định nghĩa nội dung, nền, chèn liên kết

Use Bootstrap Card trong project

Để sử dụng Bootstrap trong dự án của bạn, chỉ cần bao gồm CDN hoặc tải xuống từ trang getbootstrap. com. Mình sẽ demo một số đoạn mã HTML đơn giản, có sử dụng Bootstrap để minh họa các thành phần cơ bản của Card

1. Định nghĩa Style đơn giản cho Cards

Đây là những phần tử cơ bản nhất để tạo nên Card as after

    
    
        Card title
        Card subtitle
        This is a simple Card example
    

Khi tạo một thẻ đơn giản, chúng ta cần

• Tạo thẻ

  
      
      
          Card title
          Card subtitle
          This is a simple Card example
      
     
  

  4 có lớp là

  
      
      
          Card title
          Card subtitle
          This is a simple Card example
      
     
  

  5 làm thẻ bao ngoài
• Sử dụng lớp

  
      
      
          Card title
          Card subtitle
          This is a simple Card example
      
     
  

  6 với thẻ

  
      
      
          Card title
          Card subtitle
          This is a simple Card example
      
     
  

  7 để thêm ảnh vào phần đầu của thẻ
• Thêm lớp

  
      
      
          Card title
          Card subtitle
          This is a simple Card example
      
     
  

  8 để định nghĩa phần thân
• Sử dụng

  
      
      
          Card title
          Card subtitle
          This is a simple Card example
      
     
  

  9 và

  
      
          
              
              
                  Card title
                  Card subtitle
                  This is a simple Card example
              
          
      
      
  

  0 để bổ sung tiêu đề và phụ đề
• Sử dụng

  
      
          
              
              
                  Card title
                  Card subtitle
                  This is a simple Card example
              
          
      
      
  

  1 với thẻ

  
      
          
              
              
                  Card title
                  Card subtitle
                  This is a simple Card example
              
          
      
      
  

  2 để bổ sung nội dung

Như các bạn đã thấy, Card đang hiển thị trên toàn bộ

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

4 bao nó

Nếu muốn lấy ảnh làm nền và hiển thị chữ trên ảnh, các bạn chỉ cần đổi lớp

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

8 thành

    
        
            
            
                Card title
                Card subtitle
                This is a simple Card example
            
        
    
    

5

Hoặc nếu muốn hiển thị thêm ảnh ở dưới tiêu đề thì bạn chỉ cần thêm một thẻ

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

7 với lớp

    
        
            
            
                Card title
                Card subtitle
                This is a simple Card example
            
        
    
    

7

2. Định nghĩa chiều rộng và chiều cao cho Thành phần thẻ Bootstrap

Mặc định Thẻ sẽ lấy tất cả chiều rộng có sẵn trong thẻ

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

4 bao chúng, chiều cao sẽ được điều chỉnh sao cho hiển thị phù hợp với nội dung của Thẻ. Tuy nhiên, bạn cũng có thể tự thiết lập chiều rộng của chúng bằng cách thêm kiểu

    
        
            
            
                Card title
                Card subtitle
                This is a simple Card example
            
        
    
    

9 hoặc

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

70 và thay đổi chiều dài bằng cách thêm kiểu

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

71. Như ví dụ dưới đây

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

Các bạn có để ý rằng mình sử dụng đơn vị của

    
        
            
            
                Card title
                Card subtitle
                This is a simple Card example
            
        
    
    

9 và

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

71 là

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

74 thay vì

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

75 không?

Thay vì sửa chiều rộng và chiều cao như thế nào, các bạn cũng có thể sử dụng

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

78, mình thì hay dùng cách này

    
        
            
            
                Card title
                Card subtitle
                This is a simple Card example
            
        
    
    

Với công việc định nghĩa 1 thẻ sẽ ứng với 3 cột như trên, 1 hàng mình sẽ có 4 thẻ

3. Định nghĩa Header và Footer Bootstrap Card Component

Các bạn chỉ cần thêm thẻ

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

4 với lớp

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

90 và

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

91

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

7

4. Thêm điều hướng

Một tính năng mới của Bootstrap Card Component là khả năng bổ sung các tab mẫu hoặc thuốc điều hướng vào tiêu đề. Để làm được điều này chúng ta sẽ bổ sung thẻ

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

92 với các lớp

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

93 và

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

94 vào

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

90

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

9

Tương tự chúng ta có thể bổ sung thuốc điều hướng bằng cách thay thế

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

93 bằng

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

97 và

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

94 bằng

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

99

5. Thêm liên kết

Chúng ta có thể dễ dàng thêm liên kết vào nội dung bằng cách thêm thẻ

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

10 và lớp

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

11

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

1

6. Sử dụng Căn chỉnh và Chuyển đổi văn bản

Chúng ta có thể căn chỉnh nội dung hiển thị trong thẻ bằng cách bổ sung thêm vào các lớp như.

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

12 [căn chỉnh văn sang trái],

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

13 [căn chỉnh văn sang phải],

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

14 [căn chỉnh văn sang trung tâm],

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

15 [các dòng có độ rộng bằng nhau] hay là

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

16 [ngăn không cho xuống dòng]

Chúng ta cũng có thể viết hoa, viết thường nội dung văn bản bằng cách thêm các lớp

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

17 [viết thường],

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

18 [viết hoa] hay

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

19 viết hoa chữ cái đầu tiên

7. Điều chỉnh Background, Foreground và Border Colors

Màu nền hoặc nền trước có thể được tùy chỉnh bằng cách sử dụng các tiện ích màu nền và văn bản Bootstrap [https. //getbootstrap. com/docs/4. 0/tiện ích/màu sắc/]. Để sử dụng các tiện ích viền của Bootstrap, chúng ta cần thiết lập màu viền cho thẻ

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

2

Đoạn mã này mình đã đổi màu nền của thẻ sang

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

20, chữ sang

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

21 và viền sang

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

22

Tạo Layouts với Bootstrap Card Component

Như các bạn đã biết, Card được sử dụng để tạo bố cục cho album ảnh, bài blog, sản phẩm thương mại điện tử. Có rất nhiều công ty lớn như Facebook, Google, Printest sử dụng nó

Thông thường, nếu bạn muốn tạo ra những bố cục đẹp mắt thì bạn cần phải có những kiến ​​thức chuyên sâu về HTML và CSS. Tuy nhiên, nhờ vào những tính năng mới của Bootstrap, chúng ta có thể nhanh chóng xây dựng các bố cục như vậy bằng cách đặt các Thẻ bên trong thẻ

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

4 bao gồm các lớp đặc biệt như

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

24,

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

25 và

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

26

1. Thẻ nhóm/lồng

Thẻ nhóm chính được hiển thị 1 nhóm Thẻ cùng kích thước. To doing the thing that it was used by thuộc tính

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

27, các thẻ sẽ được đặt trong thẻ

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

4 với lớp

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

24

2. bộ bài

Tương tự như ví dụ trên, các bạn chỉ cần thay lớp

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

24 thành

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

25. Với card-group, các card sẽ gắn liền với nhau, còn card-deck sẽ có thêm khoảng cách giữa các card

3. Cột thẻ

Cũng giống như Card group và Card deck, chúng ta cũng chỉ cần đặt thẻ vào trong thẻ

    
    
        Card title
        Card subtitle
        This is a simple Card example
    
   

4 với lớp

    
    
        Card title
        Card subtitle
        This is a simple Card example
    

3. Nó sẽ giúp ta tạo ra 1 layout theo kiểu Masonry layout. Ưu điểm của masonry layout là nó có thể hiển thị nhiều hình ảnh với kích thước khác nhau mà không tạo ra sự lộn ngược đối với người xem.

Kết luận

Tóm lại, với Bootstrap Card Component, các bạn đã có thể tạo ra một trang web hiện đại mà không cần phải đi quá sâu vào tìm hiểu CSS. Bạn cũng có rất nhiều lựa chọn để lựa chọn và tự tùy chỉnh theo ý thích của mình. Bootstrap vẫn làm 1 framework mạnh mẽ nhất dành cho tất cả mọi người