標籤：

一個從未接觸過前端框架的人如何學習bootstrap？

01-01

慕課網和51cto的視頻都看了一些，慕課網那個0基礎入門的玩什麼前面部分全是各種不知所云，講完bootstrap的目錄結構然後接著就馬上直接給你看代碼對照實例什麼的，咋看的暈暈乎乎的=_=我自己也嘗試寫了一下，但是也只會照葫蘆畫瓢學寫他那裡面的那幾種模板，如果要自己自創就不曉得從何下手。，51cto那個純實例講解我看了感覺也沒啥用，畢竟只是吃到了魚而不知道如何捕魚。

其實只要你能看懂HTML/CSS/JavaScript就能玩轉Bootstrap，甚至你只要能看懂HTML+CSS，你也照樣能玩轉Bootstrap，這跟初步接觸沒有關係，重點是你有沒有去看人家的文檔和代碼，有沒有動手去寫。其他的都是浮雲。只有自己動手才能豐衣足食。順便推薦一下：

bootstrap | 博客自由標籤

玩轉Bootstrap（基礎）

玩轉Bootstrap（JS插件篇）

更新6月10日 18:17:

反對所有答案中的『不用學，會點XX就可以的答案』，浮躁要有限度。

學的定義是什麼，我這裡定義為認真閱讀文檔，看過所有的實現約定，簡單使用過示例，並結合自己的需求進行修改。

對於框架而言：

不熟悉介面規範，初版之後的代碼直接扔了重寫？想過別人會接手這種『不用學，會點XX就可以』的代碼么；

不熟悉基礎工具類，細節排版自己定義樣式工具類後，發現一堆CSS/DOM結構里都是一堆冗餘？你重構和繼續開發的時候不照顧舊代碼么？

不熟悉封裝好的模塊，浪費生命重寫完全可用的組件？如果你寫的代碼，永遠無法復用，以及你永遠不去用別人已經完成的部分，並且對你而言完成很好，覆蓋需求，無性能問題的代碼的話，硬是要全部都是自己來，還是別做coder了。

--------

瀉藥。

Bootstrap · The world"s most popular mobile-first and responsive front-end framework.

官方地址有引導啊，Getting started · Bootstrap，甚至如果你注意的話，Bootstrap 中文文檔 被官方收錄在`開始`中了。

學習使用，導航從左到右，從上到下即可。

對照demo做幾個小站，然後參考下別人怎麼實現的。

這幾個都是bootstrap做的，學完之後可以想想，如果你來玩的話，那麼如何實現布局呢：

蘇洋博客 | 壞蛋 | 中國·支教聯盟 | 首頁 - Sina App Engine

布局和效果實現之後，就可以折騰組件以及自己完成組件了，不是很自然的流程么...

學了有疑問來問，別什麼都不看一上來就如何學習。

只要了解 HTML/CSS/JavaScript, 閉著眼去 Bootstrap 中文網照著代碼寫一份, 就都會了吧, 想深入的話, 看看源碼就可以了...

bootstrap 不是後端程序員來寫前端產生的 ABC 型快速開發框架嘛...你會英文還不會說 ABC 嘛?

首先html css的基礎得有，一點沒有那還是別硬撐著裝逼了吧。。。

可以稍微看點視頻，不用太多，只要能看出來bootstrap是個偏UI的框架，然後知道主要就是改class就行了。

接著看文檔吧，視頻太慢。跟著文檔做一個作品出來，Bootstrap就基本上OK了（指的是能夠熟練的對照文檔來開發…）。Bootstrap應該是最簡單的框架了，用這種方法，你只需要幾個小時就能基本掌握。

當然，如果你說的是熟練到閉著眼睛都能盲寫……那方法和別的一樣——先做大量項目再說。

只要具備看文檔的能力就會用bootstrap，真的，複製粘貼都能看到效果。

bootstrap本質上就是一堆預設樣式以及插件的集合，使用上並沒有太深奧的東西，這也是bs能流行的原因之一。

玩不玩得轉就看你理解能力和熟練程度了，如果你要深度定製的話。但是一般的運用，你只需要不厭其煩地查文檔看Demo複製粘貼就可以了。

當然如何更合理地、高效地組織和運用，則需要一些經驗指導。

親，可以嘗試一下阿里雲大學推出的：Bootstrap在線學習課程開

Bootstrap，來自Twitter，是目前最火的前端開發框架。

由Twitter的設計師Mark Otto和Jacob Thornton合作開發，基於 HTML、CSS和JAVASCRIPT ，Bootstrap更加的簡潔靈活，使得 Web 開發更加快捷。並且提供了優雅的HTML和CSS規範，一經推出後便頗受歡迎，一直是GitHub上的熱門開源項目。目前包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目，另外國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。

