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

亦凉 2021-09-15 01:44 396阅读 0赞

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

要创建列表组，可以在 **<ul>** 元素上添加 **.list-group** 类, 在 **<li>** 元素上添加 **.list-group-item** 类:

<div class="container">  
  <h2>基础列表组</h2>  
  <ul class="list-group">  
    <li class="list-group-item">First item</li>  
    <li class="list-group-item">Second item</li>  
    <li class="list-group-item">Third item</li>  
  </ul>

</div>

![Image 1][]

激活状态列表

<li class="list-group-item active">Active item</li>

![Image 1][]

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

<liclass="list-group-item disabled">Disabled item</li>

![Image 1][]

## 链接列表项 ##

要创建一个链接的列表项，可以将**<div>** 替换 **<ul>** ， **<a>** 替换 **<li>**。如果你想鼠标悬停显示灰色背景就添加**.list-group-item-action** 类:

<divclass="list-group">

<ahref="\#"class="list-group-item list-group-item-action">First item</a>

<ahref="\#"class="list-group-item list-group-item-action">Second item</a>

<ahref="\#"class="list-group-item list-group-item-action">Third item</a></div>

![Image 1][]

## 多种颜色列表项目的颜色可以通过以下列来设置：** .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**:    ##

<h2>多种颜色列表项</h2>  
  <ul class="list-group">  
    <li class="list-group-item list-group-item-success">成功列表项</li>  
    <li class="list-group-item list-group-item-secondary">次要列表项</li>  
    <li class="list-group-item list-group-item-info">信息列表项</li>  
    <li class="list-group-item list-group-item-warning">警告列表项</li>  
    <li class="list-group-item list-group-item-danger">危险列表项</li>  
    <li class="list-group-item list-group-item-primary">主要列表项</li>  
    <li class="list-group-item list-group-item-dark">深灰色列表项</li>  
    <li class="list-group-item list-group-item-light">浅色列表项</li>  
  </ul>

</div>

![Image 1][]

\----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

div class="container">  
  <h2>简单的卡片</h2>  
  <div class="card">  
    <div class="card-body">简单的卡片</div>  
  </div>

</div>

![Image 1][]

## 头部和底部 ##

<div class="container">  
  <h2>卡片头部和底部</h2>  
  <div class="card">  
    <div class="card-header">头部</div>  
    <div class="card-body">内容</div>   
    <div class="card-footer">底部</div>  
  </div>

</div>

![Image 1][]

##     ##

## 多种颜色卡片 ##

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

<div class="container">  
  <h2>多种颜色卡片</h2>  
  <div class="card">  
    <div class="card-body">Basic card</div>  
  </div>  
  <br>  
  <div class="card bg-primary text-white">  
    <div class="card-body">Primary card</div>  
  </div>  
  <br>  
  <div class="card bg-success text-white">  
    <div class="card-body">Success card</div>  
  </div>  
  <br>  
  <div class="card bg-info text-white">  
    <div class="card-body">Info card</div>  
  </div>  
  <br>  
  <div class="card bg-warning text-white">  
    <div class="card-body">Warning card</div>  
  </div>  
  <br>  
  <div class="card bg-danger text-white">  
    <div class="card-body">Danger card</div>  
  </div>  
  <br>  
  <div class="card bg-secondary text-white">  
    <div class="card-body">Secondary card</div>  
  </div>  
  <br>  
  <div class="card bg-dark text-white">  
    <div class="card-body">Dark card</div>  
  </div>  
  <br>  
  <div class="card bg-light text-dark">  
    <div class="card-body">Light card</div>  
  </div>

</div>

![Image 1][]

## 标题、文本和链接 ##

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

<div class="container">  
  <h2>标题、文本和链接</h2>  
  <div class="card">  
    <div class="card-body">  
      <h4 class="card-title">Card title</h4>  
      <p class="card-text">Some example text. Some example text.</p>  
      <a href="\#" class="card-link">Card link</a>  
      <a href="\#" class="card-link">Another link</a>  
    </div>  
  </div>

</div>

![Image 1][]

典型的例子：<div class="container">  
bootstrap中container垂直居中  
  <h2>图片卡片</h2>  
  <p>图片在头部 (card-img-top):</p>  
  <div class="card" style="width:400px">  
  定义卡片card  
    <img class="card-img-top" src="http://static.runoob.com/images/mix/img\_avatar.png" alt="Card image" style="width:100%">  
  定义卡片图片在文字上方card-img-top  
    <div class="card-body">  
  定义卡片中的内容  card-body  
      <h4 class="card-title">John Doe</h4>  
定义设置卡片的标题   card-title  
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>  
定义用于设置卡片正文的内容  card-text  
      <a href="\#" class="btn btn-primary">See Profile</a>  
定义设置卡片的链接btn btn priamry  
    </div>  
  </div>  
  <br>  
    
  <p>图片在底部(card-img-bottom):</p>  
  <div class="card" style="width:400px">  
    <div class="card-body">  
      <h4 class="card-title">Jane Doe</h4>  
      <p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>  
      <a href="\#" class="btn btn-primary">See Profile</a>  
    </div>  
    <img class="card-img-bottom" src="http://static.runoob.com/images/mix/img\_avatar.png" alt="Card image" style="width:100%">  
  </div>

</div>

![Image 1][]

[Image 1]: