BrandName

Типовые блоки

Большой банер Jumbotron doc

 

Привет, мир!

Это простой пример блока с компонентом в стиле jumbotron для привлечения дополнительного внимания к содержанию или информации.

Использются служебные классы для типографики и расстояния содержимого в контейнере большего размера.

Learn more

Уведомления doc

 

Карточки doc

 

header карточки
Заголовок карточки

With supporting center text below as a natural lead-in to additional content.

кнопка
footer карточки
card-img
Название карточки
card-header

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

card-footer
Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

card-img
Calbuco_22-04-2015-1
Карточка с фоном

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

.card > .card-img-overlay

card-img-top
Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Группы карточекdoc

 

Карточки в колонкахdoc

 

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь
Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

Card-Deckdoc

 

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer
Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.

Footer
Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer
Header
Danger card title

Some card's content.

Footer
Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer
Header
Info card title

Some quick example text.

Footer
Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer
Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

Card-Columns "Mansory"doc

 

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Название карточки

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card link Another link
card-img-bottom
card-img-top
Название карточки

Some quick example text to build on the card title and make up the bulk of the card's content.

Переход куда-нибудь
Название карточки
Подзаголовок карты

Some quick example text to build on the card title and make up the bulk of the card's content.

Ссылка карты Другая ссылка
card image
Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
card image
Название карточки

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Название карточки

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Название карточки

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

Card Tabs navigationdoc

 

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

Медиа объект doc

 

Для решения проблемы адаптивности элемента .media на низких и экстремально низких разрешениях необходимы следующие действия:

  1. Добавить в .media классы: .d-block.d-md-flex.flex-column.flex-md-row 
    <div class="media d-block d-md-flex flex-column flex-md-row">
  2. Для адаптивности изображений большого размера добавить в <img> класс: .col-auto: 
    <img src="..." class="col-auto p-0 p-md-auto">

    * По желанию можно добавить в <img> классы: .float-left.float-md-none 
    <img src="..." class="float-left float-md-none">
Media

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • ...
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • ...
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • ...
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
...
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
...
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
...
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
...

Раскрывающиеся, accordion doc

 

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Dropdown header
Action Another action Something else here
Action Another action Something else here
Dropdown header
Separated link
Dropdown header
Action Another action
Dropdown header
Action Another action

Cписки doc

 

Dapibus ac facilisis in Элемент основной группы списков Дополнительный элемент группы списков Элемент группы списка успешных действий Элемент группы списка опасности Элемент группы списка предупреждений Элемент группы списка информации Элемент группы с легким списком Элемент группы темных списков
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

Табы Tabs doc

 

код этого примера
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

код этого примера
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

код этого примера
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

код этого примера
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

Формы

Кнопки

 



a и input вместо bitton
Link

Disabled






Выпадающая ссылка Выпадающая ссылка
Выпадающая ссылка Выпадающая ссылка

Поля, элементы, группы элементов

 

.form-text Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
textarea

Группировка форм и выравнивание

 

Radios
Checkbox
Must be 8-20 characters long
@

Валидация формdoc

 

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

Декорация элементов форм

 

Example invalid custom file feedback
Upload
Имя и Фамилия
With textarea
$ 0.00
$ 0.00
@
$
.00
Action Another action Something else here Separated link
Action Another action Something else here Separated link
Action Another action Something else here Separated link
Action Another action Something else here Separated link
Шрифт и Типографика

Шрифт

 

Шрифты в Bootstrap по умолчанию (приоритет применения - слева направо):
-apple-system, BlinkMacSystemFont, Segoe UI , Roboto , Helvetica Neue , Arial , Noto Sans , sans-serif,
для символов: Apple Color Emoji , Segoe UI Emoji , Segoe UI Symbol , Noto Color Emoji

Заголовки

 

тэг HTML <h1>-<h6>

h1. Заголовок

h2. Заголовок

h3. Заголовок

h4. Заголовок

h5. Заголовок
h6. Заголовок
.h1-.h6 вместо тэгов HTML

h1. Заголовок

h2. Заголовок

h3. Заголовок

h4. Заголовок

h5. Заголовок

h6. Заголовок

Акценты

 

Для решения проблемы адаптивности элемента .display на низких и экстремально низких разрешениях необходимы следующие действия:

  1. Добавить в стили: 
    *[class*="display-"]{max-width: 100vw!important;overflow: hidden;}
  2. Для предотвращения скрытия контента можно добавить в стили элемента отзывчивость, например: 
    @media (max-width: 768px) {.element[class*="display-"]{font-size:8vw;}}
    , подбирая необходимый размер vw опытным путём.

Display 1

Display 2

Display 3

Display 4

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Тексты

 

mark - тег-выделитель mark для текста;
del - удалено , s - зачеркнутый;
u, ins - подчёркивание, подчёркивание ;
small - мелкий шрифт ;
strong - жирный текст;
em - курсив;
abbr abbr(attr), abbr - абревиатуры;
sup - верхний и sub - нижний индексы;
code - элемент <кода>;
kbd - элемент клавиатура;
samp - элемент вывод программы;
var - элемент переменная;
address -
элемент address

Списки

 

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Определения

 

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Description lists
A description list is perfect for defining terms.
Etiam porta sem malesuada magna mollis euismod.

Цитаты

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то знаменитый в Название источника

Форматированный

 

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

Выравнивание текста

 

class="text-left"
class="text-center"
class="text-right"

class="text-sm-left"
class="text-md-left"
class="text-lg-left"
class="text-xl-left"
Декоративные элементы

Цвета doc

 

Primary (Главный)
Secondary (Второстепенный)
Success (Успех)
Danger (Опасность)
Warning (Предупреждение)
Info (Инфо)
Light (Светлый)
Dark (Темный)

Граница doc

 


... ...

... ... ... ...

... ...

... ...

Значки badge doc

 

Пример заголовка New

Пример заголовка New

Пример заголовка New

Пример заголовка New

Заголовок H5 с badge
Пример заголовка New
Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный

Скругленные «значки» (букв. - «подушки»)

Главный Вторичный Успех Опасность

Ссылки

Предупреждение Инфо Светлый Темный

Прогрессбар doc

 

25%

Загрузчики doc

 

События JavaScript

Скроллспай (отслеживание прокрутки) doc

 

Для отслеживания события позиции прокрутки необходимо добавить data-spy="scroll" например в body, подробности в Документации

Пункт 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Пункт 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Пункт 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Пункт 4

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Всплывающие сообщения Popup alert doc

 

Подсказки doc