Bootstrap

2015-01-06 本文已影响1064人 Lee2010

什么是 Bootstrap

一个开源的前端框架项目
由 Mark Otto 和 Jacob Thornton 在 2011 开始创立。（当时他们两个人都是 Twitter 的员工）
项目最初的目的是为 Twitter 的前端工程师们提供一个统一的前端框架。
首次发布在 2011 年 8 月，并逐渐由一个纯的 CSS 项目发展为包括 JavaScript 插件和图标等内容
的项目
基本上，它支持响应式的页面设计，12 列，940像素宽度的框格结构。
还支持定制 CSS 样式和 JavaScript 功能

In the earlier days of Twitter, engineers used almost any library they were familiar with to meet front-end requirements. Inconsistencies among the individual applications made it difficult to scale and maintain them. Bootstrap began as an answer to these challenges and quickly accelerated during Twitter’s first Hackweek. By the end of Hackweek, we had reached a stable version that engineers could use across the company. (Mark Otto)

Bootstrap 文件结构

   bootstrap/
            ├── css/
            │   ├── bootstrap.css
            │   ├── bootstrap.min.css
            ├── js/
            │   ├── bootstrap.js
            │   ├── bootstrap.min.js
            ├── img/
            │   ├── glyphicons-halflings.png
            │   ├── glyphicons-halflings-white.png
            └── README.md

Bootstrap 包含三个文件夹：css，js 和 img。带 min 的文件是优化压缩后的文件，通常的惯例是在
开发的时候应用未压缩的文件，而在生产环境则替换为压缩后的版本。

基本的 HTML 文件模版

一般来说，网页文件应该应该类似与下面的样子：

<!DOCTYPE html>
  <html>
    <head>
      <title>Bootstrap 101 Template</title>
    </head>
    <body>
      <h1>Hello, world!</h1>
    </body>
</html>

如果使用了 Bootstrap，我们需要包含 CSS 样式文件和 JavaScript 文件：

<!DOCTYPE html>
  <html>
    <head>
      <title>Bootstrap 101 Template</title>
      <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
      <h1>Hello, world!</h1>
      <script src="js/bootstrap.min.js"></script>
    </body>
</html>

全局样式

在Bootstrap中，已经预先定义好了一些全局的样式。在 Bootstrap 1.0 中使用的老的 reset 代码在
2.0 版本中已经被 Normalize.css 所替代
（被包含在 bootstrap.css 文件中）。
Normalize.css 是 Nicolas Gallagher 开发的一个项目，是 HTML5 Boilerplate 项目的一部分。

下面的一些默认的样式会影响排版和链接等元素：

margin 被从 body 中移除，内容紧贴着浏览器窗口的边缘
background-color: white; 被应用到 body
Bootstrap 使用 @baseFontFamily ， @baseFontSize ，和 @baseLineHeight 这些属性作为页面排版的基础。这样使得 Heading 等一些元素的高度在整个网站中保持一致
Bootstrap 通过 @linkColor 设定了全局的 link 的颜色，并只在 :hover 元素上应用了下划线的
样式

Remember, if you don’t like the colors or want to change a default, this can be done by changing the globals in any of the .less files. To do this, update the scaffolding.less file or overwrite colors in your own stylesheet.

默认的栅格系统

默认的 Bootstrap 栅格系统包括 12 列，940像素的容器，响应式的布局的特性没有被打开。如果添加了
用于支持响应式的 CSS 文件，栅格系统则变成根据当前的 viewport 而适应 724 像素或者 1170 像素
的容器。

Figure 1-1. Default grid

简单的栅格

创建一个简单的栅格布局，需要创建一个 <div> ，并且设置它的 class 为 .row ，然后添加适当的
.span 列。（总过有12列，可以任意组合）。

<div class="row">
  <div class="span8">...</div>
  <div class="span4">...</div>
</div>

列偏移

可以使用 .offset* 类来将列向右边移动。

<div class="row">
  <div class="span2">...</div>
  <div class="span7 offset2">...</div>
</div>

Figure 1-2. Offset grid

嵌入列

<div class="row">
  <div class="span9">
    Level 1 of column
  <div class="row">
    <div class="span6">Level 2</div>
    <div class="span3">Level 2</div>
  </div>
  </div>
</div>

Figure 1-3. Nesting grid

浮动列

浮动列系统通过百分比而不是像素来表示列的宽度。可以通过将列的class属性由 .row 改变为 .row-fluid
将任意列改变为浮动型的。列的类保持不变，这样你可以容易的将布局切换为浮动型的。

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

内嵌的浮动列

@todo

容器的布局

<div class="container">...</div>

<div class="container-fluid">...</div>

响应式设计

要使用 Bootstrap 的响应式特性，需要在 <head> 元素中添加一个 <meta> 标签。同时也需要添加响应式
CSS文件。

<!DOCTYPE html>
<html>
  <head>
    <title>My amazing Bootstrap site!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/bootstrap-responsive.css" rel="stylesheet">
  </head>