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 相关文章推荐
jQuery MD5加密实现代码
Mar 15 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
vue如何判断dom的class
Apr 26 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
解决VUE双向绑定失效的问题
Oct 29 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 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获取微信基础接口凭证Access_token
2018/08/23 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Python实现图片添加文字
2019/11/26 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
办理居住证介绍信
2014/01/15 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
学校食品安全实施方案
2014/06/14 职场文书
2015年消防工作总结
2015/04/24 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
电影开国大典观后感
2015/06/04 职场文书
公司晚会主持词
2019/04/17 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python