【BootStrap】概述 & CSS

時間 2019-11-16

原文原文鏈接

BootStrapcss

　　BootStrap由Twitter開發，基於HTML,CSS,JS，是一套前端框架。它的特色是對瀏覽器良好的支持（目前市面上全部流行瀏覽器均可以），兼容移動設備，以及響應式設計（響應式CSS自適應於各類設備）。html

　　安裝BS能夠到官方網站下載這個框架庫，http://getbootstrap.com/ 。上面有兩個類型的BS庫，一種是編譯好的一些文件（Download Bootstrap），另外一種是一些源代碼（Download Source）。源代碼比較大，是讓人分析的，對於通常的使用，下載預編譯版本的便可。獲得的預編譯庫的目錄結構以下前端

　　再獲得庫以後就是如何在文檔中引用庫了，基本上要在html中的<head>標籤中引用bootstrap.min.css（BS樣式庫）,bootstrap.min.js（BS的JS插件庫）以及jQuery（由於BS的JS文件會用到不少jQuery內容），例如：ios

<head>
    <title>...
    <meta>....
    <link href="..../bootstrap.min.css" rel="stylesheet" />
    <script src="...../jQuery.js"></script>
    <script src="...../bootstrap.js"></script>
</head>

　　下面將照抄W3CSchool的內容，根據BS的CSS，佈局和插件三方面來介紹BS的功能和使用程序員

BootStrap CSSbootstrap

■　　BS網格系統api

　　網頁設計中能夠用網格組織內容，使用戶在查看內容時更加層次分明。BS使用網格系統來統括HTML內容，使得內容管理更加便利，同時由於內容鋪展時有網格做爲一個「容器」，因此可讓自適應不一樣設備變得更加簡單。瀏覽器

　　BS的網格系統會根據屏幕以及視口（瀏覽器窗口大小）的變化而自動增刪網格，一個頁面最多能夠被分紅12列的網格來呈現，以下結構：前端框架

　　在利用BS的網格系統時，應該遵循：框架

行必須放置在 .container class 內，以便得到適當的對齊（alignment）和內邊距（padding）。
使用行來建立列的水平組。
內容應該放置在列內，且惟有列能夠是行的直接子元素。
預約義的網格類，好比 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。
列經過內邊距（padding）來建立列內容之間的間隙。該內邊距是經過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
網格系統是經過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。

　　基於以上的注意點，咱們能夠構建出的一個最簡單的網格佈局是像下面這些代碼同樣的：

<div class="container">
   <div class="row">
      <div class="col-*-*">內容</div>
      <div class="col-*-*">內容</div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

　　設置出一個.container類的元素後，至關劃定了一片居中且指定了最大寬度的區域。在這個容器中每設置一個.row就是新開啓一行。而在每一行中能夠再以.col-xx-nn開啓一列。xx的取值能夠是lg（表示large）,md（medium）和sm（small）。再在每一個列區域中去設置內容。

　　關於col類名中lg,md,sm三種選項，分別指定了當前頁面佈局在不一樣大小屏幕的設備上的佈局方案。好比在我能夠設置兩個div分別是class="col-sm-3 col-md-6 col-lg-9" ; class="col-sm-9 col-md-6 col-lg-3"這兩個列在不一樣的設備上顯示的佈局也不一樣，在小型設備（如手機）上是25%/75%，在中型設備（如平板電腦）上是50%/50%，在大型設備上（臺式機）則是75%/25%。這主要是由於BS會根據當前設備（屏幕）大小的不一樣來查找帶有不一樣關鍵字的類名並應用。

　　以上就是BS網格系統的一些基礎用法，更加高級一點的用法還有：

　　列偏移

　　　　默認的全部行的第一個列元素都是從行最左邊開始算起的，若是不想讓它從最左邊開始算，方便的方法是搞一個空列出來放前面就行了。另外的一種方法是利用.col-xx-offset-nn的類來指出nn列的偏移。這個類的意思就是說，在這個元素的左邊有nn列的空列，是不填充的。實例：col-md-offset-3.

　　嵌套列

　　　　稍微複雜一些的網格就有嵌套的關係。BS中的一個列能夠再嵌套若干個行而後每一個行中再加上若干個列，這些列的nn給值基準不是以總頁面的12個列來，而是以當前所在列來的。好比：

<div class="row">
    <div class="col-lg-6">
        <div class="row">
            <div class="col-lg-6"></div>
            <div class="col-lg-6"></div>
            <!-- 這裏的兩個列nn參數加起來依然是12而不是所在總列的6 -->
        </div>
    </div>
    <div class="col-lg-6">....
</div>

■　　BS排版

