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

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. octomap 安装使用

    由于工程实践中需要对机器人地图进行概率化估计并表示,故引入OctoMap库. 本文将介绍如何在Ubuntu环境下安装OctoMap. 如果你安装了ROS,那么一下的安装过程很可能会出错. 首先应该检查 ...

  2. Dubbo服务降级

    当服务器压力剧增的情况下,根据实际业务情况及流量,对一些服务和页面有策略的不处理或简单处理,从而释放服务器资源以保证核心业务正常运作或高效运作. 可以通过服务降级功能临时屏蔽某个出错的非关键服务并定义 ...

  3. 在Spring(4.3.22)中集成Hibernate（5.4.0）

    (1)pom中添加相关依赖 <dependency> <groupId>org.hibernate</groupId> <artifactId>hibe ...

  4. MCS-51单片机存储地址空间划分

    1.前言 MCS-51的存储器有片内RAM.片外RAM 和 ROM 三个空间. MCS-51单片机在物理结构上有四个存储空间 1.片内程序存储器(片内ROM)2.片外程序存储器(片外ROM)3.片内数 ...

  5. word打不开怎么办?

    方法一 故障描述:编辑Word文档的过程中,程序非法关闭,重新打开也是如此.即使重新安装了Office 2003,在启动Word 2003后仍然出现了异常情况.双击Word文档后,程序弹出出错对话框, ...

  6. WIN10 ISO 官方

    WIN10   ISO  官方: https://www.microsoft.com/zh-cn/software-download/windows10ISO/

  7. JS禁止鼠标右键、禁止全选、复制、粘贴的方法（所谓的防盗功能）

    简述:一个防君子不防小人的鸡肋的功能,针对小白还行. 代码如下: <script> //都能支持 document.oncontextmenu = function (e) { retur ...

  8. ubuntu数据库迁移

    环境:ubuntu16.04 简介:本教程演示如何从旧数据库服务器服转移到另一个新服务器. 场景:假设你有自己的云服务器安装了WordPress站点,你为了更多的内存和处理能力想升级到新的服务器. 操 ...

  9. centos7.2环境编译安装mysql5.5.48

    一.安装cmake编译工具 跨平台编译器 查看是否已经安装了gcc # rpm -qa | grep gcc # yum install -y gcc-c++ # yum install -y cma ...

  10. echarts地图使用

    在使用echarts3当中,地图需要的数据时分开的,需要自己下载,而在echarts3官网上的地图数据只有全国.中国.各省的地图 如果我们需要使用更详细的地图,需要在echarts2的生成需要的地级市 ...