bootstrap-水平表单

Bootstrap是一个流行的开源前端框架，可以快速构建现代化的web应用程序。在Bootstrap中，表单是一个很重要的组件，它可以让用户轻松输入和提交数据。本篇文章将介绍Bootstrap中的水平表单，包括其基本结构、样式和特点。

一、什么是水平表单？

水平表单是指表单控件水平排列的表单样式。传统的垂直表单一般是将标签和控件分别放在两个独立的列中，而水平表单则是将标签和控件放在同一行内，标签在左边，控件在右边。水平表单可以更好地利用页面宽度，使表单更加美观和易于使用。

二、水平表单的基本结构

Bootstrap的水平表单由一组标签和控件组成，在HTML中表现为一个表格，其基本结构如下：

<form>
  <div class="form-group row">
    <label for="inputUsername" class="col-sm-2 col-form-label">用户名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputEmail" class="col-sm-2 col-form-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
    </div>
  </div>
  <!-- 其他表单项 -->
  <div class="form-group row">
    <div class="col-sm-2"></div>
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>

在上述示例代码中，我们首先使用<form>标签创建表单元素，然后使用<div class="form-group row">标签创建一个表单组。<div class="form-group">表示一个表单控件组，<div class="row">表示一个行元素，即表单控件和标签在同一行内。然后我们使用<label>标签和<input>标签分别创建表单标签和控件。<label>标签中的for属性与<input>标签中的id属性相同，用于将标签与控件关联起来。Bootstrap中使用<div class="col-sm-2">和<div class="col-sm-10">将标签和控件分别占据2/10的宽度，使它们在同一行内并居中对齐。最后我们使用<button>标签来创建提交按钮。

三、水平表单的样式

Bootstrap的水平表单有几种样式可供选择，其中包括默认样式、内联样式和整行样式。

1、默认样式

默认样式是最常用的样式，它使标签和控件在同一行内并采用标准的表格样式。我们只需要按照上面的基本结构创建表单元素即可使用默认样式。

2、内联样式

内联样式（inline form）将标签和控件放在同一行内，并采用水平排列的样式。内联表单适用于小型表单，例如搜索表单和登录表单。我们可以将表单组的类名改为<div class="form-group row form-inline">，然后将标签的<label>标签中添加class="sr-only"，以隐藏标签名称。代码如下：

<form>
  <div class="form-group row form-inline">
    <label for="inputUsername" class="sr-only">用户名</label>
    <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名">
    <label for="inputEmail" class="sr-only">邮箱</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>

3、整行样式

整行样式（form-horizontal）使表单占据整个屏幕宽度，适用于大型表单。我们只需要将表单组的类名改为<div class="form-group row form-horizontal">即可。整行样式在表单控件和标签在同一行内的基础上增加了一条横线，使表单更加美观。代码如下：

<form>
  <div class="form-group row form-horizontal">
    <label for="inputUsername" class="col-sm-2 col-form-label">用户名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名">
    </div>
  </div>
  <div class="form-group row form-horizontal">
    <label for="inputEmail" class="col-sm-2 col-form-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
    </div>
  </div>
  <!-- 其他表单项 -->
  <div class="form-group row">
    <div class="col-sm-2"></div>
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>

四、水平表单的特点

1、美观易用

Bootstrap的水平表单采用水平排列的方式，使表单更加美观和易于使用。同时，它还提供了几种不同的样式，可以根据具体应用场景进行选择。

2、适应性强

Bootstrap的水平表单适应性强，可以自动适应不同的屏幕尺寸。在小屏幕上，表单控件会自动变成垂直排列，以适应较小的屏幕。

3、灵活性高

Bootstrap的水平表单非常灵活，可以根据实际情况进行自定义。例如，可以改变表单元素的宽度和对齐方式，从而满足不同的设计需求。

总之，Bootstrap的水平表单是一个非常实用的表单样式，可以大大提高表单的美观度和易用性。在实际项目中，我们可以根据具体需求来选择不同的表单样式，并且可以根据需要进行自定义。