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

  1. bootstrap 表单样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Bootstrap表单

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...

  3. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  4. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  5. 基于Bootstrap表单验证

    基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...

  6. 第二百三十四节，Bootstrap表单和图片

    Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一．表单 Bootstrap ...

  7. bootstrapValidator.js，最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  8. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. HTML表单样式

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

随机推荐

  1. 一个基于JRTPLIB的轻量级RTSP客户端(myRTSPClient)——实现篇：（八）RTP音视频传输解析层之MPA传输格式

    一.MPEG RTP音频传输 相较H264的RTP传输格式,MPEGE音频传输格式则简单许多. 每一包MPEG音频RTP包都前缀一个4字节的Header,如下图(RFC2550) “MBZ”必须为0( ...

  2. js模拟队列----小优先队列

    队列:先进先出,后进后出 var Queue = (function(){ var item = new WeakMap(); class Queue{ constructor(){ item.set ...

  3. css--纵向margin设置auto和百分数真的无效吗？

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. java集合框架中Set和List的区别

    1. Set 接口实例存储的是无序的,不重复的数据.List 接口实例存储的是有序的,可以重复的元素. 2. Set检索效率低下,删除和插入效率高,插入和删除不会引起元素位置改变 <实现类有Ha ...

  5. git 开发中的总结

    一.git是什么 1.git是一种分布式的版本管理系统, 分布式相比于集中式的最大区别在于开发者可以提交到本地,每个开发者通过克隆(git clone),在本地机器上拷贝一个完整的Git仓库. 二.g ...

  6. WebApi关于配置全局返回Json数据格式时间以及命名小写

    1.直接在Global文件中配置: 1 var formatters = GlobalConfiguration.Configuration.Formatters; 2 var jsonFormatt ...

  7. <5>Cocos Creator 脚本简介

    1.创建脚本 在资源管理器窗口中点击鼠标右键,显示菜单中点击新建,选择新建的脚本类型,这里举例就选择菜单中的JavaScript,或者如下图点击创建按钮也可. 新建后就会在资源管理器中出现一个NewS ...

  8. Day11 多进程与多线程编程

    一.进程与线程 1.什么是进程(process)? An executing instance of a program is called a process. Each process provi ...

  9. META标签之关键词、网页描述设置帮助SEO网站优化(转)

      ASP.NET 4.0 Web Forms针对SEO改进措施中有一个是在Page类中加了2个新属性:MetaKeywords 和MetaDescription,它们使得在后台代码类中用编程的手法设 ...

  10. VMWare虚拟机 window文件传递

    无论是将虚拟机的文件传到window上或者是将window上文件传到虚拟机上: 都可以选中文件,然后拖动文件到另一个系统上 提前:虚拟机安装了VMWARE Tools 1)window上文件拖到虚拟机 ...