<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. nodejs+mysql入门实例(链接到数据库)

    //连接数据库 var mysql = require('mysql'); var connection = mysql.createConnection({ host: '******', //数据 ...

  2. 2sum，3sum，4sum，ksum

    1. 2sum 题目:给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标.你可以假设每种输入只会对应一个答案.但是,你不能重复利 ...

  3. MongoDB--搭建mongodb服务器

    此为手动搭建: 可以看到初始化data时所有的数据,和log里已经有日志文件

  4. CI持续集成系统环境--Gitlab+Gerrit+Jenkins完整对接

    原文地址https://www.cnblogs.com/kevingrace/p/5651447.html 近年来,由于开源项目.社区的活跃热度大增,进而引来持续集成(CI)系统的诞生,也越发的听到更 ...

  5. 用log4net记录日志信息

    在.net中用log4net记录日志信息,已经是很平常的事情了. log4net下载:http://logging.apache.org/log4net/download_log4net.cgi 百度 ...

  6. C++二进制字符串转Base64字符串 Base64字符串转二进制字符串

    封装成类的 . base64格式的字符串,只包含大小写字母.零到九,以及 + / //___base_64.h /*base_64.h文件*/ #ifndef BASE_64_H #define BA ...

  7. 同一个电脑安装两个jdk版本

    同一个电脑安装两个jdk版本 场景:公司项目使用的jdk为1.,最近不是很忙,学习scala.该系统使用到了jdk1.8的特性,所以I need 俩版本,开整!!! . 准备两个版本的jdk我的两个j ...

  8. base64的编码

    计算机中的数据一般是由ascii编码,来存储的, 0---31以及127,表示的是控制字符: 32-126表示的是字符,包括空格,阿拉伯数字,大小写字母: 之后的128个字符,是不可见的字符, 在网络 ...

  9. 关于django编码问题所导致的502错误

    在使用django开发的时候,访问网站出现了502错误,次数也比较平繁 uwsgi+nginx+django 在命令行下提示如下错误 : File "/opt/apps/python3/li ...

  10. django migrate无效的解决方法

    遇到一个很奇怪的问题 python manage.py makemigrations 的时候显示要创建两张表,但是执行 python manage.py migrate 的时候不能识别,也就是说失效了 ...