Bootstrop学习

一、响应式网页

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>