Html、Css、JavaScript是前端程式員必懂的基礎知識；
但是隻使用這些基礎知識，80%的工程師不能做出任何項目，如果能，那你一定是大神
作為後端有必要記錄一下依賴這三種語言的流行UI架構 ———— bootstrap！
後面，我也會适當更新一些，目前更流行的JavaScript UI架構 ———— iView！
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 架構，用于開發響應式布局、移動裝置優先的WEB項目.
jQuery是一個快速、簡潔的JavaScript架構，是繼Prototype之後又一個優秀的JavaScript代碼庫.
這麼看上Bootstrap是包含多種代碼于一體的架構，而jQuery完全封裝了js的原生API；
Bootstrap依賴jQuery庫（多說句:Prototype是早期的Rails支援Ajax所采用的js庫)
安裝Bootstrap非常簡單，可以支援 bower npm yarn 甚至是源碼下載下傳
使用yarn/npm安裝包括: disk釋出目錄，less實作目錄，以及字型檔案和js下的插件
require('bootstrap')代碼的作用是加載所有jQuery插件到jQuery對象上
bootstrap 子產品自身并不導出任何内容
可以通過加載安裝包頂級目錄下的js/*.js 檔案的方式手動加載單個插件
一個普通的html檔案如何使用bootstrap呢？
1、文檔使用英文:
<html lang="en"> ... </html>
2、head标簽應該包含一下元素：
<meta name="viewport" content="width=device-width, initial-scale=1">
3、基礎布局栅格.container類用于固定寬度并支援響應式布局的容器
<div class="container"> ... </div>
任何一個html元素都可以看作一個盒子模型，盒子模型包括一下幾個屬性樣式:
margin - 外邊框 (沒有顔色,沒有寬度)
border - 内邊框
padding - 内邊框
content - 内容（通常height/weight是指這個）
提供了一個帶有網格系統、連結樣式、背景的基本結構
根據螢幕或視口(viewport)，系統會自動分為最多12列
使用行(row)與列(col-xs-4)的組合來建立頁面布局
1) h1 ... h6 提供了6中标題樣式
提供标題類效果 class="h1..h6", 可以用于span/div/label
<small> 可以設定副标題 </small>
2) 内嵌文字樣式
<u> 下劃線 </u> <strong> 加粗</strong>
<s> 中劃線 </s> 和 <del> 相同效果 </del>
<em> 文字斜體 </em>
滾動條: <pre class="pre-scrollable">
<code> 代碼着色
Dir.entries('/data').each {|d| puts d}
os.listdir('/data')
</code>
3) 文字相關
可以用于{span/div/label}.lead ==> 讓段落突出顯示, 相對字型略大
4) 清單相關
清單分為有序清單、無序清單和自定義清單；也是菜單導航的實作機制
5). 表格相關
标簽: <table> => <thead> + <tbody> | <tr> => <th> / <td>
應該被包裹在：<div class="table-responsive"> ... </div> 内
table樣式類：style="width: 500px" 可以設定表格寬度
++<caption> 表格提示語 </caption>++
6). 設定連結
連結在單擊通路前後，可有不同的樣式
![自定義時間選擇器-前端元件預覽效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)