一、排版
1.全局设置
- 使用 本地字体堆栈,从而为每一个操作系统或设备上的 font-family渲染都得到最佳的体现(而不是强制多设备共享一套字体呈现标准)。
- 对于更具包容性和可访问的类型规模,我们假设浏览器默认根font-size(通常为16像素),而访客根据自身需要定义浏览器字体大小呈现,并不会影响网页表现。
- Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the
<body>
.- 使用
code class="highlighter-rouge">
$link-color 参数定义全局的a链接颜色和 :hover下划线颜色呈现。- 使用 $body-bg 参数定义 的 background-color 性性,默认认为白色 (#fff )。
这些定义可以在_reboot.scss找到,并根据需要自定义全局变量_variables.scss(确保 $font-size-base 使用 rem单位。
2.标题
- 兼容所有HTML标题集,涵括从
<h1>
到<h6>
,的六种标题展现。 CSS选择器也支持以.h1 – .h6- 方式引用,这样可以使字体样式呈现出标题效果,不同是引用.h1 --.h6的文本段不会视作HTML的标题元素(往往SEO、读屏器和机器识别时对此很敏感-译者注),效果如下:
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
3.自定义标题备注
使用附带的实用类从Bootstrap 重新创建小的辅助标题文本,如下所示
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
4.显式标题
bootstrap可以传统的标题元素设计得更漂亮,以迎合你的网页内容。如果你想要一个标题醒目,考虑使用显示标题——一种更大型、鲜明的标题样式,则可以用下面方法
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
5.Lead中心内容
通过应用 .lead样式,可以定义一个中心段落,用于提示这是中心内容或重要内容
<p class="lead">我们的宗旨是为人民服务</p>
<p>我们的宗旨是为人民服务</p>
6.文本内联元素
HTML5 文本元素的常用内联表现方法也适用于BootStrap4
<p>你可以使用mark标签来标记<mark>重点</mark>词汇</p>
<p><del>这是一段被删除的文本</del>,<ins>这是一段新插入进去的文本</ins></p>
<p><small>这段文本的字体会小一些</small></p>
<p><strong>这里是加粗的文本</strong></p>
<p><em>这里是倾斜的文本</em></p>
<p>
<span class="mark">用.mark代替mark标签</span>,
<span class="small">用.small代替samll标签</span>
</p>
.mark、.small类也可以应用相同的HTML标签<mark>
、<mall>
,这样还可以避免标签带来的任何不必要的语义含义。
虽然上面没有明确显示,但我们可以随意使用<b>
和<i>
等HTML5标签,其中<b>
旨在突出显示单词或短语、而不会增加重要性,<i>
主要用于语音、技术术语等。
7.Abbr缩略语
<p><abbr title="attrbitue">attr</abbr></p>
<p><abbr title="HypperText Markup Langauge" class="initialism">HTML</abbr></p>
<!-- .initialism可以让字体变的小一点 -->
8.引用与署名
- 引用文档中另一个来源的内容块,,请在一段HTML外面包裹
<blockquote class="blockquote">
,作为引用。为了显示直接引用,我们推荐使用p作为子级包裹容器,这在 HTML 规范中也有多个变通方法,下面逐一讲解。<footer class="blockquote-footer">
用于标识来源,一般用于页脚(所以有*-footer),然后配合 使用。
<blockquote class="blockquote">
<p>时间就像海绵里的水,只要愿挤,总还是有的</p>
<footer class="blockquote-footer">来自<cite>鲁迅</cite></footer>
</blockquote>
9.对齐处理
如果需要居中对齐或右对齐,使用.text-center、.text-right方法配合即可,如下两示例
<p class="text-left">不知道为什么,每次过安检的时候都过不去,好郁闷!为什么?因为他们说话,我的心里装了一个你!</p>
<p class="text-center">不知道为什么,每次过安检的时候都过不去,好郁闷!为什么?因为他们说话,我的心里装了一个你!</p>
<p class="text-right">不知道为什么,每次过安检的时候都过不去,好郁闷!为什么?因为他们说话,我的心里装了一个你!</p>
10.无特效列表
- 在ul(或ol)上使用.list-unstyled可以删除列表项目上默认的list-style以及左外边距(只针对直接子元素),这只生效于在直接子列表项目上,不影响你嵌套的子列表
- 使用.list-inline 、 .list-inline-item结合,可以实现列表逐行显示(默认不引用且无父元素影响也是逐行显示)、或单行并多列并排(遵循从左对右的原则、并清除margin方法)
<ul class="list-unstyled">
<li>red</li>
<li>
<ul class="list-unstyled">
<li>blue</li>
</ul>
</li>
</ul>
<ul class="list-inline">
<li class="list-inline-item">red</li> <!-- 3.x的版本是不需要在li身上添加class -->
<li class="list-inline-item">blue</li>
<li class="list-inline-item">green</li>
</ul>
11.dl表格式水平描述
使用BootStrap栅格系统的预定义类(或者说语义化mixins),可以水平对齐条目和描述。对于较长的条目,你可以视情况添加一个.text-truncate类,从而用省略号截断文本。
<div class="container-fluid">
<dl class="row">
<dt class="col-sm-3">矮</dt>
<dd class="col-sm-9">矮,汉语常用字,读作ǎi,最早见于秦代小篆,其本义是身材短,即《说文解字》:“矮,短人也。”后引申为低、不高的、等级地位低、卑下的等义。(基本信息栏参考资料:)</dd>
<dt class="col-sm-3">矬</dt>
<dd class="col-sm-9">说一个人挫,可以是说一个人长的丑,有辱市容市貌,行为猥琐,挑战大众的审美观;也可能是熟人之间开玩笑,说一个人倒霉,或者做事不成样子,具体要看说的人的语气(一般这个意思的“挫”,会是熟人间笑着问“你挫不挫啊?”)。而挫,挫人也有轻蔑谩骂的意思。</dd>
<dt class="col-sm-3 text-truncate">穷,穷的不要不要的了。穷,穷的不要不要的了</dt>
<dd class="col-sm-9">穷,汉语常用字,读作qióng或者gōng,最早见于甲骨文,造字本义为身居洞穴,身体被迫弯屈、不自由,后引申为物质上困顿的、不得志的、贫困的,又引申为追究、终结、尽、完等。(基本信息栏参考资料:)</dd>
</dl>
</div>