　　所謂排版就是經過一些既存類來進行文字的格式細化。在BS中大部分細化都和原生HTML是一致的。好比<strong>標籤是強調，<em>是強調加斜體等等。只不過BS在CSS上修改了一些這些默認標籤的樣式。另外一方面，BS也以類和新標籤的形式增長了許多新的文字格式的細化，其中，類也一般被用於<p>這類文本標籤中。BS的這些類和標籤有：

　　<small>　　使得文本變小變淡，若是在<h1>到<h6>這類標題標籤的內容中增長上<small>標籤的話，small中的內容會變成灰色且字號小一點的副標題的樣式

　　.text-left/center/right　　文本的居左居中居右對齊。順便一提，不僅是文本元素而一樣適用於其餘元素的對其方式是.pull-left/pull-right等

　　.text-muted/success/primary/info/warning/danger　　這些類使得文本斜體+附帶必定顏色（好比success是綠色的，而warning是土黃色，danger是紅色的）。經過這個類的CSS包裝來規定全部警告啦，錯誤啦，信息啦，成功啦等等提示信息的樣式

　　.text-justify/nowrap　　當時justify時可使文本在屏幕寬度不夠時自動換行，而nowrap使得文本不換行。

　　.text-uppercase/lowercase/capitalize　　一目瞭然不用說了。。

　　<blockquote>　　開啓一個引用塊，就像知乎的引用那樣，會在整個塊左邊有一條線以表示這是引用的文字。

　　.list-unstyled/list-inline　　兩個關於<ul>元素的類，unstyled是指讓列表的項前面沒有那個小圓點小方塊之類的標識，而inline則是讓原本默認是豎直方向的列表轉爲橫向排列

　　<dl>,<dt>,<dd>　　三者造成的是一個可爲列表項添加描述的列表，不清楚是原來HTML中就有的仍是BS後加的。總之記錄一下。結構是<dl><dt>Description1</dt><dd>item1</dd><dt>Description2</dt>...</dl>這種感受。dl能夠添加類dl-horizontal使得dl列表中描述和列表項組成一行行，多行排列而不是原先的一列放下全部內容的形式（能夠測試看一下）

■　　BS中的代碼顯示

　　BS中對代碼的顯示作了必定的改善。在原生HTML中有<code>標籤來內聯地顯示代碼（什麼是內聯參見HTML基礎知識那篇），可是內聯的話果真很不方便。而BS中把原生HTML中的<pre>元素給包裝成一個專門用來顯示代碼的容器（或者說用來顯示代碼很好。。這是程序員的傲慢嗎。。）由於<pre>會保留HTML代碼中的全部空格製表等。效果以下：

<pre>
  &lt;article&gt;
    &lt;h1&gt;Article Heading&lt;/h1&gt;
  &lt;/article&gt;
</pre>

　　效果：　　

■　　BS表格

　　BS中的表格，除了用到原生HTML中就有的<table>,<tr>,<th>,<td>,<caption>等標籤外還另加了<thead>和<tbody>標籤來區別表格頭和表格內容。在BS中一個典型的表格結構應該是這樣的：

<table>
    <caption>Title</caption>
    <thead>
        <tr>
            <th>Field1</th>
            <th>Field2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content1</td>
            <td>Content2</td>
        </tr>
        <tr>...</tr>
    </tbody>
</table>

　　th標籤在BS中只能在thead標籤內部使用，td則只能在tbody中使用。固然，以上這段代碼不涉及任何BS類，因此看上去和原生HTML寫出來的沒什麼差異，所以有必要給各個標籤帶上類以期其進入BS的變化，

　　首先是<table>標籤的一些類：

　　.table　　這個類是指BS中的表格的基本樣式，好比寬度鋪平整個可用網格的寬度，加上分隔線，調整字號等等。

　　.table-striped　　條紋類表格，將用灰白間替的風格填充表格的各個行。

　　//這裏須要注意的一點是，上述兩個類之間是互相獨立的，也就是說，若是想要獲得一個鋪平網格（這樣比較好看）且條紋狀的表格的話就得寫<table class="table table-striped">，這種類中重複寫上好幾遍同一個詞的現象在BS中很是常見。就table標籤而言，這裏全部的五個標籤能夠聯合使用，即<table class="table table-striped table-hover table-bordered table-condensed">

　　.table-bordered　　爲表格添加全部邊框

　　.table-hover　　把鼠標懸浮所在位置的那一行背景色設置爲灰色的表格

　　.table-condensed　　使表格更加緊湊

　　而後是<tr>，<th>，<td>的一些類:

　　.active　　將懸浮的色設置爲相關行或者單元格的背景色（一般配合JS來實時改變頁面）。active類並非表格獨有，列表，按鈕，超連接等也都有active類

　　.success/info/warning/danger　　將相關顏色設置成相關行或者單元格的背景色。

■　　BS表單

