《Bootstrap前端开发从入门到实战(微视频版)》课件 第02章 基础样式.pptx

基础样式

目录Contents01Bootstrap基础排版设置02正文与文本块样式03实战案例：在线简历模板04思考与练习

01Bootstrap基础排版设置

默认排版样式Bootstrap默认字体大小14像素，采用sans-serif字体族，如HelveticaNeue、Helvetica、Arial等。字体栈确保在不同设备上显示效果一致。

表2-1详细列出了Bootstrap默认排版设置，包括html、body、标题和段落等元素的字体大小、行高和外边距。字体栈优化HelveticaNeue可能不是所有计算机的默认字体，且安装不完整时会导致显示问题。可通过自定义样式表覆盖Bootstrap字体栈，使用font-family:Arial,Helvetica,HelveticaNeue,sans-serif!important;确保字体显示正常。排版样式应用Bootstrap为页面排版提供了简洁的默认样式，用户无需手动调整字体大小或行高，即可快速开发出美观的网页。这种默认设置大大提高了开发效率，同时保证了页面的可读性和一致性。页面排版基础

标准标题样式Bootstrap重写HTML默认标题样式，所有标题和段落元素的上外边距被移除，下外边距设置为0.5rem。标题h1~h6的字体大小根据视口宽度动态调整，视口宽度大于或等于1200px时，字体大小分别为2.5rem、2rem、1.75rem、1.5rem、1.25rem、1rem。

示例代码展示了如何使用HTML标题标签和Bootstrap标题类实现不同级别的标题效果，如h1到h6以及.h1到.h6，并可通过.display-1到.display-6类进一步突出显示标题。内联子标题与辅助文本标题样式优化Bootstrap支持在标题中嵌套small标签创建内联子标题，并可通过.text-muted样式类将子标题文本设置为灰色，以补充或说明主标题内容。

通过.small类为内联标题添加辅助文本，如在span元素中使用.small类，可使文本字体大小变为父元素的0.875倍，增强页面内容的层次感和可读性。Bootstrap为标题提供了多种样式类，如.display-1到.display-6，用于在大屏幕上显示更大的标题，提升视觉效果。这些样式类在视口宽度大于或等于1200px时，字体大小分别为5rem、4.5rem、4rem、3.5rem、3rem、2.5rem，使标题更具吸引力和表现力。标题样式设计

02正文与文本块样式

段落样式Bootstrap为段落标签p设置了上边距为0，下边距为1rem的默认样式，确保段落之间的间距合理。通过.lead类可实现强调文本效果，使文字更大、更粗，行高更大，具体表现为font-size:1.25rem和font-weight:300。

示例代码展示了如何使用.lead类突出显示重要段落，如pclass=lead这是要强调的文本内容。/p，使页面内容的重点更加突出，吸引用户注意力。内联文本样式Bootstrap重定义了内联文本元素的样式，如mark用于突出显示文本，strong用于加粗文本，small用于显示略小的文本。HTML5中的em用于斜体文本，del用于删除文本，b用于高亮显示文本，i用于表示外来语或技术术语。

示例代码展示了如何使用这些内联文本元素实现不同的文本效果，如em强调/em、del过时/del、b突出显示/b和i外来语/i，丰富了页面文本的表现形式。文本块样式Bootstrap为文本块提供了多种样式，如缩略语、引用、列表和代码等。缩略语使用abbr标记实现，鼠标悬停时显示完整内容；引用使用blockquote标记和.blockquote类实现增强样式；列表包括无序列表、有序列表和内联列表，可通过.list-unstyled和.list-inline类进行样式调整；代码包括行内代码和代码块，分别使用code和pre标签实现。

示例代码展示了如何使用这些文本块样式，如缩略语abbrtitle=HyperTextMarkupLanguageHTML/abbr、引用blockquote.../blockquote、无序列表ul.../ul和代码块precode.../code/pre，使页面内容更加丰富和多样化。正文样式设计

响应式图片Bootstrap通过.img-fluid类实现图片的响应式布局，使图片能够根据父容器的大小自动调整大小，保持宽高比。同时，.img-thumbnail类可为图片添加内边距和灰色边框，增强图片的视觉效果。

示例代码展示了如何使用.img-fluid类创建响应式图片，如imgsrc=...class=img-fluidalt=...，确保图片在