В этой статье мы рассмотрим самый простой способ настройки платформы, которая заключается в изменении значений переменных less.
Процесс настройки платформы Twitter Bootstrap 3 представим в виде следующих шагов:
-
Настройка платформы с помощью переменных LESS:
-
Скачиваем платформу Twitter Bootstrap 3 с исходными кодами. Для этого открываем страницу http://getbootstrap.com/getting-started/ и нажимаем на кнопку "Download source".
- Распаковываем содержимое архива Twitter Bootstrap 3 в каталог Вашего проекта.
- Подключаем bootstrap.less, хранящийся в папке less к HTML-документу:
<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" />
Примечание: файл bootstrap.less содержит инструкции для подключения всех остальных файлов LESS, в том числе и файла variables.less.
-
- Для того чтобы можно было настраивать переменные LESS на стороне клиента и сразу же просматривать результаты в браузере скачиваем файл
less.js
с сайта http://lesscss.org/ и подключаем его:<script src="js/less.js" type="text/javascript"></script>
- Настраиваем платформу, изменяя значения переменных в файле variables.less, находящийся в папке less:
Например, изменим количество колонок и расстояние между колонками:
Например изменим цвет границ и фона для панели с классом
.panel-primary
:После выолненных изменений необходимо сохранить файл variables.less и перезагрузить страницу. После перезагрузки мы сразу же увидим результат проведённых нами изменений:
<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>Настройка платформы Twitter Bootstrap 3 с помощью изменения значений переменных LESS</title> <link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" /> <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="js/less.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> </head> <body> <div class="container"> <h3 class="page-header">Настройка платформы Twitter Bootstrap 3 с помощью изменения значений переменных LESS</h3> <div class="row"> <div class="col-xs-3"> <div class="panel panel-primary"> <div class="panel-heading">Название панели</div> <div class="panel-body"> Контент панели </div> </div> </div> <div class="col-xs-3"> <div class="panel panel-primary"> <div class="panel-heading">Название панели</div> <div class="panel-body"> Контент панели </div> </div> </div> <div class="col-xs-3"> <div class="panel panel-primary"> <div class="panel-heading">Название панели</div> <div class="panel-body"> Контент панели </div> </div> </div> <div class="col-xs-3"> <div class="panel panel-primary"> <div class="panel-heading">Название панели</div> <div class="panel-body"> Контент панели </div> </div> </div> <div class="col-xs-3"> <div class="panel panel-primary"> <div class="panel-heading">Название панели</div> <div class="panel-body"> Контент панели </div> </div> </div> </div> </div> </body> </html>
- После настройки системы необходимо выполнить компиляцию файла bootstrap.less в bootstrap.css.
- Скачать программу node.js.
- Установить пакет less. Для этого необходимо открыть командную консоль, перейти в любой каталог, в который Вы хотите загрузить пакет и ввести команду:
npm install less
- Компилируем bootstrap.less в bootstrap.css. Для этого переходим в каталог, содержащий файл bootstrap.less и вводим команду:
node E:\bootstrap\node_modules\less\bin\lessc bootstrap.less > bootstrap.css
-
После этого подключаем файл bootstrap.css с помощью элемента
link
.<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
Есть очень удобная программа — WinLess Есть вариант для других ОС.
Там все проще простого.
1) Запускаем программу
2) Указываем путь к папке less (жмем кнопку Аdd folder)
3) Появится окошко, в котором отобразятся все файлы c расширением less.
Окошко будет разделено на 2 части (к примеру слева variable.less, справа variable.css) и так напротив каждого файла.
4) Снимаем вообще все галочки с файлов и слева и справа, оставляем галочки только:
a) слева у файлов variable.less и bootstrap.less ( естественно, так как остальные файлы less подключены в bootstrap.less, а в variable.less мы будем вносить изменения)
б) cправа у файла bootstrap.css — это и будет на выходе наш файл стилей.
5) Открываем редактором файл variable.less и редактируем. При сохранении файла после изменений программа автоматически (по дефолту) компилирует изменения в файл bootstrap.css.
Что-бы видеть изменения «на лету», не забудьте указать в HTML документе путь к папке less и новому файлу less/bootstrap.css и просматривайте изменения, как будто вы редактируете обычный CSS.
Программа выдает либо читабельный CSS, либо сжатый, в зависимости от настройки (чебокс minifi напротив каждого файла)
Вобщем очень удобно.
Спасибо, за отличное руководство.
Всё понятно и доступно, будем использовать.
Я в каталог не переходил. Не набирал cd )))))))))))))))))
Ну а во втором скрине пишет что не может найти какой то модуль? При компиляции.
Что-то скрины не загружаются?
На этом сайте вирусов и всплывающих окон нет. При желании Вы можете добавить его в исключение фильтра, который Вы используете. Тогда ничего вырезаться не будет.
Для установки модулей нужен интернет. Проверьте, чтобы у Вас был доступ к нему из консоли.
Или нужно по другому проверять подключение к интернету из консоли?
Можете проверить также настройки npm: npm config ls.
отправлено 4 принято 4
npm config ls — все показал куда у меня node.js установлен
node.exe
Что-то я сам делаю неправильно. Сейчас еще попытаюсь.
Скачал ваш пример — тоже не работает.
А так-то намного проще настраивать, например скины делать разноцветные, чем на самом сайте bootstrap.
Интересно в чем может быть моя ошибка?
Или воспользуйтесь другим браузером. Я, например, использую Firefox.
В Оpera — не работает,
В Chrome — не работает.
Теперь осталось скомпилировать. Не получается установить пакет less.
При попытке скомпилировать, в указанном каталоге появляется пустой файл bootstrap.css.
1. Устанавливаем плагин
2. Компилируем LESS в CSS и сжимаем его:
3. При необходимости можно использовать параметры:
Список всех параметров плагина можно посмотреть на странице clean-css.