Advertisement
  1. Web Design
  2. Jade

Создание сниппетов Bootstrap при помощи Jade

Scroll to top
Read Time: 24 min

Russian (Pусский) translation by Radislaw Yalilow (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Пожалуй, величайшая сила самого популярного фреймворка 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 мы создали пять различных миксинов:

  1. nav - используйте это миксин для инициализации компонента navbar и его родительских элементов, установите стиль его отображения: по умолчанию - “default” или инверсированный - “inverse” и задайте текст, который будет отображаться в разделе брендинга.
  2. nav_item - используйте его для добавления отдельных пунктов меню под миксином nav
  3. nav_item_dropdown - используется для размещения пункта меню с вложенным выпадающим меню
  4. nav_divider - используется для размещения разделителя, вложенного в миксин nav_item_dropdown
  5. 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
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.