Components

Материал из DeusExMachina
Перейти к: навигация, поиск

Содержание

Форматирование текста

Подробно о форматировании текста можно прочитать на странице MediaWiki: Форматирование

Важно помнить, что Пробел ( ) в начале строки обозначает для Wiki движка, что последующий текст должен быть обернут в тег <pre></pre>. Это позволяет сохранить всё форматирование текста, однако оборачивает его в рамочку. Так же для переноса текста вы можете воспользоваться тегом <br> или соотвествующей кнопкой в виде стрелки переноса строки на панели редактора.

Пример:


Текст без пробела в начале строки. Перенос на следующую строку в редакторе не работает на финальной странице.

Перенос через строку.


Текст с пробелом в начале строки.
Перенос на следующую строку.
Перенос через строку.

Текст до переноса
Текст на следующей строке без увеличенного интервала


----
Текст без пробела в начале строки.
Перенос на следующую строку в редакторе не работает на финальной странице

Перенос через строку.
----
 Текст с пробелом в начале строки.
 Перенос на следующую строку.

 Перенос через строку.
----
Текст до переноса
<br>
Текст на следующей строке без увеличенного интервала
----

Сетка - красивое размещение элементов

На сайте подключен Bootstrap 3, а следовательно доступна и Grid система фреймворка. Она может быть полезна при организации адаптивных страниц, которые одинаково хорошо выглядят как на десктопе, так и на мобильном устройстве.

Подробно о форматировании текста можно прочитать на странице Bootstrap 3: Grid system

Или на русском Bootstrap 3: Разметка. Система сетки

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

Пример:

Ex Machina
Ex Machina: Меридиан 113
Ex Machina Arcade
<div class="row">
<div class="col-xs-12 col-sm-4">[[Файл:Ex Machina cover.png|200px|center|class=img-responsive|Ex Machina]]</div>
<div class="col-xs-12 col-sm-4">[[Файл:Ex_Machina_Meridian_113_cover.png|200px|center|class=img-responsive|Ex Machina: Меридиан 113]]</div>
<div class="col-xs-12 col-sm-4">[[Файл:Ex_Machina_Arcade_cover_.png|200px|center|class=img-responsive|Ex Machina Arcade ]]</div>
</div>

Панели и рамки

Простая панель

Пример:

Basic panel example

<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>

Панель с шапкой

Пример:

Panel heading

Panel content

<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
Panel content
</div>
</div>

Панель с футером

Пример:

Panel content

<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>

Цветные панели

Пример:

Panel heading

Panel content primary

Panel heading

Panel content success

Panel heading

Panel content info

Panel heading

Panel content warning

Panel heading

Panel content danger

<div class="panel panel-primary">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
Panel content primary
</div>
</div>

<div class="panel panel-success">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
Panel content success
</div>
</div>

<div class="panel panel-info">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
Panel content info
</div>
</div>

<div class="panel panel-warning">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
Panel content warning
</div>
</div>

<div class="panel panel-danger">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
Panel content danger
</div>
</div>


Кнопки

Простая кнопка

Пример:

<btn>Кнопка</btn>

Кнопки разных размеров

<btn size="lg">Большая кнопка</btn>
<btn size="sm">Маленькая кнопка</btn>

Кнопки разных цветов

<btn class="btn-default">Defаult</btn>
<btn class="btn-primary">Primary</btn>
<btn class="btn-success">Success</btn>
<btn class="btn-info">Info</btn>
<btn class="btn-warning">Warning</btn>
<btn class="btn-danger">Danger</btn>
<btn class="btn-link">Link</btn>

Группа из кнопок

Пример:

<btn>
Primary||btn-primary
Default
Info||btn-info
</btn>

Кнопка-ссылка с псевдонимом

<btn>http://www.google.com|Ссылка на внешний ресурс</btn>
<btn>О играх серии|Ссылка на внутреннюю страницу</btn>


Метки и ярлыки

