標籤：

如何學習 twitter bootstrap？

01-09

比如都有哪些類，每個類的作用是什麼，類之間如何配合，最後也是最頭疼的，是HTML中怎麼用div嵌套來配合各種類？

自己邊做項目邊學！

目前網站已開源：JING-TIME/ustc-course · GitHub

我開始做這個網站（https://icourse.club/）的前端的時候，我不會 Bootstrap（對，我也是今年一月份開始學前端的）。一開始看的時候是比較煩，總覺得怎麼這麼多東西啊，有點亂，找不到自己想要的東西在哪。

差不多花了一兩天時間吧，然後就開始慢慢理順了。我覺得最重要的是，你要懂的 Bootstrap 有什麼，你要能快速找到你需要的東西 Bootstrap 在哪裡！

比如：

這個導航欄，第一個Getting started是開始的時候看一下，然後之後基本上只用 CSS 和 Components 這兩個部分。

寫網站前端的時候，我基本上是需要什麼（我並不記得Bootstrap里怎麼實現，但是我知道它有這個功能，並且大概在文檔的什麼位置）。然後我很快就找到了，然後把代碼複製進去。

當初熟悉 Bootstrap ，達到上面說的這樣的程度。基本上就是看了一兩天的教程（並沒有一直看啊，大概幾個小時啊）。我看得好像是中文的這個教程，也就是把 Getting started Css Components 三個部分的都（全部）瀏覽一遍。不需要記得代碼，也不需要記得實現方式。你重點要記得它有什麼功能，能夠實現什麼，以及這個教程的框架！！

有了大體的了解就可以開始幹活了！邊做項目邊學，我一直贊同這樣！

這是我最近做的網站，反應了我的前端水平（首頁比較丑...歡迎大家吐槽）

https://icourse.club/course/3555/網址：icourse.club（https://icourse.club/）

USTC評課社區，主要就是用來分享課程，幫助學生選課噠！我是大一學生，課程累的要死..

給你個中文的版本 http://wrongwaycn.github.com/bootstrap/docs/base-css.html

阿里雲大學課程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多節優質技術開發課程，歡迎各路小夥伴關注專欄學習：阿里雲大學 - 知乎專欄

學習 bootstrap 看官方的介紹即可，已經很詳細了。

http://twitter.github.com/bootstrap/

Bootstrap是工具，如果要花時間學說明HTML/CSS/JS的基礎有問題，有精力學工具不如學下基礎，畢竟花不了多少時間，之後就理解為什麼要用到Bootstrap了

我推薦學習寧皓的教程，比自己找資料學要好。

沒必要刻意去學習，自己用它來寫個網頁，用到什麼再去官網對比著看。然後寫多了，就自然很熟悉它的源碼了。這時候自己寫一個類似的框架就很容易。個人覺得學習它的思想很重要。

可以下載未壓縮的源代碼，然後看docs文件下的例子，對照著bootstrap.css文件看，這樣你就知道那些類都是什麼回事了。

首先仔細看文檔，記不住類名也沒關係，開發的時候打開文檔，隨時查閱。css3的基本功也很重要，這樣才會改造框架使之符合自己的效果圖要求。總之就是多看多練。

看官方文檔，然後在實際項目實踐一下，這是我用bootstrap3.0製作的個人網站，請多多指點

小狼設計

學習BootStrap可以看BootStrap中文網的相關教程 Bootstrap中文網,這是國內最早介紹BootStrap的網站，另外我的網站頂求網也是採用BootStrap技術作為前端UI的，可以參考一下，地址 http://www.dqiu.net/

其他人給出的都是官網之類的文檔，我最近也在自學BT3，推薦你一個網站吧：Bootstrap Tutorial

這個網站講解了很多官網上沒講出的類，真的很不錯，推薦去看看。

隨便一段的截圖：

比如nav-header官網就沒講，想了解他的意思還得去查看源代碼，這個網站就講出來了，類似的例子還有很多。

這種東西不需要專門花大力氣學，對著文檔一邊做一邊用不行嗎？

有一個bootstrap的皮站，Boot皮 | Bootstrap模板插件站點，上面很多模板值得借鑒。

推薦閱讀：

※你們或你們的團隊為什麼拋棄了jQuery,轉向了angularJS等框架？
※為什麼我引用bootstrap的font-awesome的圖標不出來，就單單是一個HTML裡面引用的？
※如何評價 Google 發布的前端框架 Material Design Lite？
※Bootstrap 框架有哪些缺點？

TAG:BootstrapTwitter |