BootStrap 学习笔记（一）

BootStrap学习大纲：

1.css样式

布局容器：container

1）栅格系统

　　栅格系统就是BootStrap把一个div最多分成12列，其中主要的样式 col-md-数字 用的最多，其他（lg,sm,xs）基本不用，不太适合做PC和手机兼容的网站样式。　　

　　.row 12列

　　.col-md-4 占4列的宽
2）排版

　　1.标题（.page-header） 标题

　　2.段落（.lead）

　　3.mark标记（<mark>背景高亮</mark>）

　　4.下划线（<u>下划线</u>）

　　5.删除线（<del>删除线</del>）

　　6.small小号字体（<small>副标题</small>）

　　7.斜体（<i>斜体字</i>）

　　8.文本对齐（.text-left .text-right .text-center）

　　9.文本大小写（.text-lowercase .text-uppercase .text-captialize）

　　10.无样式列表（.list-unstyled）

　　11.内连列表（.list-inline）　　

3）代码

　　1.code（<code>代码高亮</code>）

　　2.pre（<pre>按原格式输出<pre>）

　　3.kdb（<kdb>键盘</kdb>）

4）表格

　　.table　　.table-striped　　.table-bordered　　.table-hover　　

　　表格颜色 　　.active　　.success　　.warning　　.info　　.danger

　　响应式滚动条（必须在table的外层Div中加该属性）　　.table-responsive

5）表单

　　段落分割　　.form-group

　　输入框　　.form-control　　placeholder="占位字符"

　　横表单　　.form-inline

　　输入框组　　.input-group　　.input-group-addon

　　表单框内文本图标　　.has-feedback　　.form-control-feedback

　　表单框帮助提示　　.help-block

6）按钮

　　.btn　　.btn-default　　.btn-primary　　.btn-success　　.btn-info　　.btn-waining　　.btn-danger　　.btn-link

　　.btn-lg　　.btn-sm　　.btn-xs　　.disabled

　　.btn-block　　

7）图片

　　圆角　　.img-rounder

　　圆图　　.img-circle

　　指甲盖　.img-thumbnail　　（图片背景不能是白色）　　

8）辅助类

　　文本颜色　　.text-muded　　.text-primary　　.text-success　　.text-info　　.text-warning　　.text-danger

　　背景颜色　　.bg-primary　　.bg-success　　.bg-info　　.bg-warning　　.bg-danger

　　关闭按钮　　.close　　&times;(乘号)

　　下三角　　　.caret

　　浮动　　　　.pull-left　　.pull-right

　　清除浮动　　.clearfix

　　内容居中　　.center-block

　　显示　　.show　　隐藏　　.hide

9）响应式工具

　　响应式图片　　.img-responsive