警告框
 
<div class="container">
     <div class="alert alert-success" role="alert">
          你好，喵星人！
     </div>
     <div class="alert alert-danger" role="alert">
          你好，喵星人！
     </div>
     <div class="alert alert-info" role="alert">
          你好，喵星人！
     </div>
     <div class="alert alert-warning" role="alert">
          你好，喵星人！
     </div>
</div>
可关闭警告框
 
<div class="container">
    <div class="alert alert-warning" role="alert">
        <button type="button" class="close" data-dismiss="alert">
            <span aria-disabled="true">&times;</span>
        </button>
        <strong>你好!</strong>
    </div>
</div>
 
<script src="js/jquery.mini.js"></script>
<script src="js/bootstrap.min.js"></script>
 
进度条
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width: 50%">
        <span class="sr-only">60%</span>
    </div>
</div>
 
带有提示框的进度条
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width: 50%">
        60%
    </div>
</div>
 
带斜纹的进度条
<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width: 50%">
        60%
    </div>
</div>
动画效果
.active
堆叠效果
 
<div class="progress">
    <div class="progress-bar" style="width: 30%">30%</div>
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" style="width: 50%">
        50%
    </div>
</div>
 
列表组
基本的列表组，徽章，链接，被警用的条目，全景类，定制内容
 
<ul class="list-group">
    <li class="list-group-item">喵星人1<span class="badge">10</span></li>
    <li class="list-group-item">喵星人2</li>
    <li class="list-group-item">喵星人3<span class="badge">20</span></li>
    <li class="list-group-item">喵星人4<span class="badge">30</span></li>
</ul>
 
<div class="list-group">
    <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>
</div>
 
<div class="list-group">
    <a href="" class="list-group-item list-group-item-danger">喵星人</a>
    <a href="" class="list-group-item list-group-item-success">喵星人</a>
    <a href="" class="list-group-item list-group-item-info">喵星人</a>
    <a href="" class="list-group-item list-group-item-warning">喵星人</a>
</div>
 
<!--定制-->
<div class="list-group">
    <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">你好，喵星人</h4>
        <p class="list-group-item-text">
            喵星人很有依稀，你好，喵星人你好，喵星人你好，喵星人你好，喵星人
        </p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">你好，喵星人</h4>
        <p class="list-group-item-text">
            喵星人很有依稀，你好，喵星人你好，喵星人你好，喵星人你好，喵星人
        </p>
    </a>
</div>
 

bootstrap警告框、进度条和列表组的更多相关文章

  1. Bootstrap 警告、进度条、列表组、面板

    摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...

  2. Bootstrap -- 缩略图、进度条、列表组、面板

    Bootstrap -- 缩略图.进度条.列表组.面板 1. 缩略图 大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap ...

  3. ⑿bootstrap组件 缩略图 警告框 进度条 基础案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  4. bootstrap得动态进度条

    Bootstrap的动态进度条: html: 创建一个modal   这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 <div class=" ...

  5. Bootstrap警告框

    前面的话 在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.在Bootstrap框架有一个独立的组件,实 ...

  6. Bootstrap历练实例：默认的列表组

    Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...

  7. BootStrap学习(5)_多媒体对象&列表组

    一.多媒体对象 这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. .media: ...

  8. bootstrap 警告框多个删除

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. bootstrap 警告框单个删除

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

随机推荐

  1. bootstrap 学习笔记（1）---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

  2. Hihocder 1639 : 图书馆 （组合数+唯一分解 求最后一位）（妙）

    给定n,(n<=10^3),然后输入n的数a[i],(a[i]<=1e10),求ans=(a1+a2+a3...an)! / (a1!*a2!*a3!...an!) 的结果的最一位数. 适 ...

  3. some characters cannot be mapped using iso-8859-1 character encoding

    Eclipse中新建一个.properties文件,如果输入中文保存时就会提示错误 Reason:some characters cannot be mapped using "ISO-88 ...

  4. MongoDB 3.2复制集单节点部署（四）

    MongoDB在单节点中也可以做复制集,但是仅限于测试实验,最大的好处就是部署方便快速,可以随便添加新节点,节省资源.在这里我使用的是MongoDB 3.2版本进行复制集实验(但MongoDB配置文件 ...

  5. 实用的MVVM：ImageView

    最近在学习WPF,遇到一本入门好书,推荐给大家<Windows Presentation Foundation 4.5 Cookbook> 做项目首先要从MVVM开始,现在把他的Simpl ...

  6. nagios对windows流量的检测

    windows下用于和 nagios 整合监控的方式主要有三种:nsclient++ .nrpe_nt.SNMP.三者各自的特点主要如下: 1.nsclient++比较成熟稳定,文档也丰富,内置很多了 ...

  7. web.xml中load-on-startup的作用，web应用写一个InitServlet，这个servlet配置为启动时装载

    如下一段配置,熟悉DWR的再熟悉不过了:<servlet>   <servlet-name>dwr-invoker</servlet-name>   <ser ...

  8. window.open全屏

    window.open全屏   1. window.open(url,'资金计划项超支提醒','width='+(window.screen.availWidth-10)+',height='+(wi ...

  9. AI—家庭组机器人平台环境配置，高级人工智能实验总结

    首先说一下我的环境:Ubuntu 12.04 32bit,  gcc 4.6.3 一,安装boost 1.48,建议用这个版本的,不然会出现兼容性问题 步骤: 其实在ubuntu下,可以用一下命令直接 ...

  10. many-to-one 配置问题

    需要引入org.hibernate.annotations.NotFound,当预期的被关联的元素不在数据库(关乎关联列的错误id)时,致使Hibernate无法解决关联性问题时,Hibernate就 ...