BootStrap

一、Bootstrap 下载
官网：http官网：http://getbootstrap.com/@TOC
中文网：http://www.bootcss.com/
二、Bootstrap 特点
1、简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让
web 开发更迅速、简单。
2、基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，
卓越的兼容性，响应式设计，12 列格网，样式向导文档。
3、自定义 JQuery 插件，完整的类库，bootstrap3 基于 Less，bootstrap4
基于 Sass 的 CSS 预处理技术
4、Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。
Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。
5、丰富的组件
三、下载与使用
1、下载: http://v3.bootcss.com/getting-started/
2、下载完成后，
拷贝 dist/css 中的 bootstrap.min.css 到项目 css 中
拷贝 dist/js bootstrap.min.js 到项目的 js 中
3、下载 jquery.js
http://jquery.com/
注意:
目前暂时不使用 jquery 的插件 可以不用引入.js,这里是为了保证模
板的完整性。
说明：
（1）ViewPort 标记用于指定用户是否可以缩放 Web 页面
（2）width 和 height 指令分别指定视区的逻辑宽度和高度。他们的值
要么是以像素为单位的数字，要么是一个特殊的标记符号。
（3）width 指令使用 device-width 标记可以指示视区宽度应为设备
的屏幕宽度。
（4）height 指令使用 device-height 标记指示视区高度为设备的屏
幕高度。
（5）initial-scale 指令用于设置 Web 页面的初始缩放比例。默认的
初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在
浏览器中呈现出整个 Web 页面，设为 1.0 则将显示未经缩放的 Web 文档。
四、布局容器
1、.container 类用于固定宽度并支持响应式布局的容器。

...

<div class="container" style="background-color: cyan;height: 30px;"> </div>

2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容
器。

...

<div class="container-fluid" style="background-color: cyan;height: 30px;"> </div>

五、栅格网格系统(Grid System)

1、列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超 12，大于12,则自动换到下一行。），有点类似于表格的 colspan 属性。

<div class="row">
				<!--设置栅格网格系统-->
				<div class="col-md-1 col-sm-1 col-xs-1" style="background-color: rosybrown;">1</div>
				<div class="col-md-2 col-sm-2 col-xs-2" style="background-color: azure;">2</div>
				<div class="col-md-8 col-sm-8 col-xs-8" style="background-color: tomato;">8</div>
				<div class="col-md-2 col-sm-2 col-xs-2" style="background-color: brown;">2</div>
			</div>
			<div class="row">
				<!--设置栅格网格系统-->
				<div class="col-md-1 col-sm-1 col-xs-1" style="background-color: blanchedalmond;">1</div>
				<div class="col-md-2 col-sm-2 col-xs-2" style="background-color: cornflowerblue;">2</div>
				<div class="col-md-8 col-sm-8 col-xs-8" style="background-color: khaki;">8</div>
				<div class="col-md-1 col-sm-1 col-xs-1" style="background-color: lawngreen;">2</div>
			</div>

2、列偏移、列排序
（1）列偏移
如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏
移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表
要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素
上添加“col-md-offset-8”，表示该列向右移动 8 个列的宽度(要保证列与偏移
列的总数不超过 12，不然会致列断行|换行显示)。

<div class="row">
				<div class="col-md-4" style="background-color: blanchedalmond;">4</div>
				<div class="col-md-2 col-md-offset-1" style="background-color: cornflowerblue;">2</div>
				<div class="col-md-1" style="background-color: blueviolet;">1</div>
			</div>
			<div class="row">
				<div class="col-md-4" style="background-color: burlywood;">4</div>
				<div class="col-md-2 col-md-offset-10" style="background-color: cadetblue;">2</div>
				<div class="col-md-1" style="background-color: indianred;">1</div>
			</div>
			<!--列偏移-->

（2）列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
在 Bootstrap 框架的网格系统中是通过添加类名 ”col-md-push-” 和
“col-md-pull-” (其中星号代表移动的列组合数)。往前 pull，往后 push。