Можно использовать для пометок и/или как категории.

Пример:

Default Primary Success Info Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Отображение исходного кода

Используется для отображения различного кода: куски модификации, разметка сайта, файлы конфигурации, прочее.

Пример:

  <Prototype
    Class			= "Wheel"
    Name			= "bugWheel01"
    Mass			= "13"
    EffectType		= "SMALLWHEEL" />
<source lang="xml">
  <Prototype
    Class			= "Wheel"
    Name			= "bugWheel01"
    Mass			= "13"
    EffectType		= "SMALLWHEEL" />
</source>

Перечень поддерживаемых типов подсветки:

Язык lang параметр(ы)
C++ cpp, c
C# csharp, c-sharp
CSS css
PHP php
XML xml, html, xhtml
Python python, py
Java java
JavaScript jscript, js, javascript

Спойлер и аккордеон

Одиночный Accordion открытый по умолчанию

Пример:

Lorem ipsum...

<div class="panel-group" id="accordion">
<accordion parent="accordion" heading="Заголовок" class="in">
Lorem ipsum...
</accordion>
</div>

Одиночный Spoiler закрытый по умолчанию

Пример:

<spoiler show="Заголовок закрытого спойлера" hide="Заголовок открытого спойлера">
Lorem ipsum...
</spoiler>

Табы (вкладки)

Пример:

Tab 1: Lorem ipsum...

Tab 2: Lorem ipsum...

<ul class="nav nav-tabs">
<li class="active"><btn data-toggle="tab" class="">#tab_1|Tab 1</btn></li>
<li><btn data-toggle="tab" class="">#tab_2|Tab 2</btn></li>
</ul>
<div class="tab-content">
<div id="tab_1" class="tab-pane fade in active">
'''Tab 1''': Lorem ipsum...
</div>
<div id="tab_2" class="tab-pane fade">
'''Tab 2''': Lorem ipsum...
</div>
</div>

Картинки

Картинка как ссылка

Пример:

Ex Machina логотип
[[Image:Ex_Machina_Logo.jpg|center|class=img-responsive|alt=Ex Machina логотип
|Перейти на страницу 'О играх серии'|link=О играх серии]]

Уменьшеная картинка (100px в ширину) как ссылка

Пример:

Ex Machina логотип
[[Image:Ex_Machina_Logo.jpg|100px|center|class=img-responsive|alt=Ex Machina логотип
|Перейти на страницу 'О играх серии'|link=О играх серии]]

Уменьшеная картинка в рамке как ссылка

Пример:

Обычно, миниатюрная картинка с подписью может понадобиться, чтобы сопроводить текст пояснительной иллюстрацией. Это наиболее красиво и читабельно на любых экранах можно сделать, воспользовавшись системой "сеток", доступных на DeusWiki.

Тут, например, текст занимает 9 пунктов по ширине, а картинка - 3 пункта. Расчёт ведётся исходя из того что максимальная ширина страницы - 12 пунтов. Подробнее - ниже.

Ex Machina логотип

Описание картинки

<div class="row">
 <div class="col-xs-12 col-md-9">
Обычно, миниатюрная картинка с подписью может понадобиться, чтобы сопроводить текст пояснительной иллюстрацией. Это наиболее красиво и читабельно на любых экранов можно сделать, воспользовавшись системой "сеток", доступных на '''DeusWiki'''.

Тут, например, текст занимает 9 пунктов по ширине, а картинка - 3 пункта. Расчёт ведётся исходя из того что максимальная ширина страницы - 12 пунтов. Подробнее - ниже.
 </div>
 <div class="col-xs-12 col-md-3">
  <div class="well well-sm">
[[Image:Ex_Machina_Logo.jpg|center|class=img-responsive|alt=Ex Machina логотип
|link=О играх серии]]
Описание картинки
  </div>
 </div>
</div>

Пояснение

Синтаксис выглядит довольно пугающе, для такого простого элемента, не правда ли? Но давайте ещё раз взглянем на смысл этого синтаксиса, для начала изучим блок текста:


