Bootstrap中如何使用Card卡片组件

2.1 卡片的页眉和页脚

页眉和页脚不是必要的，与其他内容相比，页眉和页脚文字颜色较浅，字体略小。另外还可以通过通用类来调整其对齐方式，灵活使用可以达到很多特殊的效果。

2.1.1 简单卡片

        通知
        
        中秋节放假通知
        下周中秋节放假7天，给大家乐活以下.........

        了解详情
        
        

2.1.2  使用引用用于名人名言

      
        
        名言
        
        
        
        
只有诗人同圣徒才会坚信，在沥青路面上辛勤浇水会培植出百合花来。
        威廉· 萨默赛特·毛姆的 《月亮和六便士》
        
        
        

2.1.3 页眉页脚一起使用

      
        
        名著推荐
        
        
        《红楼梦》
        
            《红楼梦》是一部具有世界影响力的人情小说作品，举世公认的中国古典小说巅峰之作，
        中国封建社会的百科全书，传统文化的集大成者。小说以贾、史、王、薛四大家族的兴衰为背景，
        以贾府的家庭琐事、闺阁闲情为脉络，以贾宝玉、林黛玉、薛宝钗的爱情婚姻故事为主线，
        刻画了以贾宝玉和金陵十二钗为中心的正邪两赋有情人的人性美和悲剧美。
        通过家族悲剧、女儿悲剧及主人公的人生悲剧，揭示出封建末世危机。
    

        马上阅读
        
        
        2 days ago
        
        

2.2 图像的使用

2.2.1 图像在顶部或在底部

图像通过类card-img-top或card-img-bottom，设置显示在卡片的顶部还是底部，下面是两个卡片，一个图片在上，一个图片在下。

  
    
    
    
    
    
    
  
  
    

      



      
        
        

        
软发布 Win11 
        
T
          微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        
        
Last updated 3 mins ago
        
        
        
        

        

        
飞利浦推出4K显示器
        
飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
        
        
Last updated 3 mins ago
        
        
        

      
     
  

2.2.2 图像作为卡片背景

将图片转换为卡片背景，并叠加卡片的文字。根据图片，你可以选择是否需要额外的样式或通用类别。

  
    
    
    
    
    
    
  
  
    

      



      
        
        
        
微软发布 Win11 
        

          微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        
        
Last updated 3 mins ago
        
        
        

      
     
  

注意，我们通过bg-dark给卡片添加了一个黑色背景，text-white设置字体为白色，在card-body中设置card-img-overlay为背景色。也可以不要card-body，直接用card-img-overlay"如上。

2.2.3 图像在左侧

结合使用网格以及通用类，可以让卡片以响应式的方法呈现水平状态。在下面的示例中，我们使用g-0移除网格的间隙，并使用col-md-*类别让卡片在md断点之后呈现水平。根据卡片内容，将可能会需要一些额外的调整。

        
        
        
        
        
        
          春夏秋冬皆自然
          
            春夏秋冬皆自然,明月清风共我闲,有春风拂面的温柔,也有美好故事的发生,又一个春天如约而至,温柔的朝阳里布谷鸟声声呼唤,愿普天同安康,迎接春天到来的简...
          

          Last updated 3 mins ago

        
        
        
        

当然，你最好设置一下图片宽度，否则容易发生溢出。

2.3 卡片的主体

2.3.1 标题和副标题

卡片的构造块是.card-body。当你需要卡片中的填充部分时就使用它。

• 在标签中添加card-title以使用卡片标题。

• 在标签中加入card-subtitle以使用副标题。

如果card-title以及card-subtitle元件被放在card-body里面，它们将会对齐良好。

2.3.2 文本内容和链接

文本内容可以放置任何html元素和bootstrap的组件，如按钮等，在a标签中加入card-link并使连接彼此相邻。

      
        
        微软发布 Win11
        科技动态
        
          微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        

        了解详情
        下载试用
        
        

2.4 列表群組

列表群组使用非常简单

        
        晚会活动
        
        
        歌舞
        男生独唱
        小品
        
        

2.5 混合样式

混合并搭配多个内容形式，用来创建你所需要的卡片。以下示例将图片样式、块、文字样式以及列表群组全部包装在一个固定宽度的卡片中。

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



An item
A second item
A third item


Card link
Another link

3 卡片的排版及宽度

卡片预设没有特定的起始width，除非另有声明，否则它们的宽度将是100%。

3.1 使用网格

使用网格，根据需要在列和行中包装卡片。需要注意的是卡片默认是每个卡片一行的，要想一行中显示多个卡片，必须把几个卡片放在一个div容器中且每行中的卡片总宽度不能超过屏幕宽度。网格中的row-cols-*同样适用卡片。另外卡片默认是宽度相同，高度根据内容自动调整的，但是如果卡片拥有页脚，则高度会自动调整到相同。 下面给出一个完整例子。

  
    
    
    
    
    
    
  
  
    

      



      

        

        

        

          
微软发布 Win11
          

            软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
          
          了解详情
        
        
        

        

        

        

          
