zoukankan      html  css  js  c++  java
  • Bootstrap4 表单

    [

    Bootstrap4 表单
    在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
    表单元素 <input>, <textarea>, 和

    <select> elements

    在使用 .form-control 类的情况下,宽度都是设置为 100%。

    Bootstrap4 表单布局

    堆叠表单 (全屏宽度):垂直方向
    内联表单:水平方向

    Bootstrap 提供了两种类型的表单布局:

    堆叠表单

    以下实例使用两个输入框,一个复选框,一个提交按钮来创建堆叠表单:

    实例

    <form>
    <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
    </div>
    <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
    </div>
    <div class="form-check">
    <label class="form-check-label">
    <input class="form-check-input" type="checkbox"> Remember me
        </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    

    内联表单

    所有内联表单中的元素都是左对齐的。
    注意:在屏幕宽度小于 576px 时为垂直堆叠,如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。
    内联表单需要在 <form> 元素上添加 .form-inline类。

    ]
    转载请保留页面地址:https://www.breakyizhan.com/bootstrap/17384.html
  • 相关阅读:
    centos7修改时区EDT------CST
    七种可能 | Linux丢包故障的定位与解决
    TCP超时、ping不丢包排查
    JavaScript 判断变量是否为空---三元运算,元组获取值-重组.map()。
    SSH 正、反向代理实现稳定的内网穿透实验_
    V3
    V3
    I4-6 At the hotel Teacher: Maggie
    English Voice of <<Everything I Need >>
    V3
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13286369.html
Copyright © 2011-2022 走看看