Bootstrap——一款超好用的前端框架

時間 2019-11-12

原文原文鏈接

前言css

Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，用於開發響應式佈局、移動設備優先的 WEB 項目。Bootstrap在JQuery的基礎上進行了更爲個性化的完善，造成一套本身獨有的網站風格，併兼容大部分jQuery插件。讓前端開發更快速、簡單。html

基本結構：Bootstrap 提供了一個帶有網格系統、連接樣式、背景的基本結構。

CSS：Bootstrap 自帶如下特性：全局的 CSS設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。

組件：Bootstrap 包含了十幾個可重用的組件，用於建立圖像、下拉菜單、導航、警告框、彈出框等等。

JavaScript 插件：Bootstrap包含了十幾個自定義的jQuery 插件。能夠直接包含全部的插件，也能夠逐個包含這些插件。

定製：能夠定製Bootstrap的組件、LESS 變量和jQuery 插件來獲得本身的版本。

一、Bootstrap 基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!--讓瀏覽器使用最新的IE內核進行渲染頁面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--設置視口寬度等於當前設備寬度，默認縮放比爲1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- 導入Bootstrap核心CSS文件 -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    
    
    
      
    <!-- ①<!--[if lt IE 9]>…… <![endif]- ->這一對標籤用於檢測當前瀏覽器的版本，lt表示小於，gt表示大寫。因此這句話做用是，當瀏覽器版本低於IE9執行。 ②html5shiv：解決ie9如下瀏覽器對html5新增標籤的不識別，並致使CSS不起做用的問題。 ③respond.min:讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其餘瀏覽器支持查詢。 -->
    <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
  </head>
  <body>
    <h1>你好！</h1>
    <script src="js/jquery-3.1.1.js"></script>
    <!-- 導入BootStrap的JS插件 ①若是不使用BootStrap提供的JS插件，則這個JS文件無需導入； ②BootStrap的JS插件功能依賴JQuery，所以這個JS必須在JQuery以後導入； -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

拷貝並粘貼上面的 HTML 代碼，這就是一個最簡單的 Bootstrap 頁面了。必定要注意，Bootstrap 的全部 JavaScript 插件都依賴 jQuery，所以 jQuery 必須在 Bootstrap 以前引入。前端

二、組件

Bootstrap中包含了豐富的Web組件，根據這些組件，能夠快速的搭建一個漂亮、功能完備的網站。其中包括如下組件：

　　下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、路徑導航、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等。

2.1字體圖標

bootstrap默認提供了二百多個圖標。咱們能夠經過span標籤來使用這些圖標：html5

 <h3>圖標</h3>   
    <span class="glyphicon glyphicon-home"></span>
    <span class="glyphicon glyphicon-signal"></span>
    <span class="glyphicon glyphicon-cog"></span>
    <span class="glyphicon glyphicon-apple"></span>

讓咱們來看一下效果：jquery

2.2按鈕

<button></button>標籤用於建立按鈕，bootstrap提供了豐富的按鈕樣式。按鈕除了有默認的大小外，bootstrap還提供三個參數來調整按鈕的大小，分別是：btn-lg、btn-sm和btn-xs。css3

    <h3>按鈕</h3>
    <button type="button" class="btn btn-default">按鈕</button>
    <button type="button" class="btn btn-primary">primary</button>
    <button type="button" class="btn btn-success">success</button>
    <button type="button" class="btn btn-info">info</button>
    <button type="button" class="btn btn-warning">warning</button>
    <button type="button" class="btn btn-danger">danger</button>
    
    <h3>按鈕尺寸</h3>
    <button type="button" class="btn btn-default">按鈕</button>
    <button type="button" class="btn btn-primary btn-lg">primary</button>
    <button type="button" class="btn btn-success btn-sm">success</button>
    <button type="button" class="btn btn-info btn-xs">info</button>

    <h3>把圖標顯示在按鈕裏</h3>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;按鈕</button>

效果：bootstrap

2.3下拉菜單

下拉菜單是最多見的交互之一，bootstrap爲咱們提供了漂亮的樣式。瀏覽器

     <h3>下拉菜單</h3>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>

看一下效果：app

2.4輸入框

經過<input></input>標籤去建立輸入框。ide

    <h3>輸入框</h3>
    <div class="input-group">
      <span class="glyphicon glyphicon-user"></span>
      <input type="text" placeholder="username">
    </div>

    <div class="input-group">
      <span class="glyphicon glyphicon-lock"></span>
      <input type="password" placeholder="password">
    </div>

