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

Введение

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

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

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

Что входит

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

Это основной файл less. Этот файл импортирует несколько других файлов less. Однако в файле нет кода.

forms.less

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

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

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

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

scaffolding.less

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

tables.less

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

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

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

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

Включите в свою HTML-страницу следующее:

   

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

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

с помощью JavaScript

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

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

Если у вас установлена ​​Less Command Line, выполните следующую команду для компиляции :

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

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

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

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

  $ npm install lessc  

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

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

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

Хотя это неофициально, для компиляции доступно менее Mac-приложение

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


  • Новый контент, опубликованный на w3resource :
  • Упражнения по программированию на Scala, практика, решение
  • упражнения Python Itertools
  • упражнения Python Numpy
  • упражнения пакета Python GeoPy
  • упражнения Python Pandas
  • упражнения Python nltk
  • упражнения Python BeautifulSoup
  • Шаблон формы
  • Композитор — Менеджер пакетов PHP
  • PHPUnit — Тестирование PHP
  • Laravel — PHP Framework
  • Angular — JavaScript Framework
  • React — JavaScript Library
  • Vue — JavaScript Framework
  • Jest — JavaScript Testing Framework



Оцените статью
nanomode.ru
Добавить комментарий