Bootstrap
一 什么叫Bootstrap
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。
二 Bootstrap的包内容
-
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
-
CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
-
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
-
JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
-
定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
三 官方网站
http://v3.bootcss.com/
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
响应式布局：
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。
四 居中那些事儿
1 文本类或行内标签居中
<div class="text-center"> <p>这里是一段文本。</p> </div>
2 水平居中一个col-*的div
bootstrap3中有两种方法：
1）使用col-**-offset-**
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4" style="border: 1px solid red">这是一个column div。</div>
</div>
</div>
2）使用自定义样式
.col-centered { float: none; margin: 0 auto; }
<div class="container">
<div class="row">
<div class="col-centered col-md-4" style="border: 1px solid red">这是一个column div。</div>
</div>
</div>
补充：Bootstrap3里面有个.center-block样式类，可以用于不涉及float标签的水平居中。
<div class="container"> <div class="center-block" style="border: 1px solid red">一般水平居中</div> </div>
3 垂直居中
.vertical-align { display: flex; align-items: center; }
<div style="height: 200px;border: 1px solid black" class="vertical-align"> <div style="width: 100px;height: 100px;background-color: red"></div> </div>
五 导航
经典标签页示例
<!--导航区开始--> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">主页</a></li> <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">简介</a></li> <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">消息</a></li> </ul> <!--导航区结束--> <!--面板区开始--> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div> <div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div> <div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div> </div> <!--面板区结束-->
垂直方向堆叠排列的胶囊标签页
<div class="row">
<div class="col-md-2">
<!--导航区开始-->
<ul class="nav nav-pills nav-stacked" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">主页</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">简介</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">消息</a></li>
</ul>
<!--导航区结束-->
</div>
<div class="col-10">
<!--面板区开始-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div>
<div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div>
<div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div>
</div>
<!--面板区结束-->
</div>
</div>
导航条
使用导航条组件时，我们通常把它作为body的直接子标签（和我们的页面主体container同级）
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
固定在顶部的导航条：
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav> 需要为 body 元素设置内补（padding）
这个固定的导航条会遮住页面上的其它内容，除非你给 元素底部设置了 padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是 50px；
把下面的代码放在自己的CSS文件中：
body { padding-bottom: 70px; }
六 Bootstrap JavaScript插件
1 模态框
2 轮播图
3 左侧菜单
4 fontAwesome
5 sweetalert
