從零學前端第三講：讓小白都能懂的bootstrap原理與實踐解析

 

直播錄屏版

傳送門：https://v.qq.com/x/page/u0704edom3i.html

 

bootstrap原理與實踐
 

一、入門介紹
1.一、框架簡介

1.二、安裝方法

 

二、總體結構思想
1.一、架構思想

1.二、柵格系統

1.三、CSS組件

 

三、基礎佈局
 

四、總結
4.一、結論

4.二、思考

 

 

 

1 入門介紹
 

1.1 框架簡介
 

CSS框架，不管是哪種，都是一種工具，它誕生的目的就是爲了解決某種問題。

 

而在頁面編寫的過程當中最容易遇到的問題之一就是，反覆解決頁面樣式上的兼容性問題，以及大量重複已有代碼。

 

所以有了CSS的框架將代碼進行封裝，提升了工做效率，讓開發人員更快更好完成工做，下降工做難度，無需擔憂不少細枝末節的小問題。

 

而Bootstrap就是其中的佼佼者，它算是CSS框架里名氣最大的之一，雖然如今可能會有人認爲太老氣，但不能否認的是它依舊是流行面最廣的前端框架。

 

它是由Twitter的兩位前員工在10多年前建立的，代碼久經考驗，還有良好的代碼規範，簡潔又易於修改，容易維護。

 

學習它能從中學到不少知識，那麼接下來就來看看是如何安裝的。

 

 

1.2 安裝方法
 

首先要說明的是CSS框架的安裝都很是簡單，只須要將文件經過link的方式連接到本身的html頁面當中就能夠了

 

所以官網上的安裝方法都是在介紹如何獲取css的代碼。

 

主要有三種方式

 

其一是直接下載代碼包，有編譯後的代碼，有源碼，還有sass源碼三種選項可供選擇↓

 

 

其二是使用CDN加速服務，直接在頁面中引用CDN文件地址便可。

 

其三是使用各類包管理工具在本地下載安裝，如bower、npm、composer等工具。

 

 

 

 

2 總體結構思想
 

2.1 架構思想
 

學框架若是隻是學習怎麼使用，那將很是簡單，直接把官網文檔打開，複製粘貼稍稍改改就能完成任務。

 

但若是對本身要求高一點就會發現這樣作並非一個開發者應有的學習態度。

 

咱們須要站在一個更高的地方去理解框架的設計者爲何要這麼去設計，這樣設計的優勢缺點有哪些。

 

若是是本身來作這樣一件事應該怎麼去作。經過這樣的方式來學習纔會有一個質的提高。

 

Bootstrap從3起，比起以前的版本有一個很是顯著的特色：

 

由於智能手機等設備的爆發式增加，因此框架從這一個版本起，設計理念上是移動先行的。

 

所以Bootstrap3是基於響應式設計的一套框架，又以柵格系統爲及時，輔以基礎的佈局組件，加上多個封裝無缺的css組件和js插件，造成快速開發的一整套框架。

 

從下圖能夠看到，這就像是一個金字塔，每一層都基於下面的基礎上。

 

 

首先是響應式設計，它是一個很是重要的基礎理念而非功能。

 

讓頁面有能力響應用戶的設備，讓一個網站可以兼容多個終端，這樣就沒必要爲了避免同設備專門去作設計和開發了。

 

在響應式設計的基礎之上，實現了咱們的柵格系統，是Bootstrap框架的核心功能。

 

柵格系統脫胎於平面排版設計，在網頁設計中使用讓網頁更美觀易讀，對於開發者來說也更加靈活規範。

 

說到底，柵格系統其實就是把網頁的總寬度均分爲12份，能夠自由按份來組合，以便以更簡單的方式組合出不一樣的網頁界面。

 

在柵格的基礎上，有不少基礎佈局的組件，好比排版、表格、按鈕、表單等等，這些基礎的組件能夠運用於昂也的任何地方，用於構建豐富多彩兼容性極佳的網頁。

 

再在這些基礎佈局的基礎上，添加了各式各樣的css以及js組件，細化到網頁的方方面面，造成了一套完整而又靈活的css框架。

 

 

2.2 柵格系統
 

在Bootstrap中，柵格系統將容器均分爲12份，再調整內外邊距，結合媒體查詢，造就了這一強大的柵格系統。

 

其主要規則是：

一、一個.row應該包含在一個.container當中，才能由於內外邊距的正負抵消而有合適的對齊。

 

二、在.row當中建立一組.column造成水平方向上的容器。

 

三、具體內容應該放在.column中，並且只有.column能夠做爲.row的直接子元素。

 

從接下來的例子上能夠學到柵格相關的基礎知識：

<h4>直接使用row和12column</h4>

<div>

<div class="col-md-1">1</div>

...

<div class="col-md-1"></div>

</div>

<h4>加上row和12column</h4>

<div class="row">

<div class="col-md-1">2</div>

...

<div class="col-md-1"></div>

</div>

<h4>自由組合</h4>

