Верхняя часть сайта

Верхняя часть сайта используется как основная навигация по сайту, а так же кроме меню включает "виджеты": корзина, мини-профиль, форма поиска. Существует 10 рабочих комбинаций меню; далее по порядку вариации и рассмотрение кода. а. В зависимости от вариации верхней части меню, будут меняться и элементы находящиеся под ним: слайдер и секция с "хлебными крошками".

Default версия или "По умолчанию"

Default + Transparent

<header id="header" class="transparent tr">

Default + Above navigarion

<header id="header" class="an">

Default + Above navigarion + Transparent

<header id="header" class="an transparent tr">

Light

<header id="header" class="light">

Light + Transparent

<header id="header" class="light transparent tr">

Light + Above navigarion

<header id="header" class="light an">

Light + Above navigarion + Transparent

<header id="header" class="light transparent an tr">

Big menu, лейблы hot, new и иконки в меню

hide code

Fixed

Вы можете добавить класс "fixed". При скролле страницы ниже чем на 750px меню будет фиксироваться в верхней части сайта, а Above nav, если есть - скрываться <header id="header" class="fixed">

Плавная прокрутка

Плавную прокрутку можно получить добавив class scroll в тег верхней части сайта <header id="header" class="scroll">

Слайдеры

Full width slider

Отдельного внимание требует и слайдер на главной странице, т.к. в него можно вставить абсолютно все.

Partner sider

Виды кнопок и стилизации

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

Примеры

Bootstrap имеет некоторые предопределенные стили кнопок, каждый из которых имеет свою семантическую цель, и имеет дополнительные параметры для большего контроля и гибкости. Тема Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный Линк

<button type="button" class="btn btn-theme">Главный</button>
<button type="button" class="btn btn-primary">Главный</button>
<button type="button" class="btn btn-secondary">Вторичный</button>
<button type="button" class="btn btn-success">Успех</button>
<button type="button" class="btn btn-danger">Опасность</button>
<button type="button" class="btn btn-warning">Предупреждение</button>
<button type="button" class="btn btn-info">Инфо</button>
<button type="button" class="btn btn-light">Светлый</button>
<button type="button" class="btn btn-dark">Темный</button>
<button type="button" class="btn btn-link">Линк<lt;/button>

Тэг «кнопка»

Классы .btn созданы для использования с элементом <button>. Однако их также можно использовать внутри <a> или <input> (хотя из-за этого некоторые браузеры могут рендерить это немного иначе). При использовании классов .btn в элементах <a>, которые в данном случае используются не как линк, ведущий на новые страницы или как якорь, а как триггер внутристраничной функциональности (такой как сворачивание содержимого), необходимо задать этим <a> атрибут role="button" для правильного поведения в случае применения вспомогательных технологий таких как «экранная читалка». Link Button

<a class="btn btn-theme" href="#" role="button">Link</a>
<button class="btn btn-theme" type="submit">Button</button>
<input class="btn btn-theme" type="button" value="Input">
<input class="btn btn-theme" type="submit" value="Submit">
<input class="btn btn-theme" type="reset" value="Reset">

Контурные кнопки (без фона)

Нужна кнопка, но без «тяжелых» фоновых цветов? Замените дефолтные классы-модификаторы на классы .btn-outline-* для удаления всех фоновых изображений и цветов в любой кнопке. Тема Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный

<button type="button" class="btn btn-outline-theme">Тема</button>
<button type="button" class="btn btn-outline-primary">Главный</button>
<button type="button" class="btn btn-outline-secondary">Вторичный</button>
<button type="button" class="btn btn-outline-success">Успех</button>
<button type="button" class="btn btn-outline-danger">Опасность</button>
<button type="button" class="btn btn-outline-warning">Предупреждение</button>
<button type="button" class="btn btn-outline-info">Инфо</button>
<button type="button" class="btn btn-outline-light">Светлый</button>
<button type="button" class="btn btn-outline-dark">Темный</button>
<input class="btn btn-theme" type="reset" value="Reset">

Другие кнопки в инструкции

Значки

Документация и примеры «значков» - наших маленьких компонентов для подсчета и создания ярлыков.

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

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

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

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

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

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

<h1>Пример заголовка <span class="badge badge-secondary">New</span></h1>
<h2>Пример заголовка <span class="badge badge-secondary">New</span></h2>
<h3>Пример заголовка <span class="badge badge-secondary">New</span></h3>
<h4>Пример заголовка <span class="badge badge-secondary">New</span></h4>
<h5>Пример заголовка <span class="badge badge-secondary">New</span></h5>
<h6>Пример заголовка <span class="badge badge-secondary">New</span></h6>

Вариации контекста

Добавьте любой из нижеприведенных классов-модификаторов для изменения внешнего вида «значка». Тема Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный

<span class="badge badge-theme">Тема</span>
<span class="badge badge-primary">Главный</span>
<span class="badge badge-secondary">Вторичный</span>
<span class="badge badge-success">Успех</span>
<span class="badge badge-danger">Опасность</span>
<span class="badge badge-warning">Предупреждение</span>
<span class="badge badge-info">Инфо</span>
<span class="badge badge-light">Светлый</span>
<span class="badge badge-dark">Темный</span>

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

Используйте класс-модификатор .badge-pill для придания «значкам» большего скругления углов (больший border-radius и дополнительный padding). Это полезно, если вам не хватает значков из BS3. Тема Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный

<span class="badge badge-pill badge-theme">Тема</span>
<span class="badge badge-pill badge-primary">Главный</span>
<span class="badge badge-pill badge-secondary">Вторичный</span>
<span class="badge badge-pill badge-success">Успех</span>
<span class="badge badge-pill badge-danger">Опасность</span>
<span class="badge badge-pill badge-warning">Предупреждение</span>
<span class="badge badge-pill badge-info">Инфо</span>
<span class="badge badge-pill badge-light">Светлый</span>
<span class="badge badge-pill badge-dark">Темный</span>

Ссылки

Использование контекстуальных классов .badge-* в элементе <a> обеспечивает «значкам» «активное» поведение (:hover, :active). Тема Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный

<a href="#" class="badge badge-theme">Тема</a>
<a href="#" class="badge badge-primary">Главный</a>
<a href="#" class="badge badge-secondary">Вторичный</a>
<a href="#" class="badge badge-success">Успех</a>
<a href="#" class="badge badge-danger">Опасность</a>
<a href="#" class="badge badge-warning">Предупреждение</a>
<a href="#" class="badge badge-info">Инфо</a>
<a href="#" class="badge badge-light">Светлый</a>
<a href="#" class="badge badge-dark">Темный</a>

Уведомления \ Alert

Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений.

<div class="alert alert-theme" role="alert">...</div>
<div class="alert alert-primary" role="alert">...</div>
<div class="alert alert-secondary" role="alert">...</div>
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-light" role="alert">...</div>
<div class="alert alert-dark" role="alert">...</div>

Другие Уведомления \ Alert в инструкции