css鼠标悬停样式_基本CSS样式排版

最新推荐文章于 2025-05-17 12:59:03 发布

最新推荐文章于 2025-05-17 12:59:03 发布 · 919 阅读

文章标签：

#css鼠标悬停样式

本文介绍了Bootstrap框架中关于排版的基本设置与多种列表组件的使用方法，包括标题、段落、引用、列表等，详细解释了如何通过不同的类和标签实现多样化的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题

HTML中定义的所有标题标签，从

到

都是可用的。

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Body copy

Bodystrap定义的全局font-size是14px,line-height是20px。这些样式应用到了

和所有的段落上。另外，对

(段落)还定义了1/2行高(默认为10px)的底部外边边距(margin)属性。

<p>...p>

Lead body copy

通过添加 .lead 让段落突出显示

class

="lead">...</p>

使用Less工具构建

variables.less文件中定义的两个LESS变量决定了排版尺寸: @baseFontSize 和 @baseLineHeight。第一个变量定义了全局font-size基准，第二个变量是line-height基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的margin、 padding和line-height。自定义这些变量即可改变Bootstrap的默认样式。

强调

直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。

对于不需要强调的inline或block类型的文本，使用small标签。

<p>  <small>This line of text is meant to be treated as fine print.small>p>

加粗

用增加font-weight值的方式加粗强调一段文本。

<strong>rendered as bold textstrong>

斜体

用斜体字强调一段文本。

<em>rendered as italicized textem>

对齐类

简单方便将文字对齐的类。

class

=

class

=

class

=

强调类

这些用去强调的工具类通过颜色来表示强调。

class

=

class

=

class

=

class

=

class

=

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML 元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。

如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

<abbr title="attribute">attrabbr>

class="initialism">

为标签添加 .initialism 类使其使用更小一些的字号。

"HyperText Markup Language" class="initialism">HTML</abbr>

地址

让联系信息以最接近日常使用的格式呈现。

在每行结尾添加
可以保留需要的样式。

<address>  <strong>Twitter, Inc.strong><br>  795 Folsom Ave, Suite 600<br>  San Francisco, CA 94107<br>  <abbr title="Phone">P:abbr> (123) 456-7890address> <address>  <strong>Full Namestrong><br>  <a href="mailto:#">first.last@example.coma>address>

引用

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

默认引用

将任何HTML包裹在

之中即可表现为引用。对于直接引用，我们建议用
标签。
<blockquote>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.p>blockquote>
引用选项

在标准的引用里，可以很简单的改变风格和内容。

命名来源

添加标签来注明引用来源。来源名称可以放在标签里面。
<blockquote>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.p>  <small>Someone famous <cite title="Source Title">Source Titlecite>small>blockquote>
另一种展示风格

使用.pull-right类，可以让引用展现出向右侧移动、对齐的效果。
class
= ...</blockquote>
列表

无序列表

无序列表是不关心先后顺序的一组元素的集合。
<ul>  <li>...li>ul>
有序列表

有序列表是强调顺序的一组元素的集合。
<ol>  <li>...li>ol>
无样式列表

移除了默认的list-style，并左侧填充列表(只对直接子节点项有效)。
class= <li>...li></ul>
行内列表

使用inline-block让列表项水平排列一行，同时每项都有少量的内补(padding)。
class= <li>...li></ul>

描述

对一个列表(条目)进行关联描述。
<dl>  <dt>...dt>  <dd>...dd>dl>
水平描述

使
<dl class="dl-horizontal">  <dt>...dt>  <dd>...dd>dl>
来源：https://v2.bootcss.com/base-css.html#typography