|
Post by account_disabled on Jan 25, 2024 2:11:06 GMT -5
在本教程中,我们将深入了解 Bootstrap 如何处理排版,以及如何以几种不同的方式修改代码以创建响应式字体比例。这通常被称为“响应式排版”,其目的是使您的排版在所有屏幕尺寸上都可读,并避免在手机上出现巨大的标题!如何默认设置版式 要了解 Bootstrap 排版的工作方式,我们需要开始研究源SCSS文件以探索设置和默认设置。 注意:为了在整个教程中清晰起见,我注释掉了 Bootstrap 代码中与排版无关的样式。 元素html_ 我们首先看一下_reboot.scss第 27 行中的根元素的样式 从元素来看,在设置字体比例html方面没有太多可报告的。然而,值得注意的是这些声明。 就类型规模而言,我们只需要关心font-size。默认情况下,这是通过$font-size-base中找到的变量设置的_variables.scss,并且等于1rem。 元素p_ 该p元素的这些样式位于_reboot.scss第 109 行这 WhatsApp 号码数据 里没什么可报告的:p标签只是像您所期望的那样从主体继承了它的font-size和。贯穿元素h1_h6 这些样式位于_type.scss第 16 至 21 行您可以在此处看到元素和实用程序类是font-size通过变量指定的。相应的变量位于_variables.scss第 246 至 251 行。查看这些变量,我们可以看到默认大小适用于所有浏览器和视口宽度 查看上面的字体比例,很明显,.25rem使用了 的增加,直到h1,它得到了.5rem增加。 ont-size如果您使用 Sass 编译器,则可以在自定义变量文件中覆盖这些大小,但它仍然为所有浏览器和视口宽度的每个标题留下一个大小。 通过.display-1实用.display-4程序类 以下代码位于_type.scss第 29 至 48 行与标题元素一样,显示实用程序类大小在文件的第 259 至 262 行中定义为变量。_variables.scss同样,如果您使用 Sass 编译器,则可以在自定义变量文件中覆盖这些变量。 这大约涵盖了 Bootstrap 的设置,我们现在可以研究制作可快速调整认情况下,标题及其类的 是使用 中找到的。 直接为所有屏幕和视口尺寸的标题设置一个font-size可能很快会导致标题过大,从而导致糟糕的用户体验。
|
|