飞利浦推出4K显示器
          

            飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
          
          了解详情
        
        
        
        
      
     
  

3.2 使用通用类

使用可调整宽度大小的通用类来快速设置卡片的宽度。

使用网格

使用网格，根据需要在列和行中包装卡片。

  
    
    
    
    
    
    
  
  
    

      



      
        

            
微软发布 Win11
            

              软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
            
            了解详情
        
        
        
        
        

            
飞利浦推出4K显示器
            

              飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
            
            了解详情
        
        
       

      
     
  

需要注意的是，这里的宽度值必须是预定的，预设包含25%，50%，75%，100%和auto，而不是随意写的。 详情见 Bootstrap5中文手册 通用类 尺寸（Sizing）一节。

3.3 使用自定义CSS

在样式表中使用自定义的CSS或使用行内样式设置宽度，这种方式比较灵活，可以使用rem、px、百分比。

  
    
    
    
    
    
    
  
  
    

      



      
        

            
微软发布 Win11
            

              软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
            
            了解详情
        
        
        
        
        

            
飞利浦推出4K显示器
            

              飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
            
            了解详情
        
        
       

      
     
  

3.4 卡片中的文本对齐

可以透过文字对齐类别更改任何卡片的整体或特定部分的文本对齐方式。默认全部是局左（text-start）对齐的，可以用card-text、text-end通用类使之居中对齐或居右对齐。通用类可用在card容器，也可以单独以用在标题、页眉页脚、主体等任意部分，如果同时使用，则单独的覆盖整体的。

  
    
    
    
    
    
    
  
  
    

      



      

        

        
        

                整体居中
        
    
        

          
微软发布 Win11
          

            软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
          
          了解详情
        
        
        

        

            

            
                    页眉、标题居中
            
    
            

              微软发布 Win11
              

                软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
              
              了解详情
            
            
            
            
            

                
                

                        整体居中中标题居左
                
    
                

                  微软发布 Win11
                  

                    软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
                  
                  了解详情
                
                
                
        
        
      
     
  

4 带选项卡的卡片

使用Bootstrap的导航组件在卡片的页首（或块）添加一些导航，获得选项卡效果。

  
    
    
    
    
    
    
  
  
    

      



      
        

        
        

          热门新闻
        
        

          国内新闻
        
        

          国外新闻
        
        
        
           

                
                
热点新闻
                
热点新闻
                Go somewhere
                
                
                
                        
国内新闻
                        
国内热点新闻
                        Go somewhere
                
    
            
        

      
     
  

对于上面的代码，只需经过两处替换，就可以换为胶囊导航

替换为

所有的

data-bs-toggle="tab"

替换为

data-bs-toggle="pill"

5 卡片样式

卡片包含许多用来自定义背景、边框、颜色的选项。

5.1 背景和颜色

使用文字和背景通用类别来改变卡片的外观。

  
    
    
    
    
    
    
  
  
    
      



        
      
        Header
        
        Primary
        颜色直接作用于card容器上

        
        
        
        Header
        
        Secondary
        颜色直接作用于card容器上

        
        
        
        Header
        
        Success
        颜色直接作用于card容器上

        
        
        
        Header
        
        Danger
        颜色直接作用于card容器上

        
      
    
        
        
        
        Header
        
        Warning
        颜色直接作用于card容器上

        
        
        
        Header
        
        Info
        颜色直接作用于card容器上

        
        
        
        Header
        
        Light
        颜色直接作用于card容器上

        
        
        
        Header
        
        Dark
        颜色直接作用于card容器上

        
        
      
      
     
  

5.2 边框和颜色

      
        页眉
        
        Primary 卡片标题
        card-text 卡片文字内容

        
        
        
        页眉
        
        Secondary 卡片标题
        card-text 卡片文字内容

        
        
        
        页眉
        
        Success 卡片标题
        card-text 卡片文字内容

        
        
        
        页眉
        
        Danger 卡片标题
        card-text 卡片文字内容

        
        
        
    
    
        
            页眉
            
            Warning 卡片标题
            card-text 卡片文字内容

            
            
            
            页眉
            
            Info 卡片标题
            card-text 卡片文字内容

            
            
            
            页眉
            
            Light 卡片标题
            card-text 卡片文字内容

            
            
            
            页眉
            
            Dark 卡片标题
            card-text 卡片文字内容

            
            
    

限于篇幅，仅展示前面一部分边框图片。

5.2 Mixin通用类

也可以依照需求更改卡片页首、页尾的边框，并能使用bg-transparent来移除它们的background-color。

 
        页眉
        
        Success卡片标题
        
            注意card-body使用了 text-success"，页脚使用了bg-transparent border-success
        

        
        页脚
        

“Bootstrap中如何使用Card卡片组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

行业新闻 建站学堂 常见问题

联系我们

公司地址 人才招聘

成都 达州



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：达州市南岸区弹子石腾龙大道58号2栋21-6

友情链接： 成都网站制作   成都网站设计   橡塑保温材料   网络营销公司   攀枝花网站建设   自贡托管服务器   德阳定制网站建设   网站推广   成都企业网站定制   成都微信开发   

版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14