bootstrap基础（1）

bootstrap基础归纳（1）

例子

（1）栅格系统

1、列偏移

.col-xs/sm/md/lg-offset-*,*为数字，表示向右偏移的列数（以最左边列为基础），不能大于12。偏移和显示列综合不能超过12，如果超过则换到下一行。

2、列排序

.col-x-push-* 向右浮动
.col-x-pull-* 向左浮动

3、支持嵌套

一个列里可以再声明一个或多个行，内部嵌套row宽为100%。

4、清除浮动

（2）css布局

1、标题

< h1>-< h6>标签 大到小font-size属性
.h1-.h6样式 给文本赋予不同级别标题的样式
< small > / .small 获得一个字号更小、颜色更浅的文本（小标题）

2、段落

基本段落< body> < p> = font-size 14px line-height 1.428

中心段落 .lead 更大更粗行高更高的段落文本

< mark> 高亮文本

< del > / < s > 删除线文本
< ins > / < u >下划线
< strong > / < em > 加粗
< b > / < i > 高亮

文本对齐方式
.text-left 、.text-center 、 .text-right、 text-justify（两端对齐）、 text-nowrap（不换行）

字母大小写
.text-lowercase 大写字母转为小写
.text-uppercase 小写字母转为大写
.text-capitalize 文本收字母转为大写

引用

3、列表

无序列表 < ul >< li >
有序列表< ol >< li >

无样式列表 给< ol >< ul >应用.list-unstyled 移除默认的list-style的样式（列表项目符号和左侧外边距）

内联列表 给< ol >< ul >应用.list-inline 可将列表所有元素放置于同一行

描述列表

4、基本表格

给< table > .table样式可以获得这样一个样式

< tbale > .table-bordered 增加边框

< table > .table-hover 让表格中< tbody >元素内的每一行对鼠标悬停状态作出响应。

< table > .table-condensed 让表格更加紧凑,padding内边距减半。

.active 悬停颜色
.success 绿色
.info 蓝色
.warning 黄山
.danger 红色

< table > 应用.table-responsive 当小于768px时出现滚动条

5、按钮

基本样式 < button >元素应用.btn


按钮尺寸 < button >元素应用.btn-lg/.btn-sm/.btn-xs

块级按钮 < button >元素应用.btn-block 将按钮拉伸至其父元素100%的宽度 同时按钮变成块级元素

按钮激活状态
< button >元素应用.active

按钮禁用状态

6、响应式图形

图片支持响应式布局 < img >元素应用.img-responsive

7、辅助类

情景文本颜色
情景文本背景色

关闭按钮 < button >元素应用.close

三角符号 < span >元素应用.caret


快速浮动


块级居中 .center-block让元素以块级的方式居中

清除浮动 .clearfix

显示或隐藏 任意元素应用.show / .hidden / .invisible

(3)表单

1、基础（垂直）表单

< label> 当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
“for” 属性可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关元素的 id 属性的值。
class=“form-group” 表单间距
class=“form-control” 表单样式

向父 < form> 元素添加 role=“form”。
把标签和控件放在一个带有 class .form-group 的 < div> 中。这是获取最佳间距所必需的。
向所有的文本元素 < input>、< textarea> 和 < select> 添加 class =“form-control” 。

行内表单（内联）class=“form-inline”

水平表单
向父 < form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 < div> 中。
向标签添加 class .control-label。


下拉框


复选框（ checkbox）单选框（radio）

2、表单焦点

图标提示

输入框组



输入框