警告框
 
<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. MFC中显示一张位图

    1.用类CBitmap加载位图 2.创建内存DC, 将位图选进此内存DC 3.调用BitBlt将内存DC的内容拷贝到其它DC(通知是显示DC) 例子(来自MSDN): // This OnDraw() ...

  2. JAVA 内部类 （一）

    可将一个类定义置入另一个类定义中.这就叫作“内部类”.内部类对我们非常有用,因为利用它可对那些逻辑上相互联系的类进行分组,并可控制一个类在另一个类里的“可见性”.然而,我们必须认识到内部类与以前讲述的 ...

  3. 1.5 Hive初步使用和安装MySQL

    一.HQL初步试用 1.创建一个student表 #创建一个student表 hive> create table student(id int, name string) ROW FORMAT ...

  4. java集合框架之HashCode

    参考http://how2j.cn/k/collection/collection-hashcode/371.html List查找的低效率 假设在List中存放着无重复名称,没有顺序的2000000 ...

  5. 20个Flutter实例视频教程-第05节: 酷炫的路由动画-1

    视屏地址: https://www.bilibili.com/video/av39709290/?p=5 博客地址: https://jspang.com/post/flutterDemo.html# ...

  6. E20180608-hm

    更新: 2019/02/19 原来忘记分类,把此博文归入单词类 capacity  n. 容量; 性能; 才能; 生产能力;

  7. iOS 使用cocoapods导入ReactiveCocoa和ReactiveObjC框架

    cocoapods使用 ReactiveObjC -- 对应的是RAC的OC版本,最新3.1.0版本. ReactiveCocoa--对应的是RAC的swift版本,最新7.1.0版本. 1.纯OC项 ...

  8. lightoj 1085【离散化+树状数组】

    题意: 求所有的上升子序列种数: 思路: 我想先离散化一下,然后用树状数组维护一下. 最终答案就是sum(n) ? 卧槽,好像是:然后就过了.. #include <bits/stdc++.h& ...

  9. 洛谷P1776 宝物筛选_NOI导刊2010提高（02）

    P1776 宝物筛选_NOI导刊2010提高(02) 题目描述 终于,破解了千年的难题.小FF找到了王室的宝物室,里面堆满了无数价值连城的宝物……这下小FF可发财了,嘎嘎.但是这里的宝物实在是太多了, ...

  10. CF364D Ghd（随机化）

    另一个集合\(s\)的\(ghd\)为\(max\{gcd(s')||s'|>=0.5|s|\}\) 给定序列\(a\),求\(ghd\) 随机化算法.因为\(|s'|\geq 0.5|S|\) ...