Bootstrap 4 基础教程Bootstrap 4 安装Bootstrap 4 基本框架Bootstrap 4 网格系统Bootstrap 4 文字排版Bootstrap 4 文本颜色Bootstrap 4 背景颜色Bootstrap 4 表格Bootstrap4 图像效果Bootstrap 4 超大屏幕 ( Jumbotron )Bootstrap 4 信息提示框Bootstrap 4 按钮Bootstrap 4 按钮组Bootstrap4 徽章 ( Badges )Bootstrap4 进度条Bootstrap 4 分页Bootstrap 4 面包屑导航Bootstrap 4 列表组Bootstrap 4 卡片组件Bootstrap 4 下拉菜单Bootstrap 4 折叠组件Bootstrap 4 手风琴Bootstrap 4 导航组件Bootstrap 4 导航栏Bootstrap 4 选项卡组件Bootstrap 4 胶囊导航组件Bootstrap 4 表单Bootstrap 4 表单控件Bootstrap4 轮播组件Bootstrap 4 模态框Bootstrap 4 提示框Bootstrap 4 弹出框Bootstrap 4 自动更新导航插件Bootstrap 4 小工具
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>