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 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
TypeScript入门-接口
Mar 30 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
从原生JavaScript到React深入理解
Jul 23 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
javascript基本算法汇总
2016/03/09 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python读取图片任意范围区域
2019/01/23 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
如何给Python代码进行加密
2020/01/10 Python
浅析Python 责任链设计模式
2020/09/11 Python
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
财务会计实训报告
2014/11/05 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS