[後端人員耍前端系列]Boostrap篇：30分鐘快速掌握Bootstrap

来源:http://www.cnblogs.com/zhili/archive/2016/01/09/BoostrapQuickStart.html
-Advertisement-
Play Games

一、引言 很久沒有寫過博客了，但是最近這段時間都沒有閑著，接觸了很多方面。比如一些前端框架和組件、還有移動開發React-Native、以及對.NET框架設計的一些重新認識。這些內容在接下來的時間都會一一和大家分享的。我為什麼放置了這麼久又重新寫博客呢？因為在這段時間裡面，我雖然接觸了這麼多東西，....


一、引言

　　很久沒有寫過博客了，但是最近這段時間都沒有閑著，接觸了很多方面。比如一些前端框架和組件、還有移動開發React-Native、以及對.NET框架設計的一些重新認識。這些內容在接下來的時間都會一一和大家分享的。我為什麼放置了這麼久又重新寫博客呢？因為在這段時間裡面，我雖然接觸了這麼多東西，自己也沒有停下來學習，但是沒有寫博文總結的話，總感覺這些東西還不是我的。心裡總感覺空蕩蕩的。今天先介紹了一個前端“樣式”框架——Bootstrap。

二、Bootstrap 整體架構

　　為什麼在引言我稱為Bootstrap為一個前端樣式框架呢？可能這樣的稱謂並不是很準確，但是我覺得這樣的稱呼可以讓一些初學者可以更快明白和明白Bootstrap到底是一個什麼東西。我總結東西不喜歡用一些高大上的詞語來加深某個知識的理解，反而更喜歡用一些大家通俗易懂的詞語來描述知識點。雖然這樣的描述方式可能會有點不准確，但是我覺得則沒什麼大不了的，因為這樣的描述確實可以讓初學者更快理解這個知識。因為我在學習知識點的時候就有這樣的困惑，有些知識官方文檔都說的高大上，其實說白了也就是以前的一些東西，然後進行封裝使得開發更加簡單和快速罷了。所以這裡我分享Bootstrap框架也是這樣的。並且內容組織方面也是為了讓初學者更好地掌握。因為我剛開始接觸的時候也是一個初學者。我自認為這樣的組織方式可以更快更好地理解知識。

　　對於Bootstrap，首先要介紹而是它的整體架構——它到底由什麼組成的。相信大家看下麵一張圖就可以很快明白Bootstrap中具體由哪些東西組成的。

　　從上面的圖，可以清楚看到，Bootstrap主要有下麵幾部分組成：

  • 12柵格系統——就是將屏幕平分12份（列）。使用行(row)來組織元素（每一行都包括12個列），然後將內容放在列內。通過col-md-offset-*來控制列偏移。
  • 基礎佈局組件——Bootstrap提供了多種基礎佈局組件。如排版、代碼、表格、按鈕、表單等。
  • Jquery——Bootstrap所有的JavaScript插件都依賴於Jquery的。如果要使用這些JS插件，就必須引用Jquery庫。這也是為什麼我們在除了要引用Bootstrap的JS文件和CSS文件外，還需要引用Jquery庫的原因，兩者是依賴關係。
  • CSS組件——Bootstrap為我們預實現了很多CSS組件。如下拉框、按鈕組、導航等。也就是說Bootstrap內容幫我們定義好了很多CSS樣式，你可以將這些樣式直接應用到之前的下拉框等元素里。
  • JavaScript插件——Bootstrap也為我們實現了一些JS插件，我們可以用其提供的插件要完成一些常用功能，而不需要我們再重新寫JS代碼來實現像提示框，模態視窗這樣的效果了。
  • 響應式設計——這就是一個設計理念。響應式的意思就是它會根據屏幕尺寸來自動調整頁面，使得前端頁面在不同尺寸的屏幕上都可以表現很好。

　　Bootstrap就是由上面幾部分組成的。上面已經都每個組成部分做了一個簡單的介紹，接下來的內容無非是通過一些實例來對每個組成部分進行一個詳細的介紹罷了。

三、12柵格系統

