Russian (Pусский) translation by Radislaw Yalilow (you can also view the original English article)
Пожалуй, величайшая сила самого популярного фреймворка Bootstrap от Twitter в том, что он дает Вам полный набор полностью функциональных CSS и javascript из коробки.
Этот предварительно созданный код предусматривает все, что вы могли хотеть в одном месте, от типографии и контроля макета до десятков “компонентов”, таких как навигация, кнопки, панели, оповещения и многое другое.
Так как вы будете тратить мало времени на написание CSS и javascript для сайта на Bootstrap, разработка становится почти полностью посвящена созданию HTML. Таким образом, если вы сможете найти способ, чтобы сделать написание HTML таким быстрым и гладким, насколько это возможно, весь ваш рабочий процесс Bootstrap может стать невероятно эффективным.
Создание еще более мощного HTML
Одним из наиболее эффективных инструментов, который можно использовать для ускорения написания HTML является Jade, шаблонизатор с открытым исходным кодом, который является полностью бесплатным для использования.
Jade может идти под знаменем “языка шаблонов”, но не позволяйте этому заставить вас думать, что вы должны работать с “шаблонами”, чтобы задействовать его преимущества. Также его можно использовать в двух дополнительных направлениях, которые могут быть чрезвычайно полезными для всех видов написания HTML:
- В качестве инструмента сокращения кода HTML, который позволит вам значительно уменьшить количество кода.
- В качестве «препроцессора» для HTML, который работает так же, как CSS препроцессоры, добавляя возможность использовать логику и создавать «миксины» - повторно используемые блоки кода, которые позволяют придерживаться принципов DRY.
Если вы часто используете HTML, и особенно, если вы сильно сосредоточены на HTML, как например при использовании Bootstrap, вы обнаружите, что как только попробуете Jade вы никогда больше не будете создавать проекты без него.
Сниппеты для Bootstrap созданные при помощи Jade
В этом руководстве мы будем использовать Jade для создания некоторых из наиболее известных компонентов фреймворка Bootstrap.
Необработанный HTML в Jade
Для каждого компонента мы сначала рассмотрим необходимый нам чистый HTML, а затем переведем его в код Jade. Вы непосредственно сравните оба кода, увидите уменьшение необходимого количества кода, и новый компактный и чистый стиль форматирования Jade.
Обратите внимание, мы сфокусируемся на сниппетах Jade, и не будем рассматривать как работает сам Jade. Тем не менее, главное на что нужно обратить внимание в примерах кода, которые вы видите ниже, это то, что каждый уровень табуляции в Jade создает необходимую вложенность элементов в конечном HTML.
Например, эти отступы в Jade:
1 |
main
|
2 |
div
|
3 |
p
|
скомпилируются в следующий код HTML
1 |
<main> |
2 |
<div> |
3 |
<p></p> |
4 |
</div> |
5 |
</main> |
Чтобы узнать больше о том, как работает Jade посмотрите бесплатные вводные уроки из моего недавнего курса "Скоростная HTML разработка с Jade".
Миксины Jade
Миксины Jade - это повторно используемые блоки кода. Если у вас есть некоторый код, который вам нужно использовать неоднократно, то можете определить его под миксин. Затем каждый раз, когда вы используете этот миксин, он будет выводить код для вас автоматически.
Например следующие mixin под названием «article»:
1 |
mixin article(title) |
2 |
.article |
3 |
.article-wrapper |
4 |
h1= title |
5 |
block
|
может многократно использоваться в документе следующим образом:
1 |
+article('Hello world') |
2 |
p This is my |
3 |
p Amazing article |
4 |
|
5 |
+article('Another article') |
6 |
p I just used a mixin |
7 |
p instead of retyping code |
и скомпилируется в этот HTML:
1 |
<div class="article"> |
2 |
<div class="article-wrapper"> |
3 |
<h1>Hello world</h1> |
4 |
<p>This is my</p> |
5 |
<p>Amazing article</p> |
6 |
</div> |
7 |
</div> |
8 |
<div class="article">
|
9 |
<div class="article-wrapper">
|
10 |
<h1>Another article</h1> |
11 |
<p>I just used a mixin</p> |
12 |
<p>instead of retyping code</p> |
13 |
</div> |
14 |
</div> |
После преобразования наших компонентов Bootstrap из чистого HTML в Jade мы будем преобразовывать их дальше - в миксины Jade. Мы не будем использовать миксины абсолютно для всего, а только там, где их использование позволит сэкономить значительное количество времени, усилий и избавит от дублирования кода.
Кроме того, даже когда мы используем миксины, мы будем по-прежнему включать примеры кода Jade для соответствующего компонента. Таким образом, вы увидите, как разворачивается процесс перехода из кода HTML в миксины Jade.
Подготовка к использованию Jade
Первое, что вам нужно сделать, это подготовить себя для работы с Jade. Вам понадобятся среда для написания кода, а также автоматическая компиляция кода Jade в HTML.
Перейдите к курсу "Скоростная HTML разработка с Jade" и просмотрите второй урок курса, "Быстрая и легкая настройка". Он бесплатный и даст вам все, что вам необходимо знать, для настройки и начала использования Jade.
Для этого урока я рекомендую выбрать метод из видео, который предпологает использование Sublime Text 3 и Prepros.
После того как вы просмотрите это видео и выполните все шаги, продемонстрированные в нем, вы будете готовы к выполнению проекта на Bootstrap.
Создание основы
На этот момент у вас должен быть создан файл с именем «index.jade» Если, сейчас в файле имеется какой либо код, пожалуйста, удалите его, он должен быть совершенно пуст.
Мы начанем с создания основы вашего проекта на Bootstrap -основного HTML документа, добавления необходимых тегов и подгрузки требуемых для Bootstrap файлов CSS и JavaScript плюс jQuery.
Мы воспользуемся преимуществом Bootstrap CDN и Google API для подгрузки из них необходимых файлов, чтобы избавить вас от их скачивания:
Как упоминалось выше, будет показан HTML-код для каждого элемента, который мы создаем, но это исключительно в демонстрационных целях, и вы сможете сравнить его с кодом на Jade.
В любом случае вам не нужно использовать любой увиденный вами необработанный HTML-код. Вместо этого, вы можете сосредоточиться на разделах с кодом Jade, помеченных как Преобразование в Jade и Добавление миксина _____.
Необработанный HTML
Следующий код устанавливает основные элементы страницы doctype, html, head, title, meta и body. Кроме того он загружает CSS & JavaScript плюс jQuery файлы Bootstrap и создает элемент div с классом .container, так что все компоненты, которые мы создадим будут размещаться внутри него.
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<title>Baking Bootstrap Snippets with Jade</title> |
5 |
<meta charset="utf-8"> |
6 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
7 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
8 |
<meta name="description" content="Baking Bootstrap Snippets with Jade"> |
9 |
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css" rel="stylesheet"> |
10 |
</head>
|
11 |
<body style="padding-bottom:10rem;"> |
12 |
<div class="container"></div> |
13 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
14 |
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> |
15 |
</body>
|
16 |
</html>
|
Преобразование в Jade
Ниже у нас есть Jade эквивалент необработанного HTML, который вы видели в разделе выше. Скопируйте и вставьте этот код в свой файл «index.jade» и сохраните.
1 |
doctype |
2 |
html( lang="en" ) |
3 |
head |
4 |
title Baking Bootstrap Snippets with Jade |
5 |
meta( charset='utf-8' ) |
6 |
meta( http-equiv='X-UA-Compatible', content='IE=edge' ) |
7 |
meta( name='viewport', content='width=device-width, initial-scale=1.0' ) |
8 |
meta( name='description', content='Baking Bootstrap Snippets with Jade' ) |
9 |
//- Bootswatch Theme |
10 |
link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css", rel="stylesheet") |
11 |
|
12 |
body(style="padding-bottom:10rem;") |
13 |
.container |
14 |
|
15 |
script( src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' ) |
16 |
script( src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js' ) |
После завершения компиляции (автоматически через Prepros), откройте сгенерированный файл «index.html». Вы должны увидеть точное соответствие необработанному HTML.
Хотя мы еще не создаем какие либо миксины на этом этапе, мы заложим некоторые основы для миксинов, которые будут созданы позже.
Подготовка к добавлению миксинов
Создайте файл с именем “mixins.jade” в той же папке, где расположены имеющиеся файлы Jade. Все миксины, которые мы создадим позднее будут записаны в этом файле.
В самом начале файла «index.jade» добавьте этот код:
1 |
include mixins |
Этот код импортирует файл с миксинами, делая миксины, которые будут созданы внутри него доступными для файла «index.jade».
Теперь мы готовы перейти к добавлению компонентов Bootstrap.
Примечание: Весь код для последующих компонентов Bootstrap должен быть добавлен в div с классом .container .
Компонент Navbar
Первым компонентом Bootstrap, который мы будем конвертировать в Jade, является компонент navbar, включая его секцию брендинга (первый пункт на панели), пункты меню верхнего уровня, выпадающее меню, содержащее разделитель и выпадающий заголовок, а также переключатель, чтобы развернуть меню, когда оно находится в свернутом формате на дисплеях с меньшей шириной.
Необработанный HTML
Необработанный HTML, который вам обычно нужно будет использовать для компонента navbar, изображенного выше следующий:
1 |
<nav role="navigation" class="navbar navbar-default"> |
2 |
<div class="navbar-header"> |
3 |
<button type="button" data-toggle="collapse" data-target="#navbar-inverse" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed"> |
4 |
<span class="sr-only">Toggle navigation</span> |
5 |
<span class="icon-bar"></span> |
6 |
<span class="icon-bar"></span> |
7 |
<span class="icon-bar"></span> |
8 |
</button>
|
9 |
<a href="#" class="navbar-brand">Project name</a> |
10 |
</div>
|
11 |
<div id="navbar-inverse" class="collapse navbar-collapse"> |
12 |
<ul class="nav navbar-nav"> |
13 |
<li class="active"><a href="#">Home</a></li> |
14 |
<li><a href="#about">About</a></li> |
15 |
<li><a href="#contact">Contact</a></li> |
16 |
<li class="dropdown"> |
17 |
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="dropdown-toggle">Dropdown <span class="caret"></span></a> |
18 |
<ul role="menu" class="dropdown-menu"> |
19 |
<li><a href="#">Action</a></li> |
20 |
<li><a href="#">Another action</a></li> |
21 |
<li><a href="#">Something else here</a></li> |
22 |
<li class="divider"></li> |
23 |
<li class="dropdown-header">Nav header</li> |
24 |
<li><a href="#">Separated link</a></li> |
25 |
<li><a href="#">One more separated link</a></li> |
26 |
</ul>
|
27 |
</li>
|
28 |
</ul>
|
29 |
</div>
|
30 |
</nav>
|
Преобразование в Jade
Обработанный в формат Jade компонент navbar выглядит следующим образом:
1 |
nav.navbar.navbar-default( role="navigation" ) |
2 |
.navbar-header |
3 |
button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#navbar-inverse", aria-expanded="false", aria-controls="navbar") |
4 |
span.sr-only Toggle navigation |
5 |
span.icon-bar |
6 |
span.icon-bar |
7 |
span.icon-bar |
8 |
a.navbar-brand(href="#") Project name |
9 |
|
10 |
#navbar-inverse.collapse.navbar-collapse
|
11 |
ul.nav.navbar-nav |
12 |
li.active: a( href="#") Home |
13 |
li: a( href="#about" ) About |
14 |
li: a( href="#contact" ) Contact |
15 |
li.dropdown |
16 |
a.dropdown-toggle( href="#", data-toggle="dropdown", role="button", aria-expanded="false" ) Dropdown |
17 |
span.caret |
18 |
ul.dropdown-menu( role="menu" ) |
19 |
li: a( href="#" ) Action |
20 |
li: a( href="#" ) Another action |
21 |
li: a( href="#" ) Something else here |
22 |
li.divider |
23 |
li.dropdown-header Nav header |
24 |
li: a( href="#" ) Separated link |
25 |
li: a( href="#" ) One more separated link |
Добавление миксинов Navbar
Хотя Jade версия компонента navbar является более краткой и не нее проще смотреть, чем на чем необработанный HTML, мы все еще можем сделать значительные улучшения путем преобразования большей части кода в миксины.
Добавьте следующий код в файл «mixins.jade»:
1 |
//- Navbar mixins |
2 |
mixin nav(name, id, style) |
3 |
- var style = (typeof style === 'undefined') ? "default" : style |
4 |
nav( role="navigation", class=["navbar", "navbar-" + style] ) |
5 |
.navbar-header |
6 |
button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#" + id, aria-expanded="false", aria-controls="navbar") |
7 |
span.sr-only Toggle navigation |
8 |
span.icon-bar |
9 |
span.icon-bar |
10 |
span.icon-bar |
11 |
a.navbar-brand(href="#")= name |
12 |
|
13 |
.collapse.navbar-collapse( id=id ) |
14 |
ul.nav.navbar-nav |
15 |
block
|
16 |
|
17 |
mixin nav_item(href, active) |
18 |
li(class=active): a( href=href ) |
19 |
block
|
20 |
|
21 |
mixin nav_item_dropdown(href, active) |
22 |
li(class=["dropdown", active]) |
23 |
a.dropdown-toggle( href=href, data-toggle="dropdown", role="button", aria-expanded="false" )= attributes.label |
24 |
span.caret |
25 |
ul.dropdown-menu( role="menu" ) |
26 |
block
|
27 |
|
28 |
mixin nav_divider |
29 |
li.divider |
30 |
|
31 |
mixin nav_header |
32 |
li.dropdown-header |
33 |
block
|
34 |
|
35 |
//- End navbar mixins |
В приведенном выше коде Jade мы создали пять различных миксинов:
-
nav- используйте это миксин для инициализации компонента navbar и его родительских элементов, установите стиль его отображения: по умолчанию - “default” или инверсированный - “inverse” и задайте текст, который будет отображаться в разделе брендинга.
-
nav_item- используйте его для добавления отдельных пунктов меню под миксиномnav -
nav_item_dropdown- используется для размещения пункта меню с вложенным выпадающим меню -
nav_divider- используется для размещения разделителя, вложенного в миксинnav_item_dropdown -
nav_header- используется для размещения заголовка в выпадающем меню, после миксинаnav_divider
По началу сложно в этом разобраться, но продолжайте чтение, чтобы увидеть, как используются эти миксины на практике и все станет ясно.
Использование миксина Navbar
С миксином navbar размещение компонентов navbar становится намного проще.
Размещение миксина «nav»
Начните, размещая миксин nav, для инициализации общего меню следующим образом:
1 |
+nav("Project name", "dropdown_menu") |
Между скобками, расположенными после миксина nav, вы помещаете две части информации, называемые аргументами, каждый из которых заключен в кавычки. Первый аргумент задает текст, который будет отображаться в разделе бренда компонента nav. Второй задает уникальный идентификатор для компонента nav.
После компиляции, при просмотре HTML-файла в браузере, вы должны увидеть следующее:
Инвертирование цвета Navbar
Чтобы изменить цвет компонента navbar из дефолтного в инвертированный добавте третий аргумент:
1 |
+nav("Project name", "dropdown_menu", "inverse") |
Это переключит цвет navbar, и он будет выглядеть следующим образом:
Размещение элементов Nav
Далее, мы будем использовать миксин nav_item, чтобы добавить три ссылки меню верхнего уровня:
1 |
+nav("Project name", "dropdown_menu") |
2 |
+nav_item( "index.html", "active" ) Home |
3 |
+nav_item( "about.html" ) About |
4 |
+nav_item( "contact.html" ) Contact |
Обратите внимание, что каждый экземпляр миксина nav_item имеет табулированный отступ на один больше чем миксин nav. Это делает каждый nav_item потомком миксина nav .
В этом случае первый передаваемый аргумент, например «index.html», задает ссылку, которая будет применяться к элементу меню. Второй (необязательный) аргумент добавляет класс active, который выделяет пункт меню.
После компиляции ваш компонент navbar должен выглядеть следующим образом:
Размещение пункта меню с выпадающим меню
Теперь мы можем двигаться дальше и добавить еще один пункт меню с размещенным внутри него выпадающим меню, используя миксин nav_item_dropdown:
1 |
+nav("Project name", "dropdown_menu") |
2 |
+nav_item( "index.html", "active" ) Home |
3 |
+nav_item( "about.html" ) About |
4 |
+nav_item( "contact.html" ) Contact |
5 |
+nav_item_dropdown( "#" )( label="Dropdown" ) |
Это добавит новый элемент со стрелкой, указывающей, что существует дочернее меню и оболочку для самого дочернего меню:
Размещение элементов раскрывающегося меню
В нашем новом выпадающем меню еще нет каких-либо элементов, так что здесь можно снова использовать наш миксин nav_item, чтобы добавить их.
Пока мы здесь, воспользуемся миксинами nav_divider для добавления разделительной линии внутри раскрывающегося списка и nav_header для добавления текста заголовка.
Эти дополнения завершат код компонента navbar:
1 |
+nav("Project name", "dropdown_menu") |
2 |
+nav_item( "index.html", "active" ) Home |
3 |
+nav_item( "about.html" ) About |
4 |
+nav_item( "contact.html" ) Contact |
5 |
+nav_item_dropdown( "#" )( label="Dropdown") |
6 |
+nav_item( "#" ) Action |
7 |
+nav_item( "#" ) Another action |
8 |
+nav_item( "#" ) Something else here |
9 |
+nav_divider |
10 |
+nav_header Nav header |
11 |
+nav_item( "#" ) Separated link |
12 |
+nav_item( "#" ) One more separated link |
Этот код компилируется в полностью функциональный компонент navbar на HTML и выглядит следующим образом:
Взгляните на изначальные 30 линий необработанного кода HTML для компонента navbar и представьте, на сколько быстрее может стать создание меню (после того, как созданы многоразовые миксины) когда код сократится до 12 коротких линий Jade.
Сетка: Пример с тремя колонками
Bootstrap поставляется с встроенной системой двенадцати колоночной сетки и набором связанных с ней классов, которые позволяют определить, сколько колонок должна быть ширина элемента при различных размерах экрана, например среднем (md), малом (sm) и очень малом (xs).
Вы можете подробнее прочитать, как работает эта система сеток на http://getbootstrap.com/css/#grid
Изображенные ниже три панели внутри div, начинаются с ширины в 4 колонки каждый на «среднем» или больше размере, переходят на шесть колонок каждый на «малом» размере и 12 колонок на «очень маленьком» размере.
Необработанный HTML
Необработанный HTML, необходимый для этих трех колонок выглядит следующим образом:
1 |
<div class="row"> |
2 |
<div class="col-md-4 col-sm-6 col-xs-12"> |
3 |
</div> |
4 |
<div class="col-md-4 col-sm-6 col-xs-12"> |
5 |
</div> |
6 |
<div class="col-md-4 col-sm-6 col-xs-12"> |
7 |
</div> |
8 |
</div> |
Мы начнем с создания блока с классом row, а затем расположим внутри него три блока, содержащих панели изображенные выше.
Каждый блок имеет класс col-md-4, который устанавливает ширину равную четырем колонкам при среднем или большем размерах. Далее идет класс col-sm-6, который устанавливает ширину равную шести колонкам при малом размере и, наконец, класс col-xs-12, устанавливающий ширину равную двенадцати колонкам при очень маленьком размере.
Преобразование в Jade
В коде Jade мы можем пропустить все открывающие и закрывающие теги div и просто непосредственно вводить необходимые классы следующим образом:
1 |
.row |
2 |
.col-md-4.col-sm-6.col-xs-12 |
3 |
.col-md-4.col-sm-6.col-xs-12 |
4 |
.col-md-4.col-sm-6.col-xs-12 |
Компонент Panel
Теперь давайте создадим компонент panel, который вы видели в предыдущем разделе:
Необработанный HTML
Необработанный HTML для компонента panel является на самом деле довольно простым по сравнению с компонентом navbar. У нас есть всего три блока-обертки с четырьмя классами, необходимыми для добавления правильных стилей:
1 |
<div class="panel panel-default"> |
2 |
<div class="panel-heading">Panel Heading</div> |
3 |
<div class="panel-body">We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.</div> |
4 |
</div>
|
Преобразование в Jade
Преобразование в Jade делает его еще проще:
1 |
.panel.panel-default |
2 |
.panel-heading Panel Heading |
3 |
.panel-body We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results. |
Добавление миксина Panel
Мы создаем миксин для этого компонента чтобы спасти вас от необходимости запоминать все четыре имени классов и, как каждые из требуемых дивов должны оборачивать друг друга.
Добавьте следующий код в файл «mixins.jade»:
1 |
//- Panel mixin |
2 |
mixin panel(heading, style) |
3 |
- var style = (typeof style === 'undefined') ? "default" : style |
4 |
div( class=["panel", "panel-" + style] ) |
5 |
.panel-heading= heading |
6 |
.panel-body |
7 |
block
|
Использование миксина Panel
Чтобы разместить компонент panel достаточно просто воспользоваться миксином panel, передав текст, который вы хотите использовать в заголовке как аргумент. Затем после пробела введите содержимое панели:
1 |
+panel("Panel Heading") We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results. |
Bootstrap предлагает несколько различных стилей панелей. Чтобы изменить стиль панели на любой другой, передайте название стиля в качестве второго аргумента следующим образом:
1 |
+panel("Panel Heading", "success") |
1 |
+panel("Panel Heading", "primary") |
Кнопки
Далее мы рассмотрим примеры создания кнопок Bootstrap.
Как и с компонентом panel последнего раздела, необработанный HTML для кнопок достаточно простой, однако, создавая миксины мы убираем необходимость запоминать синтаксис, необходимый для их использования.
Необработанный HTML
1 |
<a href="#" class="btn btn-default">Default</a> |
2 |
|
3 |
<a href="link.htm" class="btn btn-primary">Primary</a> |
4 |
|
5 |
<a href="#" class="btn btn-success">Success</a> |
6 |
|
7 |
<a href="#" class="btn btn-info">Info</a> |
8 |
|
9 |
<a href="#" class="btn btn-warning">Warning</a> |
10 |
|
11 |
<a href="#" class="btn btn-danger">Danger</a> |
Преобразование в Jade
1 |
a.btn.btn-default Default |
2 |
|
3 |
a.btn.btn-primary( href="link.htm" ) Primary |
4 |
|
5 |
a.btn.btn-success Success |
6 |
|
7 |
a.btn.btn-info Info |
8 |
|
9 |
a.btn.btn-warning Warning |
10 |
|
11 |
a.btn.btn-danger Danger |
Добавление миксина Button
1 |
//- Button mixin |
2 |
mixin button(style, href, size) |
3 |
- var style = (typeof style === 'undefined') ? "default" : style |
4 |
- var href = (typeof href === 'undefined') ? "#" : href |
5 |
case size |
6 |
when "large" |
7 |
- size = "btn-lg" |
8 |
when "small" |
9 |
- size = "btn-sm" |
10 |
when "mini" |
11 |
- size = "btn-xs" |
12 |
|
13 |
a( class=["btn", "btn-" + style, size], href=href ) |
14 |
block
|
Этот миксин определяет, какой стиль будет у кнопки, а также применяет ссылку и позволяет изменить размер кнопки.
Использование миксина Button
В своей простейшей форме, миксин button может использоваться с текстом, появляющимся на кнопке помещеным после миксина:
1 |
+button Default |
Это создаст кнопку с размером и цветом по умолчанию и с # в качестве ссылки.
Стиль кнопки можно задать, передав название нового стиля в качестве первого аргумента, а назначение ссылки может передаваться в качестве второго аргумента:
1 |
+button("primary", "link.htm") Primary |
Можно также изменить размер кнопки, передавая “large”, “small”, или “mini” в качестве третьего аргумента:
1 |
+button("success", "success.html", "large") Success |
2 |
|
3 |
+button("info", "info.html", "small") Info |
4 |
|
5 |
+button("warning", "warning.html", "mini") Warning |
Компонент Alert
Компоненты Alert, очень похожи на кнопки Bootstrap, но проще, поскольку им не нужно иметь назначение ссылки и у них нет различных размеров.
Написание оповещений в необработанном HTML может оказаться немного сложным, так как вы должны помнить все связанные классы и как добавить в них кнопку с символом «x», которая позволяет закрывать оповещения.
Мы объединим их в миксин, так что вам не придется все это запоминать. В следствие размещение оповещений становится легче.
Необработанный HTML
1 |
<div class="alert alert-dismissable alert-warning"> |
2 |
<button type="button" data-dismiss="alert" class="close">×</button>Warning! Warning! |
3 |
</div>
|
4 |
<div class="alert alert-dismissable alert-danger"> |
5 |
<button type="button" data-dismiss="alert" class="close">×</button>Danger Will Robinson! |
6 |
</div>
|
7 |
<div class="alert alert-dismissable alert-success"> |
8 |
<button type="button" data-dismiss="alert" class="close">×</button>You succeeded :-) |
9 |
</div>
|
10 |
<div class="alert alert-dismissable alert-info"> |
11 |
<button type="button" data-dismiss="alert" class="close">×</button>Some information for you |
12 |
</div>
|
Преобразование в Jade
1 |
.alert.alert-dismissable.alert-warning |
2 |
button.close( type="button", data-dismiss="alert" ) × |
3 |
| Warning! Warning! |
4 |
.alert.alert-dismissable.alert-danger |
5 |
button.close( type="button", data-dismiss="alert" ) × |
6 |
| Danger Will Robinson! |
7 |
.alert.alert-dismissable.alert-success |
8 |
button.close( type="button", data-dismiss="alert" ) × |
9 |
| You succeeded :-) |
10 |
.alert.alert-dismissable.alert-info |
11 |
button.close( type="button", data-dismiss="alert" ) × |
12 |
| Some information for you |
Добавление миксина Alert
Добавьте следующий код в файл «mixins.jade»
1 |
//- Alert mixin |
2 |
mixin alert(style) |
3 |
div( class=["alert", "alert-dismissable", "alert-" + style] ) |
4 |
button.close( type="button", data-dismiss="alert" ) × |
5 |
block
|
Использование миксина Alert
Чтобы поместить оповещения теперь вы можете просто воспользоваться миксином alert, передавая стиль оповещения в качестве аргумента, а затем напечатать текст оповещения сразу же после пробела:
1 |
+alert("warning") Warning! Warning!
|
2 |
+alert("danger") Danger Will Robinson!
|
3 |
+alert("success") You succeeded :-)
|
4 |
+alert("info") Some information for you
|
Компонент Jumbotron
Jumbotron является одним из самых узнаваемых компонентов в Bootstrap.
На этот раз мы не будем создавать для него миксин, так как разместить компонент Jumbotron можно гораздо быстрее используя непосредственно код Jade. Это служит хорошим примером, чтобы показать, что несмотря на все преимущества миксинов, вам не всегда потребуется их использовать, а только если они способны значительно сэкономить ваше время.
Необработанный HTML
1 |
<div class="jumbotron"> |
2 |
<h1>Hello, world!</h1> |
3 |
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> |
4 |
<p><a class="btn btn-primary btn-lg">Learn more</a></p> |
5 |
</div>
|
Преобразование в Jade и подключение миксина Button
Для размещения Jumbotron в Jade на самом деле достаточно просто набрать .jumbotron на одной линии, затем в последующих строках вложить в него содержимое.
В приведенном ниже коде обратите внимание как мы использовали миксин button, который мы создали ранее, что показывает, как вы можете начать смешивать и сопоставлять эти элементы вместе:
1 |
.jumbotron |
2 |
h1 Hello, world! |
3 |
p This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. |
4 |
p: +button("primary", "more.htm", "large") Learn more |
Компонент List Group
Bootstrap предоставляет несколько различных типов компонентов list group (сгруппированный список). Мы создадим три типа сгруппированных списков, следующим образом.
1. Tип "list" (список), образующий элемент ul с дочерними элементами li
2. Тип «links» (ссылки), образующий серию текстовых элементов со ссылками
3. Тип «default» (по умолчанию), создающий текстовые элементы без ссылок
Необработанный HTML
Как и у некоторых компонентов, которые мы рассмотрели выше, HTML-код для сгруппированных списков не очень сложный. Однако мы все еще можем сделать их создание более эффективным, написав серию миксинов, чтобы сократить количество кода.
Необработанный HTML для каждого типа сгруппированных списков выглядит следующим образом:
Тип: List
1 |
<ul class="list-group"> |
2 |
<li class="list-group-item active">Cras justo odio</li> |
3 |
<li class="list-group-item">Dapibus ac facilisis in</li> |
4 |
<li class="list-group-item">Morbi leo risus</li> |
5 |
<li class="list-group-item">Dapibus ac facilisis in</li> |
6 |
<li class="list-group-item">Morbi leo risus</li> |
7 |
<li class="list-group-item">Dapibus ac facilisis in</li> |
8 |
</ul>
|
Тип: Links
1 |
<div class="list-group"> |
2 |
<a href="#" class="list-group-item active"> |
3 |
<h4 class="list-group-item-heading">List group item heading</h4> |
4 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
5 |
</a>
|
6 |
<a href="#" class="list-group-item"> |
7 |
<h4 class="list-group-item-heading">List group item heading</h4> |
8 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
9 |
</a>
|
10 |
<a href="#" class="list-group-item"> |
11 |
<h4 class="list-group-item-heading">List group item heading</h4> |
12 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
13 |
</a>
|
14 |
</div>
|
Тип: Default
1 |
<div class="list-group"> |
2 |
<div href="#" class="list-group-item"> |
3 |
<h4 class="list-group-item-heading">List group item heading</h4> |
4 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
5 |
</div>
|
6 |
<div href="#" class="list-group-item"> |
7 |
<h4 class="list-group-item-heading">List group item heading</h4> |
8 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
9 |
</div>
|
10 |
<div href="#" class="list-group-item"> |
11 |
<h4 class="list-group-item-heading">List group item heading</h4> |
12 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
13 |
</div>
|
14 |
</div>
|
Преобразование в Jade
Каждый из типов сгруппированных списков преобразованный в непосредственный код Jade, выглядит так:
Тип: List
1 |
ul.list-group |
2 |
li.list-group-item.active Cras justo odio |
3 |
li.list-group-item Dapibus ac facilisis in |
4 |
li.list-group-item Morbi leo risus |
5 |
li.list-group-item Dapibus ac facilisis in |
6 |
li.list-group-item Morbi leo risus |
7 |
li.list-group-item Dapibus ac facilisis in |
Тип: Links
1 |
.list-group |
2 |
a.list-group-item.active( href="#" ) |
3 |
h4.list-group-item-heading List group item heading |
4 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
a.list-group-item( href="#" ) |
6 |
h4.list-group-item-heading List group item heading |
7 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
a.list-group-item( href="#" ) |
9 |
h4.list-group-item-heading List group item heading |
10 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
Тип: Default
1 |
.list-group |
2 |
.list-group-item( href="#" ) |
3 |
h4.list-group-item-heading List group item heading |
4 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
.list-group-item( href="#" ) |
6 |
h4.list-group-item-heading List group item heading |
7 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
.list-group-item( href="#" ) |
9 |
h4.list-group-item-heading List group item heading |
10 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
Добавление миксина List Group
Также как мы делали с миксином компонента nav, мы создадим несколько миксинов list group, которые могут быть вложены один в другой для создания различных типов сгруппированных списков.
Добавьте следующий код в файл «mixins.jade»:
1 |
//- List group mixins |
2 |
- var groupType |
3 |
|
4 |
mixin listGroup(type) |
5 |
- groupType = type |
6 |
case groupType |
7 |
when 'list' |
8 |
ul.list-group |
9 |
block
|
10 |
default
|
11 |
.list-group |
12 |
block
|
13 |
|
14 |
mixin listItem(arg1, arg2) |
15 |
case groupType |
16 |
when 'list' |
17 |
li( class=["list-group-item", arg1] ) |
18 |
block
|
19 |
when 'links' |
20 |
a( href=arg1, class=["list-group-item", arg2] ) |
21 |
block
|
22 |
default
|
23 |
.list-group-item( class=["list-group-item", arg1] ) |
24 |
block
|
25 |
|
26 |
mixin listHeading |
27 |
h4.list-group-item-heading |
28 |
block
|
29 |
|
30 |
mixin listText |
31 |
.list-group-item-text |
32 |
block
|
Первый миксин, listGroup, инициализирует любой из трех типов сгруппированных списков и может принять аргумент, определяя тип сгруппированного списка. Он выведет элемент ul, только если указан тип списка, при его вызове.
Второй миксин, listItem, выведет индивидуальные элементы списка. Если задан тип list, он будет выводить каждый элемент внутри тегов li, а если задан тип links, он будет выводить каждый элемент как ссылку.
Третий миксин, listHeading, выводит заголовок четвертого уровня h4 вложенный в элемент списка и предназначен для использования с типом links и default сгруппированных списков.
И наконец четвертый миксин listText, выводит текст, который должен быть включен внутрь элемента списка и также предназначен для использования с типом links и default сгруппированных списков.
Использование миксина List Group
Тип: List
Для создания сгруппированного списка типа list воспользуйтесь миксином listGroup, со словом list, переданным в качестве аргумента и миксином listItem, как показано в следующем коде:
1 |
+listGroup("list") |
2 |
+listItem("active") Cras justo odio |
3 |
+listItem Dapibus ac facilisis in |
4 |
+listItem Morbi leo risus |
5 |
+listItem Dapibus ac facilisis in |
6 |
+listItem Morbi leo risus |
7 |
+listItem Dapibus ac facilisis in |
Чтобы сделать стиль одного из элементов списка активным передайте слово active в качестве аргумента, как на второй линии в приведенном выше примере кода.
Тип: Links
Для создания сгруппированного списка типа links снова воспользуйтесь миксином listGroup, но на этот раз, в качестве аргумента передайте слово links.
Также, вновь воспользуйтесь миксином listItem, однако теперь, так как он будет содержать ссылки, вы должны каждый раз включать аргумент, который задает назначение этих ссылок. Если вы хотите установить для элемента списка активный стиль, передайте слово «active» на этот раз в качестве второго аргумента.
Вы можете использовать вложенные в каждый миксин listItem миксины listHeading и listText для заголовков и обычного текста в каждом элементе списка:
1 |
+listGroup("links") |
2 |
+listItem("link1.html", "active") |
3 |
+listHeading List group item heading |
4 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
+listItem("link2.html") |
6 |
+listHeading List group item heading |
7 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
+listItem("link3.html") |
9 |
+listHeading List group item heading |
10 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
Тип: Default
Сгруппированный список типа default получается когда вы не передаете какой либо аргумент в миксине listGroup. Он используется почти так же, как сгруппированный список типа links, с той разницей, что вам не нужно передавать какую либо ссылку при использовании миксина listItem:
1 |
+listGroup |
2 |
+listItem |
3 |
+listHeading List group item heading |
4 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
+listItem |
6 |
+listHeading List group item heading |
7 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
+listItem |
9 |
+listHeading List group item heading |
10 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
Темы Bootswatch
Во всех примерах, которые вы видели до сих пор, мы использовали тему Flatly от Bootswatch, загруженную через Bootstrap CDN при помощи этого кода в разделе head:
1 |
link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css", rel="stylesheet") |
Последним миксином, который мы собираемся добавить в наш проект является миксин «Bootswatch».
Этот mixin гораздо облегчит переключение тем, а также обновление URL-адреса ваших стилей в дальнейшем, если это понадобится. Это особенно полезно, если вам нужно обновить несколько HTML-файлов за раз.
Добавление миксина Bootswatch
Добавьте следующий код в файл “mixins.jade”:
1 |
mixin bootswatch(theme) |
2 |
link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/" + theme + "/bootstrap.min.css", rel="stylesheet") |
Использование миксина Bootswatch
В основном документе замените строку, которая ссылается на стили Bootswatch на это:
1 |
+bootswatch("flatly")
|
Теперь, чтобы изменить тему на другую, просто замените слово flatly на название новой темы. Например, чтобы перейти к теме Superhero:
1 |
+bootswatch("superhero") |
Это сразу изменит тему вашего сайта на эту:
Подводим итоги
Я надеюсь, вы с удовольствием воспользуетесь этими сниппетами Jade при работе с проектами Bootstrap, и что это сэкономит уйму вашего времени.
Если есть что-то, что вы хотели бы сделать иначе в своих собственных проектах Bootstrap, красота миксинов Jade позволит вам написать их и настроить по собственному усмотрению.
Jade не только невероятно мощный, но и интуитивно понятный язык, который вы можете выбрать и довольно быстро начать использовать на практике.
Дальнейшее чтение
- Я предлагаю вам взглянуть на мой курс, "Скоростная HTML разработка с Jade", где я проведу вас через все, что вам нужно, чтобы узнать основы и некоторые из самых полезных элементов Jade чуть более чем за два часа.
- Для большей информации о Jade посетите официальный сайт - http://jade-lang.com
- И, чтобы узнать еще больше о Bootstrap, посетите http://getbootstrap.com
