Изменение исходных стилей Bootstrap 3 и их компиляция в CSS

Изменение исходных стилей Bootstrap 3 и их компиляция в CSS
Содержание:
  1. Подключение исходных стилей Bootstrap к странице
  2. Изменение стилей Bootstrap
  3. Компиляция LESS в CSS
  4. Комментарии

В этой статье рассмотрим очень простой способ настройки фреймворка Bootstrap 3, посредством изменения LESS переменных в «variable.less».

Подключение исходных стилей Bootstrap к странице

Подход к разработке, подразумевающий непосредственное подключение исходных стилей Bootstrap 3 к странице, очень удобен, т.к. позволяет нам сразу увидеть результаты изменений в браузере без непосредственной их компиляции.

Это возможно благодаря инструменту «Less.js», который необходимо подключить к странице. Данный скрипт будет преобразовать LESS в CSS на лету.

После того как настройка стилей будет закончена (для продакшена) необходимо будет исходные стили Bootstrap 3 скомпилировать в CSS и подключить их как обычно.

Пошаговая инструкция подключения «bootstrap.less» к странице.

1. Скачать фреймворк Bootstrap 3 с исходными кодами. Для этого на странице https://getbootstrap.com/docs/3.4/getting-started/ нажимаем на кнопку «Download source».

Скачивание исходных кодов Bootstrap 3

2. После этого распаковываем архив и копируем папку less в ваш каталог стилей.

3. Подключаем «bootstrap.less» к HTML странице:

<link rel="stylesheet/less" href="less/bootstrap.less">

«bootstrap.less» – это центральный файл, который импортирует в себя содержимое других файлов. Если какие-то стилевые компоненты не нужны, то их можно закомментировать.

Содержимое файла bootstrap.less

4. Скачиваем файл «less.js» с Github и подключаем его к странице:

<script src="js/less.min.js"></script>

С CDN:

<script src="https://cdn.jsdelivr.net/npm/less@4.1.1"></script>

Пример страницы, к которой подключены исходные коды Bootstrap 3:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Project</title>
    <link rel="stylesheet/less" href="assets/css/less/bootstrap.less">
    <script defer src="https://cdn.jsdelivr.net/npm/less@4.1.1"></script>
    <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </head>
  <body>
    <h1>Bootstrap Project</h1>

  </body>
</html>

Изменение стилей Bootstrap

Изменение стилей Bootstrap выполняется посредством редактирования значений LESS переменных. Для удобства все LESS переменные собраны в файле «variables.less».

Рассмотрим несколько примеров.

1. Изменим количество колонок на 24 и padding между колонками на 20px:

//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
@grid-columns:              24;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         20px;
Настройка сетки Bootstrap 3 посредством изменения  LESS переменных

2. Изменим цветовую гамму Bootstrap:

@brand-primary:         darken(#0d6efd, 6.5%); // #337ab7
@brand-success:         #198754;
@brand-info:            #0dcaf0;
@brand-warning:         #ffc107;
@brand-danger:          #dc3545;
Настройка цветовой гаммы Bootstrap 3 посредством изменения значений переменных LESS

После внесения изменений необходимо сохранить файл «variables.less» и перезагрузить страницу. После перезагрузки сразу же увидим результат:

<body>
  <div class="container">
    <h1 class="text-center">Bootstrap Project</h1>
    <div class="row">
      <div class="col-xs-15">
        <div class="alert alert-success" role="alert">...</div>
      </div>
      <div class="col-xs-9">
        <div class="alert alert-info" role="alert">...</div>
      </div>
    </div>
  </div>
</body>
Результат после изменения исходных стилей Bootstrap 3

Компиляция LESS в CSS

После настройки всех LESS переменных необходимо преобразовать исходный код в CSS.

Для этого можно воспользоваться инструкцией, представленной в статье: «Сборка Вootstrap 3 проекта с использованием Grunt».

При этом файл «variables.less» следует заменить на свой, в который вы вносили изменения. После чего выполнить команду:

grunt build

Полученный после компиляции файл CSS нужно скопировать в свой проект и подключить к странице:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Project</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script defer src="/assets/js/bootstrap.min.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

Комментарии: 6

Аноним
Аноним
Здравствуйте, хотел дополнить статью. Для начинающих, работать с less первое время сложно, не говоря уже о просмотре изменений less в браузере и компиляции в CSS. Но они ваш сайт посещают :)
Есть очень удобная программа — WinLess. Есть вариант и для других ОС.
Там все проще простого.

1. Запускаем программу
2. Указываем путь к папке less (жмем кнопку Аdd folder)
3. Появляется окошко, в котором отображаются все файлы c расширением less.
Окошко будет разделено на 2 части (к примеру слева variable.less, справа variable.css) и так напротив каждого файла.
4. Снимаем вообще все галочки с файлов и слева и справа, оставляем галочки только:
4.1. слева у файлов «variable.less» и «bootstrap.less» (естественно, так как остальные файлы less подключены в bootstrap.less, а в variable.less мы будем вносить изменения);
4.2. справа у файла «bootstrap.css» — это и будет на выходе наш файл стилей.
5. Открываем редактором файл «variable.less» и редактируем. При сохранении файла после изменений программа автоматически (по дефолту) компилирует изменения в файл «bootstrap.css».

Чтобы видеть изменения «на лету», не забудьте указать в HTML документе путь к папке less и новому файлу «less/bootstrap.css» и просматривайте изменения, как будто вы редактируете обычный CSS.
Программа выдает либо читабельный CSS, либо сжатый, в зависимости от настройки (чебокс minifi напротив каждого файла)
В общем очень удобно.
Александр Мальцев
Александр Мальцев
Здравствуйте, Егор.
Спасибо, за отличное руководство.
Всё понятно и доступно, будем использовать.
Аноним
Аноним
Спасибо. Разобрался. Теперь все настроил. Работает )))
Аноним
Аноним
Здравствуйте, делал как у вас написано, но увы не вижу в браузере изменений. Почему-то не работает. Проверил подключение в инструментах для разработчиков google, все правильно подключено. «bootstrap.less» подключен, но не работает.

Интересно в чем может быть моя ошибка?
Александр Мальцев
Александр Мальцев
Если Вы пользуетесь браузером Chrome то там данная возможность ограничена политикой безопасностью. Если Вы хотите пользоваться Chrome, то загрузите Ваш проект на локальный сервер и открывайте его через него (т.е. чтобы не использовался протокол file:///).
Аноним
Аноним
Теперь осталось скомпилировать. При попытке скомпилировать, в указанном каталоге появляется пустой файл «bootstrap.css».