bootstrap
简单、直观、强悍的前端开发框架，让web开发更迅速、简单。 来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。Bootstrap 是移动设备优先的，默认支持响应式布局开发。
bootstrap中文网址：http://www.bootcss.com/
要使用bootsrap需要引入bootstrap.js和bootstrap.css
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
因为支持移动开发，还要添加viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- 快捷键：meta:vp按tab
一、bootstrap 容器
Bootstrap提供了两种容器用于为页面内容和栅格系统包裹一个 .container 容器。
- .container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
-
注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
统一样式下流体容器和响应式容器的区别：流体容器始终占用100%宽度，响应式容器会随着浏览器的缩小而改变宽度
二、bootstrap响应式查询区间：
1、大于等于768
2、大于等于992
3、大于等于1200
官方文档给出的图更直接一些
三、bootstrap 栅格系统
bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：
- col-lg- ：大于1200排成一行，小于1200分别占一行
- col-md- ：大于992排成一行，小于992分别占一行
- col-sm- ：大于768排成一行，小于768分别占一行
- col-xs- ：始终排列成一行
例：
<body>
<div class="container">
<h1>栅格系统</h1>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-2">col-lg-2</div>
<div class="col-lg-3">col-lg-3</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-2">col-md-2</div>
</div>
<br>
<br>
<div class="row">
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<br>
<br>
<div class="row">
<div class="col-xs-5">col-xs-5</div>
<div class="col-xs-3">col-xs-3</div>
<div class="col-xs-2">col-xs-2</div>
<div class="col-xs-2">col-xs-2</div>
</div>
</div>
</body>
效果：
- 可以看出lg、md、sm、xs的区别
- 由于页面12等分，所以如果一个div中col-lg/md/sm/xs-后面的数加起来超过12，这一个div里的内容就不会显示在同一行
Bootstrap响应式布局示例
<body>
<div class="container">
<h1>栅格系统响应式布局</h1>
</div>
<div class="container">
<div class="row">
<!-- lg和md时为一行，sm时为2行 -->
<div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
<div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
<div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
<div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
</div>
</div>
</body>
四、列偏移
1、col-lg-offset-
2、col-md-offset-
3、col-sm-offset-
4、col-xs-offset-
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
<div class="container">
<div class="row">
<div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">col-lg-5+1offset</div>
<div class="col-lg-5 col-md-5 ">col-lg-5</div>
</div>
<br>
<br>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1">col-lg-4+1offset</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">col-lg-4+2offset</div>
</div>
</div>
可以看到第二行两格中间有2个offset的间距
五、bootstrap 隐藏类
1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg
.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。
<div class="container">
<div class="row">
<!-- 第四个div标签在md和xs范围内隐藏 -->
<div class="col-lg-3 col-md-4 col-sm-6">col-lg-3</div>
<div class="col-lg-3 col-md-4 col-sm-6">col-lg-3</div>
<div class="col-lg-3 col-md-4 col-sm-6">col-lg-3</div>
<div class="col-lg-3 col-md-4 hidden-md col-sm-6 hidden-xs">col-lg-3</div>
</div>
</div>
可以看到第四个标签在md和xs的范围内都消失了
六、bootstrap 按钮
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
例：
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>
使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。
<p>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>
激活状态:
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于<button>元素，是通过:active 状态实现的。对于<a>元素，是通过.active 类实现的。然而，你还可以将.active应用到<button>上，并通过编程的方式使其处于激活状态。
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
添加active后按钮默认情况下就是鼠标选中的状态
相反的，为<button>元素添加disabled属性，使其表现出禁用状态。
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
这种按钮是不能点的
七、bootstrap 表单
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的 <input>、<textarea>和 <select>元素都将被默认设置宽度属性为 width: 100%;。 将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
内联表单：
为<form> 元素添加.form-inline 类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
水平排列的表单：
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将label标签和控件组水平并排布局。
通过添加 .form-group-lg 或 .form-group-sm 类，为.form-horizontal包裹的label元素和表单控件快速设置尺寸。
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
