正文文本
对于正文文本,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 上开源。