bootstrap介绍

1、bootstrap

简单、直观、强悍的前端开发框架，让web开发更迅速、简单。来自twitter，是目前很受欢迎的前端框架之一。Bootstrap是基于HTML、CSS、JavaScript的，让属性代码更容易。移动优先，响应式布局开发。
bootstrap中文网址：boostrap中文网址

2、bootstrap容器

container-fluid 流体
container
1170
970
750
100%

<div class="container-fluid">流体容器</div>
<div class="container">响应式固定容器</div>

bootstrap响应式查询区间：
1、大于等于768
2、大于等于992
3、大于等于1200

bootstrap栅格系统：
bootstrap将也买你横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统。

1、col-lg- 大于1200排成一行，小于1200分别占一行
2、col-md- 大于992排成一行，小于992分别占一行
3、col-sm- 大于768排成一行，小于768分别占一行
4、col-xs- 始终排列成一行

<div class="container">
	<div class="row">
			<div class="col-lg-3 col-md-6">col-lg-3</div>
			<div class="col-lg-3 col-md-6">col-lg-3</div>
			<div class="col-lg-2 col-md-6">col-lg-2</div>
			<div class="col-lg-4 col-md-6">col-lg-4</div>
	</div>
</div>

列偏移
1、col-lg-offset-
2、col-md-offset-
3、col-sm-offset-
4、col-xs-offset-

bootstrap隐藏类
1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg

bootstrap按钮
1、btn声明按钮
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽度的100%
13、active
14、disabled
15、btn-group 通常用a标签做，可以加btn-group-justfied
如果用input标签，需要另用一个div并给class=“btn-group”

bootstrap图片
img-responsive 声明响应式图片

bootstrap字体图标
通过字体代替图标，font文件夹需要和css文件夹在同一目录

bootstrap导航条
1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式
3、navbar-inverse 声明反白的导航条样式
4、navbar-static-top 去掉导航条的圆角
5、navbar-fixed-top 固定到顶部的导航条
6、固定到底部的导航条
7、navbar-header 申明logo的容器
8、navbar-brand 针对logo等固定内容的样式
9、nav navbar-nav 定义导航条中的菜单
10、navbar-form 定义导航条中的表单
11、navtar-btn 定义导航条中的按钮
12、navbar-text 定义导航条中的文本
13、navbar-left 菜单靠右
14、navbar-right 菜单靠左

<div class="navbar navbar-inverse navbar-static-top">
	<div class="container">
		<div class="navbar-header">
			<button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a href="#" class="navbar-brand">loga</a>
		</div>
		
		<!--定义菜单里的表单-->
		<div class="collapse navbar-collapse" id="mymenu">
			<ul class="nav navbar-form">
				<li><a href="#">首页</a></li>
				<li><a href="#">打卡</a></li>
				<li><a href="#">就餐</a></li>
			</ul>
			
			<!--定义菜单里的表单-->
			<form class="navbar-form navbar-left">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control">
						<span class="input-group-btn">
							<button class="btn btn-default">
							 <span class="glyphicon glyphicon-search"></span>
							</button>
						</span>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

模态框（弹窗）
1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义小尺寸模态框
5、modal-header
6、modal-body
7、modal-footer