什么是 Bootstrap
- 一個(gè)開源的前端框架項(xiàng)目
- 由 Mark Otto 和 Jacob Thornton 在 2011 開始創(chuàng)立烧栋。（當(dāng)時(shí)他們兩個(gè)人都是 Twitter 的員工）
- 項(xiàng)目最初的目的是為 Twitter 的前端工程師們提供一個(gè)統(tǒng)一的前端框架纠亚。
- 首次發(fā)布在 2011 年 8 月，并逐漸由一個(gè)純的 CSS 項(xiàng)目發(fā)展為包括 JavaScript 插件和圖標(biāo)等內(nèi)容
的項(xiàng)目 - 基本上勺疼，它支持響應(yīng)式的頁面設(shè)計(jì)，12 列，940像素寬度的框格結(jié)構(gòu)线定。
- 還支持定制 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 文件結(jié)構(gòu)
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
├── img/
│ ├── glyphicons-halflings.png
│ ├── glyphicons-halflings-white.png
└── README.md
Bootstrap 包含三個(gè)文件夾：css野建，js 和 img属划。帶 min 的文件是優(yōu)化壓縮后的文件，通常的慣例是在
開發(fā)的時(shí)候應(yīng)用未壓縮的文件，而在生產(chǎn)環(huán)境則替換為壓縮后的版本募壕。
基本的 HTML 文件模版
一般來說芭商，網(wǎng)頁文件應(yīng)該應(yīng)該類似與下面的樣子：
<!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中须蜗，已經(jīng)預(yù)先定義好了一些全局的樣式硅确。在 Bootstrap 1.0 中使用的老的 reset 代碼在
2.0 版本中已經(jīng)被 Normalize.css 所替代
（被包含在 bootstrap.css 文件中）。
Normalize.css 是 Nicolas Gallagher 開發(fā)的一個(gè)項(xiàng)目唠粥，是 HTML5 Boilerplate 項(xiàng)目的一部分疏魏。
下面的一些默認(rèn)的樣式會(huì)影響排版和鏈接等元素：
- margin 被從 body 中移除，內(nèi)容緊貼著瀏覽器窗口的邊緣
-
background-color: white;被應(yīng)用到 body - Bootstrap 使用 @baseFontFamily 晤愧， @baseFontSize 大莫， 和 @baseLineHeight 這些屬性作為頁面排版的基礎(chǔ)。這樣使得 Heading 等一些元素的高度在整個(gè)網(wǎng)站中保持一致
- Bootstrap 通過 @linkColor 設(shè)定了全局的 link 的顏色官份，并只在 :hover 元素上應(yīng)用了下劃線的
樣式
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.
默認(rèn)的柵格系統(tǒng)
默認(rèn)的 Bootstrap 柵格系統(tǒng)包括 12 列只厘，940像素的容器，響應(yīng)式的布局的特性沒有被打開舅巷。如果添加了
用于支持響應(yīng)式的 CSS 文件羔味，柵格系統(tǒng)則變成根據(jù)當(dāng)前的 viewport 而適應(yīng) 724 像素或者 1170 像素
的容器。
簡單的柵格
創(chuàng)建一個(gè)簡單的柵格布局钠右，需要?jiǎng)?chuàng)建一個(gè) <div> 赋元， 并且設(shè)置它的 class 為 .row ，然后添加適當(dāng)?shù)?br> .span 列飒房。（總過有12列搁凸，可以任意組合）。
<div class="row">
<div class="span8">...</div>
<div class="span4">...</div>
</div>
列偏移
可以使用 .offset* 類來將列向右邊移動(dòng)狠毯。
<div class="row">
<div class="span2">...</div>
<div class="span7 offset2">...</div>
</div>
嵌入列
<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>
浮動(dòng)列
浮動(dòng)列系統(tǒng)通過百分比而不是像素來表示列的寬度护糖。可以通過將列的class屬性由 .row 改變?yōu)?.row-fluid
將任意列改變?yōu)楦?dòng)型的嚼松。列的類保持不變嫡良，這樣你可以容易的將布局切換為浮動(dòng)型的。
<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>
內(nèi)嵌的浮動(dòng)列
@todo
容器的布局
<div class="container">...</div>
<div class="container-fluid">...</div>
響應(yīng)式設(shè)計(jì)
要使用 Bootstrap 的響應(yīng)式特性献酗，需要在 <head> 元素中添加一個(gè) <meta> 標(biāo)簽寝受。同時(shí)也需要添加響應(yīng)式
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>
什么是響應(yīng)式設(shè)計(jì)罕偎？
響應(yīng)式設(shè)計(jì)是一種方法羡蛾，它將一個(gè)頁面上的所有內(nèi)容優(yōu)化為適合當(dāng)前所用設(shè)備的屏幕的顯示方式。
