如何更改Bootstrap的全局默认字体大小?

问题描述 投票:0回答:9

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

我必须更改所有多个条目中的 bootstrap.min.css 吗?

css twitter-bootstrap twitter-bootstrap-3 font-size
9个回答
77
投票

Bootstrap 使用变量:

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

我不建议用这个来破坏,但你可以。最佳实践是使用以下方法覆盖浏览器默认基本字体大小:

html {
  font-size: 14px;
}

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


56
投票

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

http://getbootstrap.com/customize/

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

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

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52

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

正如我所说,最好的选择是使用他们自己的自定义工具。这正是它的用途。

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


41
投票

您可以添加一个

style.css
,在
bootstrap.css
之后导入此文件以覆盖此代码。

例如:

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

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

不要直接更改

bootstrap.css
,以便更好地维护代码。


16
投票

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

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

请务必定义引导程序 css 上方的变量,它们将覆盖引导程序。

不需要任何其他东西,这是最干净的方法

文档中描述得非常清楚https://getbootstrap.com/docs/4.1/content/typography/#global-settings


10
投票

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

$font-size-root: 16px;

5
投票

在 v4 中更改 SASS 变量:

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

2
投票

我通过CDN(内容分发网络)使用Bootstrap,所以我用这种简单的方法解决了这个问题。更改

font-size
标签中的全局默认值
<html>

较小字体大小的示例:

<html style="font-size:0.875em">

简单更改 em 值。

Bootstrap 版本 5.2 的字体大小为 1rem:

字体大小基础:1rem; // 假设浏览器默认,通常是

16px

0.875em = 14px,如果默认浏览器字体大小为 16px

1em = 16 像素

1.125em = 18px,如果默认浏览器字体大小为 16px


1
投票

这是一个老问题,但这个框架在不断发展。

在 Bootstrap v5 中,您有一种通过 CSS 变量减小字体大小的新方法。

最终,Bootstrap 5 将继续看到随着时间的推移添加更多 CSS 变量,以便提供更多实时定制,而无需总是重新编译 Sass。我们的方法是获取源 Sass 变量并将它们转换为 CSS 变量。这样,即使您不使用 CSS 变量,您仍然拥有 Sass 的所有功能。这仍在进行中,需要时间才能完全实施。

来源:https://getbootstrap.com/docs/5.3/content/reboot/#css-variables

正如所引用的,有一项工作正在进行中,大多数变量自 v5.2 起可用,有些自 v5.3 起可用,所有变量都以引导前缀 (--bs-) 开头。

您必须像这样在主体中设置变量:

<body style="--bs-body-font-size: 1.25rem">
<!--- ... -->
</body>

我强烈建议使用em或rem作为单位。

它是有文档记录的,但不容易找到,这些变量分散在所有文档中的小部分中。我从来不喜欢重新编译 SASS/SCSS 的想法,使用这种方法你可以像使用其他 JS/CSS 一样使用 CDN。

您可以在样式面板的底部找到大多数检查 Bootstrap v5.x 页面的变量。您可以使用我的页面查看这些变量,在编写 v5.3 时正在运行。


-8
投票

我刚刚解决了此类问题。我试图将

字体大小增加到 h4 大小。我不想使用 h4 标签。 我在 bootstrap.css 之后添加了我的 css 它不起作用。 最简单的方法是这样的: 在 HTML 文档中,输入

<p class="h4">

您不需要向 CSS 表添加任何内容。效果很好 问题是假设我想要 h4 和 h5 之间的尺寸? 回答为什么?这是取悦观众的唯一方法吗? 我更喜欢这种方法,而不是篡改 bootstrap 等标准文档。

© www.soinside.com 2019 - 2024. All rights reserved.