读书频道 > web开发 > 其他综合 > 深入理解Bootstrap
3.8.1 文本样式及背景样式
2014-05-09 15:49:11     我来说两句 
收藏    我要投稿   

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

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

3.8 辅助样式

Bootstrap在布局方面还提供了一些细小的辅助样式,用于文字颜色及背景色设置、显示关闭图标、向左浮动、向右浮动、清除浮动、隐藏、显示等功能。

3.8.1 文本样式及背景样式

本节简单介绍一下文本样式及文本的背景样式。

1.文本样式

在文本显示方面,Bootstrap提供了6种统一的样式颜色,分别是:柔和灰(text-muted)、主要蓝(text-primary)、成功绿(text-success)、信息蓝(text-info)、警告黄(text-warning)、危险红(text-danger)。相关代码在Bootstrap.css的497~560行定义,效果如图3-34所示。

 

文本样式的使用方式如下所示:
<p class="text-muted">JavaScript编程精解</p>
<p class="text-primary">JavaScript设计模式</p>
<p class="text-success">JavaScript启示录</p>
<p class="text-info">Backbone应用开发实战</p>
<p class="text-warning">深入理解Bootstrap3</p>
<p class="text-danger">编写可测试的JavaScript</p>

分析下面的样例源码可以看出,将鼠标移动到文本上,还会显示该色系的另外一种颜色。
// 源码500行
.text-primary {  color: #428bca;}
.text-primary:hover {  color: #3071a9;}

2.文本背景样式

与此同时,Bootstrap还提供了5种背景颜色和上面的5种文本颜色样式对应(muted样式除外),分别是:主要蓝(bg-primary)、成功绿(bg-success)、信息蓝(bg-info)、警告黄(bg-warning)、危险红(bg-danger),其运行效果如图3-35所示。

 

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

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