BootStrap框架——製做BootStrap中文網首頁

時間 2019-11-08

標籤 bootstrap 框架製做中文網首頁欄目 Bootstarp 简体版

原文原文鏈接

小女感受本身很久沒有好好寫博客了，蹲在牆角反思中...javascript

今天經過一個實例給你們介紹一款實用又好用的框架——Bootstrap框架！css

什麼是Bootstrap呢？前端

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

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

今天，小女要經過模仿製做Bootstrap官網首頁，爲你們介紹一下其框架的基本運用，但願會對你們有幫助！bootstrap

官網原版展現sass

響應式展現框架

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

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