在Bootstrap3.0中，表单元素的排版是构建高效且美观的用户界面的关键部分。Bootstrap提供了强大的栅格系统和预定义的类，使得创建响应式和整齐的表单变得简单。本教程将深入探讨如何使用Bootstrap3.0来实现文字与输入框的前后排列以及上下排列。
1. 文字和输入框前后排列：
在Bootstrap中，可以使用`.form-group`类来组织表单元素。`.form-group`是一个内联样式，用于在一行内展示输入框和相关的标签。以下是一个例子：
```html
<div class="form-group">
<label for="inputText" class="col-md-4 control-label">归属地</label>
<div class="col-md-4">
<!-- 输入框或下拉列表 -->
</div>
<div class="col-md-4">
<!-- 另一个输入框或下拉列表 -->
</div>
</div>
```
在这个例子中，`.control-label`用于创建标签，`.col-md-*`类用于设置输入框和标签的宽度，以实现前后排列。Bootstrap的栅格系统允许你根据屏幕尺寸调整列宽，确保在不同设备上布局的适应性。
2. 文字和输入框上下排列：
如果希望输入框和其标签垂直堆叠，可以保持`.form-group`结构不变，但移除`.control-label`的`col-md-*`类，使其占据整个宽度。例如：
```html
<div class="form-group">
<label for="inputText">归属地</label>
<div class="col-md-12">
<!-- 输入框或下拉列表 -->
</div>
</div>
```
这里，标签不再与输入框并排，而是位于输入框之上，两者都占据12列（即满屏宽度）。
3. 使用Bootstrap3.0的其他表单组件：
Bootstrap还提供了一些预定义的表单控件，如`.form-control`，它为输入框、文本区域和选择框添加统一的样式。例如：
```html
<input type="text" class="form-control" id="inputText" placeholder="输入文本">
```
此外，Bootstrap支持多种类型的输入，包括文本、密码、邮箱、数字等，只需通过`type`属性进行指定。
4. 下拉列表和联动效果：
在示例中，我们看到了`<asp:DropDownList>`用于创建下拉列表。当一个下拉列表的选择发生变化时，可以通过`AutoPostBack="True"`和`OnSelectedIndexChanged`事件触发页面的异步回发，更新另一个下拉列表的内容。这在创建动态联动的表单时非常有用。
```html
<asp:DropDownList ID="ddlsheng" ... OnSelectedIndexChanged="ddlsheng_SelectedIndexChanged" />
<asp:UpdatePanel>...</asp:UpdatePanel>
```
在`UpdatePanel`中，`<asp:AsyncPostBackTrigger>`定义了触发异步回发的控件和事件，使得只更新面板内的内容，而不是整个页面，提高用户体验。
5. 响应式设计：
Bootstrap3.0的栅格系统支持响应式布局，可以根据屏幕尺寸自动调整元素的排列方式。例如，`.col-lg-*`针对大屏幕，`.col-sm-*`针对小屏幕，`.col-xs-*`针对超小屏幕，`.col-xxs-*`则是最小的屏幕尺寸。这样，表单可以在不同设备上呈现出最佳的视觉效果。
总结：
Bootstrap3.0的表单排版能力强大且灵活，结合其栅格系统和响应式特性，能够轻松创建出适应各种设备的表单。通过合理使用`.form-group`、`.control-label`、`.col-md-*`等类，可以实现文字与输入框的前后排列和上下排列，同时，配合其他表单组件和事件处理，可以构建功能丰富的交互式表单。
