Bootstrap表单布局样式代码
2016-05-31 14:55
1211 查看
废话不多说了,直接给大家贴代码了。
<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实现登录校验表单(带验证码)
相关文章推荐
- Android布局的小窍门?
- Web布局连载——两栏固定布局(五)
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- 在线用表单建立文件夹
- Jquery 表单取值赋值的一些基本操作
- 样式表CSS布局经验
- 在winform下实现左右布局多窗口界面的方法之续篇
- css网页布局中注意的几个问题小结
- DL.DT.DD实现左右的布局简单例子第1/2页
- 使用CSS框架布局的缺点和优点小结
- 大家看了就明白了css样式中类class与标识id选择符的区别小结
- 重置默认样式 css reset第1/2页
- div+CSS网页布局的意义与副作用原因小结第1/2页
- 在winform下实现左右布局多窗口界面的方法
- javascript 表单的友好用户体现
- js 提交和设置表单的值
- Android编程之代码创建布局实例分析