Bootstrap-表单控件

最新推荐文章于 2025-05-30 15:52:55 发布

原创最新推荐文章于 2025-05-30 15:52:55 发布 · 918 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #表单 #控件

Bootstrap 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用Bootstrap美化HTML表单，包括单行输入框、下拉选择框、文本域、复选框、单选按钮及按钮等元素，并提供具体用法示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、单行输入框（input的type属性值为text）

用法：

<form>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="请输入用户名" />   
    </div> 
</form>

注：bootatrap中input值必须添加type类型，因为样式是通过type属性来定义，为了让控件（select、input、textarea）在各种表单风格中样式不出错，需要添加类名“form-control”

2、下拉选者框（select）

用法：

<form>
    <div class="form-group">
        <select  class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
    </div> 
</form>

注：用法和原始一致，多行选择设置multiple的值为multiple

<form>
    <div class="form-group">
        <select multiple class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
    </div> 
</form>

3、文本域textarea

用法：和原始相同，rows和cols分别定义高度和宽度，但是添加类名“form-control”后无需设置cols值，因为在bootstrap中其宽度设置为auto或者100%

<form>
    <div class="form-group" >
        <textarea class="form-control" rows="4">    
        </textarea>
    </div> 
</form>

总结：input 、select、textarea和原来使用方法相同，增加了类名“form-control”来维持基本的样式

4、复选框checkbox和单选按钮radio

源码：

.radio,
.checkbox {display: block;min-height: 20px;padding-left: 20px;margin-top: 10px;margin-bottom: 10px;}
.radio label,
.checkbox label {display: inline;font-weight: normal;cursor: pointer;}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {float: left;margin-left: -20px;}
.radio + .radio,
.checkbox + .checkbox {margin-top: -5px;}

用法：

<form>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="">记住密码
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" value="like" checked="checked" />喜欢
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" value="hate" />不喜欢
        </label>
    </div>
</form>

说明：checkbox和radio均用label标签包起来；

checkbox和label标签一起放在了“.checkbox”容器内（垂直方向排列）；

radio和label标签一起放在了".radio"容器内（垂直方向排列）。

5、复选框和单选按钮水平排列

源码：

.radio-inline,
.checkbox-inline {display: inline-block;padding-left: 20px;margin-bottom: 0;font-weight: normal;vertical-align: middle;cursor: pointer;}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {margin-top: 0;margin-left: 10px;}

用法：

<form role="form">
<div class="form-group">
        <label class="radio-inline">
            <input type="radio" value="option1" name="sex" />男性
        </label> 
        <label class="radio-inline">
            <input type="radio" value="option1" name="sex" />女性
        </label>  
        <label class="radio-inline">
            <input type="radio" value="option1" name="sex" />中性
        </label>    
</div>
</form>

说明：如果checkbox需要水平排列，只需在label标签添加类名“.checkbox-inline”；

如果radio需要水平排列，只需在label标签添加类名".radio-inline"；

不需要在label标签外包裹有“radio“或者”checkbox”的容器；

radio需要 type、value、name齐全才能有单选效果。

6、按钮

制作按钮的常用方式：

☑ input[type=“submit”]

☑ input[type=“button”]

☑ input[type=“reset”]

☑ <button>

在bootstrap中采用button来实现：