設計較複雜的Bootstrap Form

除了依照
Bootstrap 的 Form (Part 1) Bootstrap 的 Form (Part 2) Bootstrap 的 Form (Part 3)
Bootstrap 的 Form (Part 4)
四文中所描述的方式設計Bootstrap表單之外,我們尚可自己設計較雜佈局的表單.

首先我們先依照在Visual Studio ASP .Net空白網站範本中加入Bootstrap (Part 1)的程序新增一個使用主版頁面的WebForm.

請注意所用的主版頁面是在Visual Studio ASP .Net空白網站範本中加入Bootstrap (Part 1)所設置的主版負面, form 標籤中並沒有加上垂直式, 水平式或直線式佈局的CSS class.

方法是由上往下放置數個div標籤, 並加上class="from-group" CSS屬性.

然後使用數個div標籤及Bootstrap v3.2.0 Grid 系統(Part 1)一文中所介紹的Bootstrap Grid CSS
去把容器切為幾個水平方向的格子並設定寬度比例. 接下來在每個格子中放入你想的控制項即可. 在放入Label控制項時記得宴加上class="control-label" CSS屬性, 如下圖