Bootstrap4 表单form-control以及表单控件

浅浅的花香味﹌ 2021-09-15 01:50 775阅读 0赞

### Bootstrap4 表单布局 ###

*  堆叠表单 (全屏宽度)：垂直方向

Bootstrap4 支持以下表单控件：

*  input
 *  textarea
 *  checkbox
 *  radio

*  select

*  ## Bootstrap Input ##
    
    Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
    
    注意：: 如果 input 的 type 属性未正确声明，输入框的样式将不会显示。
    
    以下实例使用两个 input 元素，一个是 text，一个是 password ：
    
     *  内联表单：水平方向
 *    
    
 *  <div class="container">  
      <h2>堆叠表单</h2>  
      <form>  
      <div class="form-group">  
          <label for="zhanghao">帐号:</label>  
          <input type="帐号"  id="zhanghao" placeholder="请输入帐号">  
        </div>  
        <div class="form-group">  
          <label for="zhanghao">帐号:</label>  
          <input type="帐号" class="form-control" id="zhanghao" placeholder="请输入帐号">  
        </div>  
        <div class="form-group">  
          <label for="pwd">密码:</label>  
          <input type="password" class="form-control" id="pwd" placeholder="请输入密码">  
        </div>  
        <div class="form-check">  
          <label class="form-check-label">  
            <input class="form-check-input" type="checkbox">提交  
          </label>  
        </div>  
        <button type="submit" class="btn btn-primary">确定</button>  
      </form>  
    </div>
 *  ![70][]  
    
 *  ## 内联表单 ##
    
    所有内联表单中的元素都是左对齐的。
    
    注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。
    
    内联表单需要在 **<form>** 元素上添加 **.form-inline**类。
    
    以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单：
    
      
    
 *   <form class="form-inline">  
    
 *    
      
    <div class="container">  
      <h2>内联表单</h2>  
      <p>屏幕宽度在大于等于 576px 时才会水平显示。如果小于 576px 则会生成堆叠表单。</p>  
      <form class="form-inline">  
        <label for="email">Email:</label>  
        <input type="email" class="form-control" id="email" placeholder="Enter email">  
        <label for="pwd">Password:</label>  
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">  
        <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>  
    </div>

![70 1][]

[70]: /images/20210813/81493c80adfa430fa9e98e5337daef8f.png
[70 1]: /images/20210813/e7e0d32a35fc4edc937c22c55ff7f5ff.png