摘要：该部分包括警告、进度条、列表组、面板等部分。

1.警告（alert）

1.1 基本的警告（.alert）

警告的基类是 .alert 。和其他样式类一块使用。例如: .alert-success、.alert-info、.alert-danger、.alert-warning.代码示例：

 <div class="alert alert-success">成功</div>

 <div class="alert alert-info">信息，请核对信息</div>

 <div class="alert alert-warning">警告，停止操作</div>

 <div class="alert alert-danger">发现错误，请更改</div>

显示结果如下:

1.2 可取消的警告框（.alert-dismissable）

在<div>中添加类 .alert-dismissable，并在其中添加取消按钮即可。代码示例：

 <div class="alert alert-success alert-dismissable">

     <button class="close" type="button" data-dismiss="alert"> &times;</button>

     成功

 </div>

 <div class="alert alert-info alert-dismissable">

     <button class="close" type="button" data-dismiss="alert"> &times;</button>

     信息，请核对信息

 </div>

显示如下，点击右侧的×即可取消该警告：

其中，一定要有带有data-dismiss="alert" 属性的按钮元素。

1.3 带有链接的警告（alert-link）

在带有基类 .alert 和样式类 （四个中的一个）的<div>元素中，添加锚元素，并且为该锚元素添加实体类 .alert-link 来提供匹配颜色的链接。代码示例：

 <div class="alert alert-success alert-dismissable">

     <button class="close" type="button" data-dismiss="alert"> &times;</button>

     <a href="#" class="alert-link" >成功啦！</a>

 </div>

 <div class="alert alert-info alert-dismissable">

     <button class="close" type="button" data-dismiss="alert"> &times;</button>

     <a href="#" class="alert-link" >信息，请核对信息</a>

 </div>

显示结果，鼠标悬停在链接上回出现下划线：

2.进度条（progress）

2.1 基本的进度条（progress-bar）

进度条整体包括两个部分: 进度条所在的位置  和  显示的文字（可省略）。代码示例：

 <div class="progress">

     <div class="progress-bar" role="progressbar" aria-valuenow="60"

         aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

         <span>60%</span>

     </div>

 </div>

其中，aria-valuenow="60"表示当前进度条的进度是60%；aria-valuemin="0"表示进度条的最小值是0；aria-valuemax="100"表示进度条的最大值是100%；

显示如下：

2.2 进度条的样式（progress-bar-* : success、info、warning、danger）

为了代码看起来简洁一些，一下代码省略aria-value*部分内容，不影响进度条的显示。四种样式的进度条代码示例:

 <div class="progress">

     <div class="progress-bar progress-bar-success" style="width:100%">

         <span>100%</span>

     </div>

 </div>

 <div class="progress">

     <span>50%</span>

     <div class="progress-bar progress-bar-info" style="width:50%"></div>

 </div>

 <div class="progress">

     <span>30%</span>

     <div class="progress-bar progress-bar-warning" style="width:30%"></div>

 </div>

 <div class="progress">

     <span>10%</span>

     <div class="progress-bar progress-bar-danger" style="width:10%"></div>

 </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，即可得到条纹持续滚动的动态进度条。代码示例：

 <div class="progress progress-striped active">

     <div class="progress-bar progress-bar-success" style="width:100%">

         <span>100%</span>

     </div>

 </div>

由于图片显示不出动态效果，读者可自行运行代码，查看效果。

2.5  堆叠的进度条

多个进度条放在同一个带有类progress的容器中，就会产生堆叠的进度条，代码示例：

 <div class="progress progress-striped active">

     <div class="progress-bar progress-bar-success" style="width:50%">

         <span>50%</span>

     </div>

     <div class="progress-bar progress-bar-info" style="width:20%">

         <span>20%</span>

     </div>

     <div class="progress-bar progress-bar-warning" style="width:30%">

         <span>30%</span>

     </div>

 </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）

可以向任意的列表选项添加徽章组件，徽章组件会自动定位到列表项的右边。代码如下:

 <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">

         设置<span class="badge">新</span>

     </li>

     <li class="list-group-item">

         版本<span class="badge">新</span>

     </li>

 </ul>

显示结果如下：

3.3 向列表组添加链接

代码格式：

 <ul class="list-group">

     <a href="#" class="list-group-item active">相册</a>

     <a href="#" class="list-group-item">收藏</a>

     <a href="#" class="list-group-item">钱包</a>

     <a href="#" class="list-group-item">表情</a>

     <a href="#" class="list-group-item">设置</a>

     <a href="#" class="list-group-item">

         版本<span class="badge">新</span>

     </a>

 </ul>

显示结果：

3.4 想列表组添加自定义内容

代码示例（借用菜鸟教程中的示例）：

 <div class="list-group">

     <a href="#" class="list-group-item active">

         <h4 class="list-group-item-heading">

             入门网站包

         </h4>

     </a>

     <a href="#" class="list-group-item">

         <h4 class="list-group-item-heading">

             免费域名注册

         </h4>

         <p class="list-group-item-text">

             您将通过网页进行免费域名注册。

         </p>

     </a>

     <a href="#" class="list-group-item">

         <h4 class="list-group-item-heading">

             24*7 支持

         </h4>

         <p class="list-group-item-text">

             我们提供 24*7 支持。

         </p>

     </a>

 </div>

 <div class="list-group">

     <a href="#" class="list-group-item active">

         <h4 class="list-group-item-heading">

             商务网站包

         </h4>

     </a>

     <a href="#" class="list-group-item">

         <h4 class="list-group-item-heading">

             免费域名注册

         </h4>

         <p class="list-group-item-text">

             您将通过网页进行免费域名注册。

         </p>

     </a>

     <a href="#" class="list-group-item">

         <h4 class="list-group-item-heading">24*7 支持</h4>

         <p class="list-group-item-text">我们提供 24*7 支持。</p>

     </a>

 </div>

