开发者学堂课程【前端开发框架 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>