Как отредактировать и настроить CSS Bootstrap в соответствии с вашим брендом
С Bootstrap CSS вы можете разработать адаптивный веб-сайт быстрее и проще, чем создавать сайт с нуля. Это потому, что это с открытым исходным кодом инструментарий предоставляет предварительно разработанные шаблоны и компоненты, так что вы можете построить из макетов с важными элементами дизайна, как Bootstrap NavBars, кнопки Bootstrap и форма без необходимости создавать их с нуля.
Однако процесс не так прост, как копирование и вставка этих фрагментов многократно используемого кода. Вы захотите настроить шаблоны и компоненты Bootstrap, чтобы ваш сайт отражал ваш уникальный бренд.
Например, вы можете захотеть добавить собственный цвет, а не использовать 10 служебных классов цвета, которые предоставляет Bootstrap. Или вы можете изменить точки останова в макете сетки Bootstrap. Или вы можете захотеть добавить собственные классы, такие как класс .btn-custom, для создания полностью уникальных кнопок.
В этом посте мы рассмотрим, как настроить Bootstrap CSS (и как этого не делать). Давайте начнем.
Как редактировать Bootstrap CSS
Вы можете редактировать файлы ядра Bootstrap напрямую, чтобы вносить изменения в свой сайт, но это не рекомендуется.
Вносить изменения непосредственно в таблицу стилей по умолчанию быстро станет трудно поддерживать. Не только сложнее отслеживать внесенные вами изменения, но и сделать переход на новую версию Bootstrap гораздо более болезненным. При обновлении вам придется заменить основные файлы, чтобы все ваши настройки были потеряны.
Хорошая новость в том, что есть способ вносить изменения без редактирования исходного кода. Давайте подробнее рассмотрим этот процесс ниже.
Можете ли вы переопределить Bootstrap CSS?
Если вы хотите настроить свой сайт Bootstrap, вы можете оставить исходный код как есть и просто добавить собственный код во внешнюю таблицу стилей. Код в этой внешней таблице стилей переопределит существующие стили, если он настроен правильно. Этот процесс настройки немного отличается в зависимости от того, как вы загружаете Bootstrap на свой сайт.
Есть несколько способов начать работу с Bootstrap. Вы можете использовать BootstrapCDN для доставки кэшированной версии скомпилированных CSS и JS Bootstrap в свой проект, или вы можете загрузить версию Bootstrap с предварительно скомпилированным или исходным кодом.
Ниже мы рассмотрим процесс настройки каждой из этих версий Bootstrap.
Как переопределить Bootstrap CSS
Вы можете переопределить стили по умолчанию для элементов Bootstrap, используя два возможных метода. Первый способ – использование переопределений CSS – применяется к сайтам, использующим BootstrapCDN или предварительно скомпилированные версии Bootstrap. Второй – с использованием переменных Sass – применяется к сайтам, использующим версию исходного кода Bootstrap.
Каждый метод идеально подходит для разных случаев использования. Хотя использование переопределений CSS проще, оно требует больше времени и его сложно масштабировать. С другой стороны, использование переменных Sass идеально подходит для внесения более обширных изменений на вашем сайте, но оно предназначено для более опытных пользователей. Давайте подробнее рассмотрим оба подхода ниже.
Как переопределить Bootstrap с помощью переопределений CSS
Независимо от того, используете ли вы BootstrapCDN или предварительно скомпилированную версию, вы начнете с базового типа документа HTML5, который выглядит примерно так:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Это будет ваш файл index.html. Следующим шагом будет загрузка Bootstrap на ваш сайт.
Если вы собираетесь использовать BootstrapCDN, скачивать файлы не нужно. Просто добавьте следующую строку кода в раздел :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Это загрузит Bootstrap CSS на ваш сайт. Обратите внимание: если вы хотите загрузить Bootstrap Javascript, вам нужно будет добавить код в раздел . Поскольку для этого метода переопределения в этом нет необходимости, мы пропустим этот шаг.
Если вы используете скомпилированную версию Bootstrap, вам придется загрузить скомпилированные файлы CSS и сохранить их в той же папке, что и ваш файл index.html. Затем добавьте следующую строку кода в раздел файла index.html:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
Выполнив этот шаг, вы успешно подключитесь к таблице стилей Bootstrap по умолчанию. Пришло время создать свою собственную таблицу стилей.
Для этого просто создайте другой файл в той же папке, что и ваш файл index.html. Вы можете назвать этот файл custom.css. Здесь вы разместите свой собственный CSS.
Но прежде чем начать добавлять в этот файл, вернитесь к файлу index.html и добавьте следующую строку кода сразу после ссылки на таблицу стилей по умолчанию.
<link rel="stylesheet" type="text/css" href="custom.css">
Ссылка на custom.css должна идти после bootstrap.css, чтобы этот метод настройки переопределения CSS работал. Почему? Из-за правила конкретики. Если на элементы HTML нацелены несколько селекторов CSS с одинаковой специфичностью, последний будет переопределять другие, и будут применяться только его свойства стиля. Таким образом, добавляя ссылку на свою собственную таблицу стилей после таблицы стилей по умолчанию, вы придаете ей более высокий уровень специфичности.
Вот как будет выглядеть ваш файл index.html, если вы используете BootstrapCDN.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="custom.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
А вот как будет выглядеть ваш файл index.html, если вы используете предварительно скомпилированный Bootstrap.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Теперь вы можете внести любые необходимые изменения в свой файл custom.css.
Как настроить кнопки начальной загрузки с помощью переопределений CSS
Допустим, вы хотите увеличить размер шрифта текста кнопки на своем сайте. В Bootstrap размер шрифта по умолчанию для класса .btn составляет 16 пикселей, как показано ниже.
Вы можете изменить его, скажем, на 20 пикселей, используя свойство CSS font-size в вашей таблице стилей. Используя селектор классов, вы можете изменить размер шрифта всех элементов в классе .btn на 20 пикселей, используя следующий код.
.btn {
font-size: 20px
}
Вот результат:
Следуя тому же процессу, вы можете внести столько изменений, сколько необходимо, чтобы полностью преобразовать ваш сайт Bootstrap. Просто убедитесь, что вы используете селекторы CSS, которые являются такими же или более конкретными, чем те, что указаны в файле bootstrap.css.
Когда вы закончите вносить изменения, просто сохраните файл custom.css. В любое время вы можете отредактировать или удалить любой свой собственный CSS, чтобы вернуться к стилям Bootstrap по умолчанию или переделать свой сайт. Вы также можете легко перейти на другую версию Bootstrap (если это второстепенный выпуск, например с 4.3 по 4.4), заменив ссылку на предыдущую таблицу стилей в файле index.html.
Теперь, когда мы понимаем этот вариант настройки и его преимущества, давайте посмотрим на другой вариант настройки, который применяется к владельцам сайтов, использующим версию исходного кода Bootstrap.
Как переопределить Bootstrap с помощью Sass
Загрузка версии Bootstrap с исходным кодом – это самый сложный метод загрузки Bootstrap на ваш сайт, поскольку для этого требуются дополнительные инструменты для настройки исходных файлов, таких как официальные скомпилированные версии Bootstrap. Это потому, что Bootstrap 4 и все его второстепенные выпуски (v4.x) написаны на Sass, языке таблиц стилей, который необходимо скомпилировать в CSS, чтобы браузеры правильно его понимали и отображали.
Для этого вам понадобятся компилятор Sass и автопрефиксатор, но, потратив время на настройку этой версии Bootstrap, вы получите полный контроль над своим кодом и кодом Bootstrap. Поэтому этот метод нравится более продвинутым пользователям.
Допустим, вы решили загрузить исходный код Bootstrap с помощью диспетчера пакетов, такого как npm, затем распакуйте папку и увидите следующую структуру.
ваш-проект /
├── scss
│ └── custom.scss
└── node_modules /
└── бутстрап
├── js
└── scss
Обратите внимание, что папка с надписью «custom.scss», которая будет действовать как ваша собственная таблица стилей, отделена от папки bootstrap / scss, которая является таблицей стилей по умолчанию. Важно отметить, что если вы не используете диспетчер пакетов, вам просто нужно вручную настроить аналогичную файловую структуру, в которой исходные файлы Bootstrap будут отделены от ваших собственных.
Как и в случае с другим методом настройки, вы по-прежнему избегаете изменения основных файлов Bootstrap. Отличие Sass состоит в том, что в вашей собственной таблице стилей вы импортируете файлы Bootstrap Sass, чтобы вы могли их изменять.
Итак, вы перейдете в свой файл custom.scss. Вы можете импортировать весь исходный код Sass для Bootstrap, включив следующую строку кода.
@import "../node_modules/bootstrap/scss/bootstrap";
Или вы можете просто выбрать нужные файлы. Следующий код импортирует файлы, необходимые для настройки.
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
Приведенный ниже код предназначен для импорта дополнительных файлов. Вы всегда можете добавить этот или другой код позже, когда начнете настраивать.
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";
Как только это будет настроено, вы можете приступить к внесению изменений. Нет необходимости добавлять ссылку на таблицу стилей в файле index.html, поэтому вы останетесь в файле custom.scss.
Вместо добавления пользовательского CSS, как в другом методе, вы измените любую из 500 переменных и карт Sass в Bootstrap 4. Полный список можно найти в вашем файле scss / _variables.scss, но давайте рассмотрим два конкретных примера, используемых в официальной документации Bootstrap.
Как настроить переменные Sass
Например, переменные Sass для элемента в Bootstrap 4:
$body-bg: $white !default;
$body-color: $gray-900 !default;
Это означает, что по умолчанию цвет фона белый, а цвет серый. Допустим, вы хотите изменить эти цвета.
Посмотрите, как у обеих переменных есть флаг! Default? Это позволяет вам переопределить значение переменной по умолчанию в вашем собственном Sass без изменения исходного кода Bootstrap. Вам просто нужно скопировать и вставить переменные в файл custom.scss, изменить их значения и удалить флаг! Default.
Поэтому, если я хочу изменить цвет фона и цвет элемента на черный и темно-серый соответственно, я бы добавил в свой файл custom.scss следующее.
$body-bg: #000;
$body-color: #111;
Чтобы успешно выполнить это переопределение в файлах Sass, мне нужно завершить импорт файлов Sass Bootstrap, добавив следующий код после переменных:
@import "../node_modules/bootstrap/scss/bootstrap";
Это похоже на то, как вы должны включить обе ссылки на ваши таблицы стилей между тегами вашего файла index.html в предыдущем методе.
Собирая все вместе, вот как будет выглядеть ваш файл custom.sccs, если вы импортировали все файлы Bootstrap:
@import "../node_modules/bootstrap/scss/bootstrap";
$body-bg: #000;
$body-color: #111;
@import "../node_modules/bootstrap/scss/bootstrap";
Как настроить карты Sass
Bootstrap 4 также включает карты Sass, которые в основном представляют собой связанные группы переменных Sass. Например, в Bootstrap есть карты Sass для цветов и точек останова сетки. Как и переменные Sass, карты Sass включают флаг! Default, поэтому их можно переопределить без изменения исходного кода Bootstrap.
Например, карта цветов Sass в Bootstrap 4 выглядит так:
$theme-colors:() !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
(
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
),
$theme-colors
);
С картами Sass у вас есть два варианта. Вы можете изменить карту или добавить к ней. Допустим, вы хотите изменить существующий цвет в карте $ theme-colors. Затем вам просто нужно скопировать и вставить ключ карты и включить в свой файл custom.scss только те переменные, которые вы хотите изменить. Затем измените их значения и удалите флаг! Default.
Итак, если вы хотите изменить основной цвет на голубо-синий, вы должны добавить следующее в свой собственный файл Sass:
$theme-colors: ( "primary": #0074d9,
);
Это изменит основной цвет темы в CSS, поэтому будут затронуты .alert-primary, .text-primary, .bg-primary и другие.
И если вы хотите добавить новый цвет в карту $ theme-colors, вы должны добавить новый ключ, использовать переменную custom-color и присвоить ей значение. Следующее добавит на карту малиново-красный цвет.
$theme-colors: ( "custom-color": #990000,
);
Независимо от того, используете ли вы переопределения CSS или переменные Sass, вы можете разблокировать сотни вариантов настройки в Bootstrap. Таким образом, вы можете не только создать адаптивный сайт, но и спроектировать его в соответствии со своим брендом. Для этого вам просто нужно хорошо разбираться в HTML и CSS.
Источник записи: https://blog.hubspot.com