<!--列排序-->
			<div class="row">
				<div class="col-md-4" style="background-color: blanchedalmond;">4</div>
				<div class="col-md-2" style="background-color: cornflowerblue;">2</div>
				<div class="col-md-1 col-md-pull-3" style="background-color: blueviolet;">1</div>
			</div>
			<div class="row">
				<div class="col-md-4" style="background-color: rosybrown;">4</div>
				<div class="col-md-2 col-md-push-3" style="background-color: bisque;">2</div>
				<div class="col-md-1" style="background-color: tomato;">1</div>
			</div>
			<!--列排序-->

3、列嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.

<!--列嵌套-->
			<div class="row">
				<div class="col-md-6" style="background-color: rosybrown;">
					6
					<div class="row">
						<div class="col-md-4" style="background-color: burlywood;">4</div>
						<div class="col-md-4" style="background-color: sandybrown;">4</div>
						<div class="col-md-4" >4</div>
					</div>
				</div>
				<div class="col-md-6" style="background-color: thistle;">
					6
				</div>
			</div>
			<!--列嵌套-->

注意: 网格系统必须使用到 css
container、row 、xs (xsmall phones), sm (small tablets), md (middle desktops) lg (larger desktops) 即:
超小屏(自动)，小屏(750px)，中屏(970px)和大屏(1170px)
数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于
12,则自动换到下一行。
具体内容应当放置在列容器（column）之内

六、排版
1.标签
h1-h6:bootstrap定义了样式覆盖了原来的标题效果
其他 标签使用.h1-.h6样式，也可以有h1-h6的效果
:小号字体，或者设置.small属性

2.段落
段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理。可以使用
以下标签给文本做突出样式处理：

	            <small>:小号字
				<b><strong>:加粗
				<i><em>:斜体

3.引用

<blockquote>：标签定义摘自另一个源的块引用，
					使用.blockquote-reverse，实现右对齐。
					<footer>:脚注
					<cite>：表示对某个参考文献的引用

	<!--标题-->
		<h1>标题1<small>副标题</small></h1>
		<h2>标题2<span class="small">副标题</span></h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
		<p class="h2">标签</p>
		
		<hr />
		<!--段落-->
		<p>以后的你会感谢现在的自己</p>
		<p class="lead">以后的你会感谢现在的自己</p>
		<p class="lead"><b>以后</b><em>的</em><small>你</small>会<i>感谢</i>现在的<strong>自己</strong></p>
		
		
		<hr />
		
		<blockquote class="blockquote">
			好好学习 Java！
			<footer>本文出自大师之手</footer> 
			<cite>thinking in java</cite> 
		</blockquote>

4.强调
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

<div class="text-muted">提示效果</div>
		<div class="text-primary">主要效果</div>
		<div class="text-success">成功效果</div>
		<div class="text-info">信息效果</div>
		<div class="text-warning">警告效果</div>
		<div class="text-danger">危险效果</div>

5. 文本对齐
   使用 text-align 来实现文本的对齐风格的设置。
   其中主要有四种风格：
   左对齐，取值 left ;
   居中对齐，取值 center;
   右对齐，取值 right ;
   两端对齐，取值 justify。
   为了简化操作，方便使用，Bootstrap 通过定义四个类名来控制文本的对齐
   风格： .text-left：左对齐
   .text-center：居中对齐
   .text-right：右对齐
   .text-justify：两端对齐。

	<div>
			Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
		</div>
		<div style="text-align: center;">
			Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
		</div>
		<hr />
		<div style="text-align: justify;">
			Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
		</div>
		
		<hr />
		<div class="text-justify">
			Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
		</div>
		

