<meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no">
BootStrap是一种前端框架
BootStrap布局
必须放在这两个容器中的其中一个
<div class="container></div> 或者<div class="container-fluid"></div>
排版的标签
.page-header是对于<h1>~<h6>中的标题，并且给标题一个分割线
<small></samll>:副标题 小一号； <big></big>:副标题 大一号
<strong></strong> <em></em> <del></del>
对于文本（都有前缀text）
.text-right ：右对齐
.text-left：左对齐
.text-center:居中
对于设置英文大小写问题（也属于文本的一部分，所有也有前缀text）
.text-uppercase：对文本中的英文字母全都大写
.text-lowercase:对文本中的英文字母全都小写
.text-capitalize: 对文本中的英文首字母大写
对于列表
.list-unstyled：去除列表前面的符号和去掉原有的格式
.list-inline: 把<li></li>之间的内容变成横向排列
对于自定义的列表
.dl-horizontal：设置变成横向排列
<dl class="dl-horizontal">
<dt>标题</dt>
<dd>内容</dd>
</dl>
表格（table）
.table:代表表格一个基类，（基本的类加其他的效果都是在.table的基础上）
.table:没有外边框
.table-bordered:给表格加上外边框
.table-hover: 鼠标悬停效果，鼠标一到行或者单元格就会变色
.table-striped:斑马线效果，隔行换色，这个与鼠标悬停没有任何关系，一打开页面就会显示
.table-condensed:让表格看起来变得紧凑
响应式表格(也是表格，就要以table为前缀)
.table-responsive:给table的父元素加，以移动设备（手机，平板等，360浏览器不是移动设备）为优先，如果内容不能完全显示，会出现响应式的滚动条响应设备的窗口的大小
<div class="table-responsive">
<table class="table table-hover table-bordered, table-striped table-condensed">
<tr>编号</tr>
对于行的状态类
行的标签有<tr>或者<td>
下面这几个状态类对是对于行来做处理的
.action :鼠标悬停在行或者单元格时所设置的颜色
.success.标识成功或积极的工作
.info: 标识普通的提示信息或者动作
.warning : 标识警告或者需要用户注意
.danger: 标识危险或者潜在的带有负面影响的动作
<tr class="danger">
响应式图片（一般是和栅格系统一起使用,既然是图片那么他的前缀是img）
.img-responsive: 响应式图片
.img-circle:椭圆形
.img-rounder:改变了图片的四个角，变成曲面的
.img-thumbnail:给图片加了圆角边框
<div class="container-fluid">
<img scr="img/1.jpg" class="img-responsive ">
栅格系统（一定要放在容器中）
必须放在
<div class="container"></div>或者<div class="container-fluid"></div>
栅格系统的作用：栅格系统，浏览器窗口自动分配最多12列，栅格系统是由行（row）和列(col)构 成，就是把我们的屏幕分成12份，在里面放东西
一行里面有12列： col-md-1:代表一列，所有的列都是一定放在行里的
超出12列就会换到下一行
col-md-4:数字是几就代表在一行中占几列
需求：在一行里面，第一块占两列，第二个块占三列，第三个块占7列
<div class="row">
<div class="col-md-2">22<div>
<div class="col-md-3">33<div>
<div class="col-md-7">77<div>
</div>
需求：pc端的， 中等屏幕，一行显示三张图片
下面只是其中一个
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="imgs/1.jpg" class="img-responsive" alt="别说">
<h3 class="page-header">标题</h3>
<p>内容哈哈哈</p>
<div>
<div>
<div>
栅格系统的参数
如果想做成响应式效果，使用栅格系统参数
小于768手机端 col-sx-
大于768小于992平板 col-sm-
大于992小于1200 col-md-
大于1200 col-lg-
案例：pc机大屏幕显示四张图片，pc机中等屏幕显示三张图片，平板显示两张图片，手机端显示 一张图片
<div class="container" >
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img src="images/1.jpg" class="img-responsive">
</div>
</div>
</div>
栅格系统的偏移（只能向右偏移）
语法:是col-xs/sm/md/lg-offset-数值
注意：如果超出本行就会从下一行重新算起
<div class="row">
<div class="col-md-4"><div>
<div class="col-md-2 col-md-offset-3">22</div>
</div>
栅格系统的排序（了解）
语法：col-xs/sm/md/lg-pull-数值 向左偏移
col-xs/sm/md/lg-pull-数值 向右偏移
<div class="row">
<div class="col-md-4 col-md-push-8">55</div>
<div class="col-md-8 col-md-push-4">44</div>
</div>
辅助类样式
1.情景文本颜色：.text-muted(柔和)， .text-success(成功的颜色) .text-primary(初始化颜色)
.text-info(信息的颜色) .text-waring(警告的颜色) .text-danger(危险的颜色）
2.背景文本颜色（五种）： bg-success .bg-primary bg-info bg-waring bg-danger
3.下拉三角：语法：<span class="caret"></span>:这种中间没有内容
表单， 复选框，单选框
1.表单：class="form-group":这是分组，是为了两者上下有距离，给输入框的父元素加，给外面包 含的盒子加，但是只是在表单的范围内
边框样式用 for-control; 作用的标签有<input><textarea>加
2.复选框
.checkbox-inine:给label标签加，给包含<input>和内容加
disabled:禁止的意思，不能选中，也不能修改，不过这只是在框里禁止，并没有在文字上
如果想要在文字上禁止的要
<label class="checkbox-inline disabled"><input type="checkbox" name="hoddy" disabled> 敲代码</label>
3.单选框
.radio-inline:给label标签加，包含<input>包含加
<div class="form-group">
<label class="radio-inline"><input type="radio" name="sex" value="男">男</label>
<label class="radio-inline disabled"><input type="radio" name="sex" value="男" disabled>男</label>
</div>
复选框
.input-group-addon:给组合的内容加
.input-group:给父元素加
.form-control:把输入框变成圆角
<div class="input-group>
<span class="input-group-addon">搜索</span>//也可以放在input后面
<input type="search" name="sc" id="sc" class="form-control">
</div>
------------------------
在<span class="glyphicon glyphicon-user"></span>图标中一定不要加内容
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" name="username" class="form-control">
</div>
响应是表单
坐表单是可以省略行
.form-horizontal:给表单加form
响应式效果，一定结合栅格系统
注意：输入框不能划分栅格系统的，如果想使用栅格系统，可以给<div><span>..加
按钮
普通按钮，可以加按钮效果的有哪些标签，下面这三个
<input type="button" value="按钮">
或者
<button type="button">按钮<button>
或者
<a href="">内容</a>，也可以使用按钮
.btn是按钮样式的基类
.btn-primary .btn-defalut .btn-success .btn-warning .btn-danger
<div class="container">
<button class="btn btn-primary">确定要删除吗</button>
<input type="button" value="修改" class= “btn btn-default”>
<a href="#" class="btn btn-danger">修改内容</a>
</div>
action：是激活的意思，当鼠标放在上面颜色会发生变化
设置按钮的大小：btn-lg(大的)， .btn-sm(中等) .btn-xs(最小的常用的)
<a href="#" class="btn btn-danger btn-lg" >修改内容</a>
按钮组：用的是btn-group，就是把所有的按钮连在一起
btn-group:是个父元素加，至于class里面的btn-success这个东西可以不同
<div class="btn-group">
<button class="btn btn-success">修改按钮</button>
<button class="btn btn-danger" >修改按钮</button>
</div>
标签页
.nav-tabs :是普通标签页
.nav-pills:胶囊式标签页
action ;默认的激活项，给<li>加默认显示的是哪个标签页内容
.nav是标签页的一个基类，给ul加
.nav-stacked: 垂直排列
导航