Bootstrap 中文文檔教程

Bootstrap 中文文檔教程php

全局樣式和grid佈局—Bootstrap中文使用指南css

全局樣式1.要求html5文檔類型html

Bootstrap使用的css屬性和html元素依賴於html5的文檔類型聲明，請確保每一個Bootstrap的頁面包含下面的代碼：html5

<!DOCTYPE html>css3
<html>git
...github
</html>bootstrap

2.排版和連接樣式less

全局的排版和連接樣式放在scaffolding.less文件內（關於less教程後面會有詳細說明）。默認作了以下處理：ide

移除body的外邊距
設置body的背景顏色爲白色
使用@baseFone，@baseFontSize，@baseLineHeight屬性做爲排版基礎
使用@linkColor設置了全局連接顏色和:hover僞屬性的下劃線

3.默認樣式重置

從 Bootstrap 2開始，CSS重置樣式基於Normalize.css，新的重置樣式，能夠在reset.less中找到（Bootstrap作了許多的簡化）。

默認柵格佈局系統

Bootstrap的默認佈局系統由總寬度爲940px的12列組成。
它可以適應各個分辨率的顯示設備，好比手機、平板、超高分辨率屏幕等。
（ps：請看demo）

</div>

上面的代碼將建立二列柵格，span4容器佔總寬度的4/12即（1/3）。

1.如何處理列的偏移

好比咱們但願有個柵格是右靠齊。

</div>

第二個span4容器，增長個offset4樣式名，表示跟前一個容器相隔4個列距離。

2.處理列的嵌套

（ps：請看demo）
在Bootstrap中使用靜態（非浮動）的佈局處理柵格的嵌套是很是簡單的事。

Level 1 of column

<div class="span6">Level 2</div>

</div>

.row的容器內部是一個佔滿12列的層(.span12)，下面嵌套個新的.row容器，內部是span6二列布局。

浮動佈局系統

浮動佈局系統，就是咱們常常使用的float:left;佈局方式，比較特殊的是bootstrap使用百分比來定義柵格的寬度。

1.浮動柵格的行容器

（ps：請看demo）

</div>

流動佈局，行容器使用. row-fluid 樣式名，其餘地方不變。

.row-fluid {

width: 100%;

}

.row-fluid:before, .row-fluid:after {

content: "";

display: table;

}

.row-fluid:after {

clear: both;

}

2.寬度使用百分比，而不是像素值

浮動佈局系統比靜態佈局系統，擁有更強的適應性，一樣適應不一樣分辨率的屏幕。

.row-fluid > [class*="span"] {

float: left;

margin-left: 2.5641%;

}

.row-fluid > [class*="span"]:first-child {

margin-left: 0;

}

3.浮動佈局中處理容器的嵌套

（ps：請看demo）
浮動佈局中的嵌套處理有點不大同樣:嵌套的柵格不須要匹配父容器的柵格數，每一行的寬度都佔用父容器的100%寬度。

Level 1 of column

<div class="span6">Level 2</div>

</div>

定製柵格

變量

默認值

描述

@gridColumns

12列的數量

@gridColumnWidth

60px列的寬度

@gridGutterWidth

20px列的間隔LESS中的變量

Bootstrap中定製一套本身的940px柵格系統，只須要不多的less變量。這些變量能夠在variables.less中找到。

如何定製

你須要修改@grid*三個變量（指的是上面表格中的三個變量），並從新編譯Bootstrap（less從新編譯出新的css文件）。關於less的編譯能夠看 four ways documented to recompile，若是新增了列，務必在grid.less增長上對應的樣式。

保留適應性

自適應的柵格系統只能用於默認的940px柵格。爲了維持Bootstrap的自適應性，須要額外在 responsive.less中自定義柵格樣式。

佈局靜態佈局

...

</div>

浮動佈局

使用container-fluid樣式名，產生浮動頁面結構，下面的demo中演示了生成經常使用的2列布局。

</div>

</div>

效果以下圖：

自適應設計

如何讓柵格佈局系統適應不一樣分辨率的屏幕？

須要用到css3的media queries，嚴重推薦閱讀《CSS3 media queries使用參考指南》和《CSS3 Media Queries 詳解》。Media Queries的引用，讓你能夠針對不一樣的設備定製不同的css樣式，能夠很方便的讓佈局系統適應不一樣的媒體設備。
原文講得比較晦澀，明河借用《CSS3 Media Queries 詳解》舉個簡單例子：

樣式表引用增長media屬性。

screen：媒體類型裏的一種，10種媒體類型
and 被稱爲關鍵字，其餘關鍵字還包括 not(排除某種設備)，only(限定某種設備)
(min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。完整的特性參看相關的Media features部分

screen and (min-width: 400px)的意思是當屏幕的寬度大於等於400px的時候，應用此條CSS，也就是說media很是像條件語句。

bootstrap支持的設備

Label

Layout width

Column width

Gutter width

智能手機等於小於480px無固定寬度無固定寬度介於智能手機和平板電腦之間等於小於767px無固定寬度無固定寬度平板電腦等於大於768px42px20px默認等於大於980px60px20px超分辨率等於大於1200px70px30px須要meta標籤

使用media queries

Bootstrap默認不包含這些media queries的樣式，你能夠經過下列的方式引入：

頁面引入bootstrap-responsive.min.css 和respond.min.js
重編譯bootstrap時，增長@import 「responsive.less」
修改和單獨編譯responsive.less爲一個獨立的文件

Bootstrap 的media queries代碼

// Landscape phones and down

@media (max-width: 480px) { ... }

// Landscape phone to portrait tablet

@media (max-width: 767px) { ... }

// Portrait tablet to landscape and desktop

@media (min-width: 768px) and (max-width: 979px) { ... }

// Large desktop

@media (min-width: 1200px) { ... }

學習地址：

http://docs.bootcss.com/bootstrap-2.3.2/docs/getting-started.html