AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

Bootstrap表单布局样式代码

51自学网 http://www.wanshiok.com
bootstrap表单布局,表单布局

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

<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表单布局,表单布局  
上一篇:页面get请求 中文参数方法乱码问题的快速解决方法  下一篇:jQuery使用经验小技巧(推荐)