3.8Bootstrap学习组件篇之进度条、媒体对象、列表组、面板

素颜马尾好姑娘i 2022-08-27 03:50 208阅读 0赞

***1、进度条***

提供工作或动作的实时反馈，只用简单且灵活的进度条。

#### 跨浏览器兼容性 ####

进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持animation属性

### 基本案例 ###

默认的进度条。

<divclass="progress">  <divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width: 60%;">  <spanclass="sr-only"> 60% Complete </span>  </div>  </div>

### 有意义的替换 ###

为了一致的样式，进度条使用与按钮和警告框相同的类。

<divclass="progress">  <divclass="progress-bar progress-bar-success"role="progressbar"aria-valuenow="40"aria-valuemin="0"aria-valuemax="100"style="width: 40%">  <spanclass="sr-only"> 40% Complete (success) </span>  </div>  </div>  <divclass="progress">  <divclass="progress-bar progress-bar-info"role="progressbar"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"style="width: 20%">  <spanclass="sr-only"> 20% Complete </span>  </div>  </div>  <divclass="progress">  <divclass="progress-bar progress-bar-warning"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width: 60%">  <spanclass="sr-only"> 60% Complete (warning) </span>  </div>  </div>  <divclass="progress">  <divclass="progress-bar progress-bar-danger"role="progressbar"aria-valuenow="80"aria-valuemin="0"aria-valuemax="100"style="width: 80%">  <spanclass="sr-only"> 80% Complete </span>  </div>  </div>

### 条纹效果 ###

用一个渐变可以创建条纹效果，在IE8中不可用。

<divclass="progress progress-striped">  <divclass="progress-bar progress-bar-success"role="progressbar"aria-valuenow="40"aria-valuemin="0"aria-valuemax="100"style="width: 40%">  <spanclass="sr-only"> 40% Complete (success) </span>  </div>  </div>  <divclass="progress progress-striped">  <divclass="progress-bar progress-bar-info"role="progressbar"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"style="width: 20%">  <spanclass="sr-only"> 20% Complete </span>  </div>  </div>  <divclass="progress progress-striped">  <divclass="progress-bar progress-bar-warning"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width: 60%">  <spanclass="sr-only"> 60% Complete (warning) </span>  </div>  </div>  <divclass="progress progress-striped">  <divclass="progress-bar progress-bar-danger"role="progressbar"aria-valuenow="80"aria-valuemin="0"aria-valuemax="100"style="width: 80%">  <spanclass="sr-only"> 80% Complete (danger) </span>  </div>  </div>

### 运动效果 ###

给`.progress-striped`加上`.active`使它由右向左运动。在IE的所有版本不可用。

**<divclass="progress progress-striped active"><divclass="progress-bar"role="progressbar"aria-valuenow="45"aria-valuemin="0"aria-valuemax="100"style="width: 45%"><spanclass="sr-only">45% Complete</span></div></div>**

### 堆叠效果 ###

把多个进度条放入同一个`.progress`，使它们堆叠。

<divclass="progress">  <divclass="progress-bar progress-bar-success"style="width: 35%">  <spanclass="sr-only"> 35% Complete (success) </span>  </div>  <divclass="progress-bar progress-bar-warning"style="width: 20%">  <spanclass="sr-only"> 20% Complete (warning) </span>  </div>  <divclass="progress-bar progress-bar-danger"style="width: 10%">  <spanclass="sr-only"> 10% Complete (danger) </span>  </div>  </div>

***2、媒体对象***

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右对齐的图片（就像blog内容或Tweets等）。

### 默认媒体 ###

默认的媒体允许在一个内容块的左边或右边浮动一个媒体对象（图像，视频，音频）

代码：

<div class="media">
    			<a href="#" class="pull-left">
    			<img src="http://placehold.it/64" alt="" class="media-object" />
    			</a>
    			<div class="media-body">
    				<h4 class="media-heading">Nested media heading</h4>
    				<p>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus 
    viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    				</p>
    			</div>
    		 </div>

![11055349-cb258b0c9fee44af8897e0f1a115180e.png][]

### 媒体列表 ###

用一点点额外的标记，就能在列表内使用媒体（对评论或文章列表很有用）。

![ExpandedBlockStart.gif][]

![复制代码][copycode.gif]

<ul class="media-list">
      <li class="media">
        <a class="pull-left" href="#">
          <img class="media-object" src="http://placehold.it/64x64" alt="...">
        </a>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
          <ul class="media-list">
              <li class="media">
                <a class="pull-left" href="#">
                  <img class="media-object" src="http://placehold.it/64x64" alt="...">
                </a>
                <div class="media-body">
                  <h4 class="media-heading">Media heading</h4>
                  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                  <ul class="media-list">
                      <li class="media">
                        <a class="pull-left" href="#">
                          <img class="media-object" src="http://placehold.it/64x64" alt="...">
                        </a>
                        <div class="media-body">
                          <h4 class="media-heading">Media heading</h4>
                          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                        </div>
                      </li>
                    </ul>
                </div>
              </li>
              <li class="media">
                        <a class="pull-left" href="#">
                          <img class="media-object" src="http://placehold.it/64x64" alt="...">
                        </a>
                        <div class="media-body">
                          <h4 class="media-heading">Media heading</h4>
                          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                        </div>
                      </li>
          </ul>
        </div>
      </li>
    </ul>

