Bootstrap 4 表单控件
Bootstrap 4 支持以下表单控件
- input
- textarea
- checkbox
- radio
- select
<input>
Bootstrap 支持所有的 HTML5 输入类型
text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color
但需要注意的是，如果 input 的 type 属性未正确声明，输入框的样式将不会显示
<div class="form-group"> <label for="usr">用户名:</label> <input type="text" class="form-control" id="usr"> </div> <div class="form-group"> <label for="pwd">密码:</label> <input type="password" class="form-control" id="pwd"> </div>
<textarea>
Bootstrap 4 对 <textarea> 元素的样式进行了重新定义
<div class="form-group"> <label for="comment">评论:</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div>
复选框( checkbox )
复选框用于让用户从一系列预设置的选项中进行选择，可以选一个或多个
<div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Python </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">PHP </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" disabled>Perl </label> </div>
内联复选框( checkbox )
添加 .form-check-inline 可以让复选框选项显示在同一行上
<div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Python </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">PHP </label> </div> <div class="form-check form-check-inline disabled"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" disabled>Perl </label> </div>
单选框( radio )
单选框( radio )用于让用户从一系列预设置的选项中进行选择，只能选一个
<div class="radio"> <label><input type="radio" name="optradio">PHP</label> </div> <div class="radio"> <label><input type="radio" name="optradio">Python</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio" disabled>Perl</label> </div>
内联单选框( radio )
添加 .radio-inline 可以让单选框选项显示在同一行上
<label class="radio-inline"><input type="radio" name="optradio">Python</label> <label class="radio-inline"><input type="radio" name="optradio">PHP</label> <label class="radio-inline"><input type="radio" name="optradio">Perl</label>
下拉菜单 <select>
下拉菜单 <select> 可以让用户从多个选项中进行选择，但是默认情况下只能选择一个选项
当选项大于 3 个时，使用下拉菜单 <select> 比单选框更好
<div class="form-group"> <label for="sel1">下拉菜单:</label> <select class="form-control" id="sel1"> <option>Python</option> <option>PHP</option> <option>Perl</option> <option>Java</option> </select> </div>