Уменьшите размер всего в bootstrap 4 глобально - PullRequest
Новая
       52

Уменьшите размер всего в bootstrap 4 глобально

0 голосов
/ 26 марта 2020

Есть ли способ уменьшить все размеры на определенную величину для Bootstrap 4 во всем мире?

Обычный размер слишком велик для администратора моего компьютера. Вместо того, чтобы идти и добавлять небольшие классы из bootstrap и пользовательские классы, чтобы получить желаемые размеры, я могу обновить переменные в bootstrap, которые повсюду уменьшат размеры (padding, margin, font-size и т. Д. c) .

Ответы [ 2 ]

2 голосов
/ 26 марта 2020

В Boostrap 4: 

body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;

}

Здесь размер шрифта определяется как 1rem. Во всех Bootstrap CSS размеры вещей указаны в rem, что составляет root em, поэтому для обновления:

В настоящее время в Bootstrap 4: 

:root {
    --blue: #007bff;  
    ... colours ...
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI", ... ,Roboto;
    --font-family-monospace: SFMono-Regular, ... ,monospace
}

*,::after,::before {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

Для обновления:

В разделах :root или html вы устанавливаете размер шрифта равным заданному размеру, в пикселях, то, что это будет, будет зависеть от того, что вы ищете: 

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
    font-size: 12px; /* for example */
}

ИЛИ 

:root {
    ...
    ...
    font-size: 12px; /* for example */
}

Будет ли это заботиться обо всех кнопках и делителях, а также обо всех других отступах и полях элементов? Большая кнопка будет выглядеть странно с меньшим размером шрифта.

Это позаботится обо всем в CSS, что измерено в em или rem единицах, я не сделал исчерпывающую проверку, но похоже, что это охватило бы почти все.

0 голосов
/ 26 марта 2020

Почему бы не изменить точки останова в файле _custom.s css и перекомпилировать bootstrap.
Преимущество: у вас меньше проблем при обновлении, и пользовательские контрольные точки изменяют элементы соответствующим образом, если вы использовали «нормальный» адаптивный дизайн и не настраивали его по-разному. Пример новых контрольных точек (адаптируется к вашему сценарию использования и лайкам. 

// File: _custom.scss
// Override default BT variables:
$grid-breakpoints: (
        xs: 0px,
        sm: 1280px,
        md: 1920px,
        lg: 2560px,
        xl: 3480px,
        xxl: 3840px
);

$container-max-widths: (
        sm: 1240px,
        md: 1880px,
        lg: 2520px,
        xl: 3460px,
        xxl: 3820px
);

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

Дополнительная информация
В соответствии с документацией: https://getbootstrap.com/docs/4.0/getting-started/theming/#variable -defaults , для настройки Bootstrap необходимо:

  • копировать / вставить от /scss/_variables.scss до _custom.s css независимо от того, что вы хотите изменить
  • удалить любой! default из вставленного кода и изменить значения на то, что вы хотите
  • перекомпилировать (см. Инструменты сборки: https://getbootstrap.com/docs/4.0/getting-started/build-tools/) - вам нужно успешно запустить npm запустить dist для восстановления из исходного кода.
...