一、排版
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>
1215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
