Bootstrap表单布局样式
2016-01-24 10:51
746 查看
1.并排和下拉选项
效果图
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>
效果图
<div class="form-group"> <label for="ds_name" class="col-sm-2 control-label">表名</label> <div class="col-sm-4"> <select id="disabledSelect" class="form-control"> <option>禁止选择</option> <option>禁止选择</option> </select> </div> </div>
bootstrap只要修改其样式就能达到想要的效果
相关文章推荐
- bootstrap使用心得及css模块化的初步尝试
- 使用Jquery获取Bootstrap Radio Group当前选中的单选框的值
- Bootstrap-Table实现从服务器加载数据进行显示
- 如何更高效地定制你的bootstrap
- Bootstrap-Table实现从服务器加载数据进行显示
- 【Bootstrap3.0建站笔记二】button可下拉弹出层
- Bootstrap表单之按钮专题
- Bootstrap表单
- Bootstrap表格
- bootstrap排版
- 【Bootstrap 未完】牛客网试题总结
- bootstrap modal 在IOS9中不能弹出的问题 IOS 9 bootstrap modal ios 9 noticework
- bootstrap在使用中的样式问题(自带的前台js分页和自己编写的后台分页方法)
- 一款基于Bootstrap扁平化的后台框架Ace
- bootstrap3 兼容IE8浏览器
- bootstrap-fileinput简单完整列子
- 几个页面的问题一起记录了/el表达式判断/<c:import>传值/BootstrapDialog.show关闭时刷新/
- Bootstrap单按钮的下拉菜单
- bootstrap-select搜索框输入中文
- Bootstrap按钮组学习