瞭解一下Bootstrap

東方來客發表於2018-08-28
原文網址 : https://juejin.im/post/5b84b5e96fb9a019f221d6f7
boot

首先將Bootstrap下載下來，解壓後發現裡面有三個檔案，

瞭解一下Bootstrap
讓我們開啟他看一下。

瞭解一下Bootstrap
其中有一個bootstrap.css和bootstrap.min.css，這是他的原始碼，而後者將其中縮排所用的空格/回車等全部省略掉，因此記憶體佔用變小了。再來看看js目錄下的檔案，
瞭解一下Bootstrap
同樣的前兩檔案是原始碼，第二個同樣比第一個檔案佔記憶體要小很多，主要是將長變數名改為短變數名和將縮排用的空格/回車等刪除。因此在生產環境中建議使用min版本來提高載入速度。

瞭解一下Bootstrap
原始碼中上來就檢查jQuery，因為bootstrap對jQuery是強依賴的，所以要下載jQuery並在引入bs之前引入。
Bootstrap 是移動裝置優先的，為了確保適當的繪製和觸屏縮放，需要在 head 之中新增 viewport 後設資料標籤。寫法如下

<meta name="viewport" content="width=device-width, initial-scale=1">
複製程式碼

或者是

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
複製程式碼

下面這種不允許使用者進行縮放，更具自己的需要進行選擇。

佈局容器

bootstrap有佈局容器的概念，用於盛放內容。bootstrap提供了為此提供了兩個類，但是不能不能互相巢狀。用法如下：

<div class="container">
  ...
</div>
複製程式碼

一般用於PC頁面

<div class="container-fluid">
  ...
</div>
複製程式碼

一般用於移動端。

柵格系統

不多說，先把官方文件的程式碼複製進我們的網頁，看看什麼效果。 程式碼如下：

<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>
複製程式碼

為了方便觀察，給他加個border看看。

瞭解一下Bootstrap
很明顯div的class="row"為我們規定了一行，一行的寬度被等分為12份，通過設定類 col-md-num來確定它的寬度（num為1-12的數字）。如果你寫的”寬度“和小於12，想讓中間空出來那麼可以用.col-md-offset-num來設定列偏移(num為0-12的數字，至於超出會怎麼樣，自己試試吧~)。
在拖動頁面的時候發現頁面是響應式的，那麼是如何做到的呢？
瞭解一下Bootstrap
答案當然是媒體查詢啦~經過閱讀文件，發現這三個媒體查詢對應額一次是 md/sm/xs。那麼如何使用呢？

<div class="col-lg-4 col-md-6 col-sm-3 col-xs-1">哈哈哈</div>
複製程式碼

如程式碼所示，在不同的三個條件下會設定對應的佈局哦~螢幕寬度在1200px及以上用lg，螢幕寬度大於等於992px時用md，大於等於768px時用sm，再小就用xs啦。
至於其他元件可以到文件中進行檢視和嘗試。

再來看看元件

<button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-text-color" aria-hidden="true"></span>
</button> 
複製程式碼

瞭解一下Bootstrap
生成了這麼一個東西，要想改按鍵中的樣式，可以從這裡找想要的樣子，覆蓋掉span的原有類名即可。其他元件使用大同小異，使用時複製文件中的程式碼嘗試後更改即可。

相關文章