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

Александр Мальцев
Александр Мальцев
15K
10
Изменение исходных стилей 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>

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

  1. Егор
    24 сентября 2015, 06:04
    Здравствуйте, хотел дополнить статью. Для начинающих, работать с 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 напротив каждого файла)
    В общем очень удобно.
    1. Александр Мальцев
      24 сентября 2015, 12:06
      Здравствуйте, Егор.
      Спасибо, за отличное руководство.
      Всё понятно и доступно, будем использовать.
    2. Егор
      31 июля 2015, 21:36
      Спасибо. Разобрался. Теперь все настроил. Работает )))
      1. Егор
        31 июля 2015, 04:32
        Здравствуйте, делал как у вас написано, но увы не вижу в браузере изменений. Почему-то не работает. Проверил подключение в инструментах для разработчиков google, все правильно подключено. «bootstrap.less» подключен, но не работает.

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