剛剛接觸到Bootstrap的前端工具包，對於我們這些做后台程序開發的，如果要做出美觀的UI，真的是趕鴨子上架，太難了。不過Bootstrap可以解決這一難題，看到講解這方面資料的東西不多，絕大多數還需要去閱讀英文資料，雖然不難，但是難免有英文比較差的朋友。在這我就大概把Bootstrap所有我個人覺得常用的講解一下，也是學習筆記。下面附圖就是我學習中的實例圖。
怎么樣，如果專心排版，你幾乎不用寫一行css代碼，部分用行內樣式表就可以做出不錯的網站UI。
廢話不說了，開始吧。引入Bootstrap相關文件，bootstrap/js/jquery.min.js bootstrap/css/bootstrap.min.css bootstrap/css/bootstrap-responsive.min.css
bootstrap/js/bootstrap.min.js主要就是這四個文件，加載進來以后就可以開始寫了。都寫在body標簽之內哦。
<div class="container"> <div class="row"><!--row-fluid可以表示自動百分比--> <div class="span4">1</div> <div class="span4">2</div> <div class="span4">3</div> </div> </div>
這就是一個簡單的一行三列排版，以后排版都寫在 類container這個標簽里面 這個類換成container-fluid類就是那種按照瀏覽器比例的相對布局，每一列布局都是用<div class='row'>開始，然后在里面寫上列的布局，這里類可以換成row-fluid也表示相對布局，列布局類span1-12就是把一個整行分成了12列，你可以任意組合，只要結果是12即可。
布局就這么簡單，以后代碼盡量都是在這些布局列里面寫。
1.字體效果，這里有好幾種，比如<h1>到<h6>，字體越來越小，顏色也是有變化的，這和默認不同的。
<strong>標簽就是黑體字比較大，<em>是斜體字，<abbr title='描述' class='initialism'>帶描述title屬性 initialism類用來轉換成大寫</abbr>
<blockquote class="pull-right">用於顯示引用內容<small>有特殊用處</small></blockquote>注意一下pull-left類用於左邊顯示。
差不多字體控制就這幾種，里面有一個特殊顯示小圖片的就是i標簽，使用例子<i class="icon-pencil"></i>就是編輯圖標。
2.3種列表顯示就是ol ul dl分別沒有多少修改，<ul class="unstyled">用於去除默認樣式，<dl class="dl-horizontal">用於標題內容同一行顯示。其他效果需要自己寫css控制了。
3.表格效果<table class="table table-striped table-bordered table-condensed">這些類我們可以只用其中一個或者全部，不過建議全部用上，沒啥說的，這樣自動會隔行變色等。
4.表單效果，這個算是最復雜的，比較多，主要說說按鈕，它可以使用a button標記來制作按鈕，按鈕類都是btn開始，用於顏色控制的有六種，具體代碼看我的例子，里面基本包括了所有樣式實例，還有一種就是標簽顏色，和按鈕類似不多說了。
5.菜單效果，這也是真復雜的，里面有下拉菜單，切換tab分格，以及比較好用的頂端菜單，上面截圖綠色的就是。具體看我的附件代碼段。
6.js效果，這里有圖片輪換效果，遮罩層效果，以及其他動畫效果，提示等等，都是比較常用的效果，需要Jquery代碼，我的附件里面基本也都是有的。
7.最后總結一下，我沒有具體講解，不過我的附件里面效果都有了，基本上是Bootstrap全部內容，不過要想布局出漂亮的UI，還是需要一番功夫的，要看你的審美觀了。里面顏色都是可以配置的。
附件下載，包括了Bootstrap包了。
地址http://files.cnblogs.com/logoove/Bootstrap.rar
（原創文章 By Yoby）