Как изменить размер шрифта Bootstrap для глобального размера по умолчанию?

Ответ 1

Существует несколько способов, но поскольку вы используете только версию CSS, а не версии SASS или LESS, лучше всего использовать собственный инструмент настройки Bootstraps:

http://getbootstrap.com/customize/

Настройте то, что вы хотите на этой странице, и затем вы можете загрузить собственную сборку с вашими размерами шрифта и другими изменениями.

Изменение CSS файла напрямую (или просто добавление новых стилей CSS, которые переопределяют Bootstrap CSS) не рекомендуется, потому что другие значения стиля Bootstrap производятся из базового размера шрифта. Например:

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

Вы можете видеть, что базовый размер шрифта используется для расчета размеров h1, h2, h3 и т.д. Если вы просто изменили размер шрифта в CSS (или добавили свой собственный переопределяющий размер шрифта) все остальные значения что используемый размер шрифта в расчетах больше не будет пропорционально точным в соответствии с дизайном Bootstrap.

Как я уже сказал, лучше всего использовать собственный инструмент настройки. Для этого это и есть.

Если вы используете SASS или LESS, вы должны изменить размер шрифта в файле переменных перед компиляцией.

Ответ 2

Вы можете добавить style.css, импортировать этот файл после bootstrap.css, чтобы переопределить этот код.

Например:

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

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

Не меняйте bootstrap.css непосредственно для лучшего обслуживания кода.

Ответ 3

Bootstrap использует переменную:

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

Я не рекомендую делать это, но вы можете. Лучше всего переопределить размер базового шрифта по умолчанию браузера:

html {
  font-size: 14px;
}

Затем Bootstrap берет это значение и использует его через rems для установки значений для всех видов вещей.

Ответ 4

В v4 измените переменную SASS:

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

Ответ 5

Я просто решил этот тип проблемы. Я пытался увеличить размер шрифта

до размера h4. Я не хочу использовать тег h4. Я добавил css после bootstrap.css, это не сработало. Самый простой способ: В HTML-документе введите

<p class="h4">

Вам не нужно ничего добавлять к вашему листу css. Он отлично работает Вопрос: Предположим, я хочу размер между h4 и h5? Ответ почему? Это единственный способ порадовать своих зрителей? Я предпочту использовать этот метод для подделки стандартными документами, такими как bootstrap.