Twitter Bootstrap с меньшим количеством CSS

Less - это препроцессор CSS, который делает CSS динамическим. Twitter Bootstrap, с другой стороны, представляет собой набор инструментов для быстрой разработки веб-приложений и сайтов. В этом документе мы обсудили использование Twitter Bootstrap с Less CSS. Таким образом, вы можете использовать переменные Less, Bootstrap и вложенность Bootstrap в CSS.

Получить Twitter Bootstrap и Less CSS

Вы можете получить Twitter Boot Strap от GitHUB и Less CSS от lesscss.org.

Что включено

После того, как вы загрузили Twitter Bootstrap, разархивируйте файл, и все файлы будут извлечены в нужную папку. Меньше компонентов Bootstrap помещаются в каталог 'lib'. Начиная с версии Bootstrap v1.4.0, файлов на девять меньше. Посмотрим, что содержат эти файлы.

bootstrap.less

Это основной файл меньше. Этот файл импортирует несколько других файлов меньше. Файл не имеет никакого кода, хотя.

forms.less

Этот меньший файл содержит стиль для формы, типы ввода.

mixins.less

Этот файл содержит код CSS, который можно использовать повторно.

patterns.less

Этот файл Less содержит код CSS для повторяющихся элементов пользовательского интерфейса, которые не могут быть покрыты базовым стилем, размещенным под файлом лесов Less.

reset.less

Этот файл Less содержит перезагрузки CSS. Это обновление CSS Reset Эрика Мейера. Сброс некоторых элементов HTML, таких как dfn, samp и т. Д., Исключен.

scaffolding.less

Этот файл содержит базовый стиль, необходимый для создания Грид-системы, Структурного макета, Шаблонов страниц.

tables.less

Этот файл Less содержит стили для создания таблиц.

type.less

Ищите стили, связанные с типографикой в этом файле. Здесь размещены стили для заголовков, абзацев, списков, кода и т. Д.

variables.less

Этот файл Less содержит переменные для настройки внешнего вида Bootstrap.

Как пользоваться

Включите в свою HTML-страницу следующее, чтобы использовать ее:

<link rel="stylesheet/less" href="lib/bootstrap.less" media="all" />

<script src="js/less-1.1.5.min.js"></script>

Обратите внимание, что less-1.1.5.min.js отсутствует в папке js из коробки. Вы должны скачать и поместить его в папку JS явно.

Как скомпилировать

С помощью JavaScript

Просто включите файл less js (как показано в разделе «Как использовать») и перезагрузите страницу. JS файл компилирует меньше.

Из командной строки

Если у вас установлено меньше командной строки, выполните следующую команду для компиляции:

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

Вы можете использовать команду --compress, если вам нужна сжатая компиляция.

Узел с make-файлом

Сначала установите командную строку Less, выполнив следующую команду:

$ npm install lessc

Затем запустите «make» из корня вашего каталога начальной загрузки.

Вы можете использовать команду «make watch», если у вас установлена «watch». В этом случае при каждом редактировании файла в папке lib начальная загрузка автоматически перестраивается.

Меньше Mac приложение

Неофициально, но для компиляции доступно меньше приложений для Mac

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

Предыдущий: Как центрировать div с помощью Twitter Bootstrap 3
Далее: Вариации с использованием Bootstrap Material Design