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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
Jquery ajax基础教程
Nov 20 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 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
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
php实现对象克隆的方法
2015/06/20 PHP
php实现的农历算法实例
2015/08/11 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
javascript中检测变量的类型的代码
2010/12/28 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
javascript基础知识讲解
2017/01/11 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
学习Python列表的基础知识汇总
2020/03/10 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
如何手工释放资源
2013/12/15 面试题
酒店门卫岗位职责
2013/12/29 职场文书
关于学习的演讲稿
2014/05/10 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL