Bootstrap教學
快速前往:
開始使用
元件
Getting Started
Bootstrap 是用來製作自適應網頁的HTML、CSS、JS框架
Bootstrap提供了許多元件,可以大大節省網頁開發的時間。 舉個例子,如果想要製作一個按鈕(button)你需要的程式碼如下(按Result來看結果)。
範例連結 很簡單吧~讓我們來看看該如何使用Bootstrap吧!
範例連結 很簡單吧~讓我們來看看該如何使用Bootstrap吧!
如何加入Bootstrap到網頁中
在官方網站中提供許多的方法來使用Bootstrap。
1.下載主題、CSS、JavaScript
2.Sass
3.Bootstrap CDN
4.更多方法
在 head標籤中間加入Bootstrap CDN的CSS、Javascript、主題(theme)連結即可。
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三個按鈕。