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 触发HTML元素绑定的函数
Sep 11 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
script标签属性用type还是language
2015/01/21 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
Javascript继承机制详解
2017/05/30 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
python判断字符串是否纯数字的方法
2014/11/19 Python
Python socket编程实例详解
2015/05/27 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
长城英文导游词
2015/01/30 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers