bootstrap入门基础

1.字体

text-left
text-center
text-right
text-lowercase 小写
text-uppercase 大写
text-capitalize 首字母大写

2.表格

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

3.颜色

denger 红色
waring
info
success
active

4.表格

form-control
form-group div里面组件
form-inline 水平排版

5.输入

placeholder 提示
 
input-lg 更大
input-sm 更小
 
sr-only 取消提示
control-label
has-success

.input-group 控件组
.input-group-addon 防止额外内容图标

　

6.按钮

btn
btn-default
btn-success
btn-primary
btn-info
btn-warning
btn-danger
btn-link
active 按下状态(选中状态)
btn-block 全屏状态（和父元素一样大）
disabled
<a class="btn btn-danger" href="">a标签也可以变成按钮</a>

7.图片

img-rounded 圆角
img-circle 圆形
img-thumbnail 带边框的圆角

8.不同浏览器支持

meta name=viewport width height user-scalable initial-scale=1(代表1倍) maximum-scale minimun-scale

.test{
 
}
@media (only 只为屏幕发生改变) screen and（链接） (max-width:900px) and(min-width:500px){
	.test{
 
	}
}

9.栅格

栅格分成12等份
col-lg-3 col-md-4 col-sm-6 col-xs-12占超大屏列（宽度）的1/4 中等屏的1/3 小屏的1/2 手机端全屏显示（宽度）
col-lg-offset-3超大屏幕的时候偏移1/4

10.单位

单位
px 屏幕分辨率的长度单位
em 字体尺寸（会继承父元素的字体大小 IE不支持）
rem:
与em类似，相对于HTML根节点的字体单位,HTML默认字体大小16px
1. rem会继承根元素字体大小
2.1rem = 10px = html{font-size:62.5%}
3.几乎所有浏览器都支持了

11.图标(字体图标)

复制图标库(http://getbootstrap.com/components/ 也可用国产的)中的图标class="glyphicon glyphicon-asterisk"
可以添加样式.glyphicon-asterisk{color:green;font-size:100px}

12.下拉菜单

下拉菜单
.dropdown 控制组件为下拉
dropdown-toggle下拉菜单
data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示
data-dismiss 关闭某个元素
.dropdown-menu-right 代替.pull-right右对齐
divider 分割线
<span class="caret"></span>下拉框的下标

13.导航栏

.nav
.nav-tabs 可切换的导航
.nav-pills 胶囊导航
.nav-justifiled 导航垂直

14.分页

分页
.pagination  父元素中添加分页
pagination-lg 变大
pagination-sm 变小
.pager 翻页区域
.previous 链接左对齐
.next 链接右对齐

15.进度条

进度条
.progress
.progress-bar
.progress-bar-success 颜色
.progress-bar-striped 进度条颜色渐变（花纹）

16.列表

列表
list-group
list-group-item 列表项
active
disabled
badge 提示未读消息的下标
list-group-item-info 颜色

17.面板

面板
.panel
.panel-default
.panel-primary 蓝色。。。。
.panel-heading 面板头部（面板是干什么的）
.panel-body 面板内容
.panel-footer 面板注脚

18.插件

插件
data 控制页面交互
$(document).off('.data-api')解除属性绑定
modal 模态框是覆盖在父窗体上的子窗体
modal-dialog
modal-content
modal-header
modal-body
modal-footer