Расширьте возможности Bootstrap, чтобы воспользоваться включенными стилями и компонентами, а также переменными и миксинами LESS.
В основе Bootstrap лежит LESS, динамический язык таблиц стилей, созданный нашим хорошим другом Alexis Sellier . Это делает разработку системного CSS быстрее, проще и веселее.
Один из создателей Bootstrap написал короткую запись в блоге об этом , кратко изложенную здесь:
Как расширение CSS, LESS включает в себя переменные, примеси для повторного использования фрагментов кода, операции для простых математических операций, вложенность и даже цветовые функции.
Посетите официальный сайт http://lesscss.org/ , чтобы узнать больше.
Поскольку наш CSS написан с помощью Less и использует переменные и примеси, его необходимо скомпилировать для окончательной реализации в рабочей среде. Вот как.
Установите компилятор командной строки LESS, JSHint, Recess и uglify-js глобально с помощью npm, выполнив следующую команду:
$ npm install -g меньше jshint углубление uglify-js
После установки просто запустите make
из корня вашего каталога начальной загрузки, и все готово.
Кроме того, если у вас установлен watchr , вы можете запустить make watch
автоматическую пересборку bootstrap каждый раз, когда вы редактируете файл в библиотеке bootstrap (это не обязательно, просто способ удобства).
Установите инструмент командной строки LESS через Node и выполните следующую команду:
$lessc ./less/bootstrap.less > bootstrap.css
Обязательно включите --compress
в эту команду, если вы пытаетесь сохранить несколько байтов!
Загрузите последнюю версию Less.js и укажите путь к ней (и Bootstrap) в файле <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Чтобы перекомпилировать файлы .less, просто сохраните их и перезагрузите страницу. Less.js компилирует их и сохраняет в локальном хранилище.
Неофициальное приложение для Mac просматривает каталоги файлов .less и компилирует код в локальные файлы после каждого сохранения просматриваемого файла .less. Если хотите, вы можете переключить настройки в приложении для автоматической минимизации и того, в какой каталог попадают скомпилированные файлы.
Crunch — это великолепный LESS-редактор и компилятор, созданный на основе Adobe Air.
CodeKit — это приложение для Mac, созданное тем же парнем, что и неофициальное приложение для Mac, которое компилирует LESS, SASS, Stylus и CoffeeScript.
Приложение для Mac, Linux и Windows для перетаскивания файлов LESS. Плюс исходный код есть на GitHub .
Быстро запускайте любой веб-проект, добавляя скомпилированные или минимизированные CSS и JS. Наслаивайте пользовательские стили отдельно для упрощения обновления и дальнейшего обслуживания.
Загрузите последнюю скомпилированную версию Bootstrap и поместите ее в свой проект. Например, у вас может быть что-то вроде этого:
приложение/ макеты/ шаблоны/ общественный/ css/ bootstrap.min.css js/ bootstrap.min.js картинка/ глификоны-halflings.png glyphicons-halflings-white.png
Скопируйте следующий базовый HTML, чтобы начать.
- <html>
- <голова>
- <title> Шаблон Bootstrap 101 </title>
- <!-- Начальная загрузка -->
- <link href = "public/css/bootstrap.min.css" rel = "таблица стилей" >
- </голова>
- <тело>
- <h1> Привет, мир! </h1>
- <!-- Начальная загрузка -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </тело>
- </html>
Работайте со своими собственными CSS, JS и т. д. по мере необходимости, чтобы сделать Bootstrap своим собственным отдельным файлом CSS и JS.
- <html>
- <голова>
- <title> Шаблон Bootstrap 101 </title>
- <!-- Начальная загрузка -->
- <link href = "public/css/bootstrap.min.css" rel = "таблица стилей" >
- <!-- Проект -->
- <link href = "public/css/application.css" rel = "таблица стилей" >
- </голова>
- <тело>
- <h1> Привет, мир! </h1>
- <!-- Начальная загрузка -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Проект -->
- <script src = "public/js/application.js" ></script>
- </тело>
- </html>