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 源代码显示控件 (Ajax加载方式).
May 18 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 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框架 深入了解MVC运行流程
2016/09/19 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
node网页分段渲染详解
2016/09/05 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
js表单登陆验证示例
2016/10/19 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
python远程连接服务器MySQL数据库
2018/07/02 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python 内置函数汇总详解
2019/09/16 Python
python读取Kafka实例
2019/12/23 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
医药类个人求职的自我评价
2014/02/12 职场文书
药店促销活动总结
2014/07/10 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL
5个实用的JavaScript新特性
2022/06/16 Javascript