　　Bootstrap定義12柵格系統，就是為了更好的佈局。每個前端框架都首先要定義好的就是佈局系統。在Bootstrap裡面，就是利用行和列來創建頁面佈局的。其佈局有幾個原則：

  • 行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中
  • 每行都包含12列
  • 將內容放置在每列中　

　　在bootstrap的柵格系統中，根據寬度將瀏覽器分為4種。其值分別是：自動（100%）、750px、970px、 1170px。

　　對應的樣式為超小（xs）、小型（sm）、中型屏幕 （md）、大型 （lg）

　　其本就是通過媒體查詢定義最小寬度實現。所以，Bootstrap做出來的網頁向大相容，向小不相容！

　　在Bootstrap框架內，已預先定義好了屏幕大小的分界值，其分界值得定義就是通過媒體查詢來定義的。其定義方式如下：

/* 超小屏幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是預設的（還記得 Bootstrap 是移動設備優先的嗎？） */

/* 小屏幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }

　　其實Win8應用開發中也應用了媒體查詢來實現可響應式的應用。所以大家以後如果聽到了可響應系統不要覺得很高深哦，其實就是框架為我們定義了媒體查詢，如果超過了媒體查詢中定義的最小寬度對應某個類型屏幕，通過這樣的方式，就可以在不同屏幕之間收縮元素大小來適應屏幕。然而Bootstrap提出的概念是移動設備優先的，所以Bootstrap設計出來的頁面只能向大相容，向小不相容。

四、基礎佈局組件

　　基礎佈局組件就是Bootstrap框架內為一些基礎佈局的標簽定義了一些統一的樣式。如Table、按鈕、表單等。下麵讓我們看一個Table的例子：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>
    <!--因為這裡沒有使用到Bootstrap的JS插件，所以就沒有引用Jquery組件-->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
  </head>
  <body>
  <h3>預設樣式的Table</h3>
    <table class="table">
      <caption>表標題.</caption>
      <!-- 表頭，組合為t+head, t代表table的意思-->
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Tommy</td>
          <td>Li</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Bob</td>
          <td>san</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Sam</td>
          <td>wang</td>
        </tr>
      </tbody>
    </table>

    <h3>帶邊框的表格</h3>
    <table class="table-bordered">
      <caption>表標題.</caption>
      <!-- 表頭，組合為t+head, t代表table的意思-->
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Tommy</td>
          <td>Li</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Bob</td>
          <td>san</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Sam</td>
          <td>wang</td>
        </tr>
      </tbody>
    </table>

    <!-- 更多表格樣式參考： http://v3.bootcss.com/css/#tables-->
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

　　具體的運行效果：在此運行。

　　對於Button和表單的例子代碼這裡就不貼了，大家可以通過下麵的鏈接查看運行效果和查看源碼。也可以通過最後的下載文件來下載本專題的所有源碼。

　　Button例子的運行效果：在此運行

　　表單例子的運行效果：在此運行

 

五、CSS組件

　　CSS組件和基礎佈局組件差不多，也就是Bootstrap為一些標簽定義了一些已有的樣式，這些樣式運行的效果都非常美觀，這樣每個公司或開發人員都不需要再去寫一篇樣式，從而加快開發效率。這裡直接看一個導航的例子吧。說白這個東西，你用多了自然就熟了。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
  </head>
  <body>
  <h3>導航條</h3>
  <nav class="navbar navbar-default navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Home</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">About</a></li>
      </ul>
      
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action 1</a></li>
            <li><a href="#">Action 2</a></li>
            <li><a href="#">Action 3</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated Action</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

　　 其運行效果：在此運行

　　其他組件的運行效果如下:

　　分頁例子的運行效果：在此運行

　　下拉菜單的運行效果：在此運行

　　面板的運行效果：在此運行

六、JavaScript插件

　　預設情況下，所有的JS插件都可以通過設置特定的HTML代碼和相應的屬性來實現，而無需寫一行JavaScript代碼。其實現本質就是Bootstrap為這些屬性實現了對應的JavaScript代碼。

　　下麵就直接看一個模態視窗的例子：

　　

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
  </head>
  <body>
  <h3>模態視窗</h3>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Click me
  </button>
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Test body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

　　其運行效果：在此運行。

　　看完前面的所有內容之後，是不是瞬間覺得Bootstrap其實只不過是一個樣式框架罷了。利用它我們可以快速方便地構建Web頁面。另外看完前面的內容，你也就不會困惑為什麼Bootstrap官方文檔為什麼是下麵這樣的吧：

 

　　Bootstrap官方文檔的導航條中的條目不就是我們上面的介紹的幾大組成部分嘛。

七、總結

　　到此，本文的所有內容就分享結束了，希望通過本文可以讓初學者快速理解和掌握Bootstrap。另外本文相當於是Bootstrap要領吧，關於更詳細的內容大家可以自行參考Bootstrap中文官網。不過我覺得沒不要了，有那樣的時間還不如就直接實踐起來呢。VS2013的Web應用程式就已經預設支持Bootstrap框架，大家可以看完之前就可以馬上通過VS2013來創建一個Web應用程式來體驗下Bootstrap在Asp.net MVC 下的應用吧。具體相關教程可以參考：ASP.NET MVC使用Bootstrap系列

　　在接下來的一篇文章中，我將繼續為大家分享前端MVVM框架——AngularJS。

　　本文所有源碼下載：BootstrapSamples。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • javascript中4種類型識別的方法
    [1]typeof [2]Object.prototype.toString [3]constructor [4]instanceof
  • （三）閉包和高階函數
    雖然javascript是一門面向對象的編程語言，但這門語言同時也同時擁有許多函數式語言的特性。函數式語言的鼻祖是LISP，javascript設計之初參考了LISP兩大方言之一的Schenme，引入了Lambda表達式，閉包，高階函數等特性。使用這些特性，我們就可以靈活的編寫javascript代...
  • JS中的間歇調用setInterval()與超時調用setTimeout()相關總結
    超時調用需要使用window.setTimeout(code,millisec)方法它接受兩個參數：要執行的代碼和以毫秒錶示的時間（即在執行代碼前需要等待多少毫秒）。其中第一個參數可以是一個包含JS代碼的字元串（就和在eval()函數中使用的字元串一樣），也可以是一個函數。第二個參數表示等待多長時間...
  • 關於jQuery中，animate、slide、fade等動畫的連續觸發、滯後反覆執行的bug的個人解決辦法
    照例，現在開頭講個這個問題發生的背景吧： 因為最近要做個操作選項的呼出，然後就想到了用預設隱藏，滑鼠划過的時候顯示的方法。 剛開始打算添加一個class="active"，直接觸發mouseover（或者mouseenter）的時候add，mouseout（或者mouseleave）的時候remov...
  • Node.js靜態文件伺服器改進版
    首先還是先感謝github，感謝github上提供此段源碼的作者。跟昨晚的來比今天的靜態文件伺服器有點點複雜些，可以學到很多新的東西。仔細會發現這次的代碼多了一個fs.stat函數和ReadStream對象的pipe函數，stat這個函數是用來獲取文件信息。第一個參數是傳入文件路徑，第二個則是回調函...
  • karma配置文件參數介紹
    目錄結構參數介紹/*** * Created by laixiangran on 2015/12/22. * karma單元測試配置文件 */module.exports = function(config) { config.set({ /*** * 基礎路徑，...
  • CSS學習筆記——CSS中定位的浮動float
    昨天在解決了盒模型的問題之後又出現了新的知識模糊點：浮動和絕對定位？今天先解決浮動相關的問題，首先列舉出想要解決的問題：1.浮動到底是怎麼樣的？2.浮動對元素的影響有什麼？3.浮動主要用來乾什麼？第一個問題：浮動到底是怎麼樣的？W3CSCHOOL對浮動屬性的解釋：浮動的框可以向左或向右移動，直到它的...
  • DOM擴展：DOM API的進一步增強[總結篇-下]
    DOM1級主要定義了文檔的底層結構，並提供了基本的查詢操作的API，總體而言這些API已經比較完善，我們可以通過這些API完成大部分的DOM操作。然而，為了擴展DOM API的功能，同時進一步提高DOM操作的效率，DOM擴展也不斷被提出和採納。對DOM的擴展主要有兩部分：Selectors API和...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類