按钮
可作为按钮使用的标签或元素
为 <a>、<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。
虽然按钮类可以应用到 <a> 和 <button> 元素上,但是,导航和导航条组件只支持 <button> 元素。
如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置 role="button" 属性。
强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。
预定义样式
快速创建一个带有预定义样式的按钮。
尺寸
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
激活状态
button 元素--由于 :active 是伪状态,因此无需额外添加,但是在需要让其表现出同样外观的时候可以添加 .active 类。
链接(<a>)元素--可以为基于 <a> 元素创建的按钮添加 .active 类。
禁用状态
button 元素--为 <button> 元素添加 disabled 属性,使其表现出禁用状态。
链接(<a>)元素--为基于 <a> 元素创建的按钮添加 .disabled 类。
<div class="container">
<a class="btn btn-default" href="#" role="button">a标签按钮</a>
<a class="btn btn-default" href="#">a标签按钮没role</a>
<button class="btn btn-default" type="button">按钮</button>
<input class="btn btn-default" type="submit" value="button">
<br>
预定义样式:<br>
<button type="button" class="btn btn-default">默认btn</button>
<button type="button" class="btn btn-primary">首选btn</button>
<button type="button" class="btn btn-success">成功btn</button>
<button type="button" class="btn btn-info">一般信息btn</button>
<button type="button" class="btn btn-warning">警告btn</button>
<button type="button" class="btn btn-danger">危险btn</button>
<br>尺寸:<br>
<button type="button" class="btn btn-default btn-lg">大按钮</button>
<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-default btn-sm">小按钮</button>
<button type="button" class="btn btn-default btn-xs">手机按钮</button>
<br>激活状态<br>
<button type="button" class="btn btn-default btn-block">块级元素</button>
<button type="button" class="btn btn-default btn-block active">激活状态</button>
<a class="btn btn-default active btn-block" role="button" href="#">上面的项目用a标签实现</a>
<br>禁用状态<br>
<button type="button" class="btn btn-default disabled">禁用状态(IE无效)</button>
<button type="button" class="btn btn-default" disabled>禁用状态2</button>
<button type="button" class="btn btn-default" disabled="disabled">禁用状态3</button>
<a class="btn btn-default disabled" role="button" href="#">禁用状态4(IE效果与火狐不同)</a>
</div>
图片
响应式图片
在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性,从而让图片在其父元素中更好的缩放。
图片形状
通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状。
<div class="container">
<img src="m.jpeg" alt="响应式图片." class="img-responsive">
<img src="m.jpeg" alt="..." class="">
<hr>
<img src="m.jpeg" alt="。。." class="img-rounded">
<img src="m.jpeg" alt="IE10不支持." class="img-circle">
<img src="m.jpeg" alt="。。." class="img-thumbnail">
</div>
http://pan.baidu.com/s/1qW1DoZy
辅助类
情境文本颜色
通过颜色来展示意图,Bootstrap 提供了一组工具类。这些类可以应用于链接,并且在鼠标经过时颜色可以还可以加深,就像默认的链接一样。
情境背景色
和情境文本颜色类一样,使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深,就像上面所讲的情境文本颜色类一样。
关闭按钮
通过使用一个象征关闭的图标,可以让模态框和警告框消失。
三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。
快速浮动
通过添加一个类,可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。这些类还可以作为 mixin(参见 less 文档) 使用。(不能用于导航条组件中)
让内容块居中
为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。
清除浮动
通过为父元素添加 .clearfix 类可以很容易地清除浮动(float)。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。
显示或隐藏内容
.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。
<div class="container">
<table class="table">
<tr>
<th>情境文本颜色</th>
<td><p class="text-muted">text-muted</p></td>
<td><p class="text-primary">text-primary</p></td>
<td><p class="text-success">text-success</p></td>
<td><p class="text-info">text-info</p></td>
<td><p class="text-warning">text-warning</p></td>
<td><p class="text-danger">text-danger</p></td>
</tr>
<tr>
<th>情境背景色</th>
<td><p class="bg-primary">bg-primary</p></td>
<td><p class="bg-success">bg-success</p></td>
<td><p class="bg-info">bg-info</p></td>
<td><p class="bg-warning">bg-warning</p></td>
<td><p class="bg-danger">bg-danger</p></td>
</tr>
</table>
<hr>
关闭按钮:-->
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<br>三角符号:<span class="caret"></span>
<br>
<div class="pull-left">快速浮动--左</div>
<div class="pull-right">快速浮动--右</div>
<br>
<div class="center-block">
居中,测试无效
</div>
<div class="hidden">隐藏的...</div>
</div>
响应式工具
通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。
超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |
---|---|---|---|---|
.visible-xs-* | 可见 | 隐藏 | 隐藏 | 隐藏 |
.visible-sm-* | 隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md-* | 隐藏 | 隐藏 | 可见 | 隐藏 |
.visible-lg-* | 隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
从 v3.2.0 版本起,形如 .visible-*-*
的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display
属性,列表如下:
类组 | CSS display |
---|---|
.visible-*-block | display: block; |
.visible-*-inline | display: inline; |
.visible-*-inline-block | display: inline-block; |
因此,以超小屏幕(xs
)为例,可用的 .visible-*-*
类是:.visible-xs-block
、.visible-xs-inline
和.visible-xs-inline-block
。
.visible-xs
、.visible-sm
、.visible-md
和 .visible-lg
类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table>
相关的元素的特殊情况外,它们与 .visible-*-block
大体相同。
打印类
和常规的响应式类一样,使用下面的类可以针对打印机隐藏或显示某些内容。
class | 浏览器 | 打印机 |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block | 隐藏 | 可见 |
.hidden-print | 可见 | 隐藏 |
.visible-print
类也是存在的,但是从 v3.2.0 版本开始不建议使用。它与 .visible-print-block
类大致相同,除了<table>
相关元素的特殊情况外。
测试用例
调整你的浏览器大小,或者用其他设备打开页面,都可以测试这些响应式工具类。
在...上可见
带有绿色标记的元素表示其在当前浏览器视口(viewport)中是可见的。
在...上隐藏
带有绿色标记的元素表示其在当前浏览器视口(viewport)中是隐藏的。