<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表单布局样式的更多相关文章

  1. 推荐的bootstrap之 formgroup表单布局样式

    一直没能找到比较好的Form Group样式,直到找到如下样式 转自 https://www.cnblogs.com/jokerjason/p/5721349.html <form class= ...

  2. Bootstrap表单布局样式

    1.并排和下拉选项 <form class="form-horizontal" role="form"> <fieldset> < ...

  3. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  4. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  5. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  6. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  7. 基于表单布局:分析过时的table结构与当下的div结构

    一些话在前面 最近做了百度前端学院一个小任务,其中涉及到表单布局的问题, 它要处理的布局问题:左边的标签要右对齐,右边的输入框.单选按钮等要实现左对齐. 从开始入门就被告知table布局已经过时了,当 ...

  8. [WPF自定义控件库]简单的表单布局控件

    1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...

  9. JS实战 ·  收缩菜单表单布局

     获取节点的两种方式:     1.通过event对象的srcElement属性:     2.通过事件源对象用this传入.     代码如下: <html> <head> ...

随机推荐

  1. Qt之等待提示框三(QLabel进行多图片切换)

    之前分享过的等待提示框有用QMovie播放gif图片实现的,也有纯代码实现的,今天再次分享另一种实现方式,如题目所示:QLabel进行图片的切换!     进行用户登录的时候,往往都需要后台线程进行用 ...

  2. mysql中函数DISTINCT,group by,CONCAT及GROUP_CONCAT的使用

    一:DISTINCT 在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提供有distinct这个关键字来过滤掉多余的重复记录只保留一条,但往往只用它来返回不重复记录的条数,而不是 ...

  3. Javascript经典实例 - 正则表达式

    1] 正则常用字符 正则表达式常用的特殊字符 字符 匹配 示例 ^ 匹配输入的开始 /^This/匹配 “This is ...” $ 匹配输入的结束 /end$/匹配“This is the end ...

  4. deepin 2014 安装后 ,grub出错

    今天deepin2013一直出错,就想尝试下2014,so,果断下载安装,然后悲剧的又被坑了. 环境win7位于sda,deepin安装在sdb 安装完毕后,启动报错,找不到设备uuid 无奈之下,重 ...

  5. 异常处理与调试4 - 零基础入门学习Delphi53

    调试(Debug) 让编程改变世界 Change the world by program 调试(Debug) 在应用程序开发中检测.处理程序中的错误是一个非常重要的环节.在Delphi的集成开发环境 ...

  6. asp.net笔记

    1.  复习 a)         WebForm前后台页面(aspx, aspx.cs)文件在被访问时,会被编译成类,前台类继承于后台类 b)         被访问时,服务器会创建[前台页面类]对 ...

  7. [TYVJ] P1049 最长不下降子序列

    最长不下降子序列 描述 Description 求最长不下降子序列的长度   输入格式 InputFormat 第一行为n,表示n个数第二行n个数   输出格式 OutputFormat 最长不下降子 ...

  8. 使用SC命令时注意事项

    使用SC命令时注意事项[转] Windows 2003 Server存在一个sc命令,(好像Windows 2000/XP/NT都有这个.)该命令可以手工创建Windows服务(NT Service) ...

  9. IClone地形编辑器结合T4M插件在Unity3D使用

    通过IClone编辑器打造的地形,经过T4M插件的转化后,资源占用极少,比在Unity中自己刷出来的地形再通过T4M转化的要小的的多多了,非常适合用在手机上. IClone地形编辑器下载地址: 如果对 ...

  10. linux服务器之间拷贝文件和文件夹

    传输文件用法:scp 本机文件目录 远程服务器用户名@服务器IP:/服务器目录 示例: