• 关于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>

  • 相关阅读:
    Comparator
    Compare接口
    Predicate接口和Consumer接口
    Lambda表达式遍历集合
    Lambda表达式入门
    RansomNote
    FirstUniqueCharacterInString
    String All Methods
    形参个数可变的方法(...)
    springBoot excel导出 下载 超简单
  • 原文地址:https://www.cnblogs.com/shark1100913/p/5634978.html
Copyright © 2020-2023  润新知