Bootstrap 的 Form (Part 4)

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

Inline form (直線式佈局)

除了垂直式佈局以外, 尚可以將Label及控制項採水平放置方式由左向在排列, 此種佈局稱為Inline form (直線式佈局). 請注意採用Inline form (直線式佈局)時裝置畫面必須寬度在768px以上.

使用的方式是在form標籤中加入CSS class .form-inline.

首先我們仿照在Bootstrap 的 Form (Part 1)的程序新增一個新的主版頁面InlineForm.Master

並把Bootstrap 的 Form (Part 1)中的主版頁面Site1VForm.Master的內容複製至InlineForm.Master中(複製html標籤內容), 並在form標籤中加入class="form-inline"

現在新增一個使用主版頁面的WebForm並選擇InlineForm.Master作為主版頁面, 並把一些先前在Bootstrap 的 Form (Part 1)中的測試內容複製至該網頁

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

Horizontal form (水平佈局) 

Horizontal form (水平佈局) 則是會把Label和其對應的控制項採水平放置在同一列的方式, 但不同組的Label及控制項依然是採垂直的方式排列

使用時必需在form標籤中加入class="form-horizontal", 並把Label和其對應的控制項放置在同一div標籤中同時加入class="form-group", Label標籤中需加入class="form-horizontal". 和Label對應的控制項放置在一div標籤中Bootstrap的Grid CSS設定, 以便定義Label和其對應的控制項的相對應尺寸

採用和上例相同程序加入一新的主版負面HorizontalForm.Master, 並加一網頁測試, 效果如下:

參考文獻:
1. Bootstrap Tutorial, http://www.tutorialspoint.com/bootstrap/index.htm