1、使用Bootstrap

一定要引入

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

2、全局css样式

(1)按钮

btn  btn-default;//白底黑字的按钮

(2)图片

1、img-rounded;  -> border-radius: 6px;
2、img-circle;  -> border-radius: 50%;//这两个class不是只有图片能用

(3)文本

文本对齐方式：text-right/center/justify

(4)表格

1、table - 长得像个表格
2、table-striped - 隔行变色
3、table-hover - 带有悬停效果
4、table-border - 带有边框
5、table-condensd - 紧缩型表格
6、table-responsive - 响应式表格，必须设置在table的父元素身上

3、推荐组件

1、导航条

2、巨幕 - banner

3、缩略图 - 图片文字上下，图文并茂 - 产品

4、媒体对象 - 左边或者右边放图片，另一边放文字 - 公司简介

5、面包屑导航/路径导航

4、栅格式布局

1、必须放上一个容器：

<div class="container/container-fluid"></div>

2、必须在此容器中放入行：

<div class="row"></div>

3、必须在此容器中放入列：

<div class="col-*-*"></div>

4、在不同的屏幕设置不同的列宽

col-lg/md/sm/xs-*

5、列宽：bootstrap将一行等分为了12份

col-屏幕-列宽（1-12）

6、更小的屏幕设置列宽可以管住更大屏幕

	lg - 只能管lg屏幕
	md - 只能管lg/md屏幕
	sm - 只能管lg/md/sm屏幕
	xs - 管所有
	自己有，优先用自己的，自己没有优先用离自己近的

7、设置偏移：设置向左顶出几份

	col-屏幕-offset-列宽
	lg - 只能管lg屏幕
	md - 只能管lg/md屏幕
	sm - 只能管lg/md/sm屏幕
	xs - 管所有
	自己有，优先用自己的，自己没有优先用离自己近的

8、设置在某个屏幕隐藏：只管自己屏幕，不管别人

	hidden-屏幕

9、不推荐：列中可以继续嵌套行，一行又会分为12份，如果列太小了，什么都放不下

10、栅格式布局是一个怪异盒模型：设置间距要用border