Bootstrap4 表单form-control以及表单控件
2018-03-23 14:59
417 查看
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>
内联表单
所有内联表单中的元素都是左对齐的。注意:在屏幕宽度小于 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>
相关文章推荐
- bootstrap的form表单控件的事例
- 【ZT】asp.NET去掉form的runat="server"照样使用服务器控件,包括表单的服务器控件
- 表单Form以及表单元素,框架集(了解)及iframe(重点)
- HTML的表单form以及form内部标签
- 表单中涉及到的日期控件以及日期时间控件遇到的坑。
- Struct1中 Form表单提交的几种方式以及无刷新提交的方式
- [学习][记录][转]JS组件系列——Form表单验证神器: BootstrapValidator
- JS组件系列——Form表单验证神器: BootstrapValidator
- Bootstrap历练实例:表单控件状态(禁用)
- 全面解析Bootstrap表单使用方法(表单控件状态)
- form表单是modelAttribute以及path属性的使用
- form表单以及常用组件
- bootstrap26-表单控件大小
- MVC4相关Razor语法以及Form表单(转载)
- bootstrap 的表单控件状态(禁用状态)
- Asp.Net Form表单控件的回车默认事件
- ajax上传form表单或者文件以及结合validate验证
- 创建完全支持dojox.form.manager的自定义表单控件
- 关于Vfp表单全部控件控制【thisform.setall】!(经典)
- form表单常见的控件