HTML и Bootstrap шаблоны - Emmet в Far Manager

Введение

В этом разделе представлены шаблоны для создания HTML-структуры и компонентов Bootstrap с помощью Emmet в редакторе Far Manager.

Совет: Для активации Emmet в редакторе Far Manager используйте комбинацию клавиш Ctrl+E (по умолчанию).

Emmet поддерживает создание полной HTML-структуры с помощью сокращений.

Сокращение	Описание	Результат
html:5	HTML5 шаблон	Полная HTML5 структура с head и body
html:ie	HTML5 с IE поддержкой	HTML5 шаблон с условиями для IE
input:text	Текстовое поле	input с типом text и классом text
form:get	Форма GET	Форма с методом GET
script:src	Скрипт с src	Тег script с атрибутом src
link:css	CSS ссылка	Ссылка на CSS файл
meta:vp	Viewport метатег	Метатег viewport для адаптивности

Пример использования: html:5>head+body>div.container
Результат: Создаст полную HTML5 структуру с контейнером

Emmet включает в себя популярные компоненты Bootstrap.

Сокращение	Описание	Результат
nav:bs	Bootstrap навигация	Navbar с классами Bootstrap
bs:container	Bootstrap контейнер	div с классом container
bs:containerf	Bootstrap fluid контейнер	div с классом container-fluid
bs:row	Bootstrap строка	div с классом row
bs:col	Bootstrap колонка	div с классом col-md-12
btn:bs	Bootstrap кнопка	Кнопка с классом btn
btn:bs primary	Bootstrap primary кнопка	Кнопка с классами btn btn-primary
link:bs	Bootstrap CSS	Ссылка на Bootstrap CSS
link:bs:theme	Bootstrap тема	Ссылка на Bootstrap тему
script:jq	jQuery скрипт	Ссылка на jQuery 3.6.0
script:bs	Bootstrap JS	Ссылка на Bootstrap JavaScript

Пример использования: bs:container>bs:row>bs:col*3
Результат: Создаст Bootstrap сетку с тремя колонками

Вы можете использовать скобки для группировки элементов и умножения целых структур:

ul>(li.item-$)*3 - создаст 3 элемента списка с нумерацией
.container>(.row>.col-md-4)*2 - создаст контейнер с двумя рядами по одной колонке

Символ $ заменяется на номер итерации при умножении:

div.item-$*3 создаст: div с классом item-1, div с классом item-2, div с классом item-3

Поддерживаются CSS-подобные псевдоклассы:

div:hover создаст div с классом hover

Совет 1: Используйте синонимы для быстрого доступа к часто используемым шаблонам. Например, bs:nav вместо nav:bs.

Совет 2: Комбинируйте шаблоны для создания сложных структур. Например: html:5>head+body>div.container>nav:bs+.content.

Совет 3: Используйте умножение (*) для создания нескольких одинаковых элементов: li*5 создаст 5 элементов списка.

Совет 4: Для вложенных элементов используйте символ >: div>ul>li*3.

Совет 5: Для соседних элементов используйте символ +: div+p+span.