一、响应式网页
一、响应式网页 1、概念
一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验；
2、容器栅格布局：
提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（）尺寸的增加，系统会自动分为最多12列。
流体布局容器：容器的width为auto，只不过加了15px的
（1）row:代表行；（2）col-lg:大屏幕；（3）col-md:中等屏幕；（4）col-sm:小屏幕；（5）col-xs手机屏
固定布局：容器的width会随着分辨率的不同而产生变化
分别率的值：w > =1200 容器的width为1170 左右padding为15px1200 > w >=992 容器的width为970 左右padding为15px992 > w >=768 容器的width为750 左右padding为15pxw < 768 容器的width为auto 左右padding为15px
3、 文本样式
提供了丰富的文字样式，以便于我们对于网页中的文字进行排版。
text-left:向左对齐的文本
text-:居中对齐的文本
text-right:向右对齐的文本
text-muted:颜色更灰的文字(弱化)
text-:主要文字(浅蓝色文字)
text-:操作成功时的提示文字(绿色文字)
text-info:正常的提示信息(蓝绿色文字)
text-:警告信息(橙黄色字体)
text-:错误信息(红色字体)
<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 流体布局
将最外面的布局元素 . 修改为 .-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
2.2 列表样式
HTML分为三种类型的列表： 有序列表、无序列表、描述列表
（一）list-:去掉列表的修饰符；
（二）dl-让内容并排显示
2.3表格样式
（一）条纹状表格： 通过 .table- 类可以给 之内的每一行增加斑马条纹样式。
（二）带边框的表格 添加 .table- 类为表格和其中的每个单元格增加边框。
（三）鼠标悬停 通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
（四）紧缩表格 通过添加 .table- 类可以让表格更加紧凑，单元格中的内补（）均会减半。
（五）状态类 通过这些状态类可以为行或单元格设置颜色。
2.4 表单样式
（一）垂直表单（默认）
向所有的文本元素 、 和 添加 class =“form-” 。
（二）内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 标签添加 class .form-
（三）水平表单
向父 元素添加 class .form-。
把文本提示标签和控件放在一个带有 class .form-group 的
中。
向文本提示标签添加 class .-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-：添加 -:6px 来获得图片圆角。
.img-：添加 -:50% 来让整个图片变成圆形。
.img-：添加一些内边距（）和一个灰色的边框。
2.7字体图标
例如:在页面的显示效果就是一个用户的图标
2.8 下拉框组件
步骤：
（1）创建一个div容器，并且带有.的样式
（2）在容器内部添加两个标签，第一个是标签，该标签代表下拉框的按钮，最好添加一个-的样式，该样式会取消按钮选中之后的边框效果，至于下拉框的下箭头图标使用标签样式完成；除此之外还必须添加一个自定义属性data-=“”
（3）在div容器的内部需要添加的第二个标签是一个ul标签，ul表示下拉框的所有下拉选项。该ul需要添加-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>