<div class="row"><div class="col-xs-12 col-md-9">. Сперва открывается тег ряда "таблички" в которую помещается информация - "row". Дальше мы создаём колонку, буквально описывая колонку так: на "маленьких экранах"(xs - extra small) - пусть колонка текста займёт полную ширину экрана - 12 из 12 пунктов (col-xs-12), на экранах "средних"(md - medium) - колонка займёт 9 из 12 пунктов (col-md-9).


Теперь блок колонки картинки:
<div class="col-xs-12 col-md-3"> - опять же, на маленьких экранах колонка с картинкой займёт всю ширину и станет под текст (col-xs-12), а на экранах побольше - аккуратно разместится справа от текста, заняв остающиеся от него 3 пункта по ширине из 12 (col-md-3).

Под "маленькие" экраны подпадут все смартфоны, но и на компьютере это можно проверить - попробуйте поменять ширину окна вашего браузера и вы увидите как в определённый момент картинка перестаёт висеть справа и передвигается ПОД текст. Всё благодаря синтаксису выше.


Это объясняет как мы добиваемся того как текст и картинка размещаются относительно друг-друга. А как можно увидеть тут:
<div class="well well-sm"> - "подпись" к тексту просто оказывается вместе с картинкой помещена в одну стандартную рамочку 'well'. Мы не используем какой-то специальный синтаксис для картинки, а просто помещаем текст и картинку в общую рамку, поэтому текст выглядит как "подпись" к картинке.

Таблицы

Обычная таблица

Пример:

Firstname Lastname Email Email
John Doe john@example.com john@example.com
Mary Moe mary@example.com john@example.com
<div class="table-responsive">
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
</table>
</div>

"Полосатая" таблица

Пример:

Firstname Lastname Email Email
John Doe john@example.com john@example.com
Mary Moe mary@example.com john@example.com
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
</table>
</div>

Узкая таблица

Пример:

Firstname Lastname Email Email
John Doe john@example.com john@example.com
Mary Moe mary@example.com john@example.com
<div class="table-responsive">
<table class="table table-condensed">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
</table>
</div>

Таблица с полной сеткой

Пример:

Firstname Lastname Email Email
John Doe john@example.com john@example.com
Mary Moe mary@example.com john@example.com
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
</table>
</div>

Таблица с выделением цветом

Стили применяются к индивидуальным строкам или ячейкам:

Пример:

Firstname Lastname Email Email
John Doe john@example.com john@example.com
Mary Moe mary@example.com john@example.com
Mary Moe mary@example.com john@example.com
<div class="table-responsive">
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Email</th>
</tr>
<tr>
<td class="active">John</td>
<td class="danger">Doe</td>
<td class="success">john@example.com</td>
<td class="warning">john@example.com</td>
</tr>
<tr>
<td class="info">Mary</td>
<td>Moe</td>
<td class="dark">mary@example.com</td>
<td>john@example.com</td>
</tr>
<tr class="success">
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>john@example.com</td>
</tr>
</table>
</div>

Сложные таблицы

Объединение ячеек и центровка

Пример:

