Xuanmo Blog

查看更多

布局容器

.container：两边留白非全屏，固定宽度并支持响应式布局的容器。

.container-fluid：宽度100%宽，用于占据全部视窗的容器。

4种列（column）尺寸

.col-xs-*：   最小尺寸（Extra Small）

.col-sm-*： 小尺寸（small）

.col-md-*： 中尺寸（middle）

.col-lg-*：   大尺寸（large）

标题与文本类

.page-header：页头标题

.h1 -- .h6：标题类

    在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

.lead：让段落突出显示

.text-left：文本左对齐

.text-center：文本居中对齐

.text-right：文本右对齐

.text-justify：两段对齐

.text-nowrap：默认对齐方式

.text-lowercase：全部为小写字母

.text-uppercase：全部为大写字母

.text-capitalize：首字母大写

.initialism：缩略语显示title的内容

    用法：<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

表单类

.form-inline：使表单组件一行显示（给form）

.form-horizontal：水平排列表单（给form）

.form-group：表单组

.input-group：输入框组

.form-control：输入框样式

表单验证：

.has-feedback：定义验证图标（父级）

.has-success：验证成功

.has-warning：警告

.has-error：错误

关联label：.control-label

提示信息：.help-block

提示图标：.form-control-feedback

带图标验证与提示信息写法

<div class="form-group has-success has-feedback">
  <label for="hasSuccess1" class="control-label">验证成功</label>
  <input type="text" id="hasSuccess1" class="form-control" placeholder="验证成功">
  <span class="help-block">您输入的信息是正确的</span>
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label for="hasWarning1" class="control-label">警告状态</label>
  <input type="text" id="hasWarning1" class="form-control" placeholder="警告状态">
  <span class="help-block">您当前输入的信息有误</span>
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label for="hasError1" class="control-label">验证错误</label>
  <input type="text" id="hasError1" class="form-control" placeholder="验证错误">
  <span class="help-block">手滑输错了吧</span>
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

按钮

    按钮样式：

.btn：定义按钮

.btn-default：默认

.btn-info：提示

.btn-primary：首选项

.btn-success：成功

.btn-warning：警告

.btn-danger：危险

.btn-link：链接类

    按钮尺寸：

.btn-xs：超小按钮

.btn-sm：小按钮

.btn-default：默认尺寸

.btn-lg：大按钮

.btn-block：块级按钮

   禁用的按钮：

为元素添加属性： disabled

为元素添加类：.disabled

    图片

.img-responsive：响应式图片

.img-rounded：添加一个6px的圆角

.img-circle：一个正圆的图片

.img-thumbnail：带相框的图片

文本颜色

.text-muted：提示，浅灰色：#999

.text-primary：主要，蓝色：#428bca

.text-success：成功，浅绿色：#3c763d

.text-info：通知消息，浅蓝色：#31708f

.text-warning：警告，黄色：#8a6d3b

.text-danger：危险，褐色：#a94442

背景颜色

.bg-primary：主要，蓝色：#428bca

.bg-success：成功，浅绿色：#3c763d

.bg-info：通知消息，浅蓝色：#31708f

.bg-warning：警告，黄色：#8a6d3b

.bg-danger：危险，褐色：#a94442