那麼，前端框架Bootstrap的使用，應該學習哪些內容呢？

  • Bootstrap全局css樣式_柵格
  • Bootstrap全局css樣式_排版
  • Bootstrap全局css樣式_代碼
  • Bootstrap全局css樣式_表格
  • Bootstrap全局css樣式_表單
  • Bootstrap全局css樣式_按鈕
  • Bootstrap全局css樣式_圖片
  • Bootstrap全局css樣式_輔助類
  • ..........

最火的前端開發框架Bootstrap使用教程- 阿里雲大學

但是在學習Bootstrap前，一定要先了解HTML、CSS、和JavaScript 的基礎知識，如果你還不了解，可以先查看以下內容：

  1. HTML+CSS 基礎：零基礎學前端HTML+CSS-阿里雲大學
  2. CSS基礎：前端開發CSS基礎 - 阿里雲大學

之後小編還會持續更新Bootstrap學習中遇到的難點,歡迎關注！

阿里雲大學自5月正式開課以來，已經匯聚了10多節優質技術開發課程，歡迎各路小夥伴關注專欄學習：阿里雲大學 - 知乎專欄

完全看不懂的話，建議先學習HTML、CSS以及JavaScript基礎，這樣可以幫助你更好的學習bootstrap框架。

然後可以看看Bootstrap 中文文檔 · Bootstrap 是世界上最流行的、移動設備優先的、響應式前端開發框架。

參照其中的例子，CSS樣式，組件，JavaScript插件，都可以一一嘗試，自己按照實例實現一下，可以參照文檔來開發。

你實際項目中需要用到什麼組件，導航，按鈕還是彈出框，可以再去詳細了解相關的文檔。.

bootstrap需要學嗎？

如果你連bootstrap都看不懂。說明你缺乏最基本的html、css、js知識。

至少也先學點這些最基礎的吧。

做一個http://getbootstrap.com

很久之前就有很多人給我推薦twitter的Bootstrap框架，但是直到前幾天我才真正學習了下Bootstrap，的確是相當棒的框架，至少從視覺體驗上超越了很多以前碰到了前端UI框架。今天我要聊聊Bootstrap，最後給出一份我整理的Bootstrap的UI的demo，以及我自己使用Bootstrap開發的例子。

　　下面我在這裡簡單的介紹下Bootstrap框架。

　　Bootstrap框架屬於UI框架，這個和jQuery不太一樣，其實準確的描述Bootstrap框架屬於css框架而非javascript框架，但是它本身也使用javascript來完善Bootstrap框架的視覺效果。此外，Bootstrap框架十分超前，在支持html5和css3的瀏覽器上表現特別好，而且對移動終端的瀏覽器支持也是相當優秀。

　　一個完整的Bootstrap框架包含如下四個部分：

腳手架（不知道官網為啥這麼翻譯）：用於重置背景、鏈接樣式、柵格系統等，並包含兩個簡單的布局結構。Bootstrap的樣式使用了lesscss技術，比如重置背景這樣的操作，這些比較簡單我就不展開敘述了，腳手架里最出彩的是柵格系統和布局。柵格系統是將頁面寬度分成12列，柵格系統分為兩種類型，一種是默認柵格系統，這時候柵格系統是按940px像素進行等分，我們可以使用span1，span4這樣的class屬性操作默認柵格布局，另一種是流式柵格系統，這個時候分列的寬度就不是固定，而是根據你可視頁面進行12等分，同樣可以使用span1，span4操作流式柵格。這個系統非常之好，做css最難的就是div布局，使用柵格系統可以大大簡化div的布局操作。另外一個就是做布局操作了，布局也分為固定和流式，讓不太精通css布局也能輕鬆操作布局。web前端學習群：611 428 142 點擊鏈接加入群【網頁製作學習群】：https://jq.qq.com/?_wv=1027k=49ZfTHl 基本的css樣式。Bootstrap給出了一樣常用的HTML元素的樣式，例如：按鈕、表單和文字等等。大部分做網站的人都不是美工出身，做出賞心悅目的網頁是件很困難的事情，css提供的樣式很專業很精美，能讓我們輕鬆開發出一套精美的網站

Css組件：Bootstrap還提供一些常用的css組件，同樣很優秀很棒。

Javascript插件：Bootstrap是個開放的系統，我們可以隨意擴展Bootstrap，特別是javascript的框架，這樣Bootstrap就會更加專業。

