警告框
 
<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. C/C++获取Linux系统CPU和内存及硬盘使用情况

    需求分析: 不使用Top  df  free 等命令,利用C/C++获取Linux系统CPU和内存及硬盘使用情况 实现: //通过获取/proc/stat (CPU)和/proc/meminfo(内存 ...

  2. dos窗口的乱码问题

    1.在dos窗口上输入chcp 65001 2.然后右键属性选择字体

  3. World CodeSprint 10

    C: 题意: 给定一个长度为 $n$ 的序列 $a_i$,从 $a$ 序列中选出一个大小为 $k$ 的子序列使得子序列数字的  bitwise AND 值最大. 求问最大值是多少,并求出有多少个最大值 ...

  4. 2.4 hive创建表实例讲解

    一.create table ## 员工表 create table IF NOT EXISTS default.emp( empno int, ename string, job string, m ...

  5. UVa 1001 Say Cheese (Dijkstra)

    题意:给定一个三维空间的一些球和起始位置和结束位置,问你最短要花的时间是多少. 析:建图,所有的位置都建立图,边权就是距离,最小求一次最短路即可. 代码如下: #pragma comment(link ...

  6. 服务迁移之路 | Spring Cloud向Service Mesh转变

    一.导读 Spring Cloud基于Spring Boot开发,提供一套完整的微服务解决方案,具体包括服务注册与发现,配置中心,全链路监控,API网关,熔断器,远程调用框架,工具客户端等选项中立的开 ...

  7. E20180715-hm

    grapefruit n. 葡萄柚,西柚; 葡萄柚树;

  8. HDU1501【简单DP】

    题意: 从a串和b串中顺序地取出是否能组成c串: 思路: dp[i][j] 代表从a串中取了i个,b串中取了j个的情况: #include <bits/stdc++.h> using na ...

  9. 51nod 1067【简单博弈】

    卧槽,第一次自己推推推做出来的... 对于1,那么就是A取完就好 --A 对于2,只能是A拿一个 --B 对于3和4,都是A拿完 --A 对于5,靠向2,A取3,B只能1 --A 对于6,A取一个的话 ...

  10. 51nod 1456【强连通，缩点，并查集】

    话说这道题的机遇是看到了http://blog.csdn.net/u010885899/article/details/50611895很有意思:然后就去补了这题 题意: 建最少的边使得给出的点相连. ...