Bootstrap快速入門

技術小胖子發表於2017-11-14
boot

概念

BootStrap是由Twitter的兩位員工Mark Otto和Jacob Thornton於2010年8月建立，距今已有7年，不過其仍然是最流行的前端CSS框架。它基於Less前端開發庫，提供了常見的CSS和Javascript程式碼，然開發快速上手。其具有以下特性：完整的基礎CSS外掛；豐富的預定義樣式表；基於jQuery的js外掛集；非常靈活的響應式柵格系統，而且崇尚移動先行的思想。隨著bootstrap的火爆，出現了很多優秀外掛，比如Font Awesome字型。
Bootstrap官網地址，demo和文件非常豐富。

其下載後的原始碼結構為：


這兒值得的一說的就是fonts中通過字型檔案代替了過去的.png，其通過@font-face語法，將安全的Web字型實時下載到客戶端，便於任意縮放、改變顏色。

Html標準模板如下所示

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap基礎模板</title>
    <link href="../public/css/bootstrap.css" rel="stylesheet">
    <link href="../public/css/bootstrap-theme.css" rel="stylesheet"></head><body>
    <header></header>
    <article></article>
    <footer></footer>
    <script type="text/javascript" src="../public/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="../public/js/bootstrap.js"></script></body></html>

可以看到viewport的媒體查詢，此外如果需要更多的模板可以訪問getbootstrap下載模板。

CSS基本回顧

優先順序：（過去有一些誤區）如何確定CSS的優先順序，需要引入一個機制，分別用數字(a,b,c,d)表示優先組合，a表示style屬性（行內樣式），優先順序最高，但由於一般使用class樣式，該值為0；b是該css選擇器上id數量的總和，一般為1個；c是用在該css選擇器上的其他屬性css選擇器和偽類的總和，包括class（.btn）和屬性css選擇器li[id=red];d計算元素div和偽元素first-child；通用css選擇器*的0優先順序，即最低；如果2個css具有相同優先順序，在樣式表中後面的起作用。比如下面連個選擇器的優先，第一個比第二個高。

leftbar li#first{color: red}: 0,2,0,1

leftbar li:first-child{color: blue}: 0,1,0,2

選擇器

屬性選擇器

  • [att=value] 該屬性有確定的值

  • [att~=value] 該屬性值必須是多個空格隔開的值，比如class="title featured home"，其中需要有value

  • [att|=value] 屬性值時value或value-

  • [att^=value] 屬性值以什麼開始

  • [att$=value] 屬性值以什麼結束

  • [att*=value] 屬性值包含特定值

子選擇器：用>表示，例如table>thread>tr>th

兄弟選擇器：臨近兄弟用+,普通兄弟用~

偽類：bootstrap支援的偽類包括:hover滑鼠劃過時的狀態, :focus元素有焦點的狀態, :first-child, :last-child, :nth-child()指定元素的一個或多個特定子元素(可以是數字，也可以是even,odd)。

例如，設定按鈕組，除第一個、最後一個按鈕和帶dropdown-toggle樣式的元素外，其他btn樣式都不設定圓角

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}

display屬性:用於定義建立佈局時元素生成的框的型別，如果不謹慎使用容易出錯

  • none 此元素不會顯示

  • block 此元素顯示為塊級元素，前後會帶換行符

  • inline 預設，此元素會被顯示為內聯元素，沒有換行符

  • inline-block 行內塊元素

  • list-item 此元素會以列表顯示

  • run-in 此元素會根據上下問作為塊級元素和內聯元素顯示

  • inherit 規定從父元素整合display屬性

  • table-xxx 各種table顯示

媒體查詢:響應式設計的核心元素，常用的有min-width,max-width,and，詳情可訪問Mediaqueries官方網站

JavaScript語法回顧

||和&&運算子：a&&b返回第一個可轉化為false的元素值，a||b返回第一個可轉換為true的元素值。
立即呼叫的函式表示式：在JS中，function定義後通過加小括號，完成立即調動。(function(){}())

+function($){
    "user strict";
}(jQuery);//這兒+和;一樣，起到分割的作用

原型：Alert.prototype.close=function(e){}
jQuery事件繫結：jQuery使用on和off來繫結和禁用時間，但bootstrap中稍有變化

$(`td`).on(`click`, function(event){});//原有格式$(`document`).on(`click.bjock`, `td`, function(event){});//這兒增加了引數`td`，而且選擇器變成了document，//好處是在document上繫結了一個單擊事件，利用冒泡機制，在單機的時候檢查是否為td元素，如果是才處理//而把td作為選擇器，一個頁面有多少td都會被繫結，效能下降，這三個引數的名字唄稱為享元模式(回顧一下)。

