内容排版: 标题处理


发布时间:2020-03-17 20:57    作者: 晖哥哥   已过去:1 年,7 月   阅读总量:769 已被赞:0


内容  排版

标题  

兼容所有HTML标题集,涵括从 <h1>  <h6>,的六种标题展现。

CSS选择器也支持以.h1 -- .h6 方式引用,这样可以使字体样式呈现出标题效果,不同是引用.h1 -- .h6的文本段不会视作HTML的标题元素(往往SEO、读屏器和机器识别时对此很敏感)

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>

<h4>h4. Bootstrap heading</h4>

<h5>h5. Bootstrap heading</h5>

<h6>h6. Bootstrap heading</h6>

 

<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>

自定义标题备注

使用附带的实用类从Bootstrap 重新创建小的辅助标题文本

<h3>

主标题主标题

<small class="text-muted">副标题副标题</small>

</h3>

显式标题

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>

Lead中心内容

通过应用 .lead样式,可以定义一个中心段落,用于提示这是中心内容或重要内容。

<p>苹果苹果苹果苹果</p>

<p class="lead">香蕉香蕉香蕉香蕉</p>

<p>橘子橘子橘子橘子</p>

<p>梨子梨子梨子梨子</p>

文本内联元素

del能更形象的描述意思ins 代表被插入的文字,u 代表有下划线

strongem等有强调作用,有利于seo(搜索引擎优化)

<p>看看我是不是<mark>高亮</mark>文本</p>

<p>看看我是不是<span class="mark">高亮</span>文本</p>

 

<p><small>小号字小号字小号字</small></p>

<p><span class="small">小号字小号字小号字</span></p>

 

<p><del>删除线删除线删除线</del></p>

<p><s>删除线删除线删除线</s></p>

 

<p><ins>下划线下划线下划线</ins></p>

<p><u>下划线下划线下划线</u></p>

 

<p><strong>粗体粗体粗体</strong></p>

<p><b>粗体粗体粗体</b></p>

 

<p><em>斜体斜体斜体</em></p>

<p><i>斜体斜体斜体</i></p>

abbr缩略语

<p><abbr title="请填写您的邮箱" class="initialism">email</abbr></p>

blockquote 来源备注与引用

引用文档中另一个来源的内容块,请在一段HTML外面包裹 <blockquote class="blockquote">,作为引用。为了显示直接引用,我们推荐使用<p>作为子级包裹容器

底部来源<footer class="blockquote-footer"> 用于标识来源,一般用于页脚(所以有*-footer),然后配合 <cite>使用。

(<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。)

对齐处理:如果需要居中对齐或右对齐,使用.text-center.text-right方法配合即可

<blockquote class="blockquote text-right">

<p class="mb-0">爱上一个地方,就应该背上包去旅游,走得更远。</p>

<footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>

</blockquote>

 

点赞

0




登陆后方可评论