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 相关文章推荐
22点关于jquery性能优化的建议
May 28 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
vue开发移动端底部导航条功能
Apr 08 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
php基础知识:类与对象(1)
2006/12/13 PHP
php SQL之where语句生成器
2009/03/24 PHP
php开发环境配置记录
2011/01/14 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python简单读取json文件功能示例
2017/11/30 Python
python删除字符串中指定字符的方法
2018/08/13 Python
通过cmd进入python的实例操作
2019/06/26 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
小学教师岗位职责
2013/11/25 职场文书
家长给孩子的评语
2014/01/30 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
住房租房协议书
2014/08/20 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript
Apache自带的ab压力测试工具的实现
2022/07/23 Servers