bootstrap的简单使用

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样式：分为了2个部分 1、提供了css reset - 如果你引入了bootstrap.css，不需要自己去重置样式 2、

	1、按钮：
	     *有用的：1、btn btn-default;//白底黑字的按钮
		     2、btn-block;//块级按钮
	     没用的：五种颜色（btn-danger/warning/success/info/primary） 和 四种大小(lg/md/sm/xs)

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

	     没用的：缩略图：img-thumbnail;

	3、文本：
	     *有用的：文本对齐方式：text-right/center/justify

	     没用的：五种文字颜色（text-颜色），五种背景颜色（bg-颜色）

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

5、推荐组件： 1、导航条 2、巨幕 - banner 3、缩略图 - 图片文字上下，图文并茂 - 产品 4、媒体对象 - 左边或者右边放图片，另一边放文字 - 公司简介 5、面包屑导航/路径导航

7、栅格式布局：使用步骤：10步

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

响应式项目必不可少的东西：

1、meat viewport元标签 - 如果缺少，手机端看不到手机端应有的效果，只能看到离自己最近的那个端的效果
2、媒体查询必不可少
3、千万不要使用绝对单位，要使用相对单位：rem
4、响应式图片：max-width: 100%;

不是所有的网站都适合做成响应式网页：比如：电商类;