<div class="row">

<div class="col-md-3">3</div>

<div class="col-md-9">9</div>

</div>

<h4>列的偏移</h4>

<div class="row">

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

</div>

<h4>列的嵌套</h4>

<div class="row">

<div class="col-md-8">

.col-md-8

<div class="row">

<div class="col-md-6">.col-md-6</div>

<div class="col-md-6">.col-md-6</div>

</div>

</div>

<div class="col-md-4"></div>

</div>

 

 

 

首先來看效果圖中第一行和第二行，區別在因而否有.row，當有.row時才能在水平方向上佔滿整個.container。

 

加上.column自身的內邊距值，使得裏面的文字正好能與.row外面的文字對齊。

 

這裏的實現代碼其實很是簡單，由於container左右有設置一個15像素寬的內邊距，而row則用負的外邊距來與之抵消，因此row在container中才能佔滿一行：

 

.container {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

.row {

margin-right: -15px;

margin-left: -15px;

}

 

後面的幾行例子則分別展現出了柵格系統的一些最基本特性：

 

能夠自由組合，能夠偏移列，以及列裏面還能再嵌套列。經過這些方法，就已經能佈局出各類各樣的頁面了。

 

2.3 CSS組件
在Bootstrap3當中，全部的組件都有一個基本的構建思想，就是利用css的特性：

 

不一樣名稱的樣式能夠疊加在一塊兒使用，而同名的樣式後面的會覆蓋前面的。

 

經過這兩個特性，能夠達到組合應用的效果。

這就意味着css組件是分層設計的，從最基本的樣式層寫起，後面的層次逐漸疊加上去，造成靈活的組件庫。

 

 

 

 

以button舉例，首先是有一個.btn的基本樣式，它定義了一個按鈕最基本的邊距、邊框、背景等樣式：

 

.btn {

display: inline-block;

padding: 6px 12px;

margin-bottom: 0;

font-size: 14px;

font-weight: normal;

line-height: 1.42857143;

text-align: center;

white-space: nowrap;

vertical-align: middle;

cursor: pointer;

background-image: none;

border: 1px solid transparent;

border-radius: 4px;

}

 

在這個基礎之上，又爲按鈕賦予了一些預設的主題樣式，好比.btn-default.btn-primary等，疊加設置了按鈕的顏色，背景色

 

經過這樣的組合就能擁有不一樣顏色的按鈕：

 

.btn-primary {

color: #fff;

background-color: #337ab7;

border-color: #2e6da4;

}

 

接着設計了大、小、超小几個尺寸，.btn-lg.btn-sm.btn-xs，配合默認大小，總共能夠有4種按鈕大小。

 

一樣的，尺寸樣式也能夠與前面的樣式靈活組合：

 

.btn-lg {

padding: 10px 16px;

font-size: 18px;

line-height: 1.3333333;

border-radius: 6px;

}

 

以後是狀態樣式，如.active disabled等類。

 

不一樣的是，這些狀態樣式可能須要配合顏色樣式進行覆蓋疊加，由於不一樣顏色的按鈕在激活或禁用狀態下的顏色也是各有不一樣的：

 

.btn-primary:active {

color: #fff;

background-color: #286090;

border-color: #204d74;

}

 

而特殊樣式則每每是由於和其餘元素組合在一塊兒所以有比較特別的設置。

 

動畫樣式每每是可選的，在最後優化顯示效果時能夠加上。

 

由此能夠看出css組件的整個設計脈絡很是清晰，同時便於組合以應對不一樣的網頁不一樣的方案，以最少的代碼完成更多的開發。

 

 

 
3 基礎佈局
 

建議直接官網查看文檔，已經很是詳細。

 

排版樣式能夠在type.less文件上查看源碼；

代碼樣式在code.less文件上；

表格樣式在table.less文件上；

表單樣式在form.less文件上；

按鈕樣式在button.less文件上；

圖像樣式在scafolding.less文件上。

 

 

 

 

4 總結
 

css框架爲咱們的開發帶來了許多的遍歷，好比若是一個項目只有原型沒有設計稿的時候，就能夠選擇一個符合原型的css框架，以減小開發工做量。

 

當有設計的時候也能夠與設計人員溝通交流，以更好地融入所選用的css框架。

 

而且在學習一個css框架的時候應該不要止步於複製粘貼，而是去學習這個框架的設計思想、代碼規範、文件結構等等。

 

另外再留給你們一個思考問題：

 

css框架的組件是越多越好的嗎？

 

 

下節預告
 

想必你們常常聽起「H5」

那麼，什麼是H5呢？它又能作些什麼呢？

 

 

職業選擇、求職輔導、學習規劃、困難答疑、技術交流等等，均可以加入IT交流羣828691304

技能樹.IT修真院http://www.jnshu.com

「咱們相信人人均可以成爲一個工程師，如今開始，找個師兄，帶你入門，學習的路上再也不迷茫。這裏是技能樹.IT修真院，初學者轉行到互聯網行業的彙集地。"