一、按钮
.btn 的元素都会继承圆角灰色按钮的默认外观；
.btn-default 默认/标准按钮 圆角白色外观；
.btn-primary 蓝底白字圆角外观 原始按钮样式（未被操作）；
.btn-success 绿底白字圆角外观 成功状态；
.btn-info 天蓝色底白字圆角外观 可用于要弹出信息的按钮；
.btn-warning 橙黄色背景白色字外观 表示需要谨慎操作的按钮；
.btn-danger 大红色背景白色字体外观 表示一个危险动作的按钮操作；
.btn-link 无边框蓝色链接的字体 让按钮看起来像个链接 (仍然保留按钮行为)；
.btn-lg 大按钮
.btn-sm 小按钮
.btn-xs 超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被激活的状态
.disabled 禁用按钮，跟规定的disabled="disabled"样式不同，这个只是不可点，没有禁止符号；
按钮标签：可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。
<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit" >按钮</button>
<input class="btn btn-default" type="button" value="输入">
二、图片
- .img-rounded：添加 border-radius:6px 来获得图片圆角。(IE8 不支持)；
- .img-circle：添加 border-radius:50% 来让整个图片变成圆形。 (IE8 不支持)；
- .img-thumbnail：添加一些内边距（padding）和一个灰色的边框，缩略图功能；
- .img-responsive 让图片支持响应式；
<img src="cinqueterre.jpg" class="img-responsive" width="304" height="236">
三、辅助类
1）文本：（如果文本是个链接鼠标移动到文本上会变暗）
.text-muted 正常灰黑色字体
.text-primary 蓝色字体
.text-success 绿色字体
.text-info 蓝灰色字体
.text-warning 黄色字体
.text-danger 红色字体
2）背景：（如果文本是个链接鼠标移动到文本上会变暗）
.bg-primary 深蓝色背景
.bg-success 浅绿色背景
.bg-info 淡蓝色背景
.bg-warning 淡黄色背景
.bg-danger 淡红色背景
3）其他
.pull-left 左浮动
.pull-right 右浮动
.clearfix 清浮动
.center-block 块级并居中
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素
.text-hide 隐藏文字，将页面元素所包含的文本内容替换为背景图
.caret 显示下拉式功能，例如：
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">一个链接</a></li>
<li><a href="#">另一个链接 link</a></li>
<li><a href="#">其他功能</a></li>
</ul>
</div>
image.png
.close 关闭图标实例
<button type="button" class="close" aria-hidden="true">×</button>
aria-hidden="true" 是用于屏幕阅读器的，帮助残障人士更好的访问网站。
.caret 使用插入符表示下拉功能和方向,使用带有 class caret 的 <span> 元素得到该功能。
<p>插入符实例<span class="caret"></span></p>
四、响应式实用工具
通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。
需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本，响应式实用工具目前只适用于块和表切换。
.visible-xs-* / .hidden-xs 在超小屏幕 手机<768px下可见或者隐藏
.visible-sm-* / .hidden-sm 在小屏幕 平板>=768px下可见或者隐藏
.visible-md-* / .hidden-md 在中等屏幕 桌面 >=992px下可见或者隐藏
.visible-lg-* / .hidden-lg 在大屏幕 桌面>=1200下可见或者隐藏
从 v3.2.0 版本起，形如 .visible-- 的类针对每种屏幕大小都有了三种变体，每个针对 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 大体相同。
网友评论