標籤：des style blog http color 使用
Bootstrap 中文文檔教程Bootstrap 中文文檔教程
全域樣式和grid布局—Bootstrap中文使用指南
全域樣式1.要求html5文件類型
Bootstrap使用的css屬性和html元素依賴於html5的文件類型聲明，請確保每個Bootstrap的頁麵包含下面的代碼：
<!DOCTYPE html>
<html>
...
</html>
2.排版和連結樣式
全域的排版和連結樣式放在scaffolding.less檔案內（關於less教程後面會有詳細說明）。預設做了如下處理：
移除body的外邊距
設定body的背景顏色為白色
使用@baseFone，@baseFontSize，@baseLineHeight屬性作為排版基礎
使用@linkColor設定了全域連結顏色和:hover偽屬性的底線
3.預設樣式重設
從 Bootstrap 2開始，CSS重設樣式基於Normalize.css，新的重設樣式，可以在reset.less中找到（Bootstrap做了許多的簡化）。
預設柵格布局系統
Bootstrap的預設布局系統由總寬度為940px的12列組成。
它能夠適應各個解析度的顯示裝置，比如手機、平板、超高解析度螢幕等。
（ps：請看demo）
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
上面的代碼將建立二列柵格，span4容器佔總寬度的4/12即（1/3）。
1.如何處理列的位移
比如我們希望有個柵格是右靠齊。
<div class="row">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div>
第二個span4容器，增加個offset4樣式名，表示跟前一個容器相隔4個列距離。
2.處理列的嵌套
（ps：請看demo）
在Bootstrap中使用靜態（非浮動）的布局處理柵格的嵌套是非常簡單的事。
<div class="row">
<div class="span12">
Level 1 of column
<div class="row">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>
.row的容器內部是一個佔滿12列的層(.span12)，下面嵌套個新的.row容器，內部是span6二列布局。
浮動布局系統
浮動布局系統，就是我們經常使用的float:left;布局方式，比較特殊的是bootstrap使用百分比來定義柵格的寬度。
1.浮動柵格的行容器
（ps：請看demo）
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</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%寬度。
<div class="row-fluid">
<div class="span12">
Level 1 of column
<div class="row-fluid">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</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 class="container">
...
</div>
浮動布局
使用container-fluid樣式名，產生浮動頁面結構，下面的demo中示範了產生常用的2列布局。
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
效果如：
自適應設計
如何讓柵格布局系統適應不同解析度的螢幕？
需要用到css3的media queries，嚴重推薦閱讀《CSS3 media queries使用參考指南》和《CSS3 Media Queries 詳解》。Media Queries的引用，讓你可以針對不同的裝置定製不一樣的css樣式，可以很方便的讓布局系統適應不同的媒體裝置。
原文講得比較晦澀，明河借用《CSS3 Media Queries 詳解》舉個簡單例子：
<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">
樣式表引用增加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標籤
<meta name="viewport" content="width=device-width, initial-scale=1.0">
使用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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
