Bootstrap 简述

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

什么是 Bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。

在现代 Web 开发中，有几个几乎所有的 Web 项目中都需要的组件。

Bootstrap 为您提供了所有这些基本的模块 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。

此外，还有大量其他有用的前端组件，比如 Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers 等等。

有了这些，你可以搭建一个 Web 项目，并让它运行地更快速更轻松。

此外，由于整个框架是基于模块的，您可以通过您自己的 CSS 位，甚至是项目开始后的一个大整改，来进行自定义。

它是基于几种最佳实践，我们认为这是一个很好的开始学习现代 Web 开发的时机，一旦您掌握了 HTML 和 JavaScript/jQuery 的基本知识，您就可以在 Web 开发中运用这些知识。

虽然，也有批评，所有通过 Bootstrap 构建的项目看起来相同，您可以不需要知道太多的 HTML + CSS 知识就可以构建一个网站。但是，我们需要明白，Bootstrap 是一个通用的框架，就像任何其他通用的东西，您需要定制才能让它具有独特性。当您要定制时，您需要深入研究，没有良好的 HTML + CSS 基础是不可行的。

当然除了 Bootstrap，还有很多其他好的前端框架，使用哪种框架是开发人员的选择，但 Bootstrap 绝对是值得尝试的。

为什么使用 Bootstrap？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它为开发人员创建接口提供了一个简洁统一的解决方案。

它包含了功能强大的内置组件，易于定制。

它还提供了基于 Web 的定制。

它是开源的。

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

下载并理解文件结构

您可以从 https://github.com/twbs/bootstrap/archive/v3.0.0.zip 或 https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zip 上下载 Bootstrap Version 3.0.0。

此外，我们提供下载的代码包含了一个通过第一个链接下载的 bootstrap 代码文件夹。这里边也包含了用来定制 Bootstrap 的原始的 css 的 custom.css。

解压缩后，您会发现，在根文件夹 bootstrap-3.0.0 内有一些文件和文件夹。

主要的 CSS 文件 - bootstrap.css 以及它的简化版 bootstrap-min.css，位于根文件夹 bootstrap-3.0.0 下 的 'dist' 文件夹中的 'css' 文件夹中。

在 'dist' 内，有一个 'js' 文件夹，包含了主要的 JavaScript 文件 bootstrap.js 以及它的简化版。

在根文件内，有一个单独的 'js' 文件夹，包含了不同文件中的不同的 JavaScript 插件。

在根文件内的 'assets' 内，会找到另一个 'js' 文件夹。这里放置着 HTML5 shim 的 html5shiv.js，用于获得 IE8 支持。还有一个 respond.min.js 文件，用于支持 IE8 中的多媒体查询。该文件夹还包含了 Bootstrap 的 js 插件依赖的 jquery.js。

在相同的文件夹内，有一个 'ico' 文件夹，包含了 favicon 图标和各种移动设备图标。

在同一路径中的 'css' 文件夹，包含了文档的 css 文件。

'_includes' 和 '_layouts' 文件夹包含了一些默认的布局结构文件，这些可能对快速原型设计很有用。

根文件夹内的 'less' 文件夹包含了一些 .less 文件。如果您要基于 LESS 进行开发，这些文件将会很有用。

在根文件夹内，有一些文件。一些是用于基础原型设计的 HTML 文件，一些是用于基于 Bower 编译的 bower.json、browserstack.json。除此之外，还有 composer.json 和一个 YAML 文件 _config.yml。

Bootstrap 实例

<div class="container">
  <p>Create a responsive table with alternating cell background color:</p> 
  
  <div class="table-responsive"> 
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Street</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna Awesome</td>
          <td>Broome Street</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Debbie Dallas</td>
          <td>Houston Street</td>
        </tr>
        <tr>
          <td>3</td>
          <td>John Doe</td>
          <td>Madison Street</td>
        </tr>
      </tbody>
    </table>
  </div>


</div>