一些关于表单控件的归纳

深碍√TFBOYSˉ_ 2021-09-15 01:54 384阅读 0赞

<div class="container">  
  <h2>表单控件: textarea</h2>  
  <p>以下实例演示了 textarea 的样式。</p>  
  <form>  
    <div class="form-group">  
      <label for="comment">评论:</label>  
      <textarea class="form-control" rows="5" id="comment"></textarea>  
    </div>  
  </form>

</div>

![70][]

## Bootstrap 复选框(checkbox) ##

<h2>表单控件: checkbox</h2>  
  <p>以下实例包含了三个选项。最后一个是禁用的：</p>  
  <form>  
    <div class="form-check">  
      <label class="form-check-label">  
        <input type="checkbox" class="form-check-input" value="">Option 1  
      </label>  
    </div>  
    <div class="form-check">  
      <label class="form-check-label">  
        <input type="checkbox" class="form-check-input" value="">Option 2  
      </label>  
    </div>  
    <div class="form-check disabled">  
      <label class="form-check-label">  
        <input type="checkbox" class="form-check-input" value="" disabled>Option 3  
      </label>  
    </div>  
  </form>

</div>

![70 1][]

使用 **.form-check-inline** 类可以让选项显示在同一行上

单选框

<h2>表单控件: radio</h2>  
  <p>以下实例包含了三个选项。最后一个是禁用的：</p>  
  <form>  
    <div class="radio">  
      <label><input type="radio" name="optradio">Option 1</label>  
    </div>  
    <div class="radio">  
      <label><input type="radio" name="optradio">Option 2</label>  
    </div>  
    <div class="radio disabled">  
      <label><input type="radio" name="optradio" disabled>Option 3</label>  
    </div>  
  </form>

</div>

![70 2][]

![70 3][]

下拉菜单

<div class="container">  
  <h2>表单控件: select</h2>  
  <p>以下表单包含了两个下拉菜单 (select 列表):</p>  
  <form>  
    <div class="form-group">  
      <label for="sel1">单选下拉菜单:</label>  
      <select class="form-control" id="sel1">  
        <option>1</option>  
        <option>2</option>  
        <option>3</option>  
        <option>4</option>  
      </select>  
      <br>  
      <label for="sel2">多选下拉菜单(按住 shift 键，可以选取多个选项):</label>  
      <select multiple class="form-control" id="sel2">  
        <option>1</option>  
        <option>2</option>  
        <option>3</option>  
        <option>4</option>  
        <option>5</option>  
      </select>  
    </div>  
  </form>

</div>

![70 4][]

[70]: /images/20210813/11f2d0da8ed34297a20ec2915cdffc01.png
[70 1]: /images/20210813/854e47a741d6480e87fe240c9dd61edd.png
[70 2]: /images/20210813/f46f0b99d1b84bc08fb21a89e8591d4b.png
[70 3]: /images/20210813/d2bf12a88b3e4fc3a5b592d29db2e2e9.png
[70 4]: /images/20210813/6bc2111b5db2415a84f68ff81439aa03.png