Кузов Скорость Мощн. Масса Броня Защита от Оружие Гаджеты Цена
снарядов взрывов энергии
Жук 90 45 30 10 0 -25 -25 1*SML 1*GUN 700
Работяга 100 55 35 20 0 -25 -25 1*SML 2*CAR 1000
Скорпион 100 75 50 40 8 -25 -25 1*SML 1*GUN 1*CAR 2000
<div class="table-responsive">
<table class="table table-bordered text-center">
<tr class="dark">
<th rowspan="2" class="text-center">Кузов</th>
<th rowspan="2" class="text-center">Скорость</th>
<th rowspan="2" class="text-center">Мощн.</th>
<th rowspan="2" class="text-center">Масса</th>
<th rowspan="2" class="text-center">Броня</th>
<th colspan="3" class="text-center">Защита от</th>
<th rowspan="2" class="text-center">Оружие</th>
<th rowspan="2" class="text-center">Гаджеты</th>
<th rowspan="2" class="text-center">Цена</th>
</tr>
<tr class="dark">
<th class="text-center">снарядов</th>
<th class="text-center">взрывов</th>
<th class="text-center">энергии</th>
</tr>
<tr>
<th class="text-center">Жук</th>
<td>90</td>
<td>45</td>
<td>30</td>
<td>10</td>
<td>0</td>
<td>-25</td>
<td>-25</td>
<td>1*SML</td>
<td>1*GUN</td>
<td>700</td>
</tr>
<tr>
<th class="text-center">Работяга</th>
<td>100</td>
<td>55</td>
<td>35</td>
<td>20</td>
<td>0</td>
<td>-25</td>
<td>-25</td>
<td>1*SML</td>
<td>2*CAR</td>
<td>1000</td>
</tr>
<tr>
<th class="text-center">Скорпион</th>
<td>100</td>
<td>75</td>
<td>50</td>
<td>40</td>
<td>8</td>
<td>-25</td>
<td>-25</td>
<td>1*SML</td>
<td>1*GUN 1*CAR</td>
<td>2000</td>
</tr>
</table>
</div>

Фиксированная ширина столбцов и подсветка

Пример:

Кузов Вместимость (~) Масса Броня Защ. от снарядов Защ. от взрывов Защ. от энергии Оружие Цена
Газ 20 15 5 0 -25 -25 - 700
Каскад 24 30 20 0 -25 -25 1*SPEC 1000
Борг 24 40 30 5 -25 -25 - 1700
<div class="table-responsive">
<table class="table table-striped text-center table-fixed">
<tr class="info">
<th class="text-center">Кузов</th>
<th class="text-center">Вместимость (~)</th>
<th class="text-center">Масса</th>
<th class="text-center">Броня</th>
<th class="text-center">Защ. от снарядов</th>
<th class="text-center">Защ. от взрывов</th>
<th class="text-center">Защ. от энергии</th>
<th class="text-center">Оружие</th>
<th class="text-center">Цена</th>
</tr>
<tr>
<th class="text-center">Газ</th>
<td>20</td>
<td>15</td>
<td>5</td>
<td>0</td>
<td>-25</td>
<td>-25</td>
<td>-</td>
<td>700</td>
</tr>
<tr>
<th class="text-center">Каскад</th>
<td>24</td>
<td>30</td>
<td>20</td>
<td>0</td>
<td>-25</td>
<td>-25</td>
<td>1*SPEC</td>
<td>1000</td>
</tr>
<tr>
<th class="text-center">Борг</th>
<td>24</td>
<td>40</td>
<td>30</td>
<td>5</td>
<td>-25</td>
<td>-25</td>
<td>-</td>
<td>1700</td>
</tr>
</table>
</div>

Предупреждения, замечания, информационные сообщения

Пример:

<div class="alert alert-success" role="alert">'''Отлично!''' Всё отлично.</div>
<div class="alert alert-info" role="alert">'''Берегись!''' Что-то может пойти не так.</div>
<div class="alert alert-warning" role="alert">'''Внимание!''' Что-то пошло не так.</div>
<div class="alert alert-danger" role="alert">'''Чёрт!''' Прийдётся начинать всё заново.</div>

Wells

Может быть использовано как простой эффект для элемента, чтобы придать ему эффект вставки.

Стандартный Well

Пример:

Текст, который выделили вставкой.
<div class="well">Текст, который выделили вставкой.</div>

Маленький Well

Пример:

Текст, который выделили вставкой.
<div class="well well-sm">Текст, который выделили вставкой.</div>

Glyphicons - иконки

Доступные glyphs

Включает более 250 glyphs в формате шрифта из набора Glyphicon Halflings.

