Bootstrap列表list-group-item与card 卡片

大部分基础列表组都是无序的。

要创建列表组，可以在 

 元素上添加 .list-group 类, 在 
•  元素上添加 .list-group-item 类:
  
  
   

  基础列表组

  
   

  
     
  • First item
  
     
  • Second item
  
     
  • Third item
  
   

  
  

  
  

  激活状态列表   

   

• Active item









.disabled 类用于设置禁用的列表项:

<li class="list-group-item disabled">Disabled itemli>







链接列表项

要创建一个链接的列表项，可以将

 替换 

 ，  替换 
• 。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类:

  <div class="list-group">

  <a href="#" class="list-group-item list-group-item-action">First itema>

  <a href="#" class="list-group-item list-group-item-action">Second itema>

  <a href="#" class="list-group-item list-group-item-action">Third itema>div>

  
  

  多种颜色列表项目的颜色可以通过以下列来设置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light:
  

  
  

   

  多种颜色列表项

  
   

  
     
  • 成功列表项
  
     
  • 次要列表项
  
     
  • 信息列表项
  
     
  • 警告列表项
  
     
  • 危险列表项
  
     
  • 主要列表项
  
     
  • 深灰色列表项
  
     
  • 浅色列表项
  
   

  
  

  
  

  
  

  
  

  ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  div class="container">
   

  简单的卡片

  
   
  
     

  简单的卡片

  
   
  
  




头部和底部




 

卡片头部和底部


 


   

头部


   

内容

 
   

底部


 













多种颜色卡片

Bootstrap 4 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。                              text-white用法：将卡片里部的字体变白




 

多种颜色卡片


 


   

Basic card


 


 

 


   

Primary card


 


 

 


   

Success card


 


 

 


   

Info card


 


 

 


   

Warning card


 


 

 


   

Danger card


 


 

 


   

Secondary card


 


 

 


   

Dark card


 


 

 


   

Light card


 










标题、文本和链接

我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link类用于给链接设置颜色。




 

标题、文本和链接


 


   


     

Card title


     

Some example text. Some example text.


      Card link
      Another link
   


 







典型的例子：


bootstrap中container垂直居中
 

图片卡片


 

图片在头部 (card-img-top):


 


  定义卡片card
   
  定义卡片图片在文字上方card-img-top
   


  定义卡片中的内容  card-body
     

John Doe


定义设置卡片的标题   card-title
     

Some example text some example text. John Doe is an architect and engineer


定义用于设置卡片正文的内容  card-text
      See Profile
定义设置卡片的链接btn btn priamry
   


 


 

  
 

图片在底部(card-img-bottom):


 


   


     

Jane Doe


     

Some example text some example text. Jane Doe is an architect and engineer


      See Profile