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表单布局样式代码的相关知识,希望对大家有所帮助!
您可能感兴趣的文章:
- jfinal与bootstrap的登录跳转实战演习
- php bootstrap实现简单登录
- 基于Bootstrap+jQuery.validate实现表单验证
- Bootstrap3.0建站教程(一)之bootstrap表单元素排版
- BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
- BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
- BootStrap 智能表单实战系列(十)自动完成组件的支持
- Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
- 第七篇Bootstrap表单布局实例代码详解(三种表单布局)
- Bootstrap实现登录校验表单(带验证码)
相关文章
PHP实现基于Redis的MessageQueue队列封装操作示例
这篇文章主要介绍了PHP实现基于Redis的MessageQueue队列封装操作,结合实例形式分析了Redis的PHP消息队列封装与使用相关操作技巧,需要的朋友可以参考下2019-02-02用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
在上一篇文章里,我们完成了 Dispatcher 类的接口设计,现在我们就来考虑一下如何实现这个类。2010-07-07js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
今天小编就为大家分享一篇关于js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧2019-01-01
最新评论