Bootstrap 表单组件使用指南

因为工作原因会经常接触表单元素，学习使用了 Bootstrap 的表单组件。下面是我总结的 Bootstrap 中表单组件的使用指南。

下面例子中，使用的代码是 Bootstrap 4.3 版本的

.form-control

.form-control 是表单组件最小的组成单位。这个类用在 <input>、<select> 和 <textarea> 上。

<!-- 输入框 -->
<input type="text" class="form-control">
<input type="number" class="form-control">
<input type="password" class="form-control">
<input type="date" class="form-control">

<!-- 选择框 -->
<select class="form-control">
    <option>1</option>
    <option>2</option>
</select>

<!-- 文本域 -->
<textarea class="form-control" rows="3"></textarea>

演示地址：codepen.io/zhangbao/pe…

默认的 .form-control 使用了 display: block、width: 100%; 两个样式，因此是独占一行的。

我们发现上下表单控件垂直方向紧紧挨在一起了，需要保持一定的间距，这时可以使用 .form-group。

.form-group

<div class="form-group">
    <input type="text" class="form-control">
</div>
<div class="form-group">
    <select class="form-control">
        <option>1</option>
        <option>2</option>
    </select>
</div>
<div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
</div>

演示地址：codepen.io/zhangbao/pe…

现在就好看啦，因为 .form-group 身上只有一个样式 margin-bottom: 1rem，这就比较开心了。

当然，.form-group 的作用不止于，它可以用来封装一个单独“表单控件套装”的：label、input 和 .form-text。

<div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" placeholder="Enter email">
    <small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
    <label>Example select</label>
    <select class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
<div class="form-group">
    <label>Example textarea</label>
    <textarea class="form-control" rows="3"></textarea>
</div>

演示地址：codepen.io/zhangbao/pe…

.form-text 的样式是：display: block; margin-top: 0.25rem;。要确保每一个 .form-control 都有一个 label 与之对应，即使无需显示 label，也要有一个 label.sr-only 来修饰表单控件。

.form-inline

更进一步，如果想要表单控件水平排列，怎么做呢？这就要用到 .form-inline 了，这个类用来实现行内表单组件。

将上面的代码封装。

<div class="form-inline">
    <!-- ... -->
</div>

.form-inline 使用了 display: flex，.form-inline .form-group 也使用了 display: flex，所以会发现都水平排列在一起了。这时还需要添加一些 space 工具类，控制元素水平和垂直方向上的间距。

<div class="form-inline mb-2">
    <div class="form-group mr-3">
        <label>Email address</label>
        <input type="email" class="form-control mx-2" placeholder="Enter email">
        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group mr-3">
        <label >Example select</label>
        <select class="form-control mx-2">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group mr-3">
        <label>Example textarea</label>
        <textarea class="form-control mx-2" rows="3"></textarea>
    </div>
</div>

我们给 .form-inline 加了 .mb-2 保证上下间距；给 .form-group 加了 .mr-3 保证左右间距；给 .form-control 加了 .mx-2 控制与 label 和 .form-text 之间的间距。

.form-inline 的使用范围还是有限的，更常用到的是 .form-group.row 的形式组织水平表单布局。

行内表单控件套件

下面直接看代码：

<div class="form-group row">
    <label class="col-2">Email address</label>
    <div class="col-10">
        <input type="email" class="form-control" placeholder="Enter email">
        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
</div>
<div class="form-group row">
    <label class="col-2">Example select</label>
    <div class="col-10">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</div>
<div class="form-group row">
    <label class="col-2">Example textarea</label>
    <div class="col-10">
        <textarea class="form-control" rows="3"></textarea>
    </div>
</div>

地址：codepen.io/zhangbao/pe…

.form-group 加 .row；label 为一组，input 与 .form-text，添加 col-* 即可。

当然了，如果 Email address 和 Example select 在一行也很好办。再加一层 .row。

<div class="row">
    <div class="form-group col-6 row">
        <label class="col-4">Email address</label>
        <div class="col-8">
            <input type="email" class="form-control" placeholder="Enter email">
            <small class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
    </div>
    <div class="form-group col-6 row">
        <label class="col-4">Example select</label>
        <div class="col-8">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
</div>
<div class="form-group row">
    <label class="col-2">Example textarea</label>
    <div class="col-10">
        <textarea class="form-control" rows="3"></textarea>
    </div>
</div>

演示地址：codepen.io/zhangbao/pe…

也可以使用 .form-row 代替 .row，获得更小的水平间距。

演示地址：codepen.io/zhangbao/pe…

（完）