bootstrap之 formgroup表单布局样式
<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之 formgroup表单布局样式的更多相关文章
- 推荐的bootstrap之 formgroup表单布局样式
一直没能找到比较好的Form Group样式,直到找到如下样式 转自 https://www.cnblogs.com/jokerjason/p/5721349.html <form class= ...
- Bootstrap表单布局样式
1.并排和下拉选项 <form class="form-horizontal" role="form"> <fieldset> < ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- 一步一步学习Bootstrap系列--表单布局
前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- 基于表单布局:分析过时的table结构与当下的div结构
一些话在前面 最近做了百度前端学院一个小任务,其中涉及到表单布局的问题, 它要处理的布局问题:左边的标签要右对齐,右边的输入框.单选按钮等要实现左对齐. 从开始入门就被告知table布局已经过时了,当 ...
- [WPF自定义控件库]简单的表单布局控件
1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...
- JS实战 · 收缩菜单表单布局
获取节点的两种方式: 1.通过event对象的srcElement属性: 2.通过事件源对象用this传入. 代码如下: <html> <head> ...
随机推荐
- sqlserver2008 中使用MSXML2.ServerXMLHttp拼装soap调用webservice
要调用的接口方法:UP_ACC_inst_Info(string xml) 接口参数:xml格式的字符串 接口功能:传递人员编号.备注到接口进行更新,接口返回更新结果. 实例: declare @st ...
- 使用Battery Historian(android 5.0)
http://hukai.me/android-performance-battery/可以先参考这篇文章 1$ adb shell dumpsys batterystats > xxx.txt ...
- ActiveMQ发布订阅模式(转)
ActiveMQ的另一种模式就SUB/HUB即发布订阅模式,是SUB/hub就是一拖N的USB分线器的意思.意思就是一个来源分到N个出口.还是上节的例子,当一个订单产生后,后台N个系统需要联动,但有一 ...
- hdu1020Encoding
Problem Description Given a string containing only 'A' - 'Z', we could encode it using the following ...
- A Typical Homework(学生信息管理系统)
A Typical Homework(a.k.a Shi Xiong Bang Bang Mang) Hi, I am an undergraduate student in institute of ...
- 有向强连通分支Tarjan算法
本文转载自:http://blog.csdn.net/xinghongduo/article/details/6195337 说到以Tarjan命名的算法,我们经常提到的有3个,其中就包括本文所介绍的 ...
- [转载]OpenSUSE 13.2/13.1 安装搜狗拼音输入法
1. 添加 M17N 源: 13.2: sudo zypper ar -f http://download.opensuse.org/repositories/M17N/openSUSE_13.2/ ...
- poj 3177
第一道双联通的题目,求加几条边让原图成一个双联通图,求出度数为1的双联通分量的个数+1/2. Low[u]为u或u的子树中能通过非父子边追溯到的最早的节点,即DFS序号最小的节点的序号 #includ ...
- 10--动作系统(四)动作类中的reverse方法
上一篇文章在使用持续动作过程中遇到不少问题,以获取动作类的反系动作尤为突出.所以今天把动作类找了个遍,先将大部分动作类是否实现reverse方法总结如下: T表示实现F表示没有实现. 观察可以发现带T ...
- 在Docker上部署使用Azure CLI镜像
Docker是非常流行的容器技术,在Docker中安装部署多种工具非常快速和方便:而Azure CLI是微软提供的可以在Linux/Mac上运行的跨平台命令行管理工具,本文介绍如何在Azure上安装部 ...