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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 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
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[00:16]热血竞技场
2019/03/06 DOTA
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
教师岗位职责
2013/11/17 职场文书
元旦促销方案
2014/03/15 职场文书
2015年化验员工作总结
2015/04/10 职场文书
阿凡达观后感
2015/06/10 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python