- glyphicon glyphicon-asterisk
- glyphicon glyphicon-plus
- glyphicon glyphicon-euro
- glyphicon glyphicon-eur
- glyphicon glyphicon-minus
- glyphicon glyphicon-cloud
- glyphicon glyphicon-envelope
- glyphicon glyphicon-pencil
- glyphicon glyphicon-glass
- glyphicon glyphicon-music
- glyphicon glyphicon-search
- glyphicon glyphicon-heart
- glyphicon glyphicon-star
- glyphicon glyphicon-star-empty
- glyphicon glyphicon-user
- glyphicon glyphicon-film
- glyphicon glyphicon-th-large
- glyphicon glyphicon-th
- glyphicon glyphicon-th-list
- glyphicon glyphicon-ok
- glyphicon glyphicon-remove
- glyphicon glyphicon-zoom-in
- glyphicon glyphicon-zoom-out
- glyphicon glyphicon-off
- glyphicon glyphicon-signal
- glyphicon glyphicon-cog
- glyphicon glyphicon-trash
- glyphicon glyphicon-home
- glyphicon glyphicon-file
- glyphicon glyphicon-time
- glyphicon glyphicon-road
- glyphicon glyphicon-download-alt
- glyphicon glyphicon-download
- glyphicon glyphicon-upload
- glyphicon glyphicon-inbox
- glyphicon glyphicon-play-circle
- glyphicon glyphicon-repeat
- glyphicon glyphicon-refresh
- glyphicon glyphicon-list-alt
- glyphicon glyphicon-lock
- glyphicon glyphicon-flag
- glyphicon glyphicon-headphones
- glyphicon glyphicon-volume-off
- glyphicon glyphicon-volume-down
- glyphicon glyphicon-volume-up
- glyphicon glyphicon-qrcode
- glyphicon glyphicon-barcode
- glyphicon glyphicon-tag
- glyphicon glyphicon-tags
- glyphicon glyphicon-book
- glyphicon glyphicon-bookmark
- glyphicon glyphicon-print
- glyphicon glyphicon-camera
- glyphicon glyphicon-font
- glyphicon glyphicon-bold
- glyphicon glyphicon-italic
- glyphicon glyphicon-text-height
- glyphicon glyphicon-text-width
- glyphicon glyphicon-align-left
- glyphicon glyphicon-align-center
- glyphicon glyphicon-align-right
- glyphicon glyphicon-align-justify
- glyphicon glyphicon-list
- glyphicon glyphicon-indent-left
- glyphicon glyphicon-indent-right
- glyphicon glyphicon-facetime-video
- glyphicon glyphicon-picture
- glyphicon glyphicon-map-marker
- glyphicon glyphicon-adjust
- glyphicon glyphicon-tint
- glyphicon glyphicon-edit
- glyphicon glyphicon-share
- glyphicon glyphicon-check
- glyphicon glyphicon-move
- glyphicon glyphicon-step-backward
- glyphicon glyphicon-fast-backward
- glyphicon glyphicon-backward
- glyphicon glyphicon-play
- glyphicon glyphicon-pause
- glyphicon glyphicon-stop
- glyphicon glyphicon-forward
- glyphicon glyphicon-fast-forward
- glyphicon glyphicon-step-forward
- glyphicon glyphicon-eject
- glyphicon glyphicon-chevron-left
- glyphicon glyphicon-chevron-right
- glyphicon glyphicon-plus-sign
- glyphicon glyphicon-minus-sign
- glyphicon glyphicon-remove-sign
- glyphicon glyphicon-ok-sign
- glyphicon glyphicon-question-sign
- glyphicon glyphicon-info-sign
- glyphicon glyphicon-screenshot
- glyphicon glyphicon-remove-circle
- glyphicon glyphicon-ok-circle
- glyphicon glyphicon-ban-circle
- glyphicon glyphicon-arrow-left
- glyphicon glyphicon-arrow-right
- glyphicon glyphicon-arrow-up
- glyphicon glyphicon-arrow-down
- glyphicon glyphicon-share-alt
- glyphicon glyphicon-resize-full
- glyphicon glyphicon-resize-small
- glyphicon glyphicon-exclamation-sign
- glyphicon glyphicon-gift
- glyphicon glyphicon-leaf
- glyphicon glyphicon-fire
- glyphicon glyphicon-eye-open
- glyphicon glyphicon-eye-close
- glyphicon glyphicon-warning-sign
- glyphicon glyphicon-plane
- glyphicon glyphicon-calendar
- glyphicon glyphicon-random
- glyphicon glyphicon-comment
- glyphicon glyphicon-magnet
- glyphicon glyphicon-chevron-up
- glyphicon glyphicon-chevron-down
- glyphicon glyphicon-retweet
- glyphicon glyphicon-shopping-cart
- glyphicon glyphicon-folder-close
- glyphicon glyphicon-folder-open
- glyphicon glyphicon-resize-vertical
- glyphicon glyphicon-resize-horizontal
- glyphicon glyphicon-hdd
- glyphicon glyphicon-bullhorn
- glyphicon glyphicon-bell
- glyphicon glyphicon-certificate
- glyphicon glyphicon-thumbs-up
- glyphicon glyphicon-thumbs-down
- glyphicon glyphicon-hand-right
- glyphicon glyphicon-hand-left
- glyphicon glyphicon-hand-up
- glyphicon glyphicon-hand-down
- glyphicon glyphicon-circle-arrow-right
- glyphicon glyphicon-circle-arrow-left
- glyphicon glyphicon-circle-arrow-up
- glyphicon glyphicon-circle-arrow-down
- glyphicon glyphicon-globe
- glyphicon glyphicon-wrench
- glyphicon glyphicon-tasks
- glyphicon glyphicon-filter
- glyphicon glyphicon-briefcase
- glyphicon glyphicon-fullscreen
- glyphicon glyphicon-dashboard
- glyphicon glyphicon-paperclip
- glyphicon glyphicon-heart-empty
- glyphicon glyphicon-link
- glyphicon glyphicon-phone
- glyphicon glyphicon-pushpin
- glyphicon glyphicon-usd
- glyphicon glyphicon-gbp
- glyphicon glyphicon-sort
- glyphicon glyphicon-sort-by-alphabet
- glyphicon glyphicon-sort-by-alphabet-alt
- glyphicon glyphicon-sort-by-order
- glyphicon glyphicon-sort-by-order-alt
- glyphicon glyphicon-sort-by-attributes
- glyphicon glyphicon-sort-by-attributes-alt
- glyphicon glyphicon-unchecked
- glyphicon glyphicon-expand
- glyphicon glyphicon-collapse-down
- glyphicon glyphicon-collapse-up
- glyphicon glyphicon-log-in
- glyphicon glyphicon-flash
- glyphicon glyphicon-log-out
- glyphicon glyphicon-new-window
- glyphicon glyphicon-record
- glyphicon glyphicon-save
- glyphicon glyphicon-open
- glyphicon glyphicon-saved
- glyphicon glyphicon-import
- glyphicon glyphicon-export
- glyphicon glyphicon-send
- glyphicon glyphicon-floppy-disk
- glyphicon glyphicon-floppy-saved
- glyphicon glyphicon-floppy-remove
- glyphicon glyphicon-floppy-save
- glyphicon glyphicon-floppy-open
- glyphicon glyphicon-credit-card
- glyphicon glyphicon-transfer
- glyphicon glyphicon-cutlery
- glyphicon glyphicon-header
- glyphicon glyphicon-compressed
- glyphicon glyphicon-earphone
- glyphicon glyphicon-phone-alt
- glyphicon glyphicon-tower
- glyphicon glyphicon-stats
- glyphicon glyphicon-sd-video
- glyphicon glyphicon-hd-video
- glyphicon glyphicon-subtitles
- glyphicon glyphicon-sound-stereo
- glyphicon glyphicon-sound-dolby
- glyphicon glyphicon-sound-5-1
- glyphicon glyphicon-sound-6-1
- glyphicon glyphicon-sound-7-1
- glyphicon glyphicon-copyright-mark
- glyphicon glyphicon-registration-mark
- glyphicon glyphicon-cloud-download
- glyphicon glyphicon-cloud-upload
- glyphicon glyphicon-tree-conifer
- glyphicon glyphicon-tree-deciduous
- glyphicon glyphicon-cd
- glyphicon glyphicon-save-file
- glyphicon glyphicon-open-file
- glyphicon glyphicon-level-up
- glyphicon glyphicon-copy
- glyphicon glyphicon-paste
- glyphicon glyphicon-alert
- glyphicon glyphicon-equalizer
- glyphicon glyphicon-king
- glyphicon glyphicon-queen
- glyphicon glyphicon-pawn
- glyphicon glyphicon-bishop
- glyphicon glyphicon-knight
- glyphicon glyphicon-baby-formula
- glyphicon glyphicon-tent
- glyphicon glyphicon-blackboard
- glyphicon glyphicon-bed
- glyphicon glyphicon-apple
- glyphicon glyphicon-erase
- glyphicon glyphicon-hourglass
- glyphicon glyphicon-lamp
- glyphicon glyphicon-duplicate
- glyphicon glyphicon-piggy-bank
- glyphicon glyphicon-scissors
- glyphicon glyphicon-bitcoin
- glyphicon glyphicon-btc
- glyphicon glyphicon-xbt
- glyphicon glyphicon-yen
- glyphicon glyphicon-jpy
- glyphicon glyphicon-ruble
- glyphicon glyphicon-rub
- glyphicon glyphicon-scale
- glyphicon glyphicon-ice-lolly
- glyphicon glyphicon-ice-lolly-tasted
- glyphicon glyphicon-education
- glyphicon glyphicon-option-horizontal
- glyphicon glyphicon-option-vertical
- glyphicon glyphicon-menu-hamburger
- glyphicon glyphicon-modal-window
- glyphicon glyphicon-oil
- glyphicon glyphicon-grain
- glyphicon glyphicon-sunglasses
- glyphicon glyphicon-text-size
- glyphicon glyphicon-text-color
- glyphicon glyphicon-text-background
- glyphicon glyphicon-object-align-top
- glyphicon glyphicon-object-align-bottom
- glyphicon glyphicon-object-align-horizontal
- glyphicon glyphicon-object-align-left
- glyphicon glyphicon-object-align-vertical
- glyphicon glyphicon-object-align-right
- glyphicon glyphicon-triangle-right
- glyphicon glyphicon-triangle-left
- glyphicon glyphicon-triangle-bottom
- glyphicon glyphicon-triangle-top
- glyphicon glyphicon-console
- glyphicon glyphicon-superscript
- glyphicon glyphicon-subscript
- glyphicon glyphicon-menu-left
- glyphicon glyphicon-menu-right
- glyphicon glyphicon-menu-down
- glyphicon glyphicon-menu-up

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

Отдельно в тексте или на странице

Пример:

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Как часть кнопки или Alert'а

Пример:

<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
'''Ошибка:'''  Введите корректный адрес.
</div>
<btn>
<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Скачать
</btn>


Вставка видео (Youtube и т.д.)

Пример:

<embedvideo service="youtube" alignment="center" dimensions="640x360">
https://www.youtube.com/watch?v=dJ3uR_UqVtQ</embedvideo>

Поддерживаемые параметры (не обязательные)

Параметр Значения
alignment left | center | right | inline
description Любая строка
dimensions WIDTH | WIDTHxHEIGHT | xHEIGHT


Поддерживаемые сервисы (обязательный параметр service)

Сервис Псевдоним для параметра service
YouTube youtube | youtubeplaylist | youtubevideolist
Vimeo vimeo
Twitch twitch | twitchvod
SoundCloud soundcloud