Bootstrap教學

快速前往: 開始使用 元件

Getting Started

Bootstrap 是用來製作自適應網頁的HTML、CSS、JS框架

Bootstrap提供了許多元件,可以大大節省網頁開發的時間。 舉個例子,如果想要製作一個按鈕(button)你需要的程式碼如下(按Result來看結果)。
範例連結 很簡單吧~讓我們來看看該如何使用Bootstrap吧!

如何加入Bootstrap到網頁中

在官方網站中提供許多的方法來使用Bootstrap。
1.下載主題、CSS、JavaScript
2.Sass
3.Bootstrap CDN
4.更多方法
你需要帶入jQuery才能使用Bootstrap。
可以依照你的使用需求來做選擇。對於第一次接觸Bootstrap的人來說,使用Bootstrap CDN可以作為很好的開始,範例如下。

head標籤中間加入Bootstrap CDN的CSS、Javascript、主題(theme)連結即可。


Components

下拉選單(Dropdowns)

為了節省空間,我們可以在網頁中使用下拉選單(Dropdowns)來存放多個選項


按鈕集合(Button groups)

按鈕集合(Button groups)可以將多個按鈕組合在一起,你可以將相同屬性的按鈕做組合。使用一個class="btn-group"的div來包住多個按鈕(button),而button的class="btn ban-default"。如下圖中Left、Middle、Right三個按鈕。




這個網誌中的熱門文章

RWD導覽列(RWD navigation bar)

Bootstrap按鈕集合(Button groups)