BootStrap簡介
BootStrap是基於HTML、CSS和JavaScript的框架，使你只需要寫簡單的代碼就可以很快的搭建一個還不錯的前端框架，他是后端程序員的福音，使他們只需要專注業務邏輯，而無須浪費太多的精力在界面設計上。
它可以開發全響應式網頁——不論你使用手機、平板電腦、普通個人電腦瀏覽網站內容，所有的元素都可以很優雅的呈現。所以，可以用他來開發適合各種設備瀏覽的頁面，避免了大量的因為兼容性而導致的重復勞動。
它的最新版本是4.0，國內目前用的較多的是3.x,我們的教程也基於BootStrap3.x版本，也是目前最受歡迎的前端框架之一。
你可以使用默認的BootStrap樣式和組件，你也可以對其進行二次開發，當然你也可以基於BootStrap環境使用自己寫的組件。
BootStrap下載及在項目中的使用
你可以登陸http://v3.bootcss.com 點擊頁面中的下載BootStrap按鈕下載它，你可以下載完整版，也可以訪問http://v3.bootcss.com/customize/ 在線定制css、組件、javascript插件。
在項目中你可以使用下載的BootStrap文件，通常包括樣式文件bootstrap.min.css、Jquery文件（務必在bootstrap.min.js 之前引入）、BootStrap核心腳本文件bootstrap.min.js。注意，為了減少載入的代碼，這里使用的都是壓縮（min）版本的文件，當然你也可以引入未壓縮的版本。示例代碼如下：
<!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> <!-- jQuery文件 --> <script src="/scripts/jquery.min.js"></script> <!-- Bootstrap 核心 JavaScript 文件 --> <script src="/scripts/bootstrap.min.js"></script>
當然你也可以使用互聯網上提供的CDN服務，示例代碼如下：
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可選的Bootstrap主題文件（一般不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
BootStrap柵格布局
BootStrap柵格布局是靈活使用BootStrap的基礎。BootStrap將屏幕分為12等分，在具體的DIV中，你可以通過設置DIV的所占等分的數字來確定其在屏幕中占有的寬度。如：
<div class="row“><!--表示另起一行--> <div class="col-md-8" ></div> <div class="col-md-4" ></div> </div>
在上述代碼中為了表示區塊，我們設置了DIV的邊框寬度為1像素。代碼中我們可以看出，第一個DIV中class="col-md-8",第二個DIV中class="col-md-4", 其中‘8’和‘4’就是其DIV所占屏幕寬度的數值，加在一起等於‘12’。也就是第一個DIV占整個屏幕寬度的‘8/12’,第二個DIV占‘4/12’。在表示DIV寬度的類屬性中，為了實現對全響應的支持，一共有四種類別的屬性值，區別如下：
.col-xs- 超小屏幕 手機 (<768px）
.col-sm-* 小屏幕 平板 (≥768px)
.col-md-* 中等屏幕 桌面顯示器 (≥992px)
.col-lg-* 大屏幕 大桌面顯示器 (≥1200px)
如果一個DIV中同時有上述類別中的兩個或兩個以上，表示該DIV在不同環境下所占有的屏幕寬度。如：
<div class="row"> <div class="col-md-8 col-xs-6 col-lg-4" ></div> </div>
該DIV在中等屏幕中占有‘8/12’，在手機中占有‘6/12’，在大屏幕中占有屏幕比例的‘4/12’。
在哪里獲取BootStrap資源
你可以登陸BootStrap中文網，獲取所有的BootStrap資源，包括基本的CSS、組件、JavaScript插件等。
本文首發於頂求網，轉載請注明來源