Bootstrap笔记4—表单

Bootstrap表单样式详解

最新推荐文章于 2025-10-12 09:34:53 发布

原创最新推荐文章于 2025-10-12 09:34:53 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

Bootstrap 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了使用Bootstrap框架进行表单样式设计的方法，包括默认样式、行内显示、隐藏标签文本、单选与多选框布局、输入框焦点设置及图标添加等技巧。

1.默认表单样式

这里写图片描述

class="form-control"是宽度100%占满整个容器
class="form-control"是两个表单之间相距15px;

<div class="col-md-4">
    <form action="#" method="post">
        <fieldset>
            <legend>用户登录</legend>
            <div class="form-group">
                <label for="">用户名：</label>                                          
                <input type="text" class="form-control" name="name" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="">密&nbsp;码：</label>
                <input type="password" class="form-control" name="password" placeholder="请输入密码">
            </div>
            <div class="checkbox">
                <label><input type="checkbox" />记住密码</label>
            </div>
            <button type="submit" class="btn btn-default">登录</button>
        </fieldset>
    </form>
</div>

2.表单一行显示

这里写图片描述

直接在表单加类class="form-inline"，如下：

<form action="#" method="post" class="form-inline">...</form>

3.表单不显示前面文字

这里写图片描述

在label里添加类class="sr-only"如下：

<div class="form-group">
    <label for="" class="sr-only">用户名：</label>
    <input type="text" class="form-control" name="name" placeholder="请输入用户名">
</div>
<div class="form-group">
    <label for="" class="sr-only">密&nbsp;码：</label>
    <input type="password" class="form-control" name="password" placeholder="请输入密码">
</div>

4.单选框和多选框

4.1垂直显示

这里写图片描述

checked是默认选中。

<form action="#" method="post">
    <div class="checkbox">
        <label><input type="checkbox" checked>苹果</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox">香蕉</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox">橙子</label>
    </div>
    <div class="radio">
        <label><input type="radio" name="sex" value="M">男</label>
    </div>
</form>

4.2一行显示

这里写图片描述

给label添加类比如多选框添加class="checkbox-inline"，单选框添加class="radio-inline"如下：

<div class="checkbox">
    <label class="checkbox-inline"><input type="checkbox" checked>苹果</label>
    <label class="checkbox-inline"><input type="checkbox">香蕉</label>
    <label class="checkbox-inline"><input type="checkbox">橙子</label>
</div>

5.状态

5.1页面加载完后输入框自动获得焦点

给input标签添加autofocus

<input type="text" class="form-control" autofocus name="name" placeholder="请输入用户名" >

5.2添加小图标

这里写图片描述

要添加两处：1.表单组要添加类has-feedback如下面第一行。2.sapn添加图标样式和form-control-feedback如下面的span标签。

<div class="form-group has-feedback">
    <label for="" class="sr-only">用户名：</label>
    <input type="text" class="form-control" name="name" placeholder="请输入用户名">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>

5.3输入框前加图标

这里写图片描述

<div class="col-sm-3 col-sm-offset-2">
    <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-user"></span>
        </span>
        <input type="text" class="form-control">
    </div>
</div>

5.4输入框后面加图标

这里写图片描述

<div class="col-sm-3 col-sm-offset-2">
    <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
        </span>
    </div>
</div>