使用 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