Bootstrap4 教程

Bootstrap4教程

Bootstrap 是全球最受歡迎的前端組件庫，用于開發(fā)響應式布局、移動設備優(yōu)先的 WEB 項目。

Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 開發(fā)的開源工具集。利用我們提供的 Sass 變量和大量 mixin、響應式柵格系統(tǒng)、可擴展的預制組件、基于 jQuery 的強大的插件系統(tǒng)，能夠快速為你的想法開發(fā)出原型或者構建整個 app 。

誰適合閱讀本教程？

只要您具備 HTML 和 CSS 的基礎知識，您就可以閱讀本教程，進而開發(fā)出自己的網站。在您學習完本教程后，您即可達到使用 Bootstrap 開發(fā) Web 項目的中等水平。

閱讀本教程前，您需要了解的知識：

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

Bootstrap4 示例

示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<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>

</body>
</html>

測試看看 ?/?

Bootstrap4 與 Bootstrap3

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

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

注意：默認情況下，Bootstrap 4會采用移動優(yōu)先方法進行響應。Bootstrap 4.3是Bootstrap的最新，最穩(wěn)定的版本。所有主要的現代瀏覽器都支持Bootstrap 4，例如Google Chrome，Firefox，Safari，Internet Explorer 10及更高版本等。

Bootstrap4 安裝使用

Bootstrap4 菜鳥教程

Bootstrap4 教程

誰適合閱讀本教程？

閱讀本教程前，您需要了解的知識：

Bootstrap4 示例

Bootstrap4 與 Bootstrap3

誰適合閱讀本教程？

閱讀本教程前，您需要了解的知識：