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. 树列复选框Extjs

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. 深入理解setTimeout的作用域

    看了一篇关于setTimeout作用域的问题,其实之前在<javascript高级程序设计>时也看到了,分享给大家: 先总结下: 一.setTimeout中的延迟执行代码中的this永远都 ...

  3. C. Bear and Colors

    C. Bear and Colors time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. B. Qualifying Contest

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  5. Java基本数据类型和关键字

    变量名第一个字母小写,后面大写. 自动类型转换: 容量小的类型自动转换成容量大的数据类型 byte,short,int->float->long->double byte,short ...

  6. CodeForces 609B The Best Gift

    统计+枚举 #include<cstdio> #include<cmath> #include<cstring> #include<algorithm> ...

  7. Java基础知识(一) 自增、自减运算符

    .d1 { border-style: none } .d2 { border-style: solid } .d3 { border-style: dotted } .d4 { border-sty ...

  8. Selenium-Grid工作方式

    http://blog.csdn.net/five3/article/details/9428655 Selenium-Grid工作方式 标签: selenium-grid2webdriversele ...

  9. 多年心愿，终于完成，热泪盈眶啊。。。Adrew NG 的 机器学习

    谢谢Andrew老师!谢谢Coursera!谢谢自己!希望这是一个好的开始!希望自己也能使用机器学习来make a better world...  

  10. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...