事件名稱空間：可以看到上例中的事件click.bjork，bjork被稱名稱空間，當需要觸發自己的時間時，名稱空間就變得很有用，比如$(`#first`).trigger(`click.bjork`);，這是觸發自己定義的事件，而不影響他人，這在前端複雜化的今天變得非常重要。
$.data():在很多js外掛中都是用$(selector).data()方法，意思是收集指定元素上所有以data-開頭的自定義屬性，併合併成一個物件字面量。比如<div id=`aaa` data-role=`bbb` data-toggle=`ccc`></div>，那麼$(#`aaa`).data();的值為:var value={role:`bbb`, toggle:`ccc`};，當然也可以選定指定值$(#`aaa`).data(`role`);，結果就是`aaa`。

Tip：

BootStrap包含aria-xxx開頭的屬性，被稱為輔助屬性，用於支援有閱讀障礙的人士。

整體結構

首先介紹一下柵格系統的工作原理

  • 一行資料必須包含在一個.container中，一遍為其賦予合適的對齊方式和內邊距padding。

  • 使用行在水平方向上建立一組列

  • 具體內容放在列中，只有列可以作為行的直接子元素

接下來看一下.container樣式的原始碼，可以看出其核心就是.container和@media的設定

.container {    padding-right: 15px;    padding-left: 15px;    margin-left: auto;    margin-right: auto;
}
@media ( min-width :768px) {    .container {        width: 750px;
    }
}

柵系統的用法，其實就是列的組合，主要涉及4個特性：列組合、列偏移、列巢狀、列排序，首先介紹列組合的例子。

<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-11">.col-md-11</div>
    </div>
</div>

實際上列組合的實現非常簡單，只涉及2個CSS特性，左浮動和寬度百分比，例如

.col-md-1, ..., col-md-12{float:left;}.col-md-12{width:100%;}.col-md-1{width:8.33%;}

列偏移的例子，其原理就是margin-left的使用，有多少個1/12的margin-left，就有多少offset。

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

同樣，柵格系統支援巢狀，即在列中再宣告多個行，內部巢狀的row寬度為100%時，就是當前外部列的寬度。突然有個思路，就是最外圍的.container是根據@media設定畫素的，其中的內容均是使用的相對大小。

    <div class="row">
        <div class="col-md-8">
            <div class=`row`>
            <div class="col-md-6">
            <div class="col-md-6">
            </div>
        </div>
    </div>

列排序其實就該改變列的方向，也就是改變左右浮動，並設定浮動的距離，其通過.col-md-push-*和.col-md-pull-*實現。系統為了方便，統一在左浮動的基礎上，通過設定left和right的值來實現定位顯示。

.col-md-pull-6{right:50%;}.col-md-push-6{left:50%;}

響應式柵格：針對不同的設配使用不同的樣式字首，比如中型的.col-md-xx，大型的.col-lg-xx，有意思的是，我們可以跨裝置的設定樣式，例如示例既支援md中型的裝置也支援sm小型的裝置。

    <div class="col-sm-12 col-md-8">.col-sm-12 .col-md-8</div>

清除浮動問題：理想很豐滿，現實很骨感，有時會出現不同裝置顯示時出現意外，比如因為高度的原因造成錯位，這時需要使用

    <div class="clearfix visible-xs"></div>

CSS佈局

在BootStrap中，佈區域性分主要包括基礎排版Typography、程式碼Code、表格Table、表單Forms、按鈕Buttons、圖片Images等內容。

  • 基礎排版：在type.less檔案中設定，包括標題h1；頁面主題<body>；強調文字<small>，<em>,<cite>;對齊方式,<p class-"text-left/right/center/justify">等4種；縮略語<abbr title="xionger">HTML</abbr>，有點意思；地址元素<address>Shanghai</address>;引用<blockquote><p>帥的1B</p></blockquote>；列表，增加了去點列表<ul class="list-unstyled"></ul>，內聯列表class=`list-inline`,定義列表<dl><dt></dt><dd></dd></dl>,水平定義列表class="dl-horizontal"；

  • 程式碼：在code.less檔案中設定，<code>顯示單行內聯程式碼；<kbd>顯示使用者輸入程式碼；<pre>元素新生多行程式碼塊。

  • 表格：在table.less檔案設定，基礎樣式<table class="table">；帶背景條紋的表格class=`table table-striped`；帶邊框的表格class=`table table-bordered;帶滑鼠懸停高亮的class=`table table-hover`；緊湊型的class=`table table-condensed`；行級元素樣式，即<tr>樣式，包括.active,.warning,.success,.danger,.info;響應式表格class=`table table-responsive。

  • 表單：在form.less檔案中設定，比較簡單，基礎的如<div class=`form-group`>，<input class=`form-control` placeholder=`請輸入Emal`>,class=`checkbox`;內聯表單<form class=`form-inline`>;橫向表單<form class=`form-horizontal`>;橫向的表單內元素，如<label class=`checkbox-inline`><input ...></label>;控制元件狀態，通過屬性focus,disabled;驗證狀態，class=`form-group has-warning/error/success`;控制元件大小，class=`input-lg/sm`;幫助，<span class=`help-block`>

  • 按鈕：在button.less檔案配置，樣式有btn btn-default,btn btn-primary,btn btn-success,btn btn-info,btn btn-warning,btn btn-danger,btn btn-link連結樣式；大小btn-lg/sm/xs；活動/禁用狀態，active/disabled。

  • 影像：在scaffolding.less中配置，包括img-rounded,img-circle,img-thumbnail。

  • 輔助樣式：文字樣式，柔和灰text-muted,主要藍text-primary,成功綠text-success,資訊欄text-info,警告黃text-warning,危險紅text-danger；輔助圖示，關閉class="close",向下箭頭class="caret"；內容浮動，pull-right/left,清除浮動clearfix;隱藏顯示show/invisible/hidden

Tip:這樣大體能夠理解less等意思了，就是動態的CSS語言，編譯後就是.css檔案，其不僅僅是給bootstrap用的，任何的css框架均可使用。此外就是，如果說我們自己寫樣式是做填空題的話，bootstrap其實就是讓我們變成做選擇題，帥，boss的感覺有木有。

常用元件

在bootstrap中，CSS元件都是通過AO模式進行架構的：Append附加；Override重寫。CSS元件包括8種基本型別，應用中對其進行組合即可。

Bootstrap常用的佈局元件的應用,均可在該知道網頁找到，runboot.com，需要時copy-paste即可，其中還有一個菜鳥工具（最下方，叫做客戶化佈局），非常方便，常見元件結構如下圖所示。

Tip：這部分的目標就是需要什麼元件，能查得到即可，對於分頁等複雜需求，還需要選擇合適的bootstrap外掛進行增強。

常用js外掛

在之前CSS的基礎上，BootStrap自帶12種jQuery外掛，其利用bootstrap資料API，大部分外掛可以在不編寫任何程式碼的情況下觸發。

在bootstrap中，js外掛遵循以下3個規則。

  • Html佈局規則：基於元素自定義屬性的佈局規則，比如使用類似於data-target的自定義屬性

  • javascript實現步驟：所有外掛都遵循jQuery外掛開發的標準步驟，所有的事件保持統一IDE標準

  • 外掛呼叫方法：所有外掛的使用，都可以是HTML宣告式，也可以是js呼叫式，且支援多種回撥和可選引數。

具體示例如下所示，只需在button上新增data-dismiss=`alert`屬性，即可在單機該button時關閉警告框。

<div class="alert">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>警告！</strong></div>

BootStrap中的js都遵循同樣的步驟來實現js外掛，如下所示

  1. 宣告立即呼叫函式，如+function($){"use strict";}(jQuery);

  2. 定義外掛類及相關原型方法，如Alert.prototype.close

  3. 在jQuery上定義外掛並重設外掛建構函式，如$.fn.alert.Constructor=Alert

  4. 防衝突處理，如$.fn.alert.noConflict

  5. 繫結各種觸發事件(data-api)

常見的js外掛如下圖所示

通用技術

  • 禁用外掛預設行為： $(document).off(`.alert.data-api`)

  • 可程式設計性: $(`.btn.btn-danger`).button(`toggle`).addClass(`fat`);, $(`#myModel`).modal({keyboard: false});

  • 自定義事件: $(`#myModel`).on(`show.bs.modal`, function(e){if(!data) return e.preventDefault();})

Tip: 此外還可以禁止響應式佈局，即刪除名為viewport的meta元素，並未.container設定一個預設值。

補充知識

在實際應用匯總，bootstrap提供的元件基本滿足了一般專案的需求，但比如分頁控制元件的支援就顯得比較弱，這時需要選用網上現有的外掛，也可以自己編寫相關擴充套件。這部分最重要的是思路，在自定義樣式時，為了避免覆蓋BootStrap預設的樣式或行為，建議通過附加樣式的形式來實現。

.pagination.square > li > a {
    margin 0 5px;
}
<ul class=`pagination square`></ul>

第三方擴充套件

  • Font Awesome:是一款強大的icon圖示集，可以進行向量縮放，支援任意CSS對大小、顏色、陰影的操作。使用非常簡單，只需下載元件包並引用即可，Font Awesomeicon-與bootstrapglyphicon-完全相容。

    <link rel=`stylesheet` href=`/css/font-awesome.min.css`>//常規用法<p><i class=`icon-camera-retro icon-2x`>放大兩倍</i></p>

  • Buttons元件：依賴Font Awesome，其提供非常強大的按鈕功能

  • DateTime Picker：非常強大的日期外掛，功能和jQuery版的類似，但其風格和bootstrap更統一。

  • 其他：Cikonss響應式icon；Flat UI扁平化風格；Metrao UI CSS，Win8效果；Messager彈框元件等。
      本文轉自zsdnr  51CTO部落格，原文連結：http://blog.51cto.com/12942149/1929344，如需轉載請自行聯絡原作者





相關文章