Bootstrap 警告进度条列表组
Posted 不重名
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap 警告进度条列表组相关的知识，希望对你有一定的参考价值。
摘要：该部分包括警告、进度条、列表组、面板等部分。
1.警告（alert）
1.1 基本的警告（.alert）
警告的基类是 .alert 。和其他样式类一块使用。例如: .alert-success、.alert-info、.alert-danger、.alert-warning.代码示例：
1 <div class="alert alert-success">成功</div> 2 <div class="alert alert-info">信息，请核对信息</div> 3 <div class="alert alert-warning">警告，停止操作</div> 4 <div class="alert alert-danger">发现错误，请更改</div>
显示结果如下:
1.2 可取消的警告框（.alert-dismissable）
在<div>中添加类 .alert-dismissable，并在其中添加取消按钮即可。代码示例：
1 <div class="alert alert-success alert-dismissable"> 2 <button class="close" type="button" data-dismiss="alert"> ×</button> 3 成功 4 </div> 5 <div class="alert alert-info alert-dismissable"> 6 <button class="close" type="button" data-dismiss="alert"> ×</button> 7 信息，请核对信息 8 </div>
显示如下，点击右侧的×即可取消该警告：
其中，一定要有带有data-dismiss="alert" 属性的按钮元素。
1.3 带有链接的警告（alert-link）
在带有基类 .alert 和样式类 （四个中的一个）的<div>元素中，添加锚元素，并且为该锚元素添加实体类 .alert-link 来提供匹配颜色的链接。代码示例：
1 <div class="alert alert-success alert-dismissable"> 2 <button class="close" type="button" data-dismiss="alert"> ×</button> 3 <a href="#" class="alert-link" >成功啦！</a> 4 </div> 5 <div class="alert alert-info alert-dismissable"> 6 <button class="close" type="button" data-dismiss="alert"> ×</button> 7 <a href="#" class="alert-link" >信息，请核对信息</a> 8 </div>
显示结果，鼠标悬停在链接上回出现下划线：
2.进度条（progress）
2.1 基本的进度条（progress-bar）
进度条整体包括两个部分: 进度条所在的位置 和 显示的文字（可省略）。代码示例：
1 <div class="progress"> 2 <div class="progress-bar" role="progressbar" aria-valuenow="60" 3 aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 4 <span>60%</span> 5 </div> 6 </div>
其中，aria-valuenow="60"表示当前进度条的进度是60%；aria-valuemin="0"表示进度条的最小值是0；aria-valuemax="100"表示进度条的最大值是100%；
显示如下：
2.2 进度条的样式（progress-bar-* : success、info、warning、danger）
为了代码看起来简洁一些，一下代码省略aria-value*部分内容，不影响进度条的显示。四种样式的进度条代码示例:
1 <div class="progress"> 2 <div class="progress-bar progress-bar-success" style="width:100%"> 3 <span>100%</span> 4 </div> 5 </div> 6 <div class="progress"> 7 <span>50%</span> 8 <div class="progress-bar progress-bar-info" style="width:50%"></div> 9 </div> 10 <div class="progress"> 11 <span>30%</span> 12 <div class="progress-bar progress-bar-warning" style="width:30%"></div> 13 </div> 14 <div class="progress"> 15 <span>10%</span> 16 <div class="progress-bar progress-bar-danger" style="width:10%"></div> 17 </div>
显示结果如下：
2.3 带条纹的进度条（progress-striped）
在类 progress所在的容器中添加类 progress-striped.代码示例：
<div class="progress progress-striped"> <span>50%</span> <div class="progress-bar progress-bar-info" style="width:50%"></div> </div>
结果显示如下：
2.4 动画效果（active）
在上述的带有条纹的进度条中添加类 active，即可得到条纹持续滚动的动态进度条。代码示例：
1 <div class="progress progress-striped active"> 2 <div class="progress-bar progress-bar-success" style="width:100%"> 3 <span>100%</span> 4 </div> 5 </div>
由于图片显示不出动态效果，读者可自行运行代码，查看效果。
2.5 堆叠的进度条
多个进度条放在同一个带有类progress的容器中，就会产生堆叠的进度条，代码示例：
1 <div class="progress progress-striped active"> 2 <div class="progress-bar progress-bar-success" style="width:50%"> 3 <span>50%</span> 4 </div> 5 <div class="progress-bar progress-bar-info" style="width:20%"> 6 <span>20%</span> 7 </div> 8 <div class="progress-bar progress-bar-warning" style="width:30%"> 9 <span>30%</span> 10 </div> 11 </div>
其中，在同一个progress的容器中，进度条的进度和要不大于100%，否则无法正常显示。
上述代码显示结果如下，其中的条纹会持续滚动：
3.列表组（list-group）
3.1 基本的列表组
列表组是把复杂的内容或者自定义的内容用列表的形式展现出来。列表组的基本结构如下，带有类.list-group的无序列表，列表项使用类.list-group-item来设置样式：
<ul class="list-group"> <li class="list-group-item">相册</li> <li class="list-group-item">收藏</li> <li class="list-group-item">钱包</li> <li class="list-group-item">表情</li> <li class="list-group-item">设置</li> <li class="list-group-item">版本</li> </ul>
显示结果如下:
3.2 带徽章的列表组（badge）
可以向任意的列表选项添加徽章组件，徽章组件会自动定位到列表项的右边。代码如下:
1 <ul class="list-group"> 2 <li class="list-group-item">相册</li> 3 <li class="list-group-item">收藏</li> 4 <li class="list-group-item">钱包</li> 5 <li class="list-group-item">表情</li> 6 <li class="list-group-item"> 7 设置<span class="badge">新</span> 8 </li> 9 <li class="list-group-item"> 10 版本<span class="badge">新</span> 11 </li> 12 </ul>
显示结果如下：
3.3 向列表组添加链接
代码格式：
1 <ul class="list-group"> 2 <a href="#" class="list-group-item active">相册</a> 3 <a href="#" class="list-group-item">收藏</a> 4 <a href="#" class="list-group-item">钱包</a> 5 <a href="#" class="list-group-item">表情</a> 6 <a href="#" class="list-group-item">设置</a> 7 <a href="#" class="list-group-item"> 8 版本<span class="badge">新</span> 9 </a> 10 </ul>
显示结果：
3.4 想列表组添加自定义内容
代码示例（借用菜鸟教程中的示例）：
1 <div class="list-group"> 2 <a href="#" class="list-group-item active"> 3 <h4 class="list-group-item-heading"> 4 入门网站包 5 </h4> 6 </a> 7 <a href="#" class="list-group-item"> 8 <h4 class="list-group-item-heading"> 9 免费域名注册 10 </h4> 11 <p class="list-group-item-text"> 12 您将通过网页进行免费域名注册。 13 </p> 14 </a> 15 <a href="#" class="list-group-item"> 16 <h4 class="list-group-item-heading"> 17 24*7 支持 18 </h4> 19 <p class="list-group-item-text"> 20 我们提供 24*7 支持。 21 </p> 22 </a> 23 </div> 24 <div class="list-group"> 25 <a href="#" class="list-group-item active"> 26 <h4 class="list-group-item-heading"> 27 商务网站包 28 </h4> 29 </a> 30 <a href="#" class="list-group-item"> 31 <h4 class="list-group-item-heading"> 32 免费域名注册 33 </h4> 34 <p class="list-group-item-text"> 35 您将通过网页进行免费域名注册。 36 </p> 37 </a> 38 <a href="#" class="list-group-item"> 39 <h4 class="list-group-item-heading">24*7 支持</h4> 40 <p class="list-group-item-text">我们提供 24*7 支持。</p> 41 </a> 42 </div>
显示结果：
4.面板（panel）
4.1 基本的面板格式
完整的面板格式包括：面板的头（标题）、身体（主题内容）和脚（脚注，存放副文本）。另外脚注不会从带语境色彩的面板中继承颜色和边框。
其中第3行的panel-title是为了添加带有预定义样式的标题（如果不需要该部分可以省略），比如<h1>~<h6>
1 <div class="panel panel-default"> 2 <div class="panel-heading"> 3 <h4 class="panel-title">面板头部的标题</h3> 4 </div> 5 <div class="panel-body"> 6 面板的主体部分<br> 7 面板的主体部分<br> 8 面板的主体部分<br> 9 面板的主体部分 10 </div> 11 <div class="panel-footer"> 12 面板得脚注部分 13 </div> 14 </div>
结果显示如下：
4.2 带语境色彩的面板（panel-* primary\\success\\info\\warning\\danger）
把4.1中程序第1行中的panel-default换成 panel-primary、panel-success、panel-info、panel-warning、panel-danger中的任意一个，可以得到一下结果。
注意：脚注不会从带语境色彩的面板中继承颜色和边框！
显示结果如下：
4.3 带表格的面板
代码示例，可以省略panel-body部分：
1 <div class="panel panel-info"> 2 <div class="panel-heading"> 3 不带title的标题 panel-info 4 </div> 5 <div class="panel-body"> 6 带表格的面板 7 </div> 8 <table class="table"> 9 <th>姓名</th> 10 <th>年龄</th> 11 <tr> 12 <td>张三</td> 13 <td>20</td> 14 </tr> 15 <tr> 16 <td>李四</td> 17 <td>24</td> 18 </tr> 19 </table> 20 </div>
显示结果如下：
4.4 带列表组的面板
1 <div class="panel panel-default"> 2 <div class="panel-heading">面板标题</div> 3 <div class="panel-body"> 4 <p>这是一个基本的面板内容。这是一个基本的面板内容。 5 这是一个基本的面板内容。这是一个基本的面板内容。 6 </p> 7 </div> 以上是关于Bootstrap 警告进度条列表组的主要内容，如果未能解决你的问题，请参考以下文章