BootStrap框架——制作BootStrap中文網首頁

小女感覺自己好久沒有好好寫博客了，蹲在牆角反思中...

今天通過一個實例給大家介紹一款實用又好用的框架——Bootstrap框架！

什么是Bootstrap呢？

Bootstrap 是最受歡迎的一款 HTML、CSS 和 JS 框架，一般多用於開發響應式布局、移動設備優先的Web項目。

而，Bootstrap框架的柵格系統 是其響應式布局的核心內容。

今天，小女要通過模仿制作Bootstrap官網首頁，為大家介紹一下其框架的基本運用，希望會對大家有幫助！

官網原版展示

響應式展示

首先，引入Bootstrap框架的css、js文件

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/BootStrap中文文檔.css" />
<!--自己創建的css文件，需要覆蓋Bootstrap原有的css，置於其后。-->
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>    
<!--JQuery js文件-->
<script src="js/bootstrap.js" type="text/javascript"></script>    

接下來，搭建頂部導航欄，由於Bootstrap給我們提供了現成的導航欄框架，我們只需要在標簽中引入相應的class就可以了！

<nav class="navbar navbar-default">      <!--導航欄標簽-->
      <div class="container">
          <!--將最外面的布局元素 .container 修改為 .container-fluid，就可以將固定寬度的柵格布局轉換為 100% 寬度的布局。-->
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>      
          <a class="navbar-brand" href="#">Bootstrap</a>
        </div>
    
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">起步</a></li>
            <li><a href="#">全局 CSS 樣式</a></li>
            <li><a href="#">組件</a></li>
            <li><a href="#">JavaScript 插件</a></li>
            <li><a href="#">定制</a></li>
            <li><a href="#">網站實例</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">    <!--響應后 可折疊的導航欄標簽-->

 <li><a href="#">主體/模板</a></li> <li><a href="#">Bootstrap中文網</a></li> </ul> </div> </div> </nav>

然后 是banner圖部分，同理，

<div class="jumbotron">
        <div class="container">
          <h1>B</h1>
          <p>Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目。</p>          
          <p><a class="btn btn-default" href="#" role="button">下載BootStrap</a></p>          
          <p class="version">當前版本： v3.3.7 | 文檔更新於：2017-04-24</p>
        </div>
    </div>

接下來，第一大塊（章節）部分，柵格系統是搭建接下來兩大部分的核心。

那，什么是柵格系統呢？

　柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：

• “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
• 通過“行（row）”在水平方向創建一組“列（column）”。
• 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
• 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。
• 通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
• 負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
• 柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。
• 如果一“行（row）”中包含了的“列（column）”大於 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
• 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-md-*柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-lg-*不存在， 也影響大屏幕設備。

　　使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ” .row 內。

 

第一大塊，代碼如下

<section class="container introduce">
            <h1>為所有開發者、所有應用場景而設計。</h1>
            <p>Bootstrap 讓前端開發更快速、簡單。所有開發者都能快速上手、所有設備都可以適配、所有項目都適用。</p>
            <hr />
            
            <div class="row">
                <div class="col-sm-4">
                    <img src="img/sass-less.png"/>
                    <h2>預處理腳本</h2>
                    <p>
雖然可以直接使用 Bootstrap 提供的 CSS 樣式表，不要忘記 Bootstrap 的源碼是基於最流行的 CSS 預處理腳本 -<a href="#">Less </a> 和 <a href="#">Sass</a> 開發的。
你可以采用預編譯的 CSS 文件快速開發，也可以從源碼定制自己需要的樣式。</p>
                </div>
                <div class="col-sm-4">
                    <img src="img/devices.png"/>
                    <h2>一個框架、多種設備</h2>
                    <p>

你的網站和應用能在 Bootstrap 的幫助下通過同一份代碼快速、有效適配手機、平板、PC 設備，這一切都是 CSS 媒體查詢（Media Query）的功勞。</p>
                </div>
                <div class="col-sm-4">
                    <img src="img/components.png"/>
                    <h2>特性齊全</h2>
                    <p>
Bootstrap 提供了全面、美觀的文檔。你能在這里找到關於 HTML 元素、HTML 和 CSS 組件、jQuery 插件方面的所有詳細文檔。</p>
                </div>
                
            </div>
            <hr />
            <p>Bootstrap 是完全開源的。它的代碼托管、開發、維護都依賴 GitHub 平台。</p>
            <a href="#" class="btn btn-default">查看 GitHub 項目主頁</a>
        </section>
        <hr />

 第二大塊，同理，代碼如下

<section class="container introduce">
    <h1>基於 Bootstrap 構建的網站</h1>
    <p>
全球數以百萬計的網站都是基於 Bootstrap 構建的。你可以先參觀一下我們提供的<a href="#">例精選</a>實或者看一看我們粉絲的網站吧。

        </p>
<hr />
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <img src="img/34091ac7072297a889fe986b0238e.png"/>
        </div>
        <div class="col-xs-6 col-md-3">
            <img src="img/9aa20712a7dba02b00e73db495950.png"/>
        
        </div>
        <div class="col-xs-6 col-md-3">
            <img src="img/aecc20901cc436b5cd10911302e0b.png"/>
        
        </div>
        <div class="col-xs-6 col-md-3">
            <img src="img/f9c2f01fad1f23574156e0577a06c.jpg"/>
        
        </div>
    </div>
<hr />
    <p>我們在“優站精選”里展示了許多精美的 Bootstrap 網站。


    </p>
    <a href="#" class="btn btn-default">逛一逛“優站精選”</a>
            
</section>        

最后就是底部的聲明部分，代碼如下，用法同上

<footer class="footer">
    <div class="container">
                <ul>
                    <li>
                        <a href="#">GitHub 倉庫 </a>
                    </li>
                    <li>
                        <a href="#">實例 </a>
                    </li>
                    <li>
                        <a href="#">優站精選 </a>
                    </li>
                    <li>
                        <a href="#">關於 </a>
                    </li></ul>
                    <p>Designed and built with all the love in the world by<a href="#">@mdo</a>  and <a href="#">@fat</a>
Maintained by the core team with the help of our contributors.</p>    
<p>本項目源碼受 <a href="#">MIT</a>開源協議保護，文檔受<a href="#">CC BY 3.0</a>  開源協議保護。</p>            
    </div>
</footer>

小結

Bootstrap框架的使用，更多的是去使用它的柵格系統，因為它能夠大大減輕我們自己寫響應式布局的復雜度，

因而我重點給大家介紹了一下Bootstrap的柵格系統，希望對大家在響應式布局的網頁搭建上有所幫助！

如果有不完善的地方，還請大家批評指教，小女定虛心學習！

如果大家覺得有幫助，請點關注呦~~以后一定不偷懶了~~~互相學習~~~一起加油~~~

ths~~~