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学习小结

    最近在使用状态模式写一个仿Windows计算器的MFC程序,顺便学习了一下UML图的绘制,尤其是类图和状态图的绘制,这里做一下总结吧.    一.UML简介 统一建模语言UML(Unified Mod ...

  2. PHP模板解析类实例

    作者:mckee 这篇文章主要介绍了PHP模板解析类,涉及php针对模板文件的解析与字符串处理的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下 <?php class template { ...

  3. 那些学些网址_jquery初学知识

    http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html(ajax)http://www.enet.com.cn ...

  4. mysql的一些特殊命令

    mysql命令行工具的编辑技巧 从mysql performace blog 中学到的: 1. pager 例子 mysql> pager more PAGER set to 'more' my ...

  5. ural1471 Distance in the Tree

    Distance in the Tree Time limit: 1.0 secondMemory limit: 64 MB A weighted tree is given. You must fi ...

  6. centos lvm常用命令

    # vgs -a  VG     #PV #LV #SN Attr   VSize  VFree  cinder   1   0   0 wz--n- 30.39g 30.39g  os       ...

  7. [转] hibernate和ibatis的对比

    以下文章来源于:http://blog.csdn.net/tianya2198622/article/details/3859859     IBATIS: iBATIS一词来源于“internet” ...

  8. git使用系列（一）

    git commit 的时候出现了问题: change not staged for commit. no changes added to commit(use "git add" ...

  9. 搭建firefly服务端遇到的问题

    1 pylinter pylinter could not automatically determined the path to "lint.py" 这个错误通过安装pylin ...

  10. 关于服务器跨域问题（使用cors解决）

    1.配置cors依赖 pom中加入 <dependency> <groupId>com.thetransactioncompany</groupId> <ar ...