本篇內容摘抄自如下兩個來源:css
感謝大佬們的分享。html
此次想來說講一個前端開發框架:BootStrap前端
BootStrap 目前已經出了 4 個版本,每一個版本都有對應的官網教程,先來看看不一樣版本里的宣傳語:node
簡潔、直觀、強悍的前端開發框架,讓web開發更迅速、簡單。--- BootStrap 2.x.x 版本jquery
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用於開發響應式佈局、移動設備優先的 WEB 項目。 --- BootStrap 3.x.x 版本git
Bootstrap 是全球最受歡迎的前端組件庫,用於開發響應式佈局、移動設備優先的 WEB 項目。github
Bootstrap 是一套用於 HTML、CSS 和 JS 開發的開源工具集。利用咱們提供的 Sass 變量和大量 mixin、響應式柵格系統、可擴展的預製組件、基於 jQuery 的強大的插件系統,可以快速爲你的想法開發出原型或者構建整個 app 。 --- BootStrap 4.x.x 版本web
那麼,什麼是響應式佈局呢?npm
通俗的理解,就是在不一樣的屏幕規格上可以有不一樣的佈局效果,好比在大尺寸屏幕上呈現多列的佈局,在小尺寸屏幕上呈現不了這麼多,可能就只剩下一列布局了。json
那麼,當屏幕尺寸發生變化時,在不一樣屏幕規格上,應該呈現怎樣的佈局,通常是經過媒體查詢 @Media 來實現,但本身在 CSS 中書寫的話,須要處理較多工做。
因此,也能夠選擇一些熱門的框架,由它來幫忙處理這些響應式佈局的工做,就像 BootStrap,但 BootStrap 功能不只只有響應式功能,它還內置了不少預製組件等等,總之,很強大,雖然我還沒用過。
那就來學學如何使用,首先第一步確定是安裝,我直接選擇最新版 4.x.x 系列的來做爲入手了,舊版本沒去了解,有機會再說。
將 BootStrap 引入項目中使用有兩種方式:
第一種方式最簡單,直接在 HTML 文檔中聲明 css 和 js 文件來源便可,如:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
使用 BootStrap,上面的 HTML 文檔模板是必須的,帶有註釋的都是在全部使用了 BootStrap 的頁面中須要引入的,須要注意的是,因爲 BootStrap 一些組件依賴於 jQuery 和 Popper,因此須要引入這兩份 js,並且順序是 jQuery 先,Popper 後,最後再引入 BootStrap 提供的 bootstrap.min.js。
這是第一種方式,也是最省力的。
這種方式就比較折騰了,好處就在於資源文件均可以放在本身服務器上,無需依賴他人。下載資源到本地也有兩種方式,一是手動到官網下載,下面三個地址:
二是利用一些工具來下載,如 node.js 的 npm 命令來下載,打開終端,進入項目的根目錄:
npm init -y
npm install bootstrap
npm install jquery
npm install popper.js --save
若是執行命令過程當中報錯了,自行去搜索解決吧,我是一次性成功,沒出啥問題,都下載結束後,項目裏的結構以下,node_modules 文件夾裏會有下載好的資源:
package.json 配置項以下:
這是我下載使用的版本。
好,不論是手動去下載,仍是接着 npm 下載,最後都須要將下載的資源放進項目中,那麼,下載下來的這麼多東西,該怎麼用,哪些是有用的?
可借鑑上面第一種方式裏的 HTML 文檔,總共須要的其實就四份文件:
分別找下四份文件在哪,個人是在這幾個路徑下:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="node_modules/jquery/dist/jquery.slim.min.js"></script> <script src="node_modules/popper.js/dist/popper.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> </body> </html>
官方教程說了,上面這是使用 BootStrap 的 HTML 模板,固然也有進行了解釋,下面稍微說說:
<!DOCTYPE html>
這是 h5 的 HTML 文檔的聲明,不加這句的話,可能會出現一些奇怪的樣式;
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
這行代碼表示的意思是,讓網頁能夠自動適應當前移動設備的屏幕。
因此,使用 BootStrap 除了須要在 HTML 文檔中引入所需的資源文件外,別忘了加上上面兩個處理。
BootStrap 4.x.x 版本,官方尚未中文教程,3.x.x 的中文教程卻是很齊全了。但 4.x.x 版本和 3.x.x 版本差異仍是蠻大的,首先,4.x.x 選用 Sass 來做爲預處理器,選擇 flex 來實現它的柵格佈局系統等等。
反正,BootStrap 本質就就是一個框架,封裝了一系列的屬性樣式、組件給開發者使用,開發者只要瞭解有哪些屬性樣式能夠用、有哪些組件能夠用、效果怎麼樣、怎麼用就能夠了,至於這些,就只能是一步步在實際開發中,一邊寫一邊查文檔來慢慢積累了。
因此,本篇也就不會去列舉各個組件效果、屬性樣式效果、還一個個去說明怎麼用。
接下去的內容,就是想着,可以讀懂官方某個示例項目的代碼就足夠了。
選擇了官方的這個示例:Album
一步步來讀懂它的 HTML 代碼吧:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> <title>Hello, world!</title> </head> <body> <!--header 部分--> <header> <div class="collapse bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <h4 class="text-white">About</h4> <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p> </div> <div class="col-sm-4 offset-md-1 py-4"> <h4 class="text-white">Contact</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white">Follow on Twitter</a></li> <li><a href="#" class="text-white">Like on Facebook</a></li> <li><a href="#" class="text-white">Email me</a></li> </ul> </div> </div> </div> </div> <div class="navbar navbar-dark bg-dark box-shadow"> <div class="container d-flex justify-content-between"> <a href="#" class="navbar-brand d-flex align-items-center"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg> <strong>Album</strong> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div> </header> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="node_modules/jquery/dist/jquery.slim.min.js"></script> <script src="node_modules/popper.js/dist/popper.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> </body> </html>
看看效果:
目前的代碼裏,咱們徹底沒有寫過 CSS,只在 HTML 文檔中,添加了 <header> 標籤內容,就可以達到這樣的頁面效果了,因此,其實,BootStrap 已經封裝好了一大堆屬性樣式,咱們只要在標籤上經過 class 將這些屬性樣式應用起來就能夠了。
示例中使用的 class 不少,基本都是 BootStrap 封裝好的,我也沒想把全部用到的都搞清楚具體做用,只是想了解個大概,後續在使用中慢慢積累學習吧。
對於這個 <header> 的效果,我主要想理清楚兩點:
回過頭看上面的動圖,<header> 部分是做爲導航欄,而且存在兩種狀態,摺疊和展開,因此兩種狀態對應着兩個 <div>,<header> 兒子標籤裏恰好兩個 <div>;
看第一個 <div> 的 class:collapse bg-dark
,collapse 是摺疊的意思,因此第一個 <div> 就是一開始被摺疊的容器,而控制這個 <div> 摺疊起來,也就是 BootStrap 提供的 collapse 起的做用了;
同層次的第二個 <div> 的 class:navbar navbar-dark bg-dark box-shadow
,兩個 <div> 都有同一個 bg-dark,那麼這個其實就是用來設置背景的,由於展開後,其實 <header> 區域是由兩個 <div> 拼接起來的,只是背景色恰好同樣,看不出來而已。
因此,頁面渲染後,其實有個 <div> 被 collapse 摺疊起來了,此時頁面上只呈現第二個 <div> 內容而已,這個 <div> 的高度等樣式由 navbar、navbar-dark、bg-dark 這些決定。
那麼,點擊完按鈕後,第一個 <div> 爲何會被展開了呢?
看一下那個按鈕:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<button> 的子標籤 <span> 裏的那個 navbar-toggler-icon 就是按鈕的 icon,而之因此點擊了後能夠展開第一個 <div> 就是由其餘屬性來控制。
首先,須要對當前這個按鈕添加 navbar-toggler 的 class,而後須要經過 data-target 指明控制展開的區域,這也是爲何第一個 <div> 中會有一個 id 屬性,就是用來給這個按鈕控制它的。
因此,梳理一下,經過給 <div> 添加 collapse 的 class 可讓這個區域摺疊隱藏起來,而後給它設置一個 id;而後給控制這個摺疊區域的按鈕添加 data-toggle 和 data-target 屬性,經過 id 來控制指定區域的摺疊和展開。
至於其餘 class 則是各類樣式效果。
那麼,展開以後的區域裏的列表控件上,出現了一些例如:row,col-sm-8 之類的 class,這些又是什麼意思呢?
首先,container 來設定區域的大小,row 用來設置這個容器做爲 flex 佈局,而彈性佈局中,一行會被劃分紅 12 列,看張圖:
因此 col-sm-8 表示當顯示區域 >= 576px 時,該控件佔據 8 列,因此,同一個控件裏會出現諸如:col-sm-8 col-md-7
其實就是響應式佈局處理,在不一樣顯示區域大小時,呈現不一樣的大小。
而 py-4 是 pading-top 的意思,-4 表示不一樣的大小。
offset 表示在一個 12 列的一行裏,前面須要空出幾列。
總之,官方教程裏有對柵格系統 Grid 作了詳細的介紹,雖然是英文的,慢慢啃吧。
只有理清楚了這篇文章中介紹的 Grid,纔可以理解,怎麼寫能夠達到響應式的效果。
咱們再來看導航欄的一個效果,我再來分析下:
當顯示區域逐漸變小時,佈局從一行變成了兩行,這就是響應式佈局,來解釋下爲何會有這個行爲:
看看這兩個區域的代碼:
<div class="col-sm-8 col-md-7 py-4"> ... </div> <div class="col-sm-4 offset-md-1 py-4"> ... </div>
上面說過,BootStrap 裏的 Grid 將每一行劃分紅 12 列,因此當顯示區域大小在 md 範圍,即 >= 768px 狀況下,第一個 <div> 的 col-md-7 生效,它佔據 7 列的寬度,第二個 <div> 的 offset-md-1 和 col-sm-4 都生效,因此它前面空着 1 列的寬度,而後它佔據着 4 列的寬度,這加起來是否是恰好 12 列,因此在 >= 768 時,一行能夠放下這兩個 <div>。
但當顯示區域逐漸縮小,當進入 sm 範圍,即 >= 576px 時,此時,第一個 <div> 的 col-sm-8 生效,因此它佔據 8 列,而第二個 <div> 仍舊是 offset-md-1 和 col-sm-4 生效,那麼此時加起來一共 13 列,超過了 12 列,一行裏已經不足夠放這兩個 <div> 了,根據 flex 的彈性佈局,此時超過的會自動換行。
以上,就是我對 Grid 的理解,也許有誤,若是是錯的,等後續用熟悉了再回來改,大夥看的時候,就當個借鑑看一看就行了。
分析到這裏,大概清楚了 Grid 還有導航欄的一些用法了,也大致清楚 BootStrap 的響應式原理好像是基於它的柵格系統,經過爲不一樣控件設置諸如 col-(sm/md/ls/xl)-(1/2/3/4/5/6/7/8/9/10/11/12) 來達到在不一樣顯示區域下,不同的佈局效果,實現響應式佈局。
因此,剩餘的代碼不想看了,頭有點懵了,我對 BootStrap 惟一的感受就是,學習成本好高,它提供太多東西了,封裝了太多的樣式、控件,反而不知道從哪看。
也許,原本就不須要特地去看,學習 BootStrap 應該是當須要時,再來查閱文檔,而後逐步,慢慢積累對 BootStrap 的熟悉程度,而不是一開始就來看細看文檔,文檔固然要看,但快速過一遍,大概清楚提供了哪些東西就行了。
你們好,我是 dasu,歡迎關注個人公衆號(dasuAndroidTv),公衆號中有個人聯繫方式,歡迎有事沒事來嘮嗑一下,若是你以爲本篇內容有幫助到你,能夠轉載但記得要關注,要標明原文哦,謝謝支持~