如何在 bootstrap 和 sass 中编辑标题的字体大小

Question

如何编辑 bootstrap 和 sass 中标题的字体大小？并尝试了这个代码，它不起作用，帮我解决这个问题。这是我的 HTML 代码：

<span class="h1" id="minutes">00</span>
<span class="h1" id="colon">:</span>
<span class="h1" id="seconds">00</span>
<span class="h1" id="colon">.</span>
<span class="h1" id="milliseconds">00</span>

这是我的 SASS 代码

    @import "../node_modules/bootstrap/scss/_functions";
    @import "../node_modules/bootstrap/scss/_variables";
    @import "../node_modules/bootstrap/scss/_utilities";
                
    $utilities: () !default;
    $utilities: map-merge((
                
    
    "font-size": (
                  rfs: true,
                  property: font-size,
                  class: fs,
                  values: (
                    1: 7rem,
                    2: 6rem,
                    3: 5rem,
                    4: 4rem,
                    5: 3rem,
                    6: 2rem
                  ),
                ),
              ),
              $utilities
                );
                
    @import "../node_modules/bootstrap/scss/bootstrap";

Answer 1

注意：切勿更改引导文件中的默认值，而应始终使用自定义 CSS/JS 文件修改值。

试试这个代码：

    @import "../node_modules/bootstrap/scss/_functions";
    @import "../node_modules/bootstrap/scss/_variables";
    @import "../node_modules/bootstrap/scss/_utilities";
                
$h1-font-size: 7rem;
$h2-font-size: 6rem;
$h3-font-size: 5rem;
$h4-font-size: 4rem;
$h5-font-size: 3rem;
$h6-font-size: 2rem;
                
    @import "../node_modules/bootstrap/scss/bootstrap";

检查引导文档，您可以更改字体大小变量

https://getbootstrap.com/docs/5.0/utilities/text/#font-size