本文假設(shè)讀者有基本的HTML5+CSS3的知識（知道基本語法）址貌，但是不知道如何寫出比較漂亮頁面访得。
本文基于http://v3.bootcss.com/css/
再次基礎(chǔ)上，如果想要快速美觀的寫好一個(gè)頁面的前端埠居，最好的選擇是bootstrap3
下載使用
http://v3.bootcss.com/getting-started/#download
基礎(chǔ)知識
見w3c吧....
上個(gè)圖說明下div塊的基本組成
img1.gif
柵格系統(tǒng)
Bootstrap 提供了一套響應(yīng)式猬仁、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加轧房，系統(tǒng)會自動(dòng)分為最多12列拌阴。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局奶镶。
- 行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中迟赃，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。
- 通過“行（row）”在水平方向創(chuàng)建一組“列（column）”厂镇。
- 你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)纤壁，并且，只有“列（column）”可以作為行（row）”的直接子元素捺信。
這就是說這樣的代碼是主格調(diào)
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<- 這是你的內(nèi)容 ->
</div>
</div>
</div>
全局 CSS 樣式 · Bootstrap 中文文檔.png
如果你想寫出這樣排版的頁面酌媒，根據(jù)上面的規(guī)則，那么這將是你的代碼
<div class="container-fluid">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
列偏移
使用使用 .col-md-offset-* 類可以將列向右側(cè)偏移迄靠。這些類實(shí)際是通過使用 * 選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）秒咨。例如，.col-md-offset-4 類將 .col-md-4 元素向右側(cè)偏移了4個(gè)列（column）的寬度掌挚。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
嵌套列
列中可以再次使用<div class="row“來嵌套>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
類排版
熟悉markdown的話雨席，就能明白排版的重要性了
Bootstrap 將全局 font-size 設(shè)置為 14px，line-height 設(shè)置為 1.428吠式。這些屬性直接賦予 <body> 元素和所有段落元素陡厘。另外抽米，<p> （段落）元素還被設(shè)置了等于 1/2 行高（即 10px）的底部外邊距（margin）。
如果要使得莫個(gè)段落<P>突出顯示可以這樣
<p class="lead">...</p>
markdown的語法到最后都是轉(zhuǎn)換成html來顯示的糙置，這里的內(nèi)容作為html5的內(nèi)容不這里壘述
表單
獨(dú)的表單控件會被自動(dòng)賦予一些全局樣式云茸。所有設(shè)置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認(rèn)設(shè)置寬度屬性為 width: 100%;谤饭。 將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列查辩。
全局 CSS 樣式 · Bootstrap 中文文檔.png
如上圖是最基本的一個(gè)表單的例子，下面是代碼
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
需要手動(dòng)設(shè)置寬度
在 Bootstrap 中网持，inputs、select和 textarea 元素默認(rèn)被設(shè)置為100%寬度长踊。為了使用內(nèi)聯(lián)表單功舀，你需要專門為使用到的表單控件設(shè)置寬度。
如果你想讓表單都在一行的話身弊，那么只要將最上面的<form role="form">修改為<form class="form-inline" role="form">
就行了
全局 CSS 樣式 · Bootstrap 中文文檔.png
水平排列的表單 感覺這個(gè)更常用啊
全局 CSS 樣式 · Bootstrap 中文文檔.png
代碼如下
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
被支持的控件
基本輸入
<input type="text" class="form-control" placeholder="Text input">
文本域
支持多行文本的表單控件辟汰。可根據(jù)需要改變 rows 屬性阱佛。
<textarea class="form-control" rows="3"></textarea>
多選和單選框
默認(rèn)的方式
全局 CSS 樣式 · Bootstrap 中文文檔.png
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
橫行的方式
全局 CSS 樣式 · Bootstrap 中文文檔.png
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
列表
全局 CSS 樣式 · Bootstrap 中文文檔.png
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
好了帖汞，表單中的重頭戲來了，表單的驗(yàn)證狀態(tài)
全局 CSS 樣式 · Bootstrap 中文文檔.png
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
在右側(cè)增加狀態(tài)圖
全局 CSS 樣式 · Bootstrap 中文文檔.png
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
為輸入項(xiàng)增加幫助文本
全局 CSS 樣式 · Bootstrap 中文文檔.png
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
