bootstrap底部導航欄「bootstrap遮罩層」

互聯網時代的到來，網路界面不斷地優化，不斷地追求美感。包括各種各樣的網頁設計方法，包括幽靈按鈕、更強調字體、視頻背景、卡片式設計、扁平化以及響應式設計，為了更加便於開發前端頁面，前端框架應運而生，其中Bootstrap是最有名的一個。

一開始學習這個框架的時候，說實話（誰還不是一個菜鳥）。開始接觸這個布局框架的時候就是感覺到無力。學過框架的人都說簡單，覺得肯定是騙人的。你看首先要用這個框架必須搭建環境，這就難倒很多人。比如說HTML用搭建環境嗎?顯而易見，肯定不用搭配環境。當我們知道真相的時候我們的悲傷肯定小於喜悅的，因為它有環境搭配的方式，只不過比HTML要麻煩一點。想學會框架必須了解它的工作原理。雖然說這個框架和之前接觸到的HTML、CSS有所不同，但是原理都是一樣的。理解這個框架我們可以從不同角度來理解，比如說一個容器，你可以理解成一個房子，一棟樓，一個空間等，比如說網格可以理解成組成部分。其實不管我們用什麼方式理解，都要選擇適合自己記憶的理解方式。不知道大家在學習這個框架之前，有沒有和我一樣的困惑？

首先它簡潔，方便，兼容性強。大家使用這個框架不用在學別的前端知識，因為它囊括了 HTML、CSS、JavaScript這幾種前端知識方便大家快速上手。曾經由於屏幕大小的問題需要我們一遍又一遍的更改網頁樣式，但是由於Bootstrap的出現不再擔心這個問題了。原因是什麼：它是響應式框架適用於各種屏幕大小。除了這些它最讓我欣賞的就是它的網頁布局：它給人們帶來一種簡約的美，更能體現出化繁為簡這個道理。不管是京東還是蘇寧，進網頁一看不會讓你感覺視覺疲勞，把物品表達的清清楚楚。

下面是一些個人對Bootstrap的理解請大家糾錯一起共勉。首先我們學習Bootstrap我們明確以幾點：

什麼是Bootstrap?
怎麼搭配環境呢？
它是怎組成一個布局的？
它是用來幹什麼的？
它的弊端在那裡的？

1. 什麼是Bootstrap?

首先我們來普及一下概念：

Bootstrap是一個前端框架、是目前最受歡迎、最流行的web前端框架、是Twitter公司的Mark Otto和Jacob Thornton一起開發的，Bootstrap框架是基於HTML、CSS、JavaScript 開發的，它因簡潔、直觀、功能強大被開發者廣發使用。Bootstrap前端框架使得 Web 開發更加快捷，提供了優雅的HTML、CSS和JavaScript規範，它是由動態CSS語言Less寫成。Bootstrap前端框架剛推出就頗受歡迎，一直是GitHub上的熱門開源項目，是一些前端開發者較為熟悉的框架。

其實就是對HTML、CSS和JS的一種包裝！

只要我們掌握了HTML和CSS基礎的知識我們就可以一起學習Bootstrap了。

2. 怎麼搭配Bootstrap的環境呢？

首先我們在網站下載一個Bootstrap壓縮包，之後解壓（除了系統盤別的盤都可以）

Bootstrap提供了三種不同的方式幫助你快速開發，每種方式可根據開發者的能力和使用場景而定，具體如下。

用戶生產環境的Bootstrap：下載包為編譯並且壓縮後的CSS、JavaScript和字體文件，不包含文檔和源碼文件。

Bootstrap源碼：包含Less、JavaScript和字體文件的源碼等。

Sass：這是Bootstrap從Less到Sass的源碼移植項目，用於快速地在Rails、Compass或只針對Sass的項目中引入。

參考地址如下。

Bootstrap官網： http://www.bootstrap.com/。

Boostrap中文網：http://www.bootcss.com/

簡單模板

