读书频道 > 网站 > 网页设计 > 深入理解Bootstrap
3.2.2 页面主题
14-05-08    奋斗的小年轻
收藏    我要投稿   

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

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

默认情况下,Bootstrap为全局设置的字体大小font-size为14像素,间距line-height为字体大小的1.428倍(即20像素)。该设置应用于<body>元素和所有的段落上。
// 源码275行
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333;
  background-color: #fff;
}

另外,<p>元素内的段落会有一个额外的margin-bottom,大小是行间距的一半(默认为10px),详细见CSS文件bootstrap.css中的497行。
// 源码464行
p {  margin: 0 0 10px; }

如果想让一个段落突出显示,可以使用.lead样式,其作用主要是增大字体大小、粗细、行间距和margin-bottom。用法如下:
<p class="lead">...</p>

lead样式的代码实现如下所示:
// 源码467行
.lead {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 200;
  line-height: 1.4;
}
@media (min-width: 768px) {   /*大中型浏览器字体稍大*/
  .lead {    font-size: 21px;  }
}

Bootstrap的排版设置默认值存储在variables.less文件里的两个LESS变量里:@font-size-base和@line-height-base。第一个用于设置字体大小,第二个用于设置行间距。系统默认使用这两个值产生整个页面相应的margin、padding和line-height。通过修改这两个值后,再重新编译,从而制定自己的Bootstrap版本。

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

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