首页 > 编程 > JavaScript > 正文

Bootstrap表单布局样式代码

2019-11-20 09:50:29
字体:
来源:转载
供稿:网友

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

<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表单布局样式代码的相关知识,希望对大家有所帮助!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表