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

相关文章

  • 通过JavaScript控制字体大小的代码

    通过JavaScript控制字体大小的代码

    这个脚本会改变一个段落内的任何文字的字体大小(<P>标签)。如果你想改变其他标签内的文本编辑的getElementsByTagName("P");的一部分。
    2011-10-10
  • js实现格式化金额,字符,时间的方法

    js实现格式化金额,字符,时间的方法

    这篇文章主要介绍了js实现格式化金额,字符,时间的方法,实例分析了javascript转换金额、字符、日期等的常用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 利用JS打造黑客代码雨效果

    利用JS打造黑客代码雨效果

    window.onload()方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。本文将用window.onload()打造黑客代码雨效果,感兴趣的可以尝试一下
    2022-06-06
  • weakMap为什么是弱引用原理

    weakMap为什么是弱引用原理

    这篇文章主要为大家介绍了weakMap为什么是弱引用原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • js字符串操作方法实例分析

    js字符串操作方法实例分析

    这篇文章主要介绍了js字符串操作方法,实例分析了javascript中slice、substr及substring等方法的使用技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript通过mouseover()实现图片变大效果的示例

    JavaScript通过mouseover()实现图片变大效果的示例

    下面小编就为大家分享一篇JavaScript通过mouseover()实现图片变大效果的示例,具有很好的参考价值,希望对大家有所帮助
    2017-12-12
  • javascript事件冒泡实例分析

    javascript事件冒泡实例分析

    这篇文章主要介绍了javascript事件冒泡实原理,实例分析了事件冒泡的定义及实现技巧,需要的朋友可以参考下
    2015-05-05
  • js实现本地持久化存储登录注册

    js实现本地持久化存储登录注册

    这篇文章主要为大家详细介绍了js实现本地持久化存储登录注册,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • JavaScript 注册事件代码

    JavaScript 注册事件代码

    最基本的写法 ,然后实现Js和HTML的分离,然后又实现对同一个元素注册多个事件,期间,我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装,方便以后使用。
    2011-01-01
  • 利用js来实现缩略语列表、文献来源链接和快捷键列表

    利用js来实现缩略语列表、文献来源链接和快捷键列表

    本文主要对利用js来实现缩略语列表、文献来源链接和快捷键列表的方法进行详细分析介绍。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12

最新评论