显示结果：

4.面板（panel）

4.1 基本的面板格式

完整的面板格式包括：面板的头（标题）、身体（主题内容）和脚（脚注，存放副文本）。另外脚注不会从带语境色彩的面板中继承颜色和边框。

其中第3行的panel-title是为了添加带有预定义样式的标题（如果不需要该部分可以省略），比如<h1>~<h6>

 <div class="panel panel-default">

     <div class="panel-heading">

         <h4 class="panel-title">面板头部的标题</h3>

     </div>

     <div class="panel-body">

         面板的主体部分<br>

         面板的主体部分<br>

         面板的主体部分<br>

         面板的主体部分

     </div>

     <div class="panel-footer">

         面板得脚注部分

     </div>

 </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部分：

 <div class="panel panel-info">

     <div class="panel-heading">

         不带title的标题 panel-info

     </div>

     <div class="panel-body">

         带表格的面板

     </div>

     <table class="table">

         <th>姓名</th>

         <th>年龄</th>

         <tr>

             <td>张三</td>

             <td>20</td>

         </tr>

         <tr>

             <td>李四</td>

             <td>24</td>

         </tr>

     </table>

 </div>

显示结果如下：

4.4 带列表组的面板

 <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">相册</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>

 </div>

显示如下：

Bootstrap 警告、进度条、列表组、面板的更多相关文章

  1. Bootstrap 学习笔记6 列表组面板嵌入组件

    列表组组件: 面板组件:

  2. 第二百四十二节，Bootstrap列表组面板和嵌入组件

    Bootstrap列表组面板和嵌入组件 学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应 式嵌入组 ...

  3. Bootstrap各种进度条的实例讲解

    本章将讲解 Bootstrap 进度条.在本教程中,您将看到如何使用bootstrap教程.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Interne ...

  4. Bootstrap 各种进度条详解

    一:默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class . ...

  5. BootStrap学习(4)_分页&标签&缩略图&警告&进度条

    一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页.  .pagination     --添加该 class 来在页面上显示分页. .disa ...

  6. Bootstrap(11)列表组面板和嵌入组件

    一．列表组组件列表组组件用于显示一组列表的组件.//基本实例 <ul class="list-group"> <li class="list-group ...

  7. Bootstrap(10) 进度条媒体对象和 Well 组件

    一．Well 组件这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --> <div class="well">Bootstrap</div& ...

  8. Bootstrap学习 进度条

    本文将介绍Bootstrap进度条,在本文中你将看到如何使用Bootstrap创建加载,重定向或动作状态的进度条 bootstrap进度条使用CSS3过渡和动画来获得该效果.Internet Expl ...

  9. Bootstrap学习2--组件-列表组

    备注:最新Bootstrap手册:http://www.jqhtml.com/bootstraps-syntaxhigh/index.html 1.列表组 列表组是Bootstrap框架新增的一个组件 ...

  10. bootstrap组件---进度条

    <div class="progress"> <div class="progress-bar progress-bar-success" r ...

随机推荐

  1. 恶意代码分析实战-启动一个恶意的DLL

    如果不能把恶意代码运行起来,那么动态分析基础技术没有什么用. Windows版本中包含rundll32.exe程序,提供了一个运行DLL的平台. rundll32.exe Dllname,Export ...

  2. Python Tools for Machine Learning

    Python Tools for Machine Learning Python is one of the best programming languages out there, with an ...

  3. Faster rcnn代码理解（4）

    上一篇我们说完了AnchorTargetLayer层,然后我将Faster rcnn中的其他层看了,这里把ROIPoolingLayer层说一下: 我先说一下它的实现原理:RPN生成的roi区域大小是 ...

  4. c或c++的网络库

    Asio C++ Library: Asio is a cross-platform C++ library for network and low-level I/O programming tha ...

  5. sqlserver 无法获得数据库独占权

    ALTER DATABASE trqxs_cs SET OFFLINE WITH ROLLBACK IMMEDIATE

  6. 一步步实现windows版ijkplayer系列文章之五——使用automake生成makefile

    一步步实现windows版ijkplayer系列文章之一--Windows10平台编译ffmpeg 4.0.2,生成ffplay 一步步实现windows版ijkplayer系列文章之二--Ijkpl ...

  7. 001_linux下的log

    如果愿意在Linux环境方面花费些时间,首先就应该知道日志文件的所在位置以及它们包含的内容.在系统运行正常的情况下学习了解这些不同的日志文件有助于你在遇到紧急情况时从容找出问题并加以解决. 以下介绍的 ...

  8. SYN flooding引发的网络故障

    故障现象: 1.应用无法通过外网访问,应用服务器所在的内网网段之间(web和db数据库之间访问丢包严重)不能互相访问 其他网段正常 2.怀疑是网络设备问题,将连接该网段设备的交换机重启后故障依旧,通过 ...

  9. idea开发swing（二）

    闲话少说,书接idea开发swing(一). 程序编译完成后,需要打包发布,如果有fat_jar的同学可以通过该插件打包,这里是使用ant来打包,步骤如下: 一.编写build.xml <?xm ...

  10. PHP接口继承及接口多继承原理与实现方法详解

    在PHP的接口中,接口可以继承接口.虽然PHP类只能继承一个父类(单继承),但是接口和类不同,接口可以实现多继承,可以继承一个或者多个接口.当然接口的继承也是使用extends关键字,要多个继承的话只 ...