08_Bootstrap 全局 css 样式_排版3|学习笔记

简介: 快速学习08_Bootstrap 全局 css 样式_排版3

开发者学堂课程【前端开发框架 Bootstrap 使用教程08_Bootstrap 全局 css 样式_排版3】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/360/detail/4227


08_Bootstrap 全局 css 样式_排版3


目录

一、引用

二、列表


一、引用

引用:

在文档中引用其他来源的内容。

默认样式的引用:

将任何 HTML 元素包裹在<blockquote>中即可表现为引用样式。对于直接引用,建议用<p>标签。

举例:<blockquote>  

<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Integer posuere erat a ante.</p>

</blockquote>

多种引用样式:

对于标准样式的<blockquote>,可以通过几个简单的变体就能改变风格和内容。

命名来源:添加<footer>用于标明引用来源。来源的名称可以包裹进<cite>标签中。

举例:

<blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<footer>Someone famous in <cite title="Source Title">Source Title</citex</footer>

</blockquote>

另一种展示风格:

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

实例:

<blockquote class="blockquote-reverse >

……

</blockquote>


二、列表

无序列表:

排列顺序无关紧要的一列元素

标签:<u1>

<1i>…</1i>

</u1>

有序列表:

顺序至关重要的一组元素

标签:<o1>

<1i>…</1i>

</o1>

无样式列表:

移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,需要对所有嵌套的列表都添加这个类才能具有同样的样式。

标签:<u1 class=”list-unstyled”>

<1i>…</1i>

</u1>

内联列表:

通过设置display:inline-block;并添加少量的内补(padding),将所有元素放置于一行。

标签:

<u1 class=”list-inline”>

<1i>…</1i>

</u1>

描述:

带有描述的短语列表

标签:

<d1>

<dt>…</dt>

<dd>…</dd>

</d1>

相关文章
|
8天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
7天前
|
前端开发
Bootstrap5 文字排版3
Bootstrap 5 默认字体大小为 16px,行高 1.5,字体族为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有元素默认上边距为 0,下边距为 1rem (16px)。HTML 标题(h1 至 h6)和代码元素(code、kbd、pre)均有预设样式,方便快速开发和一致的视觉效果。
|
7天前
|
前端开发
Bootstrap5 文字排版2
Bootstrap 5 默认字体大小为 16px,行高 1.5,字体系列为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有 HTML 标题(h1 至 h6)均有预设样式,段落默认上下间距为 16px。此外,Bootstrap 5 还提供了高亮文本、缩写、引用块和描述列表等元素的样式定义。
|
14天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
91 1
|
2天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
2天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
7天前
|
移动开发 前端开发
Bootstrap5 文字排版1
Bootstrap 5 的默认文字排版设置包括:font-size 为 16px,line-height 为 1.5,font-family 为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有元素的 margin-top 为 0,margin-bottom 为 1rem。HTML 标题(h1 至 h6)和 .h1 至 .h6 类均定义了样式,还有 .display-1 至 .display-4 类用于更大的标题样式。small 元素用于创建更小且颜色更浅的文本。