Bootstrap三种表单布局的使用方法


Posted in Javascript onJune 21, 2016

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单
 创建垂直或基本表单:
 •·向父 <form> 元素添加 role="form"。
 •·把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
 •·向所有的文本元素 <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>

Bootstrap三种表单布局的使用方法

内联表单:
 内联表单中所有元素都向左对齐,标签并排,要创建内联表单,需要在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>

显示效果如下:

Bootstrap三种表单布局的使用方法

注意:默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,需要在表单控件上设置一个宽度。 

水平表单:和其它两种表单有所不同,要创建水平表单需要遵循以下步骤.
 •向父 <form> 元素添加 class .form-horizontal。
 •把标签和控件放在一个带有 class .form-group 的 <div> 中。
 •向标签添加 class .control-label。
 例如: 

<form class="form-horizontal" role="form">
    <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>

显示效果如下:

Bootstrap三种表单布局的使用方法

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
JavaScript中的闭包
Feb 24 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
vue获取form表单的值示例
Oct 29 Javascript
第二篇Bootstrap起步
Jun 21 #Javascript
基于zepto.js简单实现上传图片
Jun 21 #Javascript
第一篇初识bootstrap
Jun 21 #Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 #Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 #Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 #Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 #Javascript
You might like
玩转图像函数库―常见图形操作
2006/09/03 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
Js中获取frames中的元素示例代码
2013/07/30 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
python 同时运行多个程序的实例
2019/01/07 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
英文自荐信
2013/12/19 职场文书
中学家长会邀请函
2014/02/03 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
个人租房协议书
2014/11/28 职场文书
简爱电影观后感
2015/06/10 职场文书
队名及霸气口号大全
2015/12/25 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
工作自我评价范文
2019/03/21 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电
Python中的嵌套循环详情
2022/03/23 Python