Bootstrap表单布局样式代码


Posted in Javascript onMay 31, 2016

废话不多说了,直接给大家贴代码了。

<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表单布局样式代码

以上内容是小编给大家介绍的Bootstrap表单布局样式代码的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
jQuery使用经验小技巧(推荐)
May 31 #Javascript
JavaScript知识点总结(十)之this关键字
May 31 #Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 #Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 #Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 #Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 #Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 #Javascript
You might like
php 缩略图实现函数代码
2011/06/23 PHP
php简单实现MVC
2015/02/05 PHP
PHP查询快递信息的方法
2015/03/07 PHP
joomla组件开发入门教程
2016/05/04 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
微信JS接口大全
2016/08/25 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python 读入多行数据的实例
2018/04/19 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Python 没有main函数的原因
2020/07/10 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Python 实现集合Set的示例
2020/12/21 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
学习方法演讲稿
2014/05/10 职场文书
小学清明节活动总结
2014/07/04 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python