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"> &times;</button>
3     成功
4 </div>
5 <div class="alert alert-info alert-dismissable">
6     <button class="close" type="button" data-dismiss="alert"> &times;</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"> &times;</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"> &times;</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 警告进度条列表组的主要内容,如果未能解决你的问题,请参考以下文章

,进度条

bootstrap中单个按钮按钮组徽章进度条

Bootstrap

Bootstrap-进度条

BootStrap有用代码片段(持续总结)

如何使用 asynctask 执行数据库操作来实现进度条?