Bootstrap 簡介
什麼是Bootstrap？
Bootstrap 是一個用於快速開發Web 應用程序和網站的前端框架。 Bootstrap 是基於HTML、CSS、JAVASCRIPT 的。
歷史
Bootstrap是由Twitter的Mark Otto和Jacob Thornton開發的。 Bootstrap 是2011 年八月在GitHub 上發布的開源產品。
為什麼使用Bootstrap？
- 移動設備優先 ：自Bootstrap 3起，框架包含了貫穿於整個庫的移動設備優先的樣式。
- 瀏覽器支持 ：所有的主流瀏覽器都支持Bootstrap。
- 容易上手 ：只要您具備HTML和CSS的基礎知識，您就可以開始學習Bootstrap。
- 響應式設計 ：Bootstrap的響應式CSS能夠自適應於台式機、平板電腦和手機。更多有關響應式設計的內容詳見Bootstrap響應式設計 。
- 它為開發人員創建接口提供了一個簡潔統一的解決方案。
- 它包含了功能強大的內置組件，易於定制。
- 它還提供了基於Web 的定制。
- 它是開源的。
Bootstrap 包的內容
- 基本結構 ：Bootstrap提供了一個帶有網格系統、鏈接樣式、背景的基本結構。這將在Bootstrap基本結構部分詳細講解。
- CSS ：Bootstrap自帶以下特性：全局的CSS設置、定義基本的HTML元素樣式、可擴展的class，以及一個先進的網格系統。這將在Bootstrap CSS部分詳細講解。
- 組件 ：Bootstrap包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。這將在佈局組件部分詳細講解。
- JavaScript插件 ：Bootstrap包含了十幾個自定義的jQuery插件。您可以直接包含所有的插件，也可以逐個包含這些插件。 這將在Bootstrap插件部分詳細講解。
- 定制 ：您可以定制Bootstrap的組件、LESS變量和jQuery插件來得到您自己的版本。
在線實例
本站的Bootstrap 教程包含了上百個實例。
你可以使用我們的在線編輯器在線編輯代碼，並點擊運行按鈕查看結果。
Bootstrap 實例
< div class = " container " >
< div class = " jumbotron " >
< h1 > 我的第一個Bootstrap頁面 </ h1 >
< p > 重置窗口大小，查看響應式效果！ </ p >
</ div >
< div class = " row " >
< div class = " col-sm-4 " >
< h3 > Column 1 </ h3 >
< p > 學的不僅是技術，更是夢想！ </ p >
< p > 再牛逼的夢想,也抵不住你傻逼似的堅持！ </ p >
</ div >
< div class = " col-sm-4 " >
< h3 > Column 2 </ h3 >
< p > 學的不僅是技術，更是夢想！ </ p >
< p > 再牛逼的夢想,也抵不住你傻逼似的堅持！ </ p >
</ div >
< div class = " col-sm-4 " >
< h3 > Column 3 </ h3 >
< p > 學的不僅是技術，更是夢想！ </ p >
< p > 再牛逼的夢想,也抵不住你傻逼似的堅持！ </ p >
</ div >
</ div >
</ div >
嘗試一下»
更多實例
Bootstrap 實例2
< div class = " table-responsive " >
< table class = " table table-striped table-bordered " >
< thead >
< tr >
< th > # </ th >
< th > Name </ th >
< th > Street </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > 1 </ td >
< td > Anna Awesome </ td >
< td > Broome Street </ td >
</ tr >
< tr >
< td > 2 </ td >
< td > Debbie Dallas </ td >
< td > Houston Street </ td >
</ tr >
< tr >
< td > 3 </ td >
< td > John Doe </ td >
< td > Madison Street </ td >
</ tr >
</ tbody >
</ table >
</ div >
嘗試一下»
點擊"嘗試一下"按鈕查看它是如何工作的。