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 相关文章推荐
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
Javascript闭包实例详解
Nov 29 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
vue3中provide && inject的使用
Jul 01 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
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
javascript读写json示例
2014/04/11 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
深入理解Vue nextTick 机制
2018/04/28 Javascript
layui table 参数设置方法
2018/08/14 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python通过文件头判断文件类型
2015/10/30 Python
Python单例模式的两种实现方法
2017/08/14 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
播音主持女孩的自我评价分享
2013/11/20 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
《雾凇》教学反思
2014/02/17 职场文书
财务部总监岗位职责
2014/03/12 职场文书
设计师求职信模板
2014/05/06 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
辞职信怎么写?
2019/05/21 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang