Bootstrap4 文字排版

Bootstrap4文字排版Bootstrap4默认设置Bootstrap4默认的font-size为16px,line-height为1.5。默认的font-family为"HelveticaNeue",Helvetica,Arial,sans-serif。此外，所有的<p>元素margin-top:0、margin-bottom:1rem(16px)。<h1>-<h6>Bootstrap中定义了所有的HTML标题（h1到h6）的样式。请看下面的实例：实例<divclass="container"><h1>h1Bootstrap标题(2.5rem=40px)</h1><h2>h2Bootstrap标题(2rem=32px)</h2><h3>h3Bootstrap标题(1.75rem=28px)</h3><h4>h4Bootstrap标题(1.5rem=24px)</h4><h5>h5Bootstrap标题(1.25rem=20px)</h5><h6>h6Bootstrap标题(1rem=16px)</h6></div>尝试一下Display标题类Bootstrap还提供了四个Display类来控制标题的样式:.display-1,.display-2,.display-3,.display-4。实例<divclass="container"><h1>Display标题</h1><p>Display标题可以输出更大更粗的字体样式。</p><h1class="display-1">Display1</h1><h1class="display-2">Display2</h1><h1class="display-3">Display3</h1><h1class="display-4">Display4</h1></div>尝试一下<small>在Bootstrap4中HTML<small>元素用于创建字号更小的颜色更浅的文本:实例<divclass="container"><h1>更小文本标题</h1><p>small元素用于字号更小的颜色更浅的文本:</p><h1>h1标题<small>副标题</small></h1><h2>h2标题<small>副标题</small></h2><h3>h3标题<small>副标题</small></h3><h4>h4标题<small>副标题</small></h4><h5>h5标题<small>副标题</small></h5><h6>h6标题<small>副标题</small></h6></div>尝试一下<mark>Bootstrap4定义<mark>为黄色背景及有一定的内边距:实例<divclass="container"><h1>高亮文本</h1><p>使用mark元素来<mark>高亮</mark>文本。</p></div>尝试一下<abbr>Bootstrap4定义HTML<abbr>元素的样式为显示在文本底部的一条虚线边框:实例<divclass="container"><h1>Abbreviations</h1><p>Theabbrelementisusedtomarkupanabbreviationoracronym:</p><p>The<abbrtitle="WorldHealthOrganization">WHO</abbr>wasfoundedin1948.</p></div>尝试一下<blockquote>对于引用的内容可以在<blockquote>上添加.blockquote类:实例<divclass="container"><h1>Blockquotes</h1><p>Theblockquoteelementisusedtopresentcontentfromanothersource:</p><blockquoteclass="blockquote"><p>For50years,WWFhasbeenprotectingthefutureofnature.Theworld'sleadingconservationorganization,WWFworksin100countriesandissupportedby1.2millionmembersintheUnitedStatesandcloseto5millionglobally.</p><footerclass="blockquote-footer">FromWWF'swebsite</footer></blockquote></div>尝试一下<dl>Bootstrap4定义HTML<dl>元素的样式如下:实例<divclass="container"><h1>DescriptionLists</h1><p>Thedlelementindicatesadescriptionlist:</p><dl><dt>Coffee</dt><dd>-blackhotdrink</dd><dt>Milk</dt><dd>-whitecolddrink</dd></dl></div>尝试一下<code>Bootstrap4定义HTML<code>元素的样式如下:实例<divclass="container"><h1>代码片段</h1><p>可以将一些代码元素放到code元素里面:</p><p>以下HTML元素:<code>span</code>,<code>section</code>,和<code>div</code>用于定义部分文档内容。</p></div>尝试一下<kbd>Bootstrap4定义HTML<kbd>元素的样式如下:实例<divclass="container"><h1>KeyboardInputs</h1><p>Toindicateinputthatistypicallyenteredviathekeyboard,usethekbdelement:</p><p>Use<kbd>ctrl+p</kbd>toopenthePrintdialogbox.</p></div>尝试一下<pre>Bootstrap4定义HTML<pre>元素的样式如下:实例<divclass="container"><h1>MultipleCodeLines</h1><p>Formultiplelinesofcode,usethepreelement:</p><pre>Textinapreelementisdisplayedinafixed-widthfont,anditpreservesbothspacesandlinebreaks.</pre></div>尝试一下更多排版类下表提供了Bootstrap4更多排版类的实例：类名描述实例.font-weight-bold加粗文本尝试一下.font-weight-normal普通文本尝试一下.font-weight-light更细的文本尝试一下.font-italic斜体文本尝试一下.lead让段落更突出尝试一下.small指定更小文本(为父元素的85%)尝试一下.text-left左对齐尝试一下.text-center居中尝试一下.text-right右对齐尝试一下.text-justify设定文本对齐,段落中超出屏幕部分文字自动换行尝试一下.text-nowrap段落中超出屏幕部分不换行尝试一下.text-lowercase设定文本小写尝试一下.text-uppercase设定文本大写尝试一下.text-capitalize设定单词首字母大写尝试一下.initialism显示在<abbr>元素中的文本以小号字体展示，且可以将小写字母转换为大写字母尝试一下.list-unstyled移除默认的列表样式，列表项中左对齐(<ul>和<ol>中)。这个类仅适用于直接子列表项(如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)尝试一下.list-inline将所有列表项放置同一行尝试一下.pre-scrollable使<pre>元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条尝试一下