Bootstrap3实用教程
2.3.2 正文文本
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

标题

正文文本

对于正文文本,Bootstrap定义的默认字体栈为 "Helvetica Neue"、Helvetica、Arial、sans-serif,它们也是主流操作系统默认支持的标准字体。万一明确指定的字体都不存在,负责兜底儿的 sans-serif 会告诉浏览器使用默认的字体。

Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin-bottom)。如:

<p> Nullam quis risus eget urna ….</p>

正文的排版效果如图 2‑12所示:

正文排版
图2-12 正文排版

在正文排版中,如果想要强调某个段落的文本,可以为它加上 class="lead" 让它突出显示,这会使段落文本稍稍变大、变粗,行高也被显著放大。如:

<p class="lead">Vivamus sagittis lacus vel augue ….</p>

效果如图 2‑13所示:

强调段落
图2-13 强调段落

variables.less文件中的两个 Less 变量 @font-size-base@line-height-base 决定了排版尺寸,第一个变量定义了全局 font-size 基准,第二个变量定义了全局 line-height 基准。使用这些变量和一些简单的公式,就可以计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量,即可改变 Bootstrap 的默认样式。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验