使用 Bootstrap 建置雛型網站

Bootstrap 是一套網站前端的框架，目前對此框架的評價很好，被許多網站採用 (以Bootstrap建置的案例)，需要為愛上Bootstrap找理由？就在眼前。
框架內容包含 HTML5, CSS3, jQuery 等檔案組成，至於從官網 下載 整包檔案後，要如何形成網站，還是得靠網頁設計師才行吧 !? 噗 ~~~
 
不過，透過第三方工具能讓這一步走得容易些，本文所介紹的工具與操作方式，相信對於 Bootstrap 新手或不熟悉 HTML5 語法的朋友，可以較容易上手。
期許也能讓專案經理、程式開發人員也自行完成建構 (漂亮的) 雛型網站。

Step 1 建立網頁架構

LayoutIt 網站 提供了線上建立 Bootstrap 網頁，進入 Layoutiy 網站 最直接是點擊 [Start Now!]
image
或者捲到下方，有三種網頁範本可選擇：Starter template, Basic marketing site, Article，視個人需要選擇接近的範1本，點擊 [Get started ] 進入編輯畫面，不論選哪種方式，進入編輯時均可進一步調整。
編輯主畫面左側是工具區，目前可使用的有 4 大類
  1. GRID SYSTEM 版面
  2. BASE CSS
  3. COMPONENTS
  4. JAVASCRIPT
作法是先透過第 1 類工具決定好網頁的版面，再加入第 2, 3, 4 類的功能或控制項。也就是說，第 2, 3, 4 類的控制項不能直接置於網頁上，只能加入從第 1 類工具產生的 Column 中。
第 1 類工具中提供 5 種排版，直接拖曳新增到右側畫面上。
image
第一個頁面的版面配置好，點擊上方的 [Download]，再選 [Download .zip]，可以取得目前的網頁與 Bootstrap 相關檔案。
image
解壓縮後，可以在本機上直接以瀏覽器檢視 index.html
image
<<建議作法>>
第一次先下載完整檔案，後續則可選擇 [Download .html only] 下載單一網頁，手動合併檔案至網站的目錄下。
 

Step 2 加入細部控制項

在每一個 Column 中可以加入第 2 ~ 4 類中任一個控制項
image
將控制項加入 Column 後，部分的控制項是可以直變更文字或調整屬性的。舉例
從 BASE CSS 分類下加入 Title
image
  1. 可以修改標題文字
  2. 設定屬性：對齊方式 、外觀

從 BASE CSS 分類下加入 Button
image
  1. 可以修改標題文字
  2. 設定屬性：外觀、大小…等
PS: 有時候會遇到設定屬性後，卻沒有立即改變，手動重新整理網頁後，可回復正常。

<<建議作法>>
  • 若對網頁結構不熟悉，第一步中先建立僅有版面的網頁，下載到本機端。
  • 重新建立一個空白頁面，先加入單欄的版型: GRID SYSTEM 12
  • 拖曳並設定需要的控制項
  • 完成單欄所有控制項後，取得HTML語法手動貼至網頁中，
    如下圖複製 <div class=”span12”>….</div> 中間的 HTML 語法。
image

Step 3 設計表單

LayoutIt 網站工具箱中雖然也有表單 (在BASE CSS 分類下 Form)，不過功能很簡單，若對 HTML5 語法不熟悉，恐怕無法做到預先想要的表單。
當遇到需要加入表單時，建議可以用 Bootstrap Form Builder，這個網站提供線上產生表單，包括了各種常用的控制項，均可以做進一步的屬性設定。表單設計完成後，同上述 Step 2 取得 HTML 語法貼入對應的 Column 中。
進入 Bootstrap Form Builder 主畫面如下
image
  1. 畫面右側是各類的控制項，選擇拖曳到左側
  2. 畫面左側是表單預覽畫面，可重新調整已加入控制項的前後順序。
    移除則拖曳至表單範圍外。
  3. 點擊 [Rendered] 檢視 HTML 語法
加入單一控制項，可以進一步做設定屬性，HTML5表單產生後的 HTML 語法會稍冗長，建議最好盡可能都先設定好文字說明，如下圖。
image

至此，大致可以建置一個不錯的雛型網站，若想要再進一步更換網站的 Theme 可參考下一篇：
<更換 Bootstrap Theme>。

相關資源

入門教學

Video

網頁

官方網站

 

工具


Theme


其他

20 Awesome Resources for Twitter Bootstrap Lovers