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>