bootstrap4--表单

最新推荐文章于 2024-06-25 02:31:47 发布

张0x0

最新推荐文章于 2024-06-25 02:31:47 发布

阅读量3.7k

点赞数

分类专栏： web前端基础学习文章标签：前端 bootstrap css

本文链接：https://blog.csdn.net/zxn200125/article/details/122041308

版权

表单是我们在html中学过的内容了，bootstrap中就是使用html标签和扩展的类来创建不同样式的表单。

表单布局

bootstrap中表单布局分为两种：堆叠表单(垂直方向)、内联表单(水平方向)

堆叠表单：

1.最外层包裹<form>标签

2.内部表单项(标签和控件)使用<div>元素进行存放设置，一般输入框设置.form-group类，复选框设置.form-check类

3.将所有文本元素(<input>,<select>等)添加class="form-control"类

内联表单(在屏幕宽度<576px时垂直堆叠，反之显示在同一水平线上，默认左对齐)：

1.在堆叠表单的基础上，向<form>标签添加.form-inline类

2.去除<div>标签

上面步骤在对于复选框设置要额外注意，内联表单中的<div>标签是不能够去除的，我们可以看看设置两者设置同样的内容有什么不同：

    <div class="container">
        <!-- 堆叠表单 -->
        <p>堆叠表单</p>
        <form class="col-md-3">
            <!-- 输入框 -->
            <div class="form-group">
                <label for="name">用户名：</label>
                <input type="text" class="form-control" id="name">
            </div>
            <div class="form-group">
                <label for="pwd">密码：</label>
                <input type="password" class="form-control" id="pwd">
            </div>
            <!-- 复选框 -->
            <div class="form-check">
                <label class="form-check-label">
                    <input type="checkbox" class="form-check-input"> 复选框
                </label>
            </div>
            <!-- 提交按钮 -->
            <button type="submit" class="btn btn-info">提交</button>
        </form>
        <br>
        <!-- 内联表单 -->
        <p>内联表单</p>
        <form class="form-inline">
            <label for="name">用户名：</label>
            <input type="text" class="form-control" id="name">
            <label for="pwd">密码：</label>
            <input type="password" class="form-control" id="pwd">
            <div class="form-check">
                <label class="form-check-label">
                    <input type="checkbox" class="form-check-input"> 复选框
                </label>
            </div>
            <button type="submit" class="btn btn-info">提交</button>
        </form>
    </div>

显示效果：

输入框组

使用输入框组能够向基于文本的输入框添加前缀和后缀的文本或按钮，通过向输入域添加前缀和后缀的内容，我们可以向用户输入添加公共的元素。添加前缀或后缀元素步骤如下：

1.将前缀或后缀元素放在一个带有.input-group类的<div>中

2.在<div>内，再创建一个<div>，前缀使用.input-group-prepend类，后缀使用.input-group-append类

3.在内部<div>中的<span>内放置前缀或者后缀，使用.input-group-text类设置文本样式

4.将内部<div>放置在input输入框前面或者后面

基本添加前缀和后缀代码如下：

        <form>
            <div class="input-group">
                <!-- 输入框添加前缀 -->
                <div class="input-group-prepend">
                    <span class="input-group-text">前缀</span>
                </div>
                <input type="text" class="form-control" placeholder="输入框1">
            </div><br>
            <div class="input-group">
                <!-- 输入框添加后缀 -->
                <input type="text" class="form-control" placeholder="输入框2">
                <div class="input-group-append">