零基礎HTML玩家的Bootstrap入門第一課（保證學會！）

零、前言

又看着熟悉的Bootstrap3的網站，想起去年本身剛來時舉步維艱的學習過程，想着以前踩過的那些坑，感慨萬千。最近團隊融入了新鮮血液，本着薪火相傳的原則，爲了避免讓後面的人踩一樣的坑，纔有了這個入門的文章。

回想起本身學習時，最大的問題，就是不會看文檔，簡稱抓瞎。看着琳琅滿目的一堆字，殊不知道哪些內容重要，最後白白浪費了許多時間。

因此這篇文章，除了介紹Bootstrap，最重要的是：

• 讓初學者瞭解學習一門新技術的具體過程。

1、HTML、CSS、JS的關係

HTML是骨架
CSS是衣服
JS讓網頁動起來

這三句話。在坐的各位已經聽了N遍了，可是對於歷來沒見過CSS和JS的小夥伴來講，無異於對牛彈琴，老師強調多少遍，學生也記不住，即便記住了也是死記硬背的。

因此，直接上圖：

純HTML

十分簡陋，只有內容，沒有一丁點樣式：

加入CSS

穿上衣服以後，最直觀的感覺，就是頁面變漂亮了：

加入JavaScript

JS讓網頁動起來，包括滾動、輪播圖、彈窗等等，都是JS的功能。

因此，看到這裏，你們應該對三者的分工有了明確的認識。

三者是一個總體。
全部的網頁內容，都依賴HTML完成基本的佈局。
CSS豐富了頁面的樣式，增長網頁的美觀性。
而JS負責與用戶交互，接收用戶的點擊，而且作出相應的反應。

2、框架？

想象一下，你接到一個挖土的任務。
你能夠選擇用鏟子來挖土，可是須要挖一個月；
但你也能夠選擇用挖掘機啊！用挖掘機只須要一個小時。

因此，手寫代碼，就像用鏟子挖土，雖然一步一個腳印的走下來了，可是效率低；
而使用框架，就像是一臺挖掘機，它能夠在實際生產中，快速的幫你構建項目。

最終，鏟子和挖掘機都能完成任務，異曲同工，最大的區別，就是效率不一樣。

所以，實際的生產項目中，有一個很重要的思想：

• 不重複造輪子

別人已經寫好的、而且寫的很完美的代碼，咱們固然沒有必要再寫一次，直接拿來用就行了。
因此，纔有了各類各樣高效、方便的框架，使用者只須要把框架拿過來，而且修改爲本身須要的樣子，就能夠了。（這就是面向複製粘貼編程）

Bootstrap

我不去講Bootstrap是什麼，由於講了也白搭——根本記不住，也沒有必要去記它。

用通俗的話說就是，有一個大神，他爲你寫出了許許多多的CSS樣式和JS效果，而且放在一個文件中。而咱們使用的時候，只須要引入這個文件，就能夠得到大神寫好的全部樣式，不再須要本身寫了。

有了Bootstrap，咱們甚至能夠不會CSS和JS，只須要熟悉HTML，只須要會複製粘貼，就能夠創造出漂亮的頁面了。

3、起步

終於來到了本文的核心內容：

• 學習一門新技術的流程是什麼？

若是是學習理論知識，最早了解的應該是「它是什麼」「它的定義」。

但顯然，計算機不屬於理論知識，它是一門實踐性很是很是強的學科，咱們沒有必要在理論層面浪費太多的精力，而應該關注「它能實現什麼」「如何使用它」！

所以，即便不知道它的定義、甚至不知道它的名字，你只要會用，會拿它作出優秀的做品，那你就是好程序員。

打開Bootstrap3的文檔，看着這一大堆文字和代碼，你腦海中必定會冒出來一個問題：這TM講的是啥？

若是沒有任何讀文檔的經驗，第一次看見這麼多字，必定會懵逼，這很正常。
這就是初學者的坑——不知道如何邁出第一步，每每在這裏浪費了不少時間。

所以，若是是第一次閱讀官方文檔，咱們的關注點是什麼？

對，是「 它 能 實 現 什 麼 」！

「它能實現什麼」

假如事先告訴你，進入這個網頁以後，不要看任何代碼和文字，只看圖，只看各類各樣的按鈕、輸入框、標題、巨幕等等圖片，還會不會像剛纔那樣懵？

這些圖片，就是Bootstrap能夠實現的功能，因此，學習的第一步，就是反覆的看這些圖片，即便啥都不會，咱們至少知道了「我能夠實現它」，而且不斷的思考：我須要的功能，它都能實現嗎？——這就是需求分析。

「我如何去實現」

在學習任何編程語言以前，都須要裝環境，好比學C++須要安裝VC6.0，學Python須要安裝Python3.7和一款文本編輯器，學習HTML須要安裝XAMPP或者NodeJS，所以裝環境成了學習語言的第一步。

「你連環境都不會裝，還編什麼程序？」

因此在知道了某個框架能實現什麼功能以後，接下來，就要思考「我怎麼把它運行在個人電腦上」了。

