Bootstrap表单布局样式源代码


Posted in Javascript onJuly 04, 2016

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

内联表单:
内联表单中所有元素都向左对齐,标签并排,要创建内联表单,需要在form标签中加入class.form-inline

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

Bootstrap表单布局样式如下

Bootstrap表单布局样式源代码

实现代码:

<form class="form-horizontal" role="form">
     <fieldset>
      <legend>配置数据源</legend>
      <div class="form-group">
       <label class="col-sm-2 control-label" for="ds_host">主机名</label>
       <div class="col-sm-4">
        <input class="form-control" id="ds_host" type="text" placeholder="192.168.1.161"/>
       </div>
       <label class="col-sm-2 control-label" for="ds_name">数据库名</label>
       <div class="col-sm-4">
        <input class="form-control" id="ds_name" type="text" placeholder="msh"/>
       </div>
      </div>
      <div class="form-group">
       <label class="col-sm-2 control-label" for="ds_username">用户名</label>
       <div class="col-sm-4">
        <input class="form-control" id="ds_username" type="text" placeholder="root"/>
       </div>
       <label class="col-sm-2 control-label" for="ds_password">密码</label>
       <div class="col-sm-4">
        <input class="form-control" id="ds_password" type="password" placeholder="123456"/>
       </div>
      </div>
     </fieldset>  
     <fieldset>
       <legend>选择相关表</legend>
      <div class="form-group">
       <label for="disabledSelect" class="col-sm-2 control-label">表名</label>
       <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
         <option>禁止选择</option>
         <option>禁止选择</option>
        </select>
       </div>
      </div>
     </fieldset>
     
      <fieldset>
       <legend>字段名</legend>
      <div class="form-group">
       <label for="disabledSelect" class="col-sm-2 control-label">表名</label>
       <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
         <option>禁止选择</option>
         <option>禁止选择</option>
        </select>
       </div>
      </div>
     </fieldset>
    </form>

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

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

Javascript 相关文章推荐
javascript之bind使用介绍
Oct 09 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
AngularJS语法详解
Jan 23 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 Javascript
JS JSOP跨域请求实例详解
Jul 04 #Javascript
json格式的javascript对象用法分析
Jul 04 #Javascript
jQuery简单动画变换效果实例分析
Jul 04 #Javascript
Node.js Streams文件读写操作详解
Jul 04 #Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 #Javascript
jQuery实现的导航下拉菜单效果
Jul 04 #Javascript
表单中单选框添加选项和移除选项
Jul 04 #Javascript
You might like
简单易用的计数器(数据库)
2006/10/09 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
jquery 常用操作方法
2010/01/28 Javascript
js中有关IE版本检测
2012/01/04 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
JS中Location使用详解
2015/05/12 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
学生操行评语大全
2014/04/24 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
购房协议书范本
2014/10/02 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL