zoukankan      html  css  js  c++  java
  • Bootstrap系列 -- 21. 表单提示信息

      平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"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="glyphiconglyphicon-ok form-control-feedback"></span>
    </div>
    </form>

     

    Bootstrap提供了一个行内提示信息,其使用了类名“help-inline”。一般让提示信息显示在控件的后面,也就是同一水平显示。

    <form role="form">
    <div class="form-group">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <div class="row">
    <div class="col-xs-6">
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    </div>
    <span class="col-xs-6 help-block">你输入的信息是正确的</span>
    </div>
    </div>
    </form>

      

  • 相关阅读:
    静态代码块、非静态代码块、构造函数之间的执行顺序
    Linux跨主机传输文件
    🗒 Linux 系统监控
    Mysql Mode
    Mysql 表锁行锁
    Centos 下修改时区
    Redis 解决内存过大
    Mysql 表达式
    Centos 二进制包安装Mysql5.7
    Vim 快捷键
  • 原文地址:https://www.cnblogs.com/qingyuan/p/4599635.html
Copyright © 2011-2022 走看看