首页 > 代码库 > Bootstrap 警告、进度条、列表组
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>
显示结果:
Bootstrap 警告、进度条、列表组