Bootstrap（二）

响应式工具：针对不同设备展示或者隐藏页面内容

visible-*-*：第二参数有（lg，md，sm，xs），第三个参数有（block，inline-block，inline）

<div class="row">
<div class="col-lg-6 visible-lg-block">col-lg-6</div><!-- visible-lg-block的意思就是当屏幕满足1200px以上，这个div是显示的，其余的时候都隐藏这个div -->
<div class="col-lg-6 visible-md-block">col-lg-6</div><!-- visible-md-block的意思就是当屏幕满足992px到1200px之间的时候，这个div才会显示，其余的时候都隐藏这个div -->
<div class="col-lg-6 hidden-sm hidden-xs">col-lg-6</div><!-- hidden-sm/xs的意思就是当屏幕小于992px时，这个div才会隐藏，其余的时候都显示这个div -->
</div>实例：右侧菜单栏的变化
.one{
width:30px;
height: 400px;
top:20px;
right:0;
background: #000;
}
.two{
width:30px;
height: 80px;
top:20px;
right:0;
background: blue;
}

<div class="container-fluid">
<div class="row">
<div class="one visible-lg-block visible-md-block visible-sm-block affix"></div>
<div class="two hidden-lg hidden-md hidden-sm affix"></div>
<div>明天你好</div>
</div>
</div>

打印类：visible-print-block/inline-block/inline（只有在打印的时候才会显示出来，网页浏览时，是不会显示的）
              hidden-print-block/inline-block/inline（只有在打印的时候才会隐藏，网页浏览时，是会显示的）

Glyphicons字体图标   http://v3.bootcss.com/components/（与Bootstrap联合使用是免费的）

好处：（1）减少请求     （2）容易控制样式  

用法：font-face （与字体用法相同），图标的大小用font-size来改变，图标的颜色用color来控制。

注意：font文件夹要与css或者js等文件夹同级，如果不同级，需要在bootstrap.css中修改font-face的路径

<div class="row">
<div class="glyphicon glyphicon-search" style="font-size:40px;color:red;"></div><!-- 尽量不要在字体图标中写内容 -->
</div>如何自定义图标：http://jingyan.baidu.com/article/f79b7cb346cf499145023e78.html

预定义样式风格

（1）primary（首选项）   （2）success（成功）   （3）info（一般信息）

（4）warning（警告）      （5）danger（危险）     （6）实例：登录框

<div class="row">
<br>
<input type="button" value="默认样式">
<input type="button" value="首选项" class="btn btn-primary">
<input type="button" value="成功" class="btn btn-success">
<input type="button" value="一般信息" class="btn btn-info">
<input type="button" value="警告" class="btn btn-warning">
<input type="button" value="危险" class="btn btn-danger">
<br>
<br>
<p>默认样式</p>
<p class="bg-primary">首选项</p>
<p class="bg-success">成功</p>
<p class="bg-info">一般信息</p>
<p class="bg-warning">警告</p>
<p class="bg-danger">危险</p> //背景的class = "bg bg-预定义样式"
<br>
<span>默认样式</span>
<span class="text-primary">首选项</span>
<span class="text-success">成功</span>
<span class="text-info">一般信息</span>
<span class="text-warning">警告</span>
<span class="text-danger">危险</span><br> //文字的class = "text text-预定义样式"
<div class="alert alert-warning">我是警告框</div> //警告框的class = "alert alert-预定义样式"<br>
<div class="panel panel-primary"> //面板的class = "panel paner-预定义样式"
<div class="panel-heading"> //分为panel-heading
<h4>我是面板标题</h4>
</div>
<div class="panel-body"> //panel-body
我是面板的主题内容
</div>
</div>
</div>
</div>登录案例：
<div class="row">
<br>
<div class="panel panel-primary one">
<div class="panel-heading">
Login
</div>
<div class="panel-body">
<div class="form-group">
<label>用户名：</label><input type="text" class="form-control">
<div class="alert alert-warning">用户名不能为空!</div>
<label>密码：</label><input type="password" class="form-control">
<a href="#" class="text-info">忘记密码?</a>
</div>
<input type="button" value="登录" class="btn btn-primary pull-right">
</div>
</div>