Bootstrap表单布局样式源代码
更新时间：2016年07月04日 16:06:19 投稿：lijiao
这篇文章主要为大家详细介绍了Bootstrap表单布局样式源代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单
创建垂直或基本表单：
•·向父 <form> 元素添加 role="form"。
•·把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
•·向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control
内联表单：
内联表单中所有元素都向左对齐，标签并排，要创建内联表单，需要在form标签中加入class.form-inline
水平表单:和其它两种表单有所不同,要创建水平表单需要遵循以下步骤.
•向父 <form> 元素添加 class .form-horizontal。
•把标签和控件放在一个带有 class .form-group 的 <div> 中。
•向标签添加 class .control-label。
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的事件处理，需要的朋友可以参考下2015-11-11
这篇文章主要介绍了JavaScript中promise的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05![js 中{},[]中括号,大括号使用详解](//img.jbzj.com/images/xgimg/bcimg2.png)
{ } 大括号，表示定义一个对象，大部分情况下要有成对的属性和值，或是函数2011-05-05
这篇文章主要给大家介绍了JS实现手写parseInt的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-09-09
本文主要介绍了JS逆向之webpack打包站点实战原理分享，webpack是前端程序员用来进行打包JS的技术，打包之后的代码特征非常明显，更多相关知识需要的小伙伴可以参考下面文章详细内容2022-06-06
关于微信小程序中使用wx.getLocation获取当前详细位置并计算距离
这篇文章主要介绍了关于微信小程序中使用wx.getLocation获取当前详细位置并计算距离,wx.getLocation只能够获取经纬度，不能够拿到详细地址,这里使用腾讯地图的api,需要的朋友可以参考下2023-04-04
下面小编就为大家带来一篇JS设计模式之数据访问对象模式的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
检测用户的按键是事件处理程序的一个很特别的环节。这一章我们着力解决一些非常棘手的问题，并且制定一个完备的表格。2010-02-02
众所周知在TypeScript中定义变量需要指定标识符的类型,下面这篇文章主要给大家介绍了关于TypeScript中class类型的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了javascript高仿热血传奇游戏的实现代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-02-02
![js 中{},[]中括号,大括号使用详解](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论