Bootstrap 簡易版面實作範例﹍網格+面板+表單輸入+按鈕

Bootstrap 簡易版面實作範例﹍網格+面板+表單輸入+按鈕

A+
bootstrap-webpage-layout-practice-Bootstrap 簡易版面製作範例﹍網格+面板+表單輸入+按鈕Bootstrap 的使用說明內容不少,份量足以出一本書,不過工具書用從頭看到尾的方式來學習,效果不見得比較好。

如同「一圖勝過千言萬語」,從範例中來學習、吸收 Bootstrap,效率會來得更快,印象也比較深刻。

本篇提供一個簡單的小範例,可以熟悉以下這些功能的用法:

  • 網格
  • 面板
  • 表單輸入
  • 按鈕
  • Well

(圖片出處: negativespace.co)


一、原始架構及方針


1. Layout 草圖

這是最近的一個案例,案主需要將「樹莓派」(Raspberry Pi)裝置儲存的數據,在網頁上顯示,並需要搜尋功能。

bootstrap-webpage-layout-practice-1-Bootstrap 簡易版面製作範例﹍網格+面板+表單輸入+按鈕

上圖為原始需求的草圖:

  • 左右兩個欄位
  • 左邊按下對應裝置的按鈕後,要能顯示該裝置的數據
  • 右邊需要搜尋功能,抓出所有相同 ID 的裝置及數據

以上的版面架構算是滿簡單,從 Bootstrap 都能找到對應的組件來套用。


2. Bootstrap 組件

  • 首先分割左右欄位,可利用「網格」(格線)系統,還能做到自適應 RWD 效果
  • 左右欄位的標頭(header)區塊,可利用「Well」組件
  • 每個裝置的數據資訊區塊,可利用「面板」+「按鈕」組合拳
  • 搜尋功能可利用「表單」中的 input 組件來組合出草圖的效果

從以上說明瞭解進行的方向後,以下來看範例程式碼。

開始之前,可先參考「Bootstrap 3 & 4 速查表﹍中英文版整理」,瞭解相關語法的說明要去哪裡搜尋。

本文以下的說明請直接對照相關的中英文網站,主要將觀念帶到,細節就不深入了。



二、程式碼說明


1. 引用 Bootstrap

首先記得在 head 區塊引用 Bootstrap:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>


2. 網格(Grid)系統

  • 可先參考「Bootstrap Grid System 排版」,瞭解網格系統的概念
  • 切成左右 2 個欄位,我預計使用 4:8 的比例
  • 外圍使用 container-fluid 會比 container 有更好的 RWD 效果
  • 下一層使用 row 組合左右 2 個欄位
  • 左邊欄位使用 col-sm-4,右邊欄位使用 col-sm-8,代表平板以上的寬度(768px)會維持 4:8 的比例
  • 768px 以下的裝置,左右兩欄會自動成為 100% 寬

簡單的切版範例如下:

<div class="container-fluid">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
</div>


3. Well

「Well」組件可以很方便的做出網站標頭(header)區塊,左右兩欄的範例如下:

<!--左邊欄位-->
<div class="well">目前裝置連線狀況</div>

<!--右邊欄位-->
<div class="well">搜尋頁面</div>


4. 面板(panel)

「面板」(panel)這個套裝組件,拿來顯示裝置資訊真是再好用不過了:

  • 最外層使用 panel,且可使用預設的 5 種顏色,請參考 Bootstrap 相關說明,例如 panel-primary 是深藍色
  • 面板標題使用 panel-heading
  • 面板內容使用 panel-body
  • 面板底部使用 panel-footer

範例程式碼如下:

<div class="panel panel-primary">
<div class="panel-heading">裝置一</div>
<div class="panel-body">所有數據資料</div>
<div class="panel-footer">獲取第1台數據</div>
</div>


5. 按鈕(button)

