没有合适的资源?快使用搜索试试~ 我知道了~
如何使用Bootstrap创建表单
0 下载量 198 浏览量
2020-12-09
21:21:25
上传
评论
收藏 235KB PDF 举报
温馨提示
试读
7页
Bootstrap 表单 在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤: – 向父 <form> 元素添加 role=”form”。 – 把标签和控件放在一个带有 class .form-group 的 中。这是获取最佳间距所必需的。 – 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。 <
资源推荐
资源详情
资源评论
如何使用如何使用Bootstrap创建表单创建表单
Bootstrap 表单表单
在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式
的表单。
垂直或基本表单垂直或基本表单
基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:
– 向父 <form> 元素添加 role=”form”。
– 把标签和控件放在一个带有 class .form-group 的
中。这是获取最佳间距所必需的。
– 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
效果
内联表单内联表单
如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form>标签添加 class .form-inline。
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
资源评论
weixin_38651286
- 粉丝: 8
- 资源: 890
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功