Bootstrap 排版引用

HTML 中的 <blockquote> 标签，用于标记一段引用的内容，其目的是把它跟其它内容区分开来。

在 <blockquote> 标签内部，建议使用 标签进行分段，用 标签标记引用的来源，用 <cite> 标签标记引用的标题或人名。如：

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ...
Someone famous <cite title="Source Title">Source Title</cite>
</blockquote>

Bootstrap会缩进引用的文本，并在左侧添加一条粗边框。效果如图 3‑12所示：

图3-12 Bootstrap blockquote样式

为 <blockquote> 元素添加 .pull-right 类，会让引用的内容右对齐，不光是文本会右对齐，整个引用块都会浮动到右边。如：

<blockquote class="pull-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ...
Someone famous <cite title="Source Title">Source Title</cite>
</blockquote>

效果如图 3‑13所示：

图3-13 Bootstrap blockquote右对齐

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap 排版引用相关推荐

Bootstrap 排版
2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默 ...
Bootstrap排版之标题
Bootstrap排版之标题 1.定义标题样式 2.运行效果 3.定义 4.运行效果,表面上看是差不多的,但其实你看这两个的源代码,第二种样式是没有定义margin-top和 marging-bott ...
Bootstrap排版中地址与引用详解
地址元素address 我们的地址在HTML5中增加了一个address标签,可以把我们的地址写在address标签里面,address里面强调换行等等都是可以的. 实例: <address&g ...
Bootstrap——排版（标题、段落、强调、缩略语、引用）
标题 1.在Bootstrap4中,主要对标题样式做了如下规定: (1)重设上下外边距,margin-top值为0,margin-bottom:0.5rem. (2)固定所有标题行高为line-hei ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：移除默认的列表样式
<!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定文本对齐,段落中超出屏幕部分文字自动换行...
<!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设置浮动和偏移
<!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...
Bootstrap 排版正文
对正文排版,Bootstrap定义的默认字体栈为 "Helvetica Neue".Helvetica.Arial. sans-serif,它们也是主流操作系统默认支持的标准字体. ...
Bootstrap 排版和链接
Bootstrap 为屏幕.排版和链接专门设置了以下全局样式: 移除了body的 margin,这样内容就会紧贴浏览器窗口的边缘: 设置了 body 的背景颜色 background-color: w ...

Bootstrap 排版引用

Bootstrap 排版引用相关推荐

最新文章

热门文章