上面的 "獲取第1台數據" 字串必須用按鈕的形式來呈現:

  • 再按鈕標籤 button 使用 class btn 可呈現預設按鈕樣式
  • 有 5 種預設顏色可使用,例如 btn-primary 是深藍色
  • 若按鈕要佔用全部寬度,可使用 btn-block
  • 可改變按鈕尺寸,例如 btn-lg 代表使用大尺寸按鈕

依據本案例的草圖,按鈕程式碼如下:

<button class="btn btn-default btn-block">獲取第1台數據</button>

6. 輸入框 + 送出按鈕(input)

右邊欄位的 "搜尋框 + 查詢按鈕",可使用 Bootstrap 的「輸入框組」功能:

  • 外圍宣告使用 input-group
  • 輸入框 input 必須使用 form-control
  • 輸入框可改變大小,例如大尺寸請使用 input-lg
  • 為輸入框加入額外元素可使用 input-group-addon,加入額外按鈕可使用 input-group-btn
  • 在額外按鈕之內,加入前面的 bootstrap 按鈕元件語法,就完成組合效果了

以下是範例程式碼:

<div class="input-group">
<input placeholder="輸入 ID" class="form-control input-lg" type="text">
<span class="input-group-btn">
<button class="btn btn-primary btn-lg">查詢</button>
</span>
</div>




三、完整程式碼


把以上每個部分都組合起來,以下是完整的程式碼。

輸入 HTML/CSS 覺得麻煩的話,一定要使用「前端開發神器 Emmet 快速上手教學」。

<html>

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
<style>
.well, .panel {text-align: center;}
</style>
</head>

<body>

<div class="container-fluid">
<div class="row">

<!--左邊欄位-->
<div class="col-sm-4">
<div class="well">目前裝置連線狀況</div>
<div class="panel panel-primary">
<div class="panel-heading">裝置一</div>
<div class="panel-body">這裡是數據內容</div>
<div class="panel-footer">
<button class="btn btn-default btn-block">獲取第1台數據</button>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">裝置二</div>
<div class="panel-body">這裡是數據內容</div>
<div class="panel-footer">
<button class="btn btn-default btn-block">獲取第2台數據</button>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">裝置三</div>
<div class="panel-body"></div>
<div class="panel-footer">
<button class="btn btn-default btn-block">獲取第3台數據</button>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">裝置四</div>
<div class="panel-body"></div>
<div class="panel-footer">
<button class="btn btn-default btn-block">獲取第4台數據</button>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">裝置五</div>
<div class="panel-body"></div>
<div class="panel-footer">
<button class="btn btn-default btn-block">獲取第5台數據</button>
</div>
</div>
</div>

<!--右邊欄位-->
<div class="col-sm-8">
<div class="well">搜尋頁面</div>
<div class="input-group">
<input placeholder="輸入 ID" class="form-control input-lg" type="text">
<span class="input-group-btn">
<button class="btn btn-primary btn-lg">查詢</button>
</span>
</div>
<br/>
<div class="panel panel-primary">
<div class="panel-heading">Raspberry Pi 加入成功 裝置 1</div>
<div class="panel-body">這裡是數據內容</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Raspberry Pi 加入成功 裝置 2</div>
<div class="panel-body">這裡是數據內容</div>
</div>
</div>

</div>
</div>
</body>

</html>



四、範例效果


下面是程式碼的網頁執行畫面,從頭到尾只需設定 class 名稱,除了一個置中的 CSS 語法,完全不用調整其他 CSS 參數,就能得到一定水準的版面效果,Bootstrap 是不是非常方便呢!




更多 Bootstrap 相關文章:

2 則留言:

  1. 您好版主!!請教您Bootstrap切成左右 2 個欄位,可不可以變成左中右 3 個欄位嗎?我想要3欄式不知語法怎麼寫請賜教謝謝!!感謝您!!
    信箱 sfpen01@gmail.com

    回覆刪除
    回覆
    1. 可以 google "bootstrap 切版" 或 "bootstrap grid" 這些關鍵字,你會得到比較詳細的說明及 css 切版的概念。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP