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 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
Node.js实现数据推送
Apr 14 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
vue中简单弹框dialog的实现方法
Feb 26 Javascript
js实现多图和单图上传显示
Dec 18 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
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
python中while和for的区别总结
2019/06/28 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python实现超级马里奥
2020/03/18 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
.NET现在共支持多少种语言
2014/02/26 面试题
机电工程学生自荐信范文
2013/12/07 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
服务口号大全
2014/06/11 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
成都人事代理协议书
2014/10/25 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB