读书频道 > web开发 > 其他综合 > 深入理解Bootstrap
3.验证提示状态
2014-05-09 14:53:12     我来说两句 
收藏    我要投稿   

本文所属图书 > 深入理解Bootstrap

本书是目前Bootstrap领域技术版本最新、内容最全面、介绍最详细、实战性最强、最具深度的著作。它是资深Web技术专家多年工作经验的结晶,不仅授人以鱼,全面讲解了Bootstrap各个功能组件的使用方法,以及对现有插  立即去当当网订购

在填写表单的时候,经常要提示用户其输入内容是否合法,长度是否够用,再次输入的密码是否和第一次输入的密码一致,或者输入的用户名存在还是不存在等问题,不同的提示可能需要不同的提示状态(如,颜色、边框、提示语等)。Bootstrap提供了.has-warning、.has-error、.has-success三种样式用于分别表示警告(黄色)、错误(红色)、成功(绿色)语境的内容。代码如下:
    <div class="form-group has-warning">
        <label class="control-label" for="inputWarning">输入长度不够!</label>
        <input type="text" class="form-control" id="Text1">
    </div>
    <div class="form-group has-error">
        <label class="control-label" for="inputError">输入不符合要求!</label>
        <input type="text" class="form-control" id="Text2">
    </div>
    <div class="form-group has-success">
        <label class="control-label" for="inputSuccess">输入文本符合要求!</label>
        <input type="text" class="form-control" id="Text3">
    </div>

从示例代码可以看到,使用了form-group、control-label、form-control标签进行分组(关于控件分组,会在后续章节进行解释),在form-group平级的div元素上应用has-***样式,然后在input元素上应用form-control样式,实现效果如图3-26所示。

 

has-error和has-success的实现方式相同,只是对文字、边框和阴影设置的颜色不同。has-warning的实现源码如下:
// 源码1866行
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline { /* has-warning容器内部的控件文本颜色统一设置*/
  color: #8a6d3b; /* 不使用control-label,使用其他的(如help-block)也可以*/
}
.has-warning .form-control {
  /* 为has-warning容器内部的form-control控件设置边框和阴影效果*/
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-warning .form-control:focus {
  /* has-warning容器内部的控件在得到焦点时的效果颜色更深*/
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
}
.has-warning .input-group-addon {/* addon的背景色和字体颜色也要同步设置*/
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #8a6d3b;
}

注意

上述.input-group-addon样式的效果会在4.5节进行讲述。

有的时候,我们在验证状态时提供所对应状态的小图标,以便能够直观地显示,实现效果如图3-27所示。

 

从运行效果可以看到,小图标肯定是固定在输入框的右边的。要实现这种效果,通常要解决两个问题:首先设置输入框父元素的定位方式为相对定位,然后设置这种小图标的定位方式为绝对定位(并设置right值)。

Bootstrap针对该功能提供了特殊的feedback样式,用于实现该效果。其用法如下:
<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2" />
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

该效果运用了两个样式:父容器上的has-feedback样式用于设置定位方式;小图标元素上的form-control-feedback样式用于设置图标的显示大小等。两个样式的源码正好符合我们前面所说的要求,具体源码如下:
// 源码1824行
.has-feedback {  position: relative; /* 相对定位,用于设置input元素的父容器的定位方式*/}
.has-feedback .form-control {  padding-right: 42.5px;
      /* 右内边距的设置,以便可以显示小图标*/ }
.has-feedback .form-control-feedback { /* 设置小图标的显示方式*/
  position: absolute;/* 绝对定位*/
  top: 25px;
  right: 0; /* 右对齐*/
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
}
.has-success .form-control-feedback {  color: #3c763d; /* 验证通过时图标的显示颜色 */}
.has-warning .form-control-feedback {  color: #8a6d3b; /* 验证警告时图标的显示颜色 */}
.has-error .form-control-feedback {  color: #a94442; /* 验证错误时图标的显示颜色 */}

上述源码的最后3行分别设置了不同验证状态下的小图标的颜色。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:2.禁用状态
下一篇:3.5.6 控件大小
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站