默认的警告框是用带有alert样式的div元素容器包含的(p元 素也可以),内部可选地添加一个关闭按钮button元素,关闭按钮要确保设置button元素的属性值data-dismiss="alert", 原因是警告框的关闭功能是通过JavaScript检测该属性实现的.
alert-danger(危险红)、alert-success(成功绿)、alert-info(信息蓝)、alert-warning(警告黄)
在警告框中,还对h4、hr、a标签做了处理。组合起来非常酷。
<div> <a href="#" data-dismiss="alert">x</a> <h4>Warning</h4> <hr /> <p>Check your write,or look <a href="#">help</a></p> </div>
进度条
进度条(Progress bar)是一个比较常见的网页效果,一般用于表示加载、跳转或动作正在执行中的状态
progress用于设置进度条的容器样式,而 progress-bar用于限制进度条的进度(颜色进度)。
progress样式主要是设置进度条容器的背景色、容器高度、 间距等,progress-bar样式在设置进度方面,重要的是设置了进度条的 颜色(即样式的背景色)和过渡效果
除了progress-primary(重点蓝)外,其他4种基本颜色。
bs还为进度条提供 了一种条纹样式,并且不同的颜色可以显示不同的条纹。只是在容器元素上附加 了一个新的progress-striped样式,该样式的实现是利用CSS3的线 性渐变特性linear-gradient来实现的。
bs还提供了一个更炫的动画 样式,即:让条纹动起来。active
堆叠,只要在progress容器内放置多个progress-bar即可实现。
<div> <div>35</div> <div></div> </div>
媒体对象
媒体对象(Media object)这是一个抽象的样式,用以构建不同类型的组件。
一组媒体的默认使用方式通常包括如下几个样式:media、 media-object、media-body、media-heading 4个样式,和一个用于控制左右浮动的pull-left(或pull-right)样式。
如果需要将多个媒体进行列表展示的话,则可以利用在ul上应用media-list样式、li上应用media样式来实现。
<ul> <li> <div> <a href="#"> <img src="..." alt="..."> </a> </div> <div> <h4>Media heading</h4> ... </div> </li> </ul>
列表
大部分的列表组都是由无标记的列表(ul/li)来实现
列表组有2个基本的样式:listgroup和list-group-item。
导航箭头
.list-group-item > .glyphicon-chevron-right { float: right; /* 设置小图标 右浮动 */ margin-right: 5px; /* 小图标在span、label、i元素上设置-15像素的右间距 */ } .list-group-item > .glyphicon + .badge { margin-right: 5px; /* 如果两个图标放在一起显示,则保留5像素的右间距 */ }
bs又提供了list-groupitem-heading和list-group-item-text这两个样式,用于开发人员自 定义列表项里的具体内容,其表示的意思分别是:列表项条目的 头部(heading)和主要内容(text)。
<div> <a href="#"> <span>11</span> Cras justo odio </a> <a href="#">Dapibus ac facilisis in</a> <a href="#">Vestibulum at eros</a> <a href="#"> <h4>List group item heading</h4> <p>...</p> </a> </div>
面板
基础的面板很简单,就是简单在div上应用panel,产生一个具 有边框的文本显示框
又为其定义 了面板头(panel-heading)和面板尾(panel-footer)样式,
除了progress-primary(重点蓝)外,其他4种基本颜色。
一般在使用面板的时候,往往可能会在主区域(panel-body)内放很多内容,比如图片、表格等
带表格的面板
<div> <!-- Default panel contents --> <div>Panel heading</div> <div> <p>...</p> </div> <!-- Table --> <table> ... </table> </div>
洼地
洼地(Well)样式的效果和大屏幕展播Jumbotron样式类似, 不同点是well样式有了边框设置,并且默认高度是自适应文本的高度。主要用来实现嵌入在网页中。
well样式也提供了不同大小的样式(主要是panding和圆角大小),分别是:well-lg和well-sm
内容太长会超出边界!
主题
3.x版本中还新增了一个bootstraptheme.css文件,该文件并没有提供什么新的功能,仅是针对一些常用的CSS组件进行了增强。
但是theme默认并没有对所有的CSS组件都进行增强,而是针对9个方面的组件进行了增强:btn按钮、缩略图、 下拉菜单、导航条、警告框、进度条、列表组、面板和well
theme文件不是必须要引用的,如果喜欢这种风格才引用它;
如果要定制自己的风格,则可以引用自己的theme名 称,比如bootstrao-theme-flatui.css。
但是一定要注意,该文件一定要在bootstarp.min.css文件之后才能引用,否则会覆盖默认的效果。
本节地址: