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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
js propertychange和oninput事件
Sep 28 Javascript
javascript关于继承解析
May 10 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
js函数般调用正则
2008/04/08 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python中的with...as用法介绍
2015/05/28 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python实现打印实心和空心菱形
2019/11/23 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
教师节演讲稿
2014/05/06 职场文书
留学推荐信范文
2014/05/10 职场文书
学校推普周活动总结
2015/05/07 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书