Расширение Bootstrap | Bootstrap по-русски

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

Почему LESS?

Один из создателей Bootstrap опубликовал об этом короткий пост в своем блоге. Вот его основные мысли:

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

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

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

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

Посетите официальный сайт http://lesscss.org, чтобы узнать больше.

Поскольку наш CSS написан с использованием Less и применяет переменные и смешивания, его нужно компилировать для достижения конечного результата. Далее объясняется, как это сделать.

Примечание: При отправке в GitHub с модифицированным CSS, Вы обязательно должны перекомпилировать CSS, с помощью одного из нижеуказанных методов.

Способы компиляции

Node и makefile

Установите LESS-компилятор и uglify-js глобально с npm путем запуска следующей команды:

$ npm install -g less jshint recess uglify-js

После установки запустите make из корневого каталога Bootstrap — и все готово.

Кроме того, если у вас установлен watchr, Вы можете запустить make watch для автоматического ребилдинга каждый раз после редактирования файла в библиотеке Bootstrap (это не обязательно, просто удобный метод).

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

Установите LESS command line tool (инструмент для создания командной строки) посредством Node и запустите следующую команду:

$ lessc ./less/bootstrap.less > bootstrap.css

Не забудьте добавить --compress в эту команду, если вы пытаетесь сэкономить байты!

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 и PC, работает по принципу drag and drop, компилирует LESS файлы. В дополнение имеет открытый исходный код на GitHub.

Быстрый старт любого веб-проекта с помощью присоединения компилированных или минимизированных файлов CSS и JS. Отдельные уровни для простых и продвинутых обновлений.

Структура файлов

Загрузите последнюю компилированную версию Bootstrap и поместите ее в свой проект. Например, у вас могло получиться нечто подобное:

  app/
  +-- layouts/
  L-- templates/
  public/
  +-- css/
  ¦   +-- bootstrap.min.css
  +-- js/
  ¦   +-- bootstrap.min.js
  L-- img/
      +-- glyphicons-halflings.png
      L-- 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