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> ...
随机推荐
- 常用网站--前端开发类+网页设计类+平面素材类+flash类
前端开发类 animate CSS 前端开发网 我爱CSS 大家网 W3School jQuery开发技术详解教程视频 jQuery中文社区 jQueryChina 网页设计类 禅意花园 CSS Do ...
- ARM指令和Thumb指令区别
Thumb指令集 ]的问题而提出的,它具有16为的代码密度.Thumb不是一个完整的体系结构,不能指望处理程序只执行Thumb指令而不支持ARM指令集.因此,Thumb指令只需要支持通用功能,必要时, ...
- [转]fatal error: iostream.h: No such file or directory
iostream.h是非标准头文件,iostream是标准头文件形式.iostream.h时代没有名词空间,即所有库函数包括头文件iostream.h都声明在全局域.为了体现结构层次,c++标准委员会 ...
- [c language] getopt 其参数optind 及其main(int argc, char **argv) 参数解释
getopt被用来解析命令行选项参数.#include <unistd.h> extern char *optarg; //选项的参数指针extern int optind, //下一次调 ...
- js阻止元素的默认事件与冒泡事件
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault(); -- 阻止元素的默认 ...
- LINUX SSH客户端的中文乱码问题
原因在于文件/etc/sysconfig/i18n 这个文件是系统的区域语言设置, i18n是 国际化internationalization的缩写 i和n之间正好18个字母 解释: LANG= ...
- Java 学习 第四篇;面向对象(1)
1:关于继承为了保证父类的良好封装性,不会被子类随意改变,设计父类时通常隐藏父类的内部数据,把父类属性改为private如果父类中可以被重写,但不希望被其他类自由访问可用protected修饰;2:什 ...
- MongoDB insert performance rapidly dropping
http://dba.stackexchange.com/questions/65554/mongodb-insert-performance-rapidly-dropping http://www. ...
- 数据类型MSVC和gcc/g++的不同
前言: 在16位环境下,int/unsigned int 占16位,long/unsigned long占32位 在32位环境下,int占32位,unsigned int占16位,long/unsig ...
- 转:SVN Eclipse插件Subclipse安装和配置
一.安装Subclipse subclipse项目地址:http://subclipse.tigris.org/. 安装Subclipse的最好方法是使用Eclipse Update Manager. ...