Bootstrap4 教學

Bootstrap 教學

Bootstrap 是全球最受歡迎的前端元件庫,用於開發響應式布局、行動優先的 WEB 專案。

Bootstrap4 目前是 Bootstrap 的最新版本,是一套用於 HTML、CSS 和 JS 開發的開源工具集。利用我們提供的 Sass 變數和大量 mixin、響應式柵格系統、可擴展的預製元件、基於 jQuery 的強大的外掛系統,能夠快速為你的想法開發出原型或者構建整個 app 。

誰適合閱讀本教學?

只要您具備 HTML 和 CSS 的基礎知識,您就可以閱讀本教學,進而開發出自己的網站。在您學習完本教學後,您即可達到使用 Bootstrap 開發 Web 專案的中等水平。

閱讀本教學前,您需要了解的知識:

在您開始閱讀本教學之前,您必須具備 HTML 、 CSS 和 JavaScript 的基礎知識。如果您還不了解這些概念,那麼建議您先閱讀我們的這些教學:

Bootstrap4 例項

Bootstrap4 例項

<div class="jumbotron text-center"> <h1>我的第一個 Bootstrap 頁面</h1> <p>重置瀏覽器大小檢視效果!</p> </div> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3>第一列</h3> <p>線上程式語言教學練習</p> <p>學的不僅是科技,更是夢想!!!</p> </div> <div class="col-sm-4"> <h3>第二列</h3> <p>線上程式語言教學練習..</p> <p>學的不僅是科技,更是夢想!!!</p> </div> <div class="col-sm-4"> <h3>第三列</h3> <p>線上程式語言教學練習..</p> <p>學的不僅是科技,更是夢想!!!</p> </div> </div> </div>

線上執行 ?

Bootstrap4 與 Bootstrap3

Bootstrap4 是 Bootstrap 的最新版本,與 Bootstrap3 相比擁有了更多的具體的類以及把一些有關的部分變成了相關的元件。同時 Bootstrap.min.css 的體積減少了40%以上。

Bootstrap4 放棄了對 IE8 以及 iOS 6 的支援,現在僅僅支援 IE9 以上 以及 iOS 7 以上版本的瀏覽器。如果對於其中需要用到以前的瀏覽器,那麼請使用 Bootstrap3