正如很多朋友所言，學習Bootstrap最簡單的方式，就是跟着官方文檔做一遍就可以了。這句話怎么說呢，它對也不對。說其對，是因為計算機科學是實踐性非常強的學科，所有的東西如果不能落實到“做”這個字上面，一起都是扯淡；說其不對是因為，計算機科學還跟一般的應用科學不大相同（比如英語，你只要會背就“可以”了），計算機的實踐還是需要非常強烈的理論作為支撐的，如果不明白這些理論，那么你的所有的實踐可能都是盲目的。筆者Bootstrap這個系列的文字，之所以稱之為“研究”，就想盡筆者所能地分析一下Bootstrap實現的機理，使用Bootstrap后面的思想建立我們自己的前端開發理論。
本篇文字對應Bootstrap的BaseCSS。不過我想將BaseCSS分成2部分來探討：第一部分為基本的html元素，第二部分為表單（form）（畢竟表單為我們經常使用並且非常重要的一個html元素）。本篇為第一部分。
0.默認的圓角。
Bootstrap中幾乎所有出現框型的地方，都使用了圓角，實現圓角的代碼如下
border: 1px solid #cccccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
一定要注意最后3行的順序。這也是我們進行圓角操作時推薦的方式，其可以兼容幾乎所有的瀏覽器（按道理IE6應該不行，不過手里沒有環境，沒有測試）
1.默認字體信息。
Bootstrap中文字默認使用13px，非常近乎黑色的灰色，行高為18px。但是字體非常不適合顯示中文，我們必須要對其進行修改。最簡單的辦法就在這些字體前面加上我們的字體（筆者以為Verdana就非常不錯，無論是對中文還是英文，ok，就加它了）
body {
margin: 0;
font-family: Verdana,"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333333;
background-color: #ffffff;
}
(關於使用字體的技巧1，font-family后面可以有多個字體，瀏覽器會在本地計算機按照順序進行查找：如果有第一個字體就忽略后面的字體，如果第一個沒有，就找第二個，依次類推；技巧2，如果某一字體是有多個單詞組成的，那么一定要將這個字體名字放入引號內。)
2.標題
從H1到H6，字體大小和行高依次縮小。沒有其他特殊的設置。
3.突出顯示的文字
Bootstrap統一使用strong標簽，而不用其他的比如b或者i等。
4.塊引用
這個東西挺好玩，先看效果
其分為左側對其的塊應用，和右側對其的塊引用。如果是左側對齊，那么直接使用標簽blockquote就可以了，如果是右側對其，還是需要給其加上一個類pull-right，如下
<div class="row"> <div class="span6"> 左邊對齊的塊引用 <blockquote> <p> 革命尚未成功，同志還需努力。 </p> <br /> <small><cite>孫文</cite>作品</small> </blockquote> </div> <div class="span6"> 右邊對齊的塊引用 <blockquote class="pull-right"> <p> 尋夢遠方兮路迢迢， 三十無成兮白發蒼， 故土遙遙兮淚沾裳。 </p> <br /> <small><cite>解然</cite>作品</small> </blockquote> </div> </div>
其實上面那幅圖有兩個細節，就是blockquote的左側（或者右側）有一個灰色的豎條，引文作者前面有一個破折線。這些都是通過css來實現的，具體如下
blockquote {
border-left: 5px solid #eeeeee;
}
那條豎線就是設置的一個5px的左（右）邊距。
blockquote small:before {
content: '\2014 \00A0';
}
而破折線就是通過這個before偽元素動態添加上去的。當然如果要產生這個效果，必須將文字放在blockquote中的small標簽內。
5.各種列表
幾乎沒有任何新意。特殊的地方有2個：其一就是如果不想讓列表顯示前面的圖形前綴，那么請給其加入以下類unstyled；其二dl（dt,dd）的顯示，其可以讓dt，dd水平展示（缺省情形下，dt，dd是縱向展示的），需要給其設置類dl-horizontal，效果如圖
類dl-horizontal的實現，也只是設置了浮動和偏移而已（其實所有的頁面效果不都是通過浮動和偏移來完成的嘛，呵呵）。
.dl-horizontal dt {
float: left;
clear: left;
width: 120px;
text-align: right;
}
.dl-horizontal dd {
margin-left: 130px;
}
6.代碼顯示
這個功能對有很多技術網站來說，尤其好用。
如果是很短一句代碼，你可以使用code標簽，效果如下
;如果是一大段代碼可以使用pre標簽，先看效果
有行號，有滾動條，效果非常強。我在這里給pre標簽加入了3個類：
<pre class="prettyprint linenums pre-scrollable">最后一個表示讓pre標簽產生滾動條，默認最大的高度為340，多於這個數字，就會在y軸上產生滾動效果。
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
前面兩個類是來至於google開源的的prettify，使用的時候，需要在頁面body上加入載入事件
<body onload="prettyPrint();">
當然也別忘了給頁面引入
<link href="CSS/prettify.css" rel="stylesheet" type="text/css" /> <script src="CSS/prettify.js" type="text/javascript"></script>
7.表格
在使用的表格的時候，最好還是按照標准的格式來使用，即
thead，tbody，th這些標簽還是要有，因為上面設置了樣式。設置表格的樣式，需要在table標簽上設置就可以了。其可以設置的樣式有
a.table 僅僅出現兩行之間的水平分割線（居然把這種樣式昨晚默認樣式，看來東西方的習慣還是非常不一樣）b.table-bordered 這個才是符合我們中國人使用習慣的表格，水平，縱向分割都有，還有圓角c.table-striped 斑馬線效果的表格（奇數行偶數行不同的效果），其實現是通過偽類進行的，如下.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
其改變tbody內奇數行的背景顏色，這個就是剛才為什么設置table的時候，要使用標准的格式的原因。
d.table-condensed 這個樣式略顯奇怪，condens就是壓縮的意思。本來標准情形下，table的padding為8px:
.table th,
.table td {
padding: 8px;
line-height: 18px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
而壓縮模式，就將padding變小了
.table-condensed th,
.table-condensed td {
padding: 4px 5px;
}
當然剛才提到的幾張類型，你可以同時應用都一個table上，如下
<table class="table table-bordered table-striped table-condensed">
8.圖標
（未完待續）
9.按鈕
（未完待續）
再次聲明: 本系列提到Bootstrap中的很多數據都是默認數據（比如文本高度為13px等），開發的過程中，我們可以對其修改，或者覆蓋。