警告框
<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">×</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.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...
- Bootstrap -- 缩略图、进度条、列表组、面板
Bootstrap -- 缩略图.进度条.列表组.面板 1. 缩略图 大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap ...
- ⑿bootstrap组件 缩略图 警告框 进度条 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- bootstrap得动态进度条
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 <div class=" ...
- Bootstrap警告框
前面的话 在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.在Bootstrap框架有一个独立的组件,实 ...
- Bootstrap历练实例:默认的列表组
Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...
- BootStrap学习(5)_多媒体对象&列表组
一.多媒体对象 这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. .media: ...
- bootstrap 警告框多个删除
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- bootstrap 警告框单个删除
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
随机推荐
- bootstrap 学习笔记(1)---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
- Hihocder 1639 : 图书馆 (组合数+唯一分解 求最后一位)(妙)
给定n,(n<=10^3),然后输入n的数a[i],(a[i]<=1e10),求ans=(a1+a2+a3...an)! / (a1!*a2!*a3!...an!) 的结果的最一位数. 适 ...
- some characters cannot be mapped using iso-8859-1 character encoding
Eclipse中新建一个.properties文件,如果输入中文保存时就会提示错误 Reason:some characters cannot be mapped using "ISO-88 ...
- MongoDB 3.2复制集单节点部署(四)
MongoDB在单节点中也可以做复制集,但是仅限于测试实验,最大的好处就是部署方便快速,可以随便添加新节点,节省资源.在这里我使用的是MongoDB 3.2版本进行复制集实验(但MongoDB配置文件 ...
- 实用的MVVM:ImageView
最近在学习WPF,遇到一本入门好书,推荐给大家<Windows Presentation Foundation 4.5 Cookbook> 做项目首先要从MVVM开始,现在把他的Simpl ...
- nagios对windows流量的检测
windows下用于和 nagios 整合监控的方式主要有三种:nsclient++ .nrpe_nt.SNMP.三者各自的特点主要如下: 1.nsclient++比较成熟稳定,文档也丰富,内置很多了 ...
- web.xml中load-on-startup的作用,web应用写一个InitServlet,这个servlet配置为启动时装载
如下一段配置,熟悉DWR的再熟悉不过了:<servlet> <servlet-name>dwr-invoker</servlet-name> <ser ...
- window.open全屏
window.open全屏 1. window.open(url,'资金计划项超支提醒','width='+(window.screen.availWidth-10)+',height='+(wi ...
- AI—家庭组机器人平台环境配置,高级人工智能实验总结
首先说一下我的环境:Ubuntu 12.04 32bit, gcc 4.6.3 一,安装boost 1.48,建议用这个版本的,不然会出现兼容性问题 步骤: 其实在ubuntu下,可以用一下命令直接 ...
- many-to-one 配置问题
需要引入org.hibernate.annotations.NotFound,当预期的被关联的元素不在数据库(关乎关联列的错误id)时,致使Hibernate无法解决关联性问题时,Hibernate就 ...