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

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

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

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

6 ответов

есть несколько способов, но поскольку вы используете только версию CSS, а не SASS или менее версий, лучше всего использовать собственный инструмент настройки 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 или меньше, вы должны изменить размер шрифта в файле переменных перед компиляцией.

44

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

например:

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

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

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

32

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

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

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

html {
  font-size: 14px;
}

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

9

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

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

рекомендуемый способ сделать это из текущих документов v4:

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

обязательно определите переменные над загрузочным css, и они переопределят загрузочный CSS.

Не нужно ничего другого, и это самый чистый способ

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

0

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

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

<p class="h4">

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

-5