bootstrap学习之一_bootstrap css

一、文本相关样式

　　文本格式(用于块状标签)：
text-left：向左对齐文本；text-center：居中对齐文本；text-right：向右对齐文本；text-justified;text-nowrap;
　　文本增强标签：
small,strong,em;
　　文本修饰（用于p，a等包含文本的标签）：
text-muted(本行内容是减弱的);text-primary;text-success;text-info;text-warning;text-danger;text-info;text-lowercase;text-uppercase;text-capitalize;

　　文本缩写标签：

<abbr>,得到更小字体可以添加initialism类
　　文本地址标签：

address
　　文本引用标签:

blockquote 使用类blockquote-inverse可以使得引用右侧对齐

　　列表相关类：

list-unstyled;list-inline;dl-horizontal

二、bootstrap表格

　　可以应用于<table>的类：

基础类table，table-striped;table-bodered;table-hover;table-condensed;

　　可以应用于<tr>,<th>和<td>的类

.active;.success;.info;.warning;.danger

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

三、bootstrap表单

1.向要创建的<form>元素添加role="form'

2，如果是标签和Input空间，可以把一组标签和控件放在一个class .form-group的<div>中，以便获得最佳间距，这会在div周围添加一条边框。

3，如果input周围有前后缀（包括文本，按钮，下拉菜单等）。此时，向其父div增添类.input-group（基本类，再添加其他类如 .input-group-lg、input-group-sm、input-group-xs可以调整大小）。如果前后缀是文本、复选框，单选框，就给前缀后缀所在的span（该span位于input的前面或者后面），添加类：.input-group-addon；如果前后缀是按钮，就为按钮所在的span添加.input-group-btn;如果前后缀是下拉菜单，就为下拉菜单的外围div添加.input-group-btn.

4.所有的<input><select><area>添加.form-control ,<label>不用添加

5，如果要求所有元素内连，为form添加.form-inline;如果创建书评表单的布局，添加form-horizontal.

6,可以给父元素(通常是包含label和input的div),添加has_warning,has_error,has_success来验证状态。

6，input-lg,col-lg-*等可以控制表单相关标签的大小。

四、bootstrap按钮

　　按钮相关的类：

1.基本类：

.btn

2.按钮样式类：

.btn-default;.btn-primary;.btn-success;.btn-info;.btn-warning;.btn-danger;.btn-link

3.按钮大小类：

.btn-lg;.btn-sm;.btn-xs;.btn-block;

4.按钮状态类：

.active;.disabled

五、bootstrap图片

　　图片样式：

.img-rounded;.img-circle;.img-thumbnail;.img-responsive

六、bootstrap辅助类

1.背景相关类：

.bg-primary;.bg-success;.bg-info;.bg-warning;.bg-danger

2.位置相关类

浮动：.pull-left;.pull-right;清除浮动：.clear-fix

3.显示与隐藏：

.show;.hidden;.sr-only;.sr-only-focusable;.text-hide;

4.显示关闭按钮：.close，通常结合dismiss属性使用

5.显示下拉式功能:.caret，通常结合dropdown-toggle类，data-toggle属性一起使用。

七、bootstrap响应式工具

visible-*-block;visible-*-inline;visible-*-inline-block;其中*可以为xs,sm,md,lg