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. IndiaHacks 2016 - Online Edition (Div. 1 + Div. 2) B. Bear and Compressing

    B. Bear and Compressing 题目链接  Problem - B - Codeforces   Limak is a little polar bear. Polar bears h ...

  2. gnome3 no launcher

    http://askubuntu.com/questions/43246/how-to-configure-gnome-3-to-show-icons-on-desktop http://superu ...

  3. PAT (Advanced Level) 1020. Tree Traversals (25)

    递归建树,然后BFS一下 #include<iostream> #include<cstring> #include<cmath> #include<algo ...

  4. PHP学习笔记--1，不总结，不掌握，不明白！

    不总结,不掌握,不明白! 前言: 学php一开始就是语法,变量,数组,函数,OOP(面向对象[封装,继承,多态,抽象]) 这些都是最基础的东西,但你还要懂一些在实际开发中要用的东西,比如基本的HTML ...

  5. __bridge，__bridge_transfer和__bridge_retained的使用和区别【转载】

    __bridge,__bridge_transfer和__bridge_retained的使用和区别[转载] Core Foundation 框架Core Foundation框架 (CoreFoun ...

  6. (中等) POJ 1084 Square Destroyer , DLX+可重复覆盖。

    Description The left figure below shows a complete 3*3 grid made with 2*(3*4) (=24) matchsticks. The ...

  7. JAVA解析HTML，获取待定元素属性

    Document doc = Jsoup.parseBodyFragment(previewHtml); //html内容解析为Document int index = 0; StringBuffer ...

  8. Laravel邮件发送问题小解

    在Laravel中已经有内置了发送邮件的功能,通过 Mail::send 可发送邮件,但要使用这个函数必须先进行相关配置. 在 /app/config/mail.php 中设置你的邮件参数,如下: 1 ...

  9. LPC1788的EMC驱动norflash

    Norflash型号为sst39vf32 #ifndef __NORFLASH_H_ #define __NORFLASH_H_ #include "common.h" #incl ...

  10. FFT初解（转）

    源:FFT初解 一．前言 首先申明俺不是一个算法工程师,俺是一个底层驱动工程师,有人会发问一个底层驱动工程师需要这个吗?但是我不幸的告诉你,确实是需要的,不过我们不要像算法工程师那样搞得很精通,但是还 ...