一、响应式网页
1、概念
一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验；
2、容器栅格布局：
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
流体布局容器：容器的width为auto，只不过加了15px的padding
（1）row:代表行；（2）col-lg:大屏幕；（3）col-md:中等屏幕；（4）col-sm:小屏幕；（5）col-xs手机屏
固定布局：
容器的width会随着分辨率的不同而产生变化
分别率的值：
w > =1200 容器的width为1170 左右padding为15px
1200 > w >=992 容器的width为970 左右padding为15px
992 > w >=768 容器的width为750 左右padding为15px
w < 768 容器的width为auto 左右padding为15px
3、bootstrap 文本样式
BootStrap提供了丰富的文字样式，以便于我们对于网页中的文字进行排版。
text-left:向左对齐的文本
text-center:居中对齐的文本
text-right:向右对齐的文本
text-muted:颜色更灰的文字(弱化)
text-primary:主要文字(浅蓝色文字)
text-success:操作成功时的提示文字(绿色文字)
text-info:正常的提示信息(蓝绿色文字)
text-warning:警告信息(橙黄色字体)
text-danger:错误信息(红色字体)
<div class="container">
<h1 class="text-center">
一级标题
<small>副标题</small>
</h1>
<h2 class="text-right">二级标题<small>副标题</small></h2>
<p class="text-muted">如果一段文字需要更强的显示效果（文字是浅灰色的就使用）text-muted</p>
<p class="lead">如果一段文字需要更强的显示效果（文字更大，行距更高）lead</p>
<span class="text-primary">浅蓝色字体</span>
<span class="text-success">操作成功字体</span>
<span class="text-warning">警告字体</span>
<span class="text-info">提示信息字体</span>
<span class="text-danger text-nowrap text-uppercase">
如果sssssssssssssggggg一段文字需要更强的显示效果
如果一段文字需要更强的显示效果（文字更大，行距更高）lead
（文字更大，行距更高）lead>如果一段文字需要更强的显示效果（文字更大，行距更高）lead
</span>
<span class="text-lowercase">大写字母转小写：GGG AAA</span>
</div>
二、各类样式
2.1 流体布局
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
2.2 列表样式
HTML分为三种类型的列表： 有序列表、无序列表、描述列表
（一）list-unstyled:去掉列表的修饰符；
（二）dl-horizontal让内容并排显示
2.3表格样式
（一）条纹状表格： 通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。
（二）带边框的表格 添加 .table-bordered 类为表格和其中的每个单元格增加边框。
（三）鼠标悬停 通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
（四）紧缩表格 通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
（五）状态类 通过这些状态类可以为行或单元格设置颜色。
2.4 表单样式
（一）垂直表单（默认）
向所有的文本元素 、 和 添加 class =“form-control” 。
（二）内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 标签添加 class .form-inline
（三）水平表单
向父 元素添加 class .form-horizontal。
把文本提示标签和控件放在一个带有 class .form-group 的
中。
向文本提示标签添加 class .control-label。
<div class="container">
<h2>垂直表单</h2>
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" value="" />
</div>
<div class="form-group">
<label for="usex">性别</label>
<input type="radio" id="usex" />男
<input type="radio" />女
</div>
</form>
<h2>内联表单</h2>
<form class="form-inline">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" value="" />
</div>
<div class="form-group">
<label for="usex">性别</label>
<input type="radio" id="usex" />男
<input type="radio" />女
</div>
</form>
<h2>水平表单</h2>
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-lg-1">用户名</label>
<div class="col-lg-6">
<input type="text" class="form-control " id="username" value="" />
</div>
</div>
<div class="form-group">
<label class="col-lg-1" for="usex">性别</label>
<div class="col-lg-6">
<input type="radio" id="usex" />男
<input type="radio" />女
</div>
</div>
</form>
</div>
2.5 按钮
2.6图片样式
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
2.7字体图标
例如:在页面的显示效果就是一个用户的图标
2.8 下拉框组件
步骤：
（1）创建一个div容器，并且带有.dropdown的样式
（2）在容器内部添加两个标签，第一个是button标签，该标签代表下拉框的按钮，最好添加一个dropdown-toggle的样式，该样式会取消按钮选中之后的边框效果，至于下拉框的下箭头图标使用标签样式完成；除此之外还必须添加一个自定义属性data-toggle=“dropdown”
（3）在div容器的内部需要添加的第二个标签是一个ul标签，ul表示下拉框的所有下拉选项。该ul需要添加dropdown-menu的样式表属性
<ul class="nav nav-tabs">
<li class="active"><a href="javascript:0;" >最新商品</a></li>
<li><a href="javascript:0;">优惠商品</a></li>
<li>
<a href="javascript:0;" data-toggle="dropdown" >我的信息 <sapn class="caret"></sapn></a>
<ul class="dropdown-menu">
<li><a href="javascript:0;">我的订单</a> </li>
<li><a href="javascript:0;">我的订单</a> </li>
<li><a href="javascript:0;">我的订单</a> </li>
</ul>
</li>
</ul>
<ul class="nav nav-pills">
<li><a href="javascript:0;">最新商品</a></li>
<li><a href="javascript:0;">优惠商品</a></li>
<li>
<a href="javascript:0;" data-toggle="dropdown" >我的信息 <sapn class="caret"></sapn></a>
<ul class="dropdown-menu">
<li><a href="javascript:0;">我的订单</a> </li>
<li><a href="javascript:0;">我的订单</a> </li>
<li><a href="javascript:0;">我的订单</a> </li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(".nav>li").click(function(){
$(".nav>li").removeClass('active');
$(this).addClass("active")
})
</script>
