如何更改或覆盖引导程序4模板中的基本字体大小？

Question

我使用Thymeleaf HTML页面模板和Bootstrap 4创建了一个Java/Spring应用程序，我基于一个名为'Simple Sidebar'：https://startbootstrap.com/template/simple-sidebar的免费引导4站点模板。到目前为止，这对我来说还不错。

我想修改(或覆盖)‘简单边栏’引导模板中提供的CSS，这样整个模板的默认文本字体大小就会更小。我正在构建的应用程序是供公司内部使用的，只能在PC浏览器上查看。我需要它来适应大量的信息在一次屏幕上，所以字体大小是关键。

问题：

1. 是否可以在引导程序4模板中进行这种更改?如果是的话，是否需要修改模板附带的CSS文件，或者是否有一种方法可以用我添加到项目中的自定义CSS文件覆盖它们的CSS类？(如果可以避免的话，我不希望修改引导模板附带的CSS文件)

Answer 1

我在这里找到了一个有用的教程：

https://bootstrapcreative.com/can-adjust-text-size-bootstrap-responsive-design

他们推荐了一种基于显示页面的窗口/屏幕大小类别来重写font-size的方法。我在自己的应用程序中尝试了这种方法，它给我提供了我想要的那种灵活性。

作为一个测试，我对一些常用的HTML元素类型使用了以下大得离谱的值。如预期的那样，文本在这些元素中显示得非常大。

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  a {font-size:3.5rem;} /*1rem = 16px*/
  td {font-size:3.5rem;} /*1rem = 16px*/
  p {font-size:3.5rem;} /*1rem = 16px*/
  h1 {font-size:3.5rem;} /*1rem = 16px*/
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  a {font-size:5rem;} /*1rem = 16px*/
  td {font-size:5rem;} /*1rem = 16px*/
  p {font-size:5rem;} /*1rem = 16px*/
  h1 {font-size:5rem;} /*1rem = 16px*/
}

对于非常小的值，它也是这样工作的：

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  a {font-size:0.5rem;} /*1rem = 16px*/
  td {font-size:0.5rem;} /*1rem = 16px*/
  p {font-size:0.5rem;} /*1rem = 16px*/
  h1 {font-size:0.5rem;} /*1rem = 16px*/
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  a {font-size:0.75rem;} /*1rem = 16px*/
  td {font-size:0.75rem;} /*1rem = 16px*/
  p {font-size:0.75rem;} /*1rem = 16px*/
  h1 {font-size:0.75rem;} /*1rem = 16px*/
}

我喜欢如果我缩小浏览器窗口，字体大小将自动调整在我的PC上。当然，只有在为各种窗口大小提供合理的值时，它才能正常工作。

我能够在不修改包含在引导模板包中的任何文件的情况下工作。我将上面的示例CSS放入一个名为my-custom-styles.css的文件中，并将该文件放入与Bootstrap模板附带的simple-sidebar.css文件相同的目录中。

最后，我的HTML模板需要在<head>块中这样做：

  <!-- Bootstrap core CSS -->
  <link rel="stylesheet"
        th:href="@{/vendor/bootstrap/css/bootstrap.min.css}"
        href="../../static/vendor/bootstrap/css/bootstrap.min.css" />
  <!-- Custom styles for this Boostrap template -->
  <link rel="stylesheet"
        th:href="@{/css/simple-sidebar.css}"
        href="../../static/css/simple-sidebar.css" />
  <!-- Custom styles for my application that override the Bootstrap template -->
  <link rel="stylesheet"
        th:href="@{/css/my-custom-styles.css}"
        href="../static/css/my-custom-styles.css" />

注意：th:href属性由Thymeleaf模板库使用，不包含在发送到客户端浏览器的最终HTML中。