裝環境

在打開起步頁面以後，你必定又懵了。

實際上，文檔針對不一樣的羣體，給出了不一樣的安裝方法（儘管對於新手來講看起來很困難）。

咱們必須學會在一大堆內容中壓縮信息。

所以須要記住一點：任何的文檔，只要涉及到比較難理解的內容，必然會給出模板，必然會給出模板，必然會給出模板。

所以咱們沒有必要看這些看不懂的東西：

只須要一直往下翻，直到找到「基本模板」這裏：

把所有的代碼粘貼到一個空文件中，保存，用瀏覽器打開，當你看到：

恭喜，成功的運行了Bootstrap！
這是最簡單的安裝方式！就是這麼簡單！簡單到只須要複製一下！

複製粘貼

既然已經成功安裝了環境，那麼咱們距離實現各類效果又近了一步，接下來就是如何去實現了。

再次打開組件頁面，隨意選擇一個功能，好比「按鈕」：

把它的因此代碼，都複製到剛纔顯示「你好，世界」的模板中，

保存，刷新瀏覽器，就能看到，剛纔的組件，活生生的出如今本身的網頁中。

其餘的組件也同樣，須要什麼就複製什麼！

改模板

已經得到了各類組件以後，只要改動裏面的文字，就能夠把他們變成本身想要的樣子了。

到此爲止，咱們已經能夠實現大多數功能了！

4、進階

學會改模板以後，咱們能夠快速的搭建一個像樣的網頁，但還不能對網頁精確的排版佈局，所以就須要容器和柵格。

容器

回到全局CSS樣式，找到佈局容器並閱讀。

從中咱們知道了：用一個div做爲容器，把全部的組件都要放在容器裏面。

// 這樣的容器，會在網頁的左右留出空間，網頁總體居中
<div class="container">
  ...
</div>

// 這樣的容器，左右兩側不會留出空間，網頁佔滿整個屏幕
<div class="container-fluid">
  ...
</div>

柵格

在柵格系統中，咱們能夠對頁面內容作出精確的定位，請詳細閱讀文檔內容。

若是看不懂，請繼續看：

在Bootstrap框架中，若是不想讓某個組件顯示在最左邊，就要使用柵格。

它把整個網頁平均分紅了12份，咱們能夠自由選擇如何切分網頁。

例如，複製下面的代碼，保存，刷新：

<div class="row">
  <div class="col-md-1">1</div>
  <div class="col-md-1">2</div>
  <div class="col-md-1">3</div>
  <div class="col-md-1">4</div>
  <div class="col-md-1">5</div>
  <div class="col-md-1">6</div>
  <div class="col-md-1">7</div>
  <div class="col-md-1">8</div>
  <div class="col-md-1">9</div>
  <div class="col-md-1">10</div>
  <div class="col-md-1">11</div>
  <div class="col-md-1">12</div>
</div>

就能看到：

這就是12等分的頁面。

若是想分紅6+6呢？

<div class="row">
  <div class="col-md-6">123456</div>
  <div class="col-md-6">789012</div>
</div>

因爲柵格系統使用div盒子標籤，它是能夠「盒子套盒子」的，經過div嵌套能夠實現很是複雜的頁面。

只須要保證各個盒子的col-md-？加起來是12，就能夠了！

5、總結

經過以上的學習，咱們讓一個只會一點HTML的小白，經過本身閱讀文檔，學習了Bootstrap的基本用法。

之因此能學會，是由於咱們作了一件事：簡化信息，把不少的、複雜的、看不懂的信息，簡化成咱們能夠接收的信息，而略過那些對咱們沒有用的信息！

學習方法永遠比知識自己重要

這篇文章十分簡單，但更關鍵的在於介紹「內功心法」，也就是如何學習一項新技能的流程。

歷來團隊到如今已經整整一年了，一年中，我學習了PHP、學習了Java、學習了Angular、正在製做小程序......

在這麼多語言的學習中，惟一不變的就是學習它們的過程：

從「它能實現什麼」入手 -> 去嘗試「我怎麼搭建環境」 -> 去思考「我如何使用它」 -> 而後認識到深層次的原理，知道「它是什麼」 -> 最終學會若是在框架的基礎上創造新的東西。

（實踐技能的學習過程和理論知識完徹底全是相反的）

文檔，你怎麼看？

想象一下，高中作英語閱讀的時候，你是從文章的第一個字開始一直看到最後一道題？仍是有選擇、有技巧的讀文章找關鍵詞？

一樣的，計算機的各類文檔的閱讀，也是有套路的。

隨着技術的發展，總有一天，Bootstrap框架會被淘汰掉，但讀文檔倒是萬古不變的重要本領。

咱們遇到什麼看不懂的文檔，也不要怕，微笑着面對它，消除恐懼的最好辦法就是壓縮信息，跳過不懂的，只讀關鍵的內容，堅持，就是勝利，加油，奧利給！！

本文做者：河北工業大學夢雲智開發團隊 劉宇軒