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. DataGridView很详细的用法

    DataGridiew用法总结 一.DataGridView 取得或者修改当前单元格的内容: 当前单元格指的是 DataGridView 焦点所在的单元格,它可以通过 DataGridView 对象的 ...

  2. PAT (Advanced Level) 1009. Product of Polynomials (25)

    简单模拟. #include<iostream> #include<cstring> #include<cmath> #include<algorithm&g ...

  3. hibernate--coreapi--configuration sessionfactory--getcurrentsession--opensession

    sessionfactory的目的:产生session,维护数据库连接池 测试文件里的sessionfactory创建数据库连接,所以sessionFactory通过配置文件里的配置信息产生一个数据库 ...

  4. Quick Cocos2dx Http通讯

    服务端:Python 通讯协议:Http 参考文章: 1 用python实现一个基本的http server服务器 http://blog.sina.com.cn/s/blog_416e3063010 ...

  5. redhat7 常用命令

    关闭防火墙 systemctl stop firewalld 查看防火墙状态 systemctl status firewalld 永久关闭防火墙命令.重启后,防火墙不会自动启动.systemctl ...

  6. CSharp笔记>>>多语言,注册

    C#多语言 方案1:http://blog.csdn.net/suncherrydream/article/details/43234059 http://blog.itpub.net/1263917 ...

  7. 配置Linux Kernel时make menuconfig执行流程分析

       在编译内核前,一般是根据已有的配置文件(一般在内核根目录下的arch/arm/configs/文件夹下,把该目录下的xxx_defconfig文件拷贝到内核根目录下,并重命名为.config)来 ...

  8. List学习笔记

    List 特点:1.有序.2.可重复. ArrayList: 底层是数组,数组是有下标的. 会自动扩容,底层默认初始化容量是10,扩大之后的容量预设是原来容量的一半(jdk 1.8).以前好像是原容量 ...

  9. PHP利用数组构造JSON

    问题起因 以往都是直接用构造数组的形式构造json 例子: $arr = array("A"=>"1","B"=>"2 ...

  10. BZOJ3270: 博物馆

    3270: 博物馆 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 269  Solved: 147[Submit][Status][Discuss] ...