　　在BS中，一個典型的表單結構應該是這樣的：

<body>
    <form role="form">
        <div class="form-group">
            <label for="name">名稱</label>
            <input type="text" class="form-control" id="name"
                   placeholder="請輸入名稱">
        </div>
        <div class="form-group">
            <label for="inputfile">文件輸入</label>
            <input type="file" id="inputfile">
            <p class="help-block">這裏是塊級幫助文本的實例。</p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" /> 請打勾
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</body>

　　這段代碼中包括了一個文本輸入框部分，一個文件輸入部分，一個複選框部分和一個提交按鈕。與原生HTML表單不一樣之處，BS的表單基本樣式要求首先在最開始的<form>標籤中添加role="form"，在表單中聯繫比較緊密的元素（好比輸入框和輸入框提示文字）能夠用一個.form-group的div標籤包裹起來（複選框那裏用的是.checkbox）以期BS爲咱們的表單各個元素間自動調整間距。對於input，textarea，select等元素咱們須要添加.form-control類讓其成爲BS的表單元素樣式而不是原來的那樣。

　　上面這段代碼的效果是

　　從表單的呈現形式的角度來講，這種默認的屬於垂直表單（連標籤文字都是在輸入框的上方），除此以外，BS還內置了內聯表單和水平表單兩種表單的呈現形式。

　　內聯表單：

　　　　全部表單元素水平排列且相左對齊，設置時應該爲<form>標籤加上.form-inline類別。內聯表單須要注意的是，在默認狀況下select,input這些元素的寬度都是100%，在內聯表單中，雖然BS會自動調整一下寬度，可是若是本身能指定一下元素的寬度就更好了。另外，內聯表單中的標籤會變得很微妙，由於內聯是以.form-group的div爲單位的，標籤和輸入框等互相之間仍是垂直的。能夠在label中添加.sr-only類以期表單在內聯形態時隱藏標籤。

　　水平表單：

　　　　水平表單是指各個表單元素的提示文字和輸入部分呈水平分佈，這是比較常見的表單形態。要使用水平表單時應該要向<form>添加.form-horizontal類。接着把想要在一行水平顯示的東西包裹在一個.form-group中，而後在相關的label的地方，添加.control-label類，而且爲label添加一個col-xx-nn以指定提示文字的部分佔整個.form-group的多少橫向空間。好比這樣一個實例：

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label for="firstname" class="col-sm-2 control-label">名字</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="firstname" 
            placeholder="請輸入名字">
      </div>
   </div>
   <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">姓</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="lastname" 
            placeholder="請輸入姓">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox">
            <label>
               <input type="checkbox"> 請記住我            </label>
         </div>
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">登陸</button>
      </div>
   </div>
</form>

　　效果：

　　下面將經過表單中經常使用的各類不一樣的元素（input,textarea,select,checkbox,radio等等）來分別介紹一下。

　　input

　　input是輸入的統稱，根據input的type屬性的不一樣，能夠構造出不少輸入框類型。BS支持HTML5的全部input類型，包括text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

　　在input標籤中直接添加disabled如<input type="text" disabled>能夠禁用輸入框，此時鼠標移到輸入框上後圖標也會變化。若是不想禁用，只想讓它只讀的話能夠添加readonly屬性<input type="text" readonly>

　　若是想要在輸入框的先後再添加一些其餘的文字或者按鈕能夠參考BS組件的輸入框組，其要義是把輸入框包在一個.input-group裏面以後再對輸入框進行修飾，好比在先後加上.input-group-addon之類的元素

　　textarea

　　textarea是多行輸入，BS的textarea自帶一個調節大小的插件，另外在初始化時能夠設置textarea標籤的rows和cols屬性以指定本多行文本框是該以幾行幾列的形式出現

　　checkbox & radio

　　其實checkbox和radio從代碼上來講也屬於input，由於調用時是<input type="checkbox">這樣的。可是其和上述input不一樣的地方在於他們的調用形式不一樣於普通的input。這兩種選擇框的常見調用形式是，把type是checkbox或者radio的input標籤放在一個label標籤中，再用一個.checkbox或者.radio的div標籤把這個label標籤包裹起來。好比下面這樣一個實例：

    <div class="checkbox">
        <label><input type="checkbox" value="">選項 1</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" value="">選項 2</label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1"
                   value="option1" checked> 選項 1
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2"
                   value="option2">
            選項 2 - 選擇它將會取消選擇選項 1
        </label>
    </div>

　　其餘值得一提的就是radio是有組的概念的，在BS中radio組的體現就是input的name屬性。只要是name屬性同樣的input的話就至關因而一個組，一個組內的全部radio只能有一個是被選中狀態的。

