Bootstrap表单(基本表单、内联表单、水平表单)
来源:互联网 发布:东北农业大学网络自助 编辑:程序博客网 时间:2024/04/29 09:06
<form>
<div>
里<label>
标签<label>
添加垂直或基本表单
基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。创建基本表单的步骤:
(1)向父 <form>
元素添加 role=”form”。
(2)把标签和控件放在一个带有 class .form-group 的 <div
> 中。这是获取最佳间距所必需的。
(3)向所有的文本元素 <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="inputfifle"> <p class="help-block">这是块级帮助文本的实例</p> </div> <div class="checkbox"> <label> <input type="checkbox">请打钩 <label> </div> <button type="submit" class="btn btn-default">提交</button></form>
内联表单
(1)如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,可以向 <form>
标签添加 class .form-inline。
(2)默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。
(3)使用 class .sr-only,您可以隐藏内联表单的标签。
<form role="form" class="form-inline"><div class="form-group"> <label for="name" class="sr-only">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label for="inputfile" class="sr-only">文件输入</label> <input type="file" id="inputfifle"> </div> <div class="checkbox"> <label> <input type="checkbox">请打钩 <label> </div> <button type="submit" class="btn btn-default">提交</button></form>
水平表单
水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:
(1)向父 <form>
元素添加 class .form-horizontal。
(2)把标签和控件放在一个带有 class .form-group 的 <div>
中。
(3)向标签添加 class .control-label。
<form role="form" class="form-horizontal"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="请输入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox">请记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">提交</button> </div> </div></form>
0 0
- Bootstrap表单(基本表单、内联表单、水平表单)
- Bootstrap内联表单
- Bootstrap水平表单
- bootstrap 水平排列表单
- bootstrap水平表单
- bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类
- 表单2-内联表单
- 内联表单
- bootstrap 表单 登录表单
- 水平表单
- 水平表单
- bootstrap表单
- bootstrap表单
- Bootstrap 表单
- Bootstrap表单
- bootstrap表单
- BootStrap表单
- Bootstrap 表单
- (总结)使用springmvc解决各种乱码问题的大汇总
- 内联块状元素 块状元素 内联元素
- 养生
- 关于开发证书,推送证书,发布证书创建的说明(亲测)
- 为什么要有l两个Survivor区
- Bootstrap表单(基本表单、内联表单、水平表单)
- Spark问题1之读入参考序列的adam格式报错empty max
- finally在try和catch块以及return中的执行顺序
- Spark问题2之window下载hdfs文件的hosts设置
- 面经 4
- Toast的使用
- C#程序界的小菜鸟,halcon界的入门者
- 带你熟悉SQLServer2016中的System-Versioned Temporal Table 版本由系统控制的临时表
- 531. Lonely Pixel I ----Leetcode