6.列表
在 HTML 文档中，列表结构主要有三种：
无序列表(

• …

)、
有序列表(

1. …

)、
定义列表(

…

…

)。
bootstrap 根据平时的使用情形提供了六种形式的列表:( 普通列表、有序
列表、去点列表、内联列表、描述列表、水平描述列表）。在样式方面 Bootstrap
只是在原有的基础上做了一些细微的优化(margin 调整),其他差别不大，加入
了一些样式:
（1）去点列表:
class=“list-unstyled”
（2）内联列表:
class=” list-inline” 简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。
（3）定义列表:
在原有的基础加入了一些样式，使用样式 class=“.dl-horizontal”制作
水平定义列表 : 当标题宽度超过160px时，将会显示三个省略号 bootstrap4
貌似有问题，看样子还是不稳定，bootstrap3 中的 css 没有问题

<ul>
			<li>等你下课</li>
			<li>我不配</li>
		</ul>
		<ul class="list-unstyled">
			<li>等你下课</li>
			<li>我不配</li>
		</ul>
		<ul class="list-inline">
			<li>等你下课</li>
			<li>我不配</li>
		</ul>
		<br />
		<dl>
			<dt>张三</dt>
			<dd>数学</dd>
			<dd>英语</dd>
			<dt>李四</dt>
			<dd>数学</dd>
			<dd>英语</dd>
		</dl>
		<dl >
		 <dt> bootstrap3 的 css </dt>
		 <dd>一站式</dd> 
		 <dt>测试标题不能超过 160px 的宽度,否则 2 个点</dt>
		 <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
		</dl>
		
		<dl class="dl-horizontal">
		 <dt>使用 bootstrap3 的 css </dt>
		 <dd>一站式的 </dd> 
		 <dt>测试标题不能超过 160px 的宽度,否则 2 个点</dt>
		 <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
		</dl>
		

7…代码
主要提供了三种代码风格：
（1）使用来显示单行内联代码
（ 2 ） 使 用

来 显 示 多 行 块 代 码 ， 样 式 : pre-scrollable
(height,max-height 高度固定,为 340px,超过存在滚动条)
（3）使用 来显示用户输入代码,如快捷键
不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来
替代，大于号(>)使用“>”来替代。

<code>
			private void test() {
				System.out.println("Hello");
			}
		</code>
		
<pre>
	private void test() {
		System.out.println("Hello"); 
	}
</pre>

<pre class="pre-scrollable">
	private void test() {
		System.out.println("Hello"); 
	}
	private void test() {
		System.out.println("Hello"); 
	}
	private void test() {
		System.out.println("Hello"); 
	}
	private void test() {
		System.out.println("Hello"); 
	}
	private void test() {
		System.out.println("Hello"); 
	}
	private void test() {
		System.out.println("Hello"); 
	}
	
	&lt;h2&gt;NIHAO&lt;/h2&gt;
</pre>

六、表单
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让
网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、
单选按钮、复选按钮、文本域和按钮等。
1、表单控件
.form-control .input-lg（较大） .input-sm（较小）
（1）输入框
.form-control
（2）下拉选择框 select
多行选择设置：multiple=“multiple”
（3）文本域 textarea

（4）复选框 checkbox
.checkbox，水平显示：.checkbox-inline
（5）单选择按钮
.radio， 水平显示：.radio-inline
（6）按钮
1）使用 button 实现
基础样式: btn
附加样式：btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2）多标签支持:使用 a div 等制作按钮
3）按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
4）按钮禁用
方法 1：在标签中添加 disabled 属性
方法 2：在元素标签中添加类名“disabled”
在 class 属性中添加 disabled 只是样式上禁用了，并不是真正的禁用了此按钮！

<!--布局容器-->
		<div class="container">
			<!--文本框-->
			<div class="row">
				<div class="col-md-4">
					<label for="uname">姓名：</label> 
					<input type="text" id="uname" />
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<label for="uname">姓名：</label> 
					<input type="text" id="uname" class="form-control" />
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<label for="uname">姓名：</label> 
					<input type="text" id="uname" class="form-control input-lg" />
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<label for="uname">姓名：</label> 
					<input type="text" id="uname" class="form-control input-sm" />
				</div>
			</div>
			<hr />
			<!--下拉框-->
			<div class="row">
				<div class="col-md-4">
					<label for="uname">城市：</label> 
					<select>
						<option>-请选择-</option> 	
						<option>北京</option> 
						<option>上海</option> 
					</select>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<label for="uname">城市：</label> 
					<select class="form-control">
						<option>-请选择-</option> 	
						<option>北京</option> 
						<option>上海</option> 
					</select>
				</div>
			</div>
			
			<hr />
			<!--文本域-->
			<div class="row">
				<div class="col-md-4">
					<label for="uname">简介：</label> 
					<textarea  rows="5" cols="40"></textarea>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<label for="uname">简介：</label> 
					<textarea class="form-control"  rows="5" cols="40"></textarea>
				</div>
			</div>
			<hr />
			
			<!--复选框-->
			<div class="row">
				<div class="col-md-4">
					<label for="uname">爱好：</label> 
					<input type="checkbox" name="hobby" /> 唱歌
					<input type="checkbox" name="hobby"  /> 跳舞
					<input type="checkbox" name="hobby"  /> Rap
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<label for="uname">爱好：</label> 
					<div class="checkbox">
						<label><input type="checkbox" >游戏1</label>
						<label><input type="checkbox" >游戏2</label>
					</div>
					<div>
						<label class="checkbox-inline">
							<input type="checkbox" >游戏1
						</label>
						<label class="checkbox-inline">
							<input type="checkbox" >游戏2
						</label>
					</div>
				</div>
			</div>
			<hr />
			
			<!--单选框-->
			<div class="row">
				<div class="col-md-4">
					<label for="usex">性别：</label> 
					<input type="radio" name="usex" /> 男
					<input type="radio" name="usex"  /> 女
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<label for="uname">性别：</label> 
					<div class="radio">
						<label><input type="radio" >男</label>
						<label><input type="radio" >女</label>
					</div>
					<div>
						<label class="radio-inline">
							<input type="radio" >男
						</label>
						<label class="radio-inline">
							<input type="radio" >女
						</label>
					</div>
				</div>
			</div>
			<hr />
			
			<!--按钮-->
			<div class="row">
				<div class="col-md-4">
					<input type="button" value="按钮1" />
					<button>按钮2</button>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<input type="button" value="按钮1" class="btn" />
					<button class="btn">按钮2</button>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<input type="button" value="按钮1" class="btn btn-default" />
					<button class="btn btn-primary">按钮2</button>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<input type="button" value="按钮1" class="btn btn-default btn-xs" />
					<button class="btn btn-primary btn-lg">按钮2</button>
					<button class="btn btn-danger btn-sm">按钮2</button>
					<button class="btn btn-success btn-sm">按钮2</button>
					<button class="btn btn-info btn-sm">按钮2</button>
					<button class="btn btn-warning btn-sm">按钮2</button>
					<button class="btn btn-link btn-sm">按钮2</button>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<div class="btn btn-info">按钮</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<button class="btn btn-danger" onclick="alert(1);" disabled="disabled">按钮</button>
					<button class="btn btn-warning disabled" onclick="alert(1);" >按钮</button>
				</div>
			</div>	
		</div>

（1）水平表单:
同一行显示 form-horizontal
配合 Bootstrap 框架的网格系统

<!--水平表单-->
		<form class="form-horizontal">
			<div class="form-group">
				<label for="email" class="control-label col-sm-2">邮箱</label>
				<div class="col-sm-2">
					<input type="email" class="form-control" placeholder="请输入邮箱" />
				</div>
			</div>
			<div class="form-group">
				<label for="password" class="control-label col-sm-2">密码</label>
				<div class="col-sm-2">
					<input type="password" class="form-control" placeholder="请输入密码" />
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2">
					<div class=" checkbox">
						<label> <input type="checkbox" />记住密码 </label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-4">
					<button class="btn btn-default">提交</button>
				</div>
			</div>
		</form>

（2）内联表单：将表单的控件都在一行内显示 form-inline
注意 label 不会显示，存在的意义: 如果没有为输入控件设置 label 标签，
屏幕阅读器将无法正确识别。

<!--内联表单-->
		<form class="form-inline">
			<div class="form-group">
				<label for="email">邮箱</label>
				<input type="email" class="form-control" placeholder="请输入邮箱" />
			</div>
			<div class="form-group">
				<label for="password">密码</label>
				<input type="password" class="form-control" placeholder="请输入密码" />
			</div>
			<div class="form-group checkbox">
				<label><input type="checkbox" />记住密码</label>
			</div>
			<div class="form-group">
				<button class="btn btn-default">提交</button>
			</div>
		</form>