zoukankan      html  css  js  c++  java
  • 关于bootstrap--表单控件(disabled表单禁用、显示表单验证的样式)

    1、disabled:

    (1)在input中加入disabled可使表单禁用,如图:

    <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled></div>

    (2)如果fieldset设置了disabled属性,整个域都将处于被禁用状态,如图:

    <fieldset disabled>
    <div class="form-group">
    <label for="disabledTextInput">禁用的输入框</label>
    <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
    </div>
    <div class="form-group">
    <label for="disabledSelect">禁用的下拉框</label>
    <select id="disabledSelect" class="form-control">
    <option>不可选择</option>
    </select>
    </div>
    </fieldset>

    2、legend:如果legend中有输入框的话,这个输入框是无法被禁用的,如图:

     <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend>

    3、表单验证状态:加上has-feedback,并且加一个

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

    标签,才会出现小图标;在<input>下面加上<span class="help-block">来显示“你们输入的正确信息”。

    <form role="form">
    <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    <span class="help-block">你输入的信息是正确的</span>
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="help-block">请输入正确信息</span>
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
    <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="help-block">你是输入的信息是错误的</span>
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
    </form>

  • 相关阅读:
    破解无线网络密码-BT3如何使用1
    翻译记忆软件-塔多思TRADO经典教程_5
    翻译记忆软件-塔多思TRADO经典教程_3
    [Angular] Angular ngSwitch Core Directive In Detail
    [Angular] ngClass conditional
    [Algorithms] Refactor a Linear Search into a Binary Search with JavaScript
    [Algorithms] Divide and Recurse Over an Array with Merge Sort in JavaScript
    [Algorithms] Sort an Array with a Nested for Loop using Insertion Sort in JavaScript
    [Algorithms] Build a Binary Tree in JavaScript and Several Traversal Algorithms
    [Algorithms] Quicksort algorithm using TypeScript
  • 原文地址:https://www.cnblogs.com/shark1100913/p/5634978.html
Copyright © 2011-2022 走看看