您当前的位置:首页 > bootstrap > bootstrap4知识

bootstrap4知识-表单控件

时间:2020-10-29 00:36:29    来源:    作者:

1. input

类型有 text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color
注意:: 如果 input 的 type 属性未正确声明,输入框的样式将不会显示。
 

2. textarea

<div class="form-group">
  <label for="comment">评论:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

3. 复选框(checkbox)

<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check form-check-inline disabled">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>


4. 单选框(Radio)

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

5. select下拉菜单

.multiple 类 可以选择多个
<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>
</div>
推荐资讯