Bootstrap基本入门大全
本文作者：IMWeb 一大碗油茶 原文出处：IMWeb社区 未经同意，禁止转载
Bootstrap 是基于 HTML、CSS、JAVASCRIPT的，它简洁灵活，使得 Web 开发更加快捷。 重点的是你要理解这个框架的运行机制，了解了它是怎么运行怎么使用，才能够更加高效的布局页面。 附上中文网站，了解了怎么玩之后就在上面找自己需要的，然后玩起来！！ http://www.bootcss.com
选择自己在使用的版本，进入中文手册
按照分类找自己需要的样式，复制粘贴class就可以啦
下面有常用的bootstrap介绍，基本上就够用了，但是有些样式也没有写全，先自己学会怎么使用，再去官网上深入研究吧
1.栅格系统
定义：一系列行和列构建的布局，可以跟着屏幕自动布局
最多可以展示12个列
container：容器。网页上所有的内容都放在这个容器中
两种布局：固定布局-container（自动居中），流式布局-container-fluid（铺满整个屏幕）
<div class="container">创建行：（一般最多显示12列，如果只想要显示四列，可以将12列均分到四列上）
<div class="col-lg-3">参数介绍：
col-lg-3：lg（当屏幕大于1200时，大屏幕）
con-md-3：md（在002-1200之间的屏幕）
con-sm-3：sm（768-992之间的屏幕）
con-xs-3：xs（小于758的屏幕）
2.辅助类
文字类:text-
text-primary：默认基础字体颜色
text-success：成功
text-danger：危险
text-info：
text-warning：
text-muted：浅灰色
背景类：bg-
背景颜色可以在bg-后加上上面同样的颜色
按钮：
<button class="close">×</button>关闭的小叉：
<span class="caret"></span>下拉菜单的小三角：
快速浮动：
pull-left：左浮动
pull-right：右浮动
清除浮动：clearfix
块元素居中：center-block
文字居中：text-center
显示和隐藏：
3.表格：在table标签中加入table
隔行变色：table-striped
鼠标划上变色：table-hover
表格加边框：table-bordered
表格的背景颜色：在tr中加class="danger/success/warning/info"
表格中垂直居中：vertical-middle
4.列表： ul中加入list-group
li中加入list-group-item
加入徽章
<span class="badge">10</span> 
加颜色在之前的名字后面加，例：list-group-item-success
5.表单
垂直样式：（默认）
表单分组：from-group
表单项（input，textarea）：from-control
<form role="form">
<div class="form-group">
<label for="username">用户名</label>
//通过点击文字也可以选中输入框，for中的名字要和input的id一致
<input type="text" id="username" class="form-control" placeholder="请输入"/>
</div>
</form>水平样式： 给form增加form-horizontal
6.按钮 btn
可以给 <a>、<button>或<input>元素添加.btn类。颜色：btn-颜色
按钮尺寸大小
btn-大小
也可以用btn-block来让按钮沾满一行
激活状态和禁用状态
激活：active
禁用：disabled
按钮式的下拉菜单
将ul列表转换为下拉菜单，添加dropdown-menu类
给button添加dropdown-toggle类
利用data-toggle=dropdown
实现嵌套：
用<div class="btn-group"></div>来包裹多个按钮输入框：
可以给输入框的两侧分别增加按钮
用add-on和input标签组合
也可以在输入框的后面加
7.导航：添加nav
可以添加nav-justified让导航铺满整个屏幕
基本：nav-tabs
基本pills：nav-pills
堆叠式：nav-stacked
堆叠式pills：nav-pills nav-stacked
8.导航条：navabar
注意：导航条容易遮挡在导航下面写的内容
面包屑导航：breadcrumb
让使用者清楚的知道当年所在页面的位置（不用给ul写样式，添加class之后自动形成以下样式）
xxx|sss|xxx类似的样式
9.分页：（即有页数及上/下一页的东西）
直接添加：pagination：
pager：
10.警告框：
输出提示警告信息，可以进行关闭
alert
也可以进行颜色的设置
alert-danger/warning/info/success
其中关闭的按钮是一个button，添加
<button class="close" data-dismiss="alert"></button>11.面板：
有标题有内容，一个区域
<div class="panel panel-danger">//可以添加颜色panel-颜色
<div class="panel-heading">//标题部分
<h1 class="panel-tittle">这是标题</h1>
</div>
<div class="panel-body">//内容部分
这是内容
</div>
</div>12.字体图标：（中文官网上找）
写一个span 加class="图标类名"
也可以写在按钮中
希望对大家有所帮助！！！！欢迎指正，互相学习