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