bootstrap 表单控件 控件状态 控件大小 help-block

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">

</head>

<body>

    <div class="container">

        <p class="btn-primary">表单控件</p>

        <input type="text" placeholder="this is text">

        <select name="" id="">

            <option value="">1</option>

            <option value="">2</option>

            <option value="">3</option>

        </select>

        <select name="" id="" multiple>

            <option value="">1</option>

            <option value="">2</option>

            <option value="">3</option>

        </select>

        <div class="checkbox">

            <label for="">

                <input type="checkbox"> abc

            </label>

        </div>

        <div class="radio">

            <label for="">

                <input type="radio" name="A" value="A" checked="">A

            </label>

        </div>

        <div class="radio">

            <label for="">

                <input type="radio" name="A" value="B">B

            </label>

        </div>

        <div class="checkbox-inline">

            <label for="">

                <input type="checkbox"> ABC

            </label>

        </div>

        <div class="radio-inline">

            <label for="">

                <input type="radio"> A

            </label>

        </div>

        <p class="btn-primary">控件状态</p>

        <input type="text" value="ABC" disabled="disabled">

        <input type="text" value="set class disabled is useless" class="disabled">

        <input type="text" value="ABC">

        <p class="btn-primary">验证提示状态</p>

        <div class="form-group has-warning">

            <label for="inputwarning" class="control-label">input Warning</label>

            <input type="text" class="form-control" id="inputwarning">

        </div>

        <div class="form-group has-error">

            <label for="inputerror" class="control-label">input Error</label>

            <input type="text" class="form-control" id="inputerror">

        </div>

        <div class="form-group has-success">

            <label for="inputsuccess" class="control-label">input Success</label>

            <input type="text" class="form-control" id="inputsuccess">

        </div>

        <div class="form-group has-warning has-feedback">

            <label for="inputwarning" class="control-label">input Warning</label>

            <input type="text" class="form-control" id="inputwarning">

            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

        </div>

        <div class="form-group has-error has-feedback">

            <label for="inputerror" class="control-label">input Error</label>

            <input type="text" class="form-control" id="inputerror">

            <span class="glyphicon glyphicon-remove form-control-feedback"></span>

        </div>

        <div class="form-group has-success has-feedback">

            <label for="inputsuccess" class="control-label">input Success</label>

            <input type="text" class="form-control" id="inputsuccess">

            <span class="glyphicon glyphicon-ok form-control-feedback"></span>

        </div>

        <p class="btn-primary">控件大小</p>

        <div class="row">

            <div class="col-xs-2">

                <input type="text" class="input-lg form-control" placeholder='.col-xs-2'>

            </div>

            <div class="col-xs-3">

                <input type="text" class="input-sm form-control" placeholder='.col-xs-3'>

            </div>

        </div>

        <p class="btn-primary">.help-block</p>

        <span>this is span before help-block</span>

        <span class="help-block">this is help block span</span>

        <span>this is span after help-block</span>

    </div>

</body>

</html>

bootstrap 表单控件 控件状态 控件大小 help-block的更多相关文章

  1. 详解Bootstrap表单组件

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

  2. Bootstrap表单

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

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

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

  4. bootstrap 表单类

    bootstrap 表单类 表单美化 用法: 向父元素 <form role="form"></form>     添加 role="form&q ...

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

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

  6. bootstrap表单带验证

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

  7. 基于Bootstrap表单验证

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

  8. 测开之路一百一十一：bootstrap表单

    bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...

  9. Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

随机推荐

  1. UML用例图说明

    转自:http://www.360doc.com/content/10/1206/23/3123_75672033.shtml 前些时间参加了潘加宇老师的技术讲座,UML建模技术受益匪浅.我也把平时的 ...

  2. extjs 框架模板

    的 <script> Ext.onReady(function(){ Ext.create('Ext.container.Viewport', { layout: 'border', it ...

  3. ural1316 Electronic Auction

    Electronic Auction Time limit: 0.5 secondMemory limit: 64 MB There is a deficit in cast-iron pigs in ...

  4. OpenCV学习(20) grabcut分割算法

    http://www.cnblogs.com/mikewolf2002/p/3330390.html OpenCV学习(20) grabcut分割算法 在OpenCV中,实现了grabcut分割算法, ...

  5. Ubuntu Server 14.04 & Apache2.4 虚拟主机、模块重写、隐藏入口文件配置

    环境: Ubuntu Server 14.04 , Apache2.4 一.Apache2.4 虚拟主机配置 01. 新建一份配置文件 在apache2.4中,虚拟主机的目录是通过/etc/apach ...

  6. ICE第三篇------一些疑难点

    1 间接代理 参考http://blog.sina.com.cn/s/blog_53e8499c0100lkoo.html IceGrid用于支持分布式网络服务应用,一个IceGrid域由一个注册表( ...

  7. jquery toggle 替换的实现

    $('#example').click(function(){$("#exampleBox").toggle();}) 改为 $('#example').click(functio ...

  8. JVM线程安全

    一.线程的调度方式 线程调度分为两种方式: 协同式调度和抢占式调度.协同式调度:线程的执行时间由线程本身控制,线程将工作执行完之后,通知操作系统切换到其他线程上.缺点:时间不可控,就算出问题,也不会通 ...

  9. javascript之日期对象

    学习要点: 日期对象 将日期对象转换为字符串 将日期对象中的日期和时间转换为字符串 日期对象中的日期 日期对象中的时间 设置日期对象中的日期 设置日期对象中的时间 与毫秒相关的方法 一.日期对象 在j ...

  10. [MySQL]mysql指定路径启动

    /usr/sbin/mysqld --defaults-file=/etc/mysql/my.cnf --basedir=/usr --datadir=/var/lib/mysql --pid-fil ...