<!DOCTYPE html>

<head>

<title>Bootstrap基本模板</title>

<!–[if lt IE 9]>

<![endif]–>

</head>

<body>

<h1>您好,Bootstrap 從此刻開始</h1>

</body>

</html>

3. 它是怎麼組成一個布局？

首先Bootstrap是一個響應式布局框架，我們都知道一個框架裡面必有一個容納其他內容的東西，這個東西叫容器。在Bootstrap中我們用的是container class（在Bootstrap中我們通常在class這個類中寫樣式），在這個容器中,它是有固定寬度（但是所謂固定寬度並不允許我們設置容器的寬度，而是bootstrap內部通過bootstrap.css根據屏幕寬度利用媒體查詢，幫我們設置了固定寬度，為什麼設置寬度的時候都要以百分比來設置因為能充分的能夠體現自適應的。這是容器的使用圖片我們看一下：

我們知道一個完美布局不單單是主要有一個簡單的容器，如果我們這樣想純屬於貶低它。在此不得不提到一個名字：柵格系統也可以叫做網格系統，我們可以看看網格系統整個布局圖片：

我們可以根據這張布局圖片這屬於container的內部布局，網格系統包括 row(行)，column（列），在圖片1中我們可以看到行和列。

首先row行我們包括十二個column列相當於十二個網格（每個網格對應一個列）,如圖二所示每個column列也有十二個網格，每個網格能放十二個column列。一般的網頁布局都是按著 2-8-2（column列）來給網頁布局的！我們也可以用不同的布局來表達自己的邏輯！

下面這張圖是在768像素到992像素之間的通用的布局方法col-md-1，這個（1）代表的是一個網格相當一個列（column）。

以下就是Bootstrap的幾點各種屏幕自適應響應式的樣式大家了解一下對今後的網頁布局很有幫助！

4. 它是用來幹什麼的？

隨著各種計算機的問世，屏幕大小，網頁界面不適合屏幕的，這讓我們這些前端工程師很是頭痛。

Bootstrap的問世解決了很多的問題，首先我們的頁面不用更換，它可以適用各種屏幕的大小（我們可以不用擔心不同的屏幕換不同的網頁的問題）。通過框架布局我們可以迅速的做出一個既美觀邏輯又清晰的網頁來。我們來看一下完整的Bootstrap頁面！

下面的網頁是正常大小。

下面的網頁是屏幕縮小的大小

Bootstrap能調用CSS、JavaScript對沒有美工處理的網站修飾充分的展現出他們的美感與簡約的動感。

Bootstrap大多數被用來做一些內容不是太複雜的門戶網站，比如淘寶、京東、管理系統等頁面在PC端和移動端根據屏幕的大小，來自適應的網頁布局（一般來說PC端的網站比移動端的網站內容比較多，這跟屏幕大小的自適應有關）。使網民更加的對網站有印象，讓網民對網頁一目了然，就知道這個網頁具體想表達哪些內容。這樣的網頁一般應用於簡約的門戶網站。

5. Bootstrap的局限性

總體來說bootstrap不太適合做那些頁面布局很複雜，內容較多，特別炫酷的網站，因為bootstrap已經寫好CSS的樣式了所以引用bootstrap要改css樣式，組件，插件太多了，還容易造成代碼混亂，還不如直接不用更快，特別是對於新手前端工程師是來說更不推薦使用，但是它很適合做那些企業內部的網站，一般此類網站不會對頁面的布局沒有過多的要求，只要體現主要功能即可，bootstrap就完全是切合此類網站的特性。

作者贈言：

想要學習Bootstrap的機靈鬼們，還在猶豫什麼？如此實用簡單的框架難道還不值得我們青睞嗎？

如果有什麼不對的地方歡迎大家指出，畢竟本人才疏學淺，歡迎大家指出問題所在，相互學習共贏互利！

世上無難事只怕有心人，世上本沒路人走的多了就有了，期待我們更上一層樓！

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/202147.html