读书频道 > 网站 > 网页设计 > 深入理解Bootstrap
2.3.2 颜色样式
14-05-08    奋斗的小年轻
收藏    我要投稿   

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

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

如果在Bootstrap官方网站看过btn按钮或者alert警告框的样例,你会发现,Bootstrap默认为很多组件都提供了5种颜色的样式,这5种颜色分别是:primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)。定义规则是:组件名称-颜色类型,如btn-primary、alert-info。

在定义不同颜色样式的时候,主要是定义文本颜色、边框颜色、背景颜色等,具体定义什么颜色和该组件的特性有关。比如面板panel就只需要定义边框的颜色就可以了,而按钮不仅需要定义边框颜色,还需要定义背景色以及文本颜色。btn、panel、alert三个组件在定义颜色样式时的代码如下所示:
/* btn */
.btn-primary {
  color: #ffffff;  background-color: #428bca;  border-color: #357ebd;
}
/* panel */
.panel-success {
  border-color: #d6e9c6;
}
.panel-success > .panel-heading {
  color: #468847;  background-color: #dff0d8;  border-color: #d6e9c6;
}
/* alert */
.alert-success {
  color: #468847;  background-color: #dff0d8;  border-color: #d6e9c6;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}

可以发现,不同的组件,定义的内容稍有不同,具体定义什么主要由组件特性来决定。另外还要定义其内部子样式的颜色以便形成统一风格,比如.panel-success内部的.panel-heading顶部元素也要定义一个相同风格的颜色。

而对于一些可单击元素,比如btn按钮,还要特殊处理按钮在hover、focus、active状态时的颜色,以便让这些状态在同一个风格下表现一致。其源码如下所示:
// 源码2081行
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}

使用方式就像Bootstrap宣传的那样,将两个样式叠加在一起使用即可。示例如下所示:
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

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