　　Bootstrap是個操作性質的框架，沒必要做深入分析，最關鍵是有沒有好的使用實例，我下載Bootstrap發現，下載包里的example不是太強大，例子都在它的官網上，很多對css和javascript不是特別熟悉的人使用起來都不太習慣，因此我將這些例子進行了整合，作為單獨的例子工程，這個工程非常全面，我在網上找過，目前還沒有比我整理的更詳盡的例子，大夥下載下來按照我的工程目錄結構就可以進行開發了。此外，我做了一個簡單的demo，也分享給大家，demo的截圖是：

建議一般先學會排版布局吧。這個是最最有用的。從最基本的bootstrap框架開始學習。首頁上的其他一些都是擴展性的框架可以先不學。等完全了解了bootstrap基本的一些排版布局以及樣式，學習其他的也就不難了。其實bootstrap學習起來還是很簡單的吧。布局的話就是百分比布局和柵欄式布局為主。其他的類似 按鈕 .btn 報錯提示 .alert-block 都是利用了組合式的class如 。.btn .btn-success就是綠色按鈕。.btn+後綴（其實就是一個色系）。個人任為bootstrap最強大的一點就是組合式class，隨心搭配。從排版布局到css最後到bootstrap.js（個人認為使用的幾率不大，兼容性和實用性並不是最好。js初學者用用很不錯。常用的也就那幾個，畢竟萬惡的ie在國內還是根深蒂固的）按照這個步驟看完，再自己做一些小的demo很快上手的。

只要熟悉基本的HTML語法和DIV+CSS網頁布局就可以了，Bootstrap的部分可以參看BootStrap中文網 http://www.bootcss.com,HTML語法和DIV＋CSS可以看看Ｗ3school的相關課程，應該很快就能pass的

另外，我還寫了一個BootStrap教程 BootStrap開發實踐

題主一看就不只是沒學過任何前端框架的問題，對HTML和CSS恐怕也不是很熟悉，沒有自己的理解。建議夯實基礎，再看bootstrap的教程不會有太大難度的。給題主推薦幾本HTML和CSS的書吧

Head First HTML與CSS、XHTML（中文版）

CSS權威指南（第三版） (豆瓣)

精通CSS（第2版） (豆瓣)

雖然HTML和CSS的語法簡單，但是不代表不重要啊，基本思想搞不清，用框架當然只能比葫蘆畫瓢了，最好把前兩本讀了，邊讀邊思考邊寫代碼效果會更好。等你學好了，再看boostrap一目了然，事半功倍，加油！

看到這個問題，其實我特別想問樓主一句，樓主是不是HTML CSS也不熟？

樓主如果對HTML CSS熟的話，肯定會chrome調試。bootstrap那些寫好的class到底做了什麼，樓主一看便知，學習起來應該輕鬆加愉快。

所以我大膽猜測樓主應該是html css不熟。

基於以上假設，不建議樓主目前學習bootstrap，bootstrap也沒法做到讓不會html css的人寫出漂亮網頁。現在很多好看的基於bootstrap的網頁其實都是作者自己寫了很多樣式的。

建議樓主先去把html+css學熟練了，再考慮bootstrap（或許到那個時候，你就會覺得bootstrap對自己創作是一種約束了，就不會用了，逃）

點贊加關注，乾貨持續分享中

框架其實還挺好學的，裡面的步驟介紹的也挺清楚，包裝好的東西也挺好用的，如果想深入學習就得研究研究了，目前我也就會用一下它提供的元素，別的沒用過，現在還是自己手寫的多，但是我發現好多網站還是手寫的比較多，框架就用了一點點。現在我都放棄用它了

題主有點缺乏耐心了。

其實這東西基本都不需要學。。

你會點CSS和HTML基本就懂是怎麼回事了。。

它基本上講就是一堆html和CSS堆起來的。

這種樣式框架，用它都是圖省事。真正對外發布的產品，還是自己手寫的代碼堆出來的。

不過內部系統啊，dashbaoard這種東西，自己動手改Bootstrap是個好主意。

其實我很反感用bootstrap，記這記那，不如直接用css手寫快，不依賴，網站載入又快。但是github上有10W個star

Bootstrap中文網

如果沒把 html和css 學好的話，不建議去學框架，如果你學好了，不應該看不懂bootstrap啊！

可以自己先用HTML+CSS擼一個靜態的頁面。寫完之後看bootstrap就簡單多了。靜態頁面可以寫一個博客，參考這個 http://www.gaoyakang.tk

推薦閱讀：

※前端項目中有簡潔的z-index的約束規則（管理方案）嗎？
※前端常用的幾種在線代碼編輯器各有什麼優勢？
※前端實習的基本要求?
※只會 HTML+CSS+JS 的人如何進階前端開發工程師？
※如何在 PC 機上測試移動端的網頁？

TAG:前端開發 | CSS | 程序員 | 前端工程師 | BootstrapTwitter |