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 教學包含了上百個實例。
你可以使用我們的線上編輯器在線上編輯程式碼,並點擊執行按鈕查看結果。
實例
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>我的第一个 Bootstrap 页面</h1> <p>重置窗口大小,查看响应式效果!</p> </div> <div class="row"> <div class="col-sm-4"> <h3>第一列</h3> <p> php中文网</p> <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p> </div> <div class="col-sm-4"> <h3>第二列</h3> <p> php中文网</p> <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p> </div> <div class="col-sm-4"> <h3>第三列</h3> <p> php中文网</p> <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p> </div> </div> </div> </body> </html>
運行實例»
點擊"運行實例"按鈕查看線上實例
#更多實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例</title> <!-- 包含头部信息用于适应不同设备 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 包含 bootstrap 样式表 --> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>表格</h2> <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外:添加交替单元格的背景色:</p> <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> <h2>图像</h2> <p>创建相应式图片(将扩展到父元素)。 另外:图片以椭圆型展示:</p> <img src="cinqueterre.jpg" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236"> <h2>图标</h2> <p>插入图标:</p> <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p> <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p> <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p> <p>打印图标: <span class="glyphicon glyphicon-print"></span></p> <p>下载图标:<span class="glyphicon glyphicon-download"></span></p> </div> <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 --> <!-- 可选: 包含 jQuery 库 --> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 可选: 合并了 Bootstrap JavaScript 插件 --> <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
執行實例»點擊"運行實例" 按鈕查看線上實例
點擊"試試看"按鈕查看它是如何工作的。