Bootstrap 的 Form (Part 1)

Bootstrap 的 Form (Part 1)   Bootstrap 的 Form (Part 2)  Bootstrap 的 Form (Part 3)
Bootstrap 的 Form (Part 4)

Bootstrap 針對Form提供三種Layout, 分別為

• Vertical form (垂直式佈局, 預設form佈局)
• Inline form (直線式佈局)
• Horizontal form (水平佈局)

透過使用上述三種form佈局, 我們可以自動付予form中所有操控元素一致的外觀設定及空間位置的安排，而不需要自行調整所有相關項目的CSS

Vertical form垂直式佈局

建立垂直式佈局的form必須執行下列步驟

• 在HTML的<form>中加入role="form"屬性
• 把Label及其HTML控制項放置於ㄧ<div>中，並在該div中加入CSS class="form-group"
• 為HTML控制input, textarea及select加入CSS class="form-control"

如果各位的ASP .Net網頁並無採用主版頁面，HTML form標籤就直接在該網頁中，則在form 中加入role="form"是很容易的. 但如果有採用主版頁面，則我們就必需要準備ㄧ個有加入role="form"於HTML form標籤的主版頁面供有資料輸入表單的網頁用. 因主版頁面中已有一個form, 我們不能在套用主版頁面的網頁中加入另一個form, 如此會導至巢狀(nested)form的出現, 這是違反W3C標準的,請參見http://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form

接下來我們以在Visual Studio ASP .Net空白網站範本中加入Bootstrap (Part 1)一文中所示範的例子為基礎進行示範

範例   準備有垂直式form佈局的主版頁面

1.在專案中加入一個新的Master Page, 命為Site1VForm.Master.

2. 依照在Visual Studio ASP .Net空白網站範本中加入Bootstrap (Part 3) 一文相同的方法及程序將整合至該主版頁面. 不妨將Site.Master內的內容直接複製至Site1VForm.Master.

3. 在Site1VForm.Master的form中加入role="form"屬性

4. 現在新增一個使用主版頁面的WebForm並選擇Site1VForm.Master作為主版頁面.

5.請在ContentPlaceHolder1內輸入下列內容:

    <div class="form-group">
        <label for="txtName">姓名: </label>
        <input  type="text" id="txtName" class="form-control" placeholder="請輸入您的姓名"/>
    </div>
    <div class="form-group">
        <label for="txtAddress">地址: </label>
        <input  type="text" id="txtAddress" class="form-control" placeholder="請輸入您的地址"/>
    </div>
    <div class="form-group">
        <label for="txtPhone">電話: </label>
        <input  type="text" id="txtPhone" class="form-control" placeholder="請輸入您的電話"/>
    </div>

    <button type="submit" class="btn btn-default" id="btnSubmit">提交</button>

6. 將目前的網頁始為啟始頁並進行測試.

各位可以看到垂直式佈局的表單順利呈現.

在下一個Part將為各位介紹Bootstrap form中支援的控制項有那些.