Bootstrap 3:表單

by vivid 25. 三月 2015 13:26

.NET Magazine國際中文電子雜誌
者:高光弘
稿:張智凱
文章編號:N150315802
出刊日期:2015/3/25
開發工具:Visual Studio 2013 Ultimate Update 4
版本:.NET Framework 4.5.5x

在網頁上讓使用者可以輸入資料的方式,最主要的方式是利用表單<form>。無論是登入帳號、查詢關鍵字…等,都需要使用到表單。Bootstrap對於表單的部分,除了提供美化的樣式表,同樣地也支援的響應式的網頁瀏覽。Bootstrap的表單依照排列方式,共有三種類型:垂直表單、單行、水平表單。

普通HTML表單

在建立Bootstrap表單之前,先建立一個普通HTML表單,可以當作對照組,方便進一步瞭解Bootstrap的類別功用。

<form>
    <div>
        <label for = "email"> 電子郵件 </label>
        <input type = "email" id = "email" />
    </div>
    <div>
        <label for = "password"> 密碼 </label>
        <input type = "password" id = "password" />
    </div>
    <div>
        <button type = "submit" > 登入 </button>
    </div>
</form>

clip_image002

1:沒有套用Bootstrap

 

垂直表單

垂直表單是指將欄位名稱<label>和輸入項(例如:<input>、<select>…等。),由上到下的排列方式呈現。這是Bootstrap預設的表單呈現方式。基本的Bootstrap表單需要form-group和form-control類別。

 

form-group類別

form-group類別功能是讓欄位之間保留適當的空間。設定的方式:將欄位名稱和輸入項的外面再加一個<div>。對<div>設定form-group類別。加入form-group類別之後,很明顯欄位之間的空間比較大些。

 

<form>
    <div class = "form-group" >
        <label for = "email"> 電子郵件 </label>
        <input type = "email" id = "email" />
    </div>
    <div class = "form-group" >
        <label for = "password"> 密碼 </label>
        <input type = "password" id = "password" />
    </div>
    <div class = "form-group">
        <button type = "submit" class = "btn btn-primary"> 登入 </button>
    </div>
</form>

 

clip_image002[4]

2 使用form-group類別。

form-control類別

form-control類別的使用方式是直接在輸入項設定,其結果會讓輸入項的寬度變成100%之外,還會美化輸入項的外觀。請注意,這時候的欄位名稱和輸入項的排列方式,會變成由上至下以垂直的方式排列。

<form>
    <div class = "form-group">
        <label for = "email"> 電子郵件 </label>
        <input type = "email" id = "email" class = "form-control" />
    </div>
    <div class = "form-group">
        <label for = "password"> 密碼 </label>
        <input type = "password" id = "password" class = "form-control" />
    </div>
        <div class = "form-group">
        <button type = "submit" class = "btn btn-primary"> 登入 </button>
    </div>
</form>

 

clip_image004[4]

3 使用form-control類別。

單行表單

除了預設的垂直表單的呈現方式。以目前的範例,如果只有兩個欄位,對手機來說,是蠻適合。但對於桌機的瀏覽器來說,就不太適合。欄位數量少的話,Bootstrap有提供另一個單行表單的做法。只要在<form>或者是在這些欄位外面再加一個<div>,對其設定form-inline類別就可以。

<form>
    <div class = "form-inline" >
        <div class = "form-group" >
            <label for = "email"> 電子郵件 </label>
            <input type = "email" id = "email" class = "form-control" />
        </div>
        <div class = "form-group">
            <label for = "password"> 密碼 </label>
            <input type = "password" id = "password" class = "form-control" />
        </div>
        <div class = "form-group">
            <button type = "submit" class = "btn btn-primary"> 登入 </button>
        </div>
    </div>
</form>

clip_image006[4]

4 單行表單。

單行表單在平版上(寬度768px)一樣可以單行呈現。在手機上,則會自動切換垂直表單(請參考圖3)的呈現。

 

水平表單

垂直表單是比較適合在手機上呈現資料。單行表單雖然適合桌機和平板的呈現,但是,只適用於欄位數極少的情況。欄位數量一多的話,單行表單也就不太適合。這時候,要設定適合在桌機和平板使用的界面,比較好的選擇是水平表單。水平表單可以使用Grid System的Column定義來配置欄位名稱和輸入項的位置。水平表單使用的類別是form-horizontal類別。如同form-inline類別的設定方式,可以在<form>或者是包住這些欄位的<div>上設定form-horizontal類別。

 

水平表單的form-group

由於form-group類別等同Grid System的Row。也就是說。原本的Grid System的階層關係為container->row->column。在水平表單上,則變成container->form-group->column。row被form-group取代。

 

輸入項的Column定義方式

另一個特別注意的事項,是form-control類別和column定義不能同時在輸入項設定。所以,對輸入項必須另外再加一層<div>,在<div>上設定column定義。

 

水平表單在不同裝置的呈現方式

水平表單在不同裝置的呈現方式是根據Column的定義。例如:使用col-sm-*類別,代表在平板上是水平呈現。而在手機上會自動切換成欄位名稱和輸入項以堆疊的呈現方式。

<div class = "container" >
    <form>
        <div class = "form-horizontal" >
            <div class = "form-group">
                <label class = "col-sm-3" for = "email"> 電子郵件 </label>
                <div class="col-sm-9">
                    <input class = "form-control" type = "email" id = "email" />
                </div>
            </div>
            <div class = "form-group">
                <label class = "col-sm-3" for = "password"> 密碼 </label>
                <div class = "col-sm-9">
                    <input class = "form-control" type = "password" id = "password" />
                </div>
            </div>
            <div class = "form-group">
                <div class = "col-sm-9 col-sm-offset-3">
                    <button type = "submit" class = "btn btn-primary"> 登入 </button>
                </div>
            </div>
        </div>
    </form>
</div>

 

clip_image008[4]

5 水平表單。

讓欄位名稱對齊右邊

在<label>加入control-label類別,可以讓欄位名稱對齊右邊。

<div class = "container">
    <form>
        <div class = "form-horizontal">
            <div class = "form-group">
                <label class = "control-label col-sm-3" for = "email"> 電子郵件 </label>
                <div class = "col-sm-9">
                    <input class = "form-control" type = "email" id = "email" />
                </div>
            </div>
            <div class="form-group">
                <label class = "control-label col-sm-3" for="password">密碼</label>
                <div class = "col-sm-9">
                    <input class =" form-control" type = "password" id = "password" />
                </div>
            </div>
            <div class = "form-group">
                <div class = "col-sm-9 col-sm-offset-3">
                    <button type = "submit" clas s= "btn btn-primary"> 登入 </button>
                </div>
            </div>
        </div>
    </form>
</div>

 

clip_image010[4]

6 使用control-label類別。

Tags:

.NET Magazine國際中文電子雜誌 | Bootstrap | 高光弘 Ray Kao

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List