　　上面這段例子中給出的選項是垂直排列的，若是想要獲得內聯的橫向排列的選項羣的話，須要在每一個選項的label標籤中加上.checkbox-inline(不管是checkbox仍是radio都是checkbox-inline），而後從每一個div中取出label，放到統一的一個div中去（div自己是塊級元素，確定仍是會垂直排列，因此要從div中取出來）。

　　select

　　select沒什麼好說的。<select multiple>能夠調用列表框，別忘了給select加上.form-control。

　　靜態控件

　　靜態控件就是純文本，至關於wx中的StaticText。比方說在原先是一個<input type="text">的地方，讓它固定顯示一段文本的話，就能夠用<p class="form-control-static">文本</p>來獲得一段靜態文本了

　　fieldset

　　fieldset是一個隸屬於form標籤的一級子標籤，其不表明任何會顯示出來的內容，可是是控制整個form可用禁用的標籤。通常把.form-group的div都寫在fieldset裏面，當fieldset被添加了disabled屬性，成爲<fieldset disabled>的話就可使當前fieldset內全部form-group的可交互部件(包括input，select，textarea，button等等)都沒法交互使用。

　　狀態校驗

　　在.form-group的div中再加上.has-success,.has-warning,.has-error這樣的類的話可使整個form-group的着色都有所改變，能夠用於表單提價時進行狀態校驗後的反應。另外，相似在type是text的這種輸入框中，若是驗證狀態完成後給輸入框右側加上一個圖標會顯得很友好。加入圖標就須要在這個輸入框所在的.form-group的div上加上一個has-feedback屬性，而後在這個div中新加上一個.form-control-feedback的圖標元素，經常使用BS插件的圖標的話就能夠是<span class="glyphicon glyphicon-ok form-control-feedback"></span>。這個圖標元素一般能夠跟在input後面，若是input出於一個.input-group的div中的話那麼這個圖標能夠跟在這整個.input-group的div後面。好比：

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

　　效果:(代碼中提到的aria-describedby和aria-hidden是用於把網頁設置得對殘障人士更加友好）

　　控件尺寸

　　對於表單中的控件，咱們能夠經過設置其網格的col-xx-nn屬性來控制控件的寬度。若是要調整高度，可使用.input-lg , .input-md , .input-sm這三種類來實現。一般可以控制高度的控件是像<select>，<input>這種。

■　　BS按鈕

　　BS提供的按鈕類不只僅能用於<button>標籤，也能夠用於<a>和<input>。可是從最佳實踐的角度說最好仍是設置成<button>比較好。常見的一些按鈕的類：

　　.btn　　按鈕基本樣式，和以前的表格等同樣，不加這個的話按鈕任然表現爲原生HTML的按鈕樣式。

　　.btn-default　　默認按鈕樣式。僅僅有.btn時按鈕是一塊灰色的區域，很差看，要進一步加上各類樣式，其中default就是默認的一種白底黑字的按鈕樣式。

　　.btn-success/info/warning/danger　　配色不一樣的按鈕

　　.btn-link　　可讓一個按鈕表現的像一個超連接同樣，但其本質仍然是一個按鈕。

　　.btn-lg/sm/xs/block　　用來改變按鈕的默認大小。lg是大按鈕，sm小按鈕，xs極小按鈕，block是讓按鈕跨越父元素的總寬度，造成一個塊級按鈕。

　　.active　　爲button標籤添加一個active類，使得按鈕變成被激活時的樣式:<button class="btn btn-default active">Button</button>

　　.disabled　　disabled屬性直接寫在button的標籤裏（或者添加一個disabled="disabled"的屬性，兩種寫法是等價的），來禁用一個按鈕。被禁用的按鈕顏色變淺且鼠標圖標會變化：<button class="btn btn-default" disabled>Butotn</button>

■　　BS圖片

　　爲img標籤添加一些類可讓圖片在BS的支持下更加好看。經常使用的類有：

　　.img-rounded　　使圖片的邊框變爲圓角邊框。

　　.img-circle　　使圖片變爲圓形

　　.img-thumbnail　　給圖片增長一個帶有一些內邊距的灰色邊框，看上去就像是一個相框同樣。

　　.img-responsive　　讓圖片具備響應式的特徵，即當窗口大小變化時，圖片會根據窗口大小調整自身大小以適應窗口。最大不會超過圖片自己大小。

　　順便一提，img標籤有個alt屬性，其做用是當鼠標移到圖片上時將會顯示一個內容是alt屬性值的tips，此外當該圖片加載失敗的時候，網頁上就會顯示alt的值加上一個紅叉叉。

■　　BS中其餘一些輔助類

　　BS中還有不少不少類，by which能夠設計出很優雅的網頁。

　　文本處理類

　　　　.text-muted/primary/info/danger/warning/success　　給文本着色，muted是淡灰色，primary是BS藍。。

　　背景處理類