Bootstrap学习笔记
1.普通样式
（1）<div class=”container”> // 文本居中
（2）<div class=”row”> //row表示内容显示在同一行，页面为12个宽度的表格，
<div class=”span4”>//每个表格占4个宽度
....
</div>
<div class=”span4”>//span4占4个宽度，里面还可嵌套row，row中的span和应该为4。
....
</div>
<div class=”span4”>
....
</div>
</div>
（3）以上的container、row为固定布局，在其后面添加“-fluid”变为流动布局，会随页面大小变化而改变宽度。
（4） 响应式布局：@media (min-width:800px) and (manx-width:1000px){
body{background:#000;}
}//当页面宽度在800-1000像素之间的时候，页面会使用body布局，背景为黑色
（5）<div class=”visible-desktop”>....</div>//只在电脑模式显示该div，平板和手机不显示
类似类样式：visible-phone(手机),visible-tablet(平板) hidden-desktop hidden-phone....
（6）<abbr title=”Hello world”>HW</abbr> //当HW为缩写的时候，使用abbr标签，当鼠标放置在HW上时，会显示hello world全称
（7）<blockquote>引用内容<small>来自<cite>百合网</cite></small></blockquote>
//引用内容右边会出现引用的竖杆，来自前面多出”---”(引用符号)
2.Bootstrap的表格
(1)普通表格： <table class=”table”>.....</table>
(2)条纹表格 <table class=”table table-striped”>....</table>
(3)带变宽的表格<table class=”table table-bordered”>...</table>
(4)压缩表格<table class=”table table-condensed”>...</table>//多种样式一起使用
3.表单
(1)<input type=”text’ placeholder=”提示内容”>
(1)<div class=”input-prepend input-append”>
<span class=”add-on”>$</span><input type=”text”><span class=”add-on”>.00</spann>
</div>
4.导航路径
<ul class=”breadcrumb”>
<li><a href=”#”>首页</a> <span class=”devider”>/</span></li>
<li class=”active”>产品列表</li>
</ul>
5.分页器
(1)
<ul class=”pagination ”>
<li><a href=”#”>1</a></li>
<li class=”active”><a href=”#”>2</a></li>//当前页
<li><a href=”#”>3</a></li>
<li><a href=”#”>4</a></li>
</ul>
(2) <ul class=”pager”>
<li><a href=”#”>前一页</a></li>
<li><a href=”#”>后一页</a></li>
</ul>
6.下拉列表
<label for=”somewhere”>想去的地方</lable>
<select id=”somewhere”>
<option value=”US”>美国</option>
<option value=”UK”>英国</option>
</select>
7.用户登录
8.按钮
（1）按钮样式列表：
（2）按钮尺寸：
<div style=”margin-bottom:15px;”>
<a class=” btn btn-primary btn-larger” href=”#”>
<i class=”icon-comment”></i>查看评论 //<i>定义小图标
</a>
</div>
9.查阅小图标
10.按钮排列
11.按钮下拉菜单
需要引入：
（1）
（2）需要引入：
12.导航栏
//导航菜单始终位于页面顶端
需要引入：
导航栏中包含下拉框：
需要引入：
页面设置为响应菜单：
13.选项卡
Class=”nav-tabs” -> class=”nav-pills”之后：
点击选项卡，显示不同相应内容：
改变选项卡标签至左边：
14.提示
15.网页显示图片
16.弹出对话框
17.提示信息
（1）鼠标放置，显示提示简单信息
（2）鼠标放置，显示提示完整信息
18.折叠内容
多个内容，每次展开一个
19.图片左右切换