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

Question

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

Глобальный размер шрифта Bootstrap по умолчанию равен 14px, а высота строки-1,428. Как я могу изменить его глобальные настройки по умолчанию?

Придется ли мне менять bootstrap.минута.css во всех множественных записях?

682 6

css twitter-bootstrap twitter-bootstrap-3 font-size

6 ответов:

Comments

Ничего не найдено.

Jake Wilson · Accepted Answer · 2016-05-16 09:27:56

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

Http://getbootstrap.com/customize/

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

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

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

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

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

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

Alessander França · Accepted Answer · 2016-05-12 18:18:51

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

Например:
/* bootstrap.css */
* {
   font-size: 14px;
   line-height: 1.428;
}

/* style.css */
* {
   font-size: 16px;
   line-height: 2;
}
Не изменяйте bootstrap.css непосредственно для лучшего обслуживания кода.

CloudMagick · Accepted Answer · 2017-09-13 21:48:07

Bootstrap использует переменную:
$font-size-base: 1rem; // Assumes the browser default, typically 16px
Я не рекомендую возиться с этим, но вы можете. Рекомендуется переопределить базовый размер шрифта браузера по умолчанию с помощью:
html {
  font-size: 14px;
}
Bootstrap затем возьмет это значение и использует его через rems для установки значений для всех видов вещей.

Jeremy Lynch · Accepted Answer · 2017-08-14 17:18:09

В v4 измените переменную SASS:
$font-size-base: 1rem !default;

Paul Odeon · Accepted Answer · 2018-04-20 15:10:58

Рекомендуемый способ сделать это из текущих документов v4:
$font-size-base: 0.8rem;
$line-height-base: 1;
Обязательно определите переменные, указанные выше bootstrap css include, и они переопределят bootstrap.

Больше ничего не нужно, и это самый чистый способ

Это довольно ясно описано в документах https://getbootstrap.com/docs/4.1/content/typography/#global-settings

Olu Adabonyan · Accepted Answer · 2017-01-31 18:29:44

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

Размер шрифта до размера h4. Я не хочу использовать тег h4. Я добавил свой css после bootstrap.но это не сработало. Самый простой способ-это: В HTML-документе введите
<p class="h4">
Вам не нужно ничего добавлять в таблицу css. Это прекрасно работает Вопрос в том, что, предположим, я хочу размер между h4 и h5? Ответь почему? Это единственный способ порадовать ваших зрителей? Я предпочту этот метод вмешательству в стандартные документы, такие как загрузчик.