Bootstrap表单布局样式代码

 更新时间:2016年05月31日 14:55:11   作者:勤能补拙  
这篇文章主要介绍了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表单布局样式代码的相关知识,希望对大家有所帮助!

相关文章

  • 微信小程序实现一键登录

    微信小程序实现一键登录

    这篇文章主要为大家详细介绍了微信小程序实现一键登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS判断表单输入是否为空(示例代码)

    JS判断表单输入是否为空(示例代码)

    本篇文章主要是对JS判断表单输入是否为空的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript常用函数工具集:lao-utils

    JavaScript常用函数工具集:lao-utils

    现在Javascript库海量,流行的也多,比如jQuery,YUI等,虽然功能强大,但也是不万能的,功能不可能涉及方方面面,这里给大家分享一个的JS库是对这些的补充,很多也比较实用,把应用到项目中中去也比较方面,这也是对工作的一些积累,也加深对知识的理解。
    2016-03-03
  • Bootstrap免费字体和图标网站(值得收藏)

    Bootstrap免费字体和图标网站(值得收藏)

    在这篇内容中,我们把这套框架上的免费字体图标做了个整合(当然,以后还会不断的更新)。大家对bootstrap免费字体图标有需要的话,可以参考本教程
    2017-03-03
  • JavaScript实现将Word文档解析成浏览器认识的HTML

    JavaScript实现将Word文档解析成浏览器认识的HTML

    这篇文章主要为大家详细介绍了如何使用JavaScript实现将Word文档解析成浏览器认识的HTML,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2024-02-02
  • javascript常用的数组过滤和查找方法总结

    javascript常用的数组过滤和查找方法总结

    这篇文章主要介绍了javascript常用的数组过滤和查找方法的相关资料,这些方法各有特点,适用于不同的数据处理场景,大家可以根据需求选择不同的方法,需要的朋友可以参考下
    2024-12-12
  • 基于Bootstrap3表格插件和分页插件实例详解

    基于Bootstrap3表格插件和分页插件实例详解

    这篇文章主要介绍了基于Bootstrap3表格插件和分页插件实例详解的相关资料,需要的朋友可以参考下
    2016-05-05
  • 小议Javascript中的this指针

    小议Javascript中的this指针

    在全局执行环境中使用this,标识Global对象,在浏览器中就是window对象。
    2010-03-03
  • 老生常谈JS中的继承及实现代码

    老生常谈JS中的继承及实现代码

    这篇文章主要介绍了js中的继承及实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • node.js Web应用框架Express入门指南

    node.js Web应用框架Express入门指南

    这篇文章主要介绍了node.js Web应用框架Express入门指南,从安装到各种技术的应用,都进行了讲解,是一篇不错的Express入门教程,需要的朋友可以参考下
    2014-05-05

最新评论