效果圖：

2.5導航欄

導航欄做爲整個網站的指引必不可少。

    <h3>導航欄</h3>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

效果呢↓

2.6表單

人與系統之間數據的傳遞都須要依靠表單來完成。好比註冊/登陸信息的提交，查詢條件的提交等。用<form></form>標籤來建立表單。

   <h3>表單</h3>
    <form>
    <div class="form-group">
      <span class="glyphicon glyphicon-user"></span>
      <input type="email" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
      <span class="glyphicon glyphicon-lock"></span>
      <input type="password" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <label for="exampleInputFile">File input</label>
      <input type="file" id="exampleInputFile">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Check me out
      </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

效果以下：

2.7警告框

警告框是系統向用戶傳達信息和提供指引的重要手段。沒有針對警告框的標籤，經過bootstrap所提供的樣式能夠瞬間製做出漂亮的警告框。

    <h3>警告框</h3>
    <div class="alert alert-warning alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>
    <div class="alert alert-success" role="alert">
        <a href="#" class="alert-link">success!</a>
    </div>
    <div class="alert alert-info" role="alert">
        <a href="#" class="alert-link">info!</a>
    </div>
    <div class="alert alert-warning" role="alert">
        <a href="#" class="alert-link">warning!</a>
    </div>
    <div class="alert alert-danger" role="alert">
        <a href="#" class="alert-link">danger!</a>
    </div>

效果圖：

2.8進度條

　系統的處理過程每每須要用戶等待，進度條可讓用戶感知到系統的處理過程，從而增長容忍度。

    <h3>進度條</h3>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        70%
      </div>
    </div>

三、Bootstrap柵格系統

首先，咱們先要了解什麼是柵格系統！往下看 ↓

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin用於生成更具語義的佈局。

柵格系統用於經過一系列的行（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。
柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可使用三個 .col-xs-4 來建立。
若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。
柵格類適用於與屏幕寬度大於或等於分界點大小的設備，而且針對小屏幕設備覆蓋柵格類。所以，在元素上應用任何 .col-md-*柵格類適用於與屏幕寬度大於或等於分界點大小的設備，而且針對小屏幕設備覆蓋柵格類。所以，在元素上應用任何 .col-lg-*不存在，也影響大屏幕設備。

3.1媒體查詢

在柵格系統中，咱們在 Less 文件中使用如下媒體查詢（media query）來建立關鍵的分界點閾值。

/* 超小屏幕（手機，小於 768px） */ /* 沒有任何媒體查詢相關的代碼，由於這在 Bootstrap 中是默認的（ Bootstrap 是移動設備優先） */ /* 小屏幕（平板，大於等於 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器，大於等於 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器，大於等於 1200px） */ @media (min-width: @screen-lg-min) { ... }

3.2柵格參數

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

輸入上面的代碼就能夠實現上圖的樣式，是否是已經對柵格系統有所瞭解了，咱們繼續往下看↓

3.3響應式列重置

即使有給出的柵格class，你也難免會碰到一些問題，例如，在某些閾值時，某些列可能會出現比別的列高的狀況。爲了克服這一問題，建議聯合使用 .clearfix 和響應式工具類。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

除了列在分界點清除響應，您可能須要重置偏移, 後推或前拉某個列。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

<h2 style="margin: 8px 0px 0px; padding: 0px; font-weight: bold; font-size: 16px; line-height: 28px; max-width: 100%; color: #59c3f9; min-height: 32px; border-bottom-width: 1.5px; border-bottom-style: solid; border-color: #59c3f9; text-align: justify;"><span style="font-family: 'Microsoft YaHei'; font-size: 14px;"><span class="autonum" style="background-color: #59c3f9; color: #ffffff; display: block; float: left; line-height: 20px; margin: 0px 8px 0px 0px; max-width: 100%; padding: 4px 10px; word-wrap: break-word !important;" title="" data-original-title="">3.2.1</span><span style="font-size: 16px;"><strong class="135brush" style="border-color: #59c3f9; color: inherit;" data-brushtype="text">內部類做爲事件監聽器</strong></span></span></h2>

3.4列偏移

使用 .col-md-offset-* 類能夠將列向右側偏移。這些類實際是經過使用 * 選擇器爲當前元素增長了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

3.5嵌套列

爲了使用內置的柵格系統將內容再次嵌套，能夠經過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須佔滿12列）。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

3.6列排序

經過使用 .col-md-push-* 和 .col-md-pull-* 類就能夠很容易的改變列（column）的順序。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>