bootstrap class速查

bootstrap class速查

-------网格系统 ----------
栅格系统
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

<div class="row">
    <div class="col-*-*">

    </div>
<div>

偏移列
 .col-md-offset-*
列排序
 .col-md-push-*       .col-md-pull-*

-----------排版----------------
.small               字号更小的颜色更浅的文本
.lead                   更大更粗、行高更高的文本
.text-muted：            提示，使用浅灰色（#999）
.text-primary：          主要，使用蓝色（#428bca）
.text-success：          成功，使用浅绿色(#3c763d)
.text-info：             通知信息，使用浅蓝色（#31708f）
.text-warning：          警告，使用黄色（#8a6d3b）
.text-danger：           危险，使用褐色（##a94442）
.text-left               向左对齐文本
.text-center             居中对齐文本
.text-right              向右对齐文本
.text-justify            设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap             段落中超出屏幕部分不换行
.text-lowercase          设定文本小写
.text-uppercase          设定文本大写
.text-capitalize         设定单词首字母大写
.initialism              显示在 <abbr> 元素中的文本以小号字体展示
.blockquote-reverse      设定引用右对齐
.list-unstyled           移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。
 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline             将所有列表项放置同一行
.dl-horizontal           该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例
.pre-scrollable          使 <pre> 元素可滚动 scrollable
<abbr>                   文本底部的一条虚线边框
<address>                显示联系信息
<blockquote>             这是一个带有源标题的引用
-----------表格--------------
表格类
.table                   为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped           在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered          为所有表格的单元格添加边框
.table-hover             在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed         让表格更加紧凑
 .table-responsive       让表格水平滚动以适应小型设备（小于 768px）
<tr>, <th> 和 <td> 类
.active                  将悬停的颜色应用在行或者单元格上
.success                 表示成功的操作
.info                    表示信息变化的操作
.warning                 表示一个警告的操作
.danger                  表示一个危险的操作
----------表单-----------------
一.垂直或基本表单
    1.向父 <form> 元素添加 role="form"。
    2.把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
    3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
二.内联表单
    请向 <form> 标签添加 class .form-inline    会变成一行
三.水平表单
    向父 <form> 元素添加 class .form-horizontal。
    把标签和控件放在一个带有 class .form-group 的 <div> 中。
    向标签添加 class .control-label。

表单元素
checkbox radio
    当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。
    如果您限制用户只能选择一个选项，请使用 radio。
    对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上
select
    当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
    使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
    使用 multiple="multiple" 允许用户选择多个选项
静态控件
    当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。
表单控件状态
    除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），
    Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。
    输入框焦点
    当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
    禁用的输入框 input
    如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，
    这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
    禁用的字段集 fieldset
    对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。
    验证状态
    Bootstrap 包含了错误、警告和成功消息的验证样式。
    只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
表单控件大小
    您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点：
--------------------按钮-----------------
一 样式
.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          禁用按钮
二 按钮大小
.btn-lg             这会让按钮看起来比较大。
.btn-sm             这会让按钮看起来比较小。
.btn-xs             这会让按钮看起来特别小。
.btn-block          这会创建块级的按钮，会横跨父元素的全部宽度。
三 按钮状态
按钮元素               添加 .active class 来显示它是激活的。
锚元素                 添加 .active class 到 <a> 按钮来显示它是激活的。
四 禁用按钮
按钮元素               添加 disabled 属性 到 <button> 按钮。
锚元素                 添加 disabled class 到 <a> 按钮。
注意：该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。
----------------图片-----------------
.img-rounded：         添加 border-radius:6px 来获得图片圆角。
.img-circle：          添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：       添加一些内边距（padding）和一个灰色的边框。
.img-responsive        图片响应式 (将很好地扩展到父元素)
------------------辅助/背景-------------
背景
.bg-primary             表格单元格使用了 "bg-primary" 类
.bg-success             表格单元格使用了 "bg-success" 类
.bg-info                表格单元格使用了 "bg-info" 类
.bg-warning             表格单元格使用了 "bg-warning" 类
.bg-danger              表格单元格使用了 "bg-danger" 类
其他
.pull-left              元素浮动到左边
.pull-right             元素浮动到右边
.center-block           设置元素为 display:block 并居中显示
.clearfix               清除浮动
.show                   强制元素显示
.hidden                 强制元素隐藏
.sr-only                除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable       与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide               将页面元素所包含的文本内容替换为背景图
.close                   显示关闭按钮
.caret                   显示下拉式功能
关闭图标
使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。
插入符
使用插入符表示下拉功能和方向。使用带有 class caret 的 <span> 元素得到该功能。
快速浮动
您可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。
下面的实例演示了这点。
内容居中
使用 class center-block 来居中元素
清除浮动
如需清除元素的浮动，请使用 .clearfix class。
显示和隐藏内容
您可以通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。