如何改变Bootstrap的全局默认字体大小？

Question

Bootstrap的全局默认字体大小为14px,行高为1.428.如何更改其默认全局设置？

我是否必须在所有多个条目中更改bootstrap.min.css？

Answer 1

有几种方法,但由于您只使用CSS版本而不是SASS或LESS版本,您最好使用Bootstraps自己的自定义工具:

在此页面上自定义您想要的任何内容,然后您可以下载具有您自己的字体大小和您想要更改的任何其他内容的自定义构建.

不建议直接更改CSS文件(或者只是添加覆盖Bootstrap CSS的新CSS样式),因为其他Bootstrap样式的值是从基本字体大小派生的.例如:

您可以看到基本字体大小用于计算h1,h2,h3等的大小.如果您刚刚更改了CSS中的字体大小(或添加了您自己的覆盖字体大小),那么所有其他值都使用了根据Bootstrap的设计,计算中的字体大小将不再成比例准确.

正如我所说,最好的办法就是使用自己的自定义工具.这正是它的用途.

如果您使用SASS或LESS,则在编译之前将更改变量文件中的字体大小.

Answer 2

您可以添加一个style.css,导入此文件后bootstrap.css覆盖此代码.

例如:

/* bootstrap.css */
* {
   font-size: 14px;
   line-height: 1.428;
}

/* style.css */
* {
   font-size: 16px;
   line-height: 2;
}

不要bootstrap.css直接更改以便更好地维护代码.

这是一个糟糕的方法.bootstrap.css中有很多其他样式,它们基于字体大小和行高,例如标题的大小.如果你只是更新font-size,那么其他任何东西都不会改变.这就是他们拥有配置工具的原因.如果更新其工具(或较少的配置文件)中的font-size和line-height,则所有基于它们的样式也将更新.此外,当您使用他们的工具时,如果您正在升级bootstrap或决定要进行更改,则bootstrap会为您提供一个文件,您可以在以后将其导入到他们的工具中.杰克的答案是最好的. (20认同)

Answer 3

Bootstrap使用变量:

$font-size-base: 1rem; // Assumes the browser default, typically 16px

我不推荐这样做,但你可以.最佳做法是使用以下方法覆盖浏览器默认基本字体大小:

html {
  font-size: 14px;
}

然后Bootstrap将获取该值并通过rems使用它来设置各种事物的值.

@CXJ 你是对的，v3 将 `$font-size-base` 设置为 `14px`。如果您绑定到 v3，我建议将该值更改为 `1rem`，然后设置 `html {font-size: 14px}`，如上例所示。 (2认同)
这是正确的答案。从心底里感谢你 (2认同)

Answer 4

从 Bootstrap 5 开始，您可以通过更改 $font-size-root 变量来设置默认字体大小。

$font-size-root: 16px;

Answer 5

在 v4 中更改 SASS 变量：

$font-size-base: 1rem !default;

Answer 6

从当前v4文档执行此操作的推荐方法是：

$font-size-base: 0.8rem;
$line-height-base: 1;

确保在bootstrap css include上方定义变量，它们将覆盖bootstrap。

不需要别的了，这是最干净的方法