Расширение

Bootstrap создан с использованием LESS, динамического языка стилей, созданного нашим хорошим другом, Alexis Sellier. Это делает разработку системных CSS быстрее, проще и веселее.

Почему LESS?

Один из создателей Bootstrap написал быстрый блог-пост об этом, кратко изложенный здесь:

Bootstrap компилируется быстрее ~6x быстрее с LESS по сравнению с Sass
LESS написан на JavaScript, что делает его легче для нас, чтобы погрузиться и исправить, по сравнению с Ruby с Sass.
LESS — это больше; мы хотим чувствовать, что мы пишем CSS и делаем Bootstrap доступным для всех.

Что включено?

Как расширение CSS, LESS включает переменные, миксины для повторно используемых фрагментов кода, операции для простой математики, вложенность и даже функции цвета.

Узнайте больше

Посетите официальный сайт https://lesscss.org для получения дополнительной информации.

Поскольку наш CSS написан с использованием LESS и использует переменные и миксины, он должен быть скомпилирован для окончательной реализации в производстве. Вот как.

Примечание: Если вы отправляете запрос на изменение CSS в GitHub, вы должны скомпилировать CSS любым из этих методов.

Инструменты для компиляции

Командная строка

Следуйте инструкциям в README проекта на GitHub для компиляции через команду.

JavaScript

Скачайте последнюю версию Less.js и включите путь к нему (и Bootstrap) в <head>.

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

Чтобы перекомпилировать файлы .less, просто сохраните их и перезагрузите страницу. Less.js компилирует их и сохраняет в локальном хранилище.

Неофициальное приложение Mac

Неофициальное приложение Mac следит за директориями файлов .less и компилирует код в локальные файлы после каждого сохранения файла .less. Если вам нравится, вы можете переключить настройки в приложении для автоматического минимизации и в какую директорию попадают скомпилированные файлы.

Другие приложения

Crunch

Crunch — это отличный редактор и компилятор LESS, построенный на Adobe Air.

CodeKit

Создан тем же парнем, что и неофициальное приложение Mac, CodeKit — это приложение Mac, которое компилирует LESS, SASS, Stylus и CoffeeScript.

Simpless

Mac, Linux и Windows приложение для перетаскивания и компиляции файлов LESS. Кроме того, исходный код находится на GitHub.

Быстро начните любой веб-проект, просто перетащив скомпилированный или минифицированный CSS и JS. Добавьте настраиваемые стили отдельно для простого обновления и обслуживания в будущем.

Настройка структуры файлов

Скачайте последнюю скомпилированную версию Bootstrap и поместите ее в свой проект. Например, у вас может быть что-то вроде этого:

   app/
       layouts/
       templates/
   public/
       css/
           bootstrap.min.css
       js/
           bootstrap.min.js
       img/
           glyphicons-halflings.png
           glyphicons-halflings-white.png

Используйте шаблон для начала

Скопируйте следующий базовый HTML, чтобы начать.

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
  </body>
</html>

Добавьте настраиваемый код

Работайте в своем настраиваемом CSS, JS и более, если необходимо, чтобы сделать Bootstrap своим с собственными отдельными CSS и JS файлами.

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
    <!-- Project -->
    <link href="public/css/application.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
    <!-- Project -->
    <script src="public/js/application.js"></script>
  </body>
</html>

Расширение Bootstrap

Сделайте с помощью LESS