BootStrap入门学习笔记(三)

最新推荐文章于 2022-10-09 14:09:16 发布

原创最新推荐文章于 2022-10-09 14:09:16 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #css

本文详细介绍了如何使用BootStrap进行高效排版，包括标题、段落、列表等元素的样式调整，以及文本对齐、引用、代码显示等高级功能。掌握这些技巧，能帮助开发者快速美化网页布局。

BootStrap排版

BootStrap默认定义了标题、段落、列表及其他内联元素的特性。

内联子标题：如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加，或者添加.samll的class类，这样子就能得到一个字号更小、颜色更浅的文本字体。
引导主体副本：为了给段落添加强调文本，则可以添加class="lead"，这样将得到更大更粗、行高更高的文本。
强调：HTML的默认强调标签、、。BootStrap还提供了一些用于强调文本的类：

类名	作用
text-left	向左对齐文本
text-center	居中对齐文本
text-right	向右对齐文本
text-muted	本行内容是减弱的
…	…

缩写：BootStrap定义<abbr>元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面的时候会显示完整的文本(对应<abbr>元素的title属性)。
地址：使用<address>标签，可以在网页上显示联系信息。由于<address>默认为display:block，所以需要使用 标签来为封闭的地址文本换行。
引用：<blockquote>。可以选择添加一个标签来标识引用的来源，使用class="pull-right"向右对齐引用。
列表：BootStrap支持有序列表、无序列表和定义列表。
这里记录记录一下无序列表的用法：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果不需要这些着重号，可以使用class="list-unstyled"来移除。如果想让列表呈现一行显示，可以通过使用class="list-inline"来更改样式。
再来简单介绍一些定义列表：在这种类型的列表中，每个列表项可以包含<dt>和<dd>元素。<dt>代表定义术语，<dd>是<dt>的描述。其中class="dl-horizontal"可以让<dl>内的短语及其描述排成一行。

BootStrap代码显示

<code>标签显示代码，此种方式常用于内联显示代码。
<pre>，此种方式适用于在代码需要被显示为一个独立的块元素时或者代码有多行时。可以使用class="pre-scrollable"给代码块添加滚动条。
注意：在使用<code>和<pre>这两个标签时，开始和结束标签使用了Unicode变体：<和>。
-按键提示：<kbd> 。举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">      <title>Document</title>
</head>
<body>    
<p>复制的快捷键是：<kbd>CTRL+C</kbd></p>
</body>
</html>

在这里插入图片描述