有哪些 Bootstrap 的學習案例？

想了解一下bootstrap，於是便到其官網學習，但不知道如何引用。請問有沒有bootstrap的學習案例或者是demo之類的詳細介紹？

哈哈，這個就是用Bootstrap的大屏幕做的效果，實現起來很簡單，代碼在這裡：
http://how2j.cn/k/boostrap/boostrap-jumbotron/495.html

如果你用過了Bootstrap就知道用起來很簡單，但是如果你沒用過，然後第一次去學習Bootstrap的網站的官網: Getting started · Bootstrap， 放心好了，你一定會被各種術語： Bootstrap CDN，Install with npm, Grunt 什麼的嚇著，讓你以為，我靠，用Bootstrap 要這些都會啊？ 那恐怕我的基礎知識還不夠用Bootstrap吧？ 是的，我當初就是這種懵逼的感覺

但是，我上課要教這些東西啊，所以只有硬著學了。 學完了之後，整理一遍，再用很平緩的曲線把Bootstrap的知識表現出來，基本上我的學生們一下下。。。 就會了~

那麼到底怎麼使用呢？ 三個步驟

1. 加上標籤 ，因為Bootstrap用到了html5的特性，所以需要聲明一下

&

2. 導入css和js

&

接著我把Bootstrap做了些整理，把常用(我學會了的)的一些功能留下來，大體分為如下幾個部分(有點長的圖)：

對於每個效果，以及需要套用什麼樣式列羅出來，方便查閱和使用

如果你不滿意，也可以在線修改，馬上看到效果(無需跳轉到新的頁面，無需刷新頁面)

好嘛，只要走一遍，基本上Bootstrap的效果就大概有個了解了。以後要用什麼再來查一下，複製粘貼，然後再改改。。。就闊以了。

這個教程我前前後後差不多做了10天左右，然後duang~ 一個小時就講完了~

教程地址：http://how2j.cn/k/boostrap/boostrap-tutorial/538.html

其他相關：定個小目標，做他個天貓官網前端？ - 黃喜的回答 - 知乎

收藏的同學，請記得點個贊~

---

首先，Bootstrap 項目主頁本身就是一個很清楚的使用說明文檔，仔細閱讀並動手嘗試便可理解。

其次，掌握 LESS 有助於理解 Bootstrap。
http://lesscss.org/

最後，一些學習資源：
國內一些相關譯文版本：
Bootstrap中文網
Twitter Bootstrap中文版/中文翻譯
LESS

使用了 Bootstrap 的案例搜集列表：
Built With Bootstrap
Bootstrap Themes
Bootswatch

詳細的 Bootstrap 資源搜集列表：
The Big Badass List of Twitter Bootstrap Resources （How Tos 子列表內羅列出了關於 Bootstrap 的各種使用說明和教程）
List of Twitter Bootstrap Resources

推薦：
Tuts+ Premium Course: Bootstrap for Web Design

---

教程：
Bootstrap 教程
這個教程里例子很多，可以自己運行著玩。

在線頁面生成器漢化版：
Bootstrap可視化布局系統

按鈕生成器：
Beautiful Buttons for Twitter Bootstrappers

---

我的網站就是用bootstrap2.3.2開發的，你可以參考下，另外可以參考其他的demo：
搜索"bootstrap"的分享列表

---

Bootstrap教程分享
1.快學網WEB精品課程bootstrap框架簡介視頻2.快學網WEB精品課程pbootstrap框架--bootstrap按鈕視頻3.快學網WEB精品課程bootstrap框架--bootstrap圖片類視頻

---

http://twitter.github.com/bootstrap/#tables
到這個網頁上面下載下來就可以發現有使用的例子我現在就用這個框架。非常好用。

---

實驗樓bootstrap

李炎恢bootstrap

基於bootstrap網頁開發

---

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

---

找表哥也是bootstrap3的框架。

---

看了一下其他人的回答，我想補充一句，其實bootstrap這個框架的簡單與精妙就在於你不需要把他都記下來，而是用的時候直接將它的效果代碼拷貝到你的項目中就可以了，如果有需要修改的地方自己可以建立自己的css來覆蓋官方提供的注意媒體查詢就好。

---

Bootstrap專題 - Awesomes

---

codingke上的HTML5板塊內部對bootstrap這個工具集有詳細的視頻教程，可以看一下。

---

http://bootstrap.cn/ 推薦參考這個，有大量的模板，酷站，還有很多代碼片段

---

之前沒學過，直接參考了幾個demo，做了一個，就明白了

---

雖然不做前端，但是知道bootstrap是有中文官網，文檔比較全也比較詳細，相對其它開源項目還是比較容易上手的吧

---

我的網站是實用bootstrap3製作的，地址 http://www.dqiu.net

---

緣創派也是用的bootstrap.我目前也在用這個，能解放程序員，個人站長。。。很不錯的東東。

---

http://bootstrap.cn/ 這個網站也可以哈

---

推薦閱讀：