![复制代码][copycode.gif]

![11055952-9ab4b7b733204842a2c28d2121489b9d.png][]

***3、列表组***

### 基本案例 ###

最简单的列表只是无顺序列表，列表条目和正确的类。Build upon it with the options that follow, or your own CSS as needed.

***代码：***

预览： ![Center][]

### 徽章 ###

给列表组加入徽章，它会自动地放在右面。

预览：

![Center 1][]

### 链接条目 ###

用`<a>`标签而不是`<li>`标签（也就是说父元素是`<div>`而不是`<ul>`）。没必要给每个元素都加一个父元素。

代码：

预览：

**![Center 2][]**

### 定制内容 ###

在里面可以加几乎任何HTML，甚至是像下面的带链接的列表组。

代码

预览

![Center 3][]

***4、面板***

虽然不总是必须，但是某些时候你可能需要将某些内容放到一个盒子里。对于这种情况，可以试试面板组件。

### 基本案例 ###

默认的`.panel`所做的只是提供基本的边界和内部，来包含内容。

代码：

<div class="panel panel-default">
    			<div class="panel-body">
    				基础面板示例
    			</div>
    		</div>

预览：

![Center 4][]

带标题的面板

用`.panel-heading`可以简单地加入一个标题容器。您也可以用`<h1>`\-`<h6>`和`.panel-title`类加入预定义样式的标题。

代码：

<h1 class="page-header">标题的面板</h1>
    		 <div class="panel panel-default">
    			<div class="panel-heading">
    			面板标题
    			</div>
    			<div class="panel-body">
    			面板内容
    			</div>
    		 </div>

预览： ![Center 5][]

带脚注的面板

预览：

![Center 6][]

### 有意义的替换 ###

像其它组件一样，可以简单地通过加入有意义的状态类，给特定的内容使用更有意义的面版。

代码

预览

![Center 7][]

### 带表格的面版 ###

为了无缝的设计，在面版中加入`.table`。如果有`.panel-body`，就在表格的上方加上一个用于分割的边界。

代码：

<h1 class="page-header">带表格的面板</h1>
    		 <div class="panel panel-default">
    			<div class="panel-heading">
    				面板标题
    			</div>
    			<div class="panel-body">
    				<p>这是body区域，有panel-body时，会与table间加分割</p>
    			</div>
    			<table class="table">
    				<thead>
    					<tr><td>姓名</td><td>班级</td><td>年龄</td></tr>
    				</thead>
    				<tbody>
    					<tr><td>张三</td><td>高二</td><td>12</td></tr>
    					<tr><td>张三</td><td>高二</td><td>12</td></tr>
    					<tr><td>张三</td><td>高二</td><td>12</td></tr>
    					<tr><td>张三</td><td>高二</td><td>12</td></tr>
    				</tbody>
    			</table>
    		 </div>

预览：

![Center 8][]

如果没有`.panel-body`，面版标题会和表格连接起来，没有空隙。

### 带列表组的面版 ###

可以简单地在任何面版中使用最大宽度的[列表组][Link 1]。

代码：

<h1 class="page-header">带列表的面板</h1>
    		 <div class="panel panel-default">
    			<div class="panel-heading">面板标题</div>
    			<div class="panel-body">
    				<p>以下是列表</p>
    			</div>
    			<ul class="list-group">
    				<li class="list-group-item">列表1</li>
    				<li class="list-group-item">列表2</li>
    				<li class="list-group-item">列表2</li>
    				<li class="list-group-item">列表2</li>
    			</ul>
    		 </div>

预览：

![Center 9][]

同样的，如果没有panel-body,那么两者完美结合，没有空隙

[11055349-cb258b0c9fee44af8897e0f1a115180e.png]: /images/20220824/a9b1da3595cc49108e6a695a202f9b3c.png
[ExpandedBlockStart.gif]: /images/20220824/6c825eece9bb4b33a7237aaad80a3648.png
[copycode.gif]: /images/20220824/8f069f601624425ea7770e3b29d1b625.png
[11055952-9ab4b7b733204842a2c28d2121489b9d.png]: /images/20220824/c7493be8e7714edd928a619dcdbf43b0.png
[Center]: /images/20220824/bae2e491e5e94277afecdde2eb20867b.png
[Center 1]: /images/20220824/a62670c61e45497199786048e9e5f97b.png
[Center 2]: /images/20220824/cbf993884d7d4a94bb4e5b82b37b020e.png
[Center 3]: /images/20220824/3dcac1633a7647c8a7a832e7f45297f2.png
[Center 4]: /images/20220824/789ed205cb804818b72b739e10e9b778.png
[Center 5]: /images/20220824/c11c4d3e32504e4e9bee34b0c40a13c2.png
[Center 6]: /images/20220824/201f04a4b4594462807dbd4aa4306ff4.png
[Center 7]: /images/20220824/4a10cc030d6d4d2089ffc6cb97378462.png
[Center 8]: /images/20220824/07545c349fea4706bd152f026488aaeb.png
[Link 1]: http://v3.bootcss.com/components/#list-group
[Center 9]: /images/20220824/0c05afbad32c43379340a125f56f9342.png