Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Examples
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success ). For inline dismissal, use the alerts jQuery plugin.
class="alert alert-primary" role="alert"> This is a primary alert—check it out! class="alert alert-secondary" role="alert"> This is a secondary alert—check it out! class="alert alert-success" role="alert"> This is a success alert—check it out! class="alert alert-danger" role="alert"> This is a danger alert—check it out! class="alert alert-warning" role="alert"> This is a warning alert—check it out! class="alert alert-info" role="alert"> This is a info alert—check it out! class="alert alert-light" role="alert"> This is a light alert—check it out! class="alert alert-dark" role="alert"> This is a dark alert—check it out! Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
Link color
Use the .alert-link utility class to quickly provide matching colored links within any alert.
class="alert alert-primary" role="alert"> This is a primary alert with href="#" class="alert-link">an example link . Give it a click if you like. class="alert alert-secondary" role="alert"> This is a secondary alert with href="#" class="alert-link">an example link . Give it a click if you like. class="alert alert-success" role="alert"> This is a success alert with href="#" class="alert-link">an example link . Give it a click if you like. class="alert alert-danger" role="alert"> This is a danger alert with href="#" class="alert-link">an example link . Give it a click if you like. class="alert alert-warning" role="alert"> This is a warning alert with href="#" class="alert-link">an example link . Give it a click if you like. class="alert alert-info" role="alert"> This is a info alert with href="#" class="alert-link">an example link . Give it a click if you like. class="alert alert-light" role="alert"> This is a light alert with href="#" class="alert-link">an example link . Give it a click if you like. class="alert alert-dark" role="alert"> This is a dark alert with href="#" class="alert-link">an example link . Give it a click if you like. Additional content
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
class="alert alert-success" role="alert"> class="alert-heading">Well done! Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy. Dismissing
Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:
- Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
- If you’re building our JavaScript from source, it requires util.js . The compiled version includes this.
- Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
- On the dismiss button, add the data-dismiss=»alert» attribute, which triggers the JavaScript functionality. Be sure to use the element with it for proper behavior across all devices.
- To animate alerts when dismissing them, be sure to add the .fade and .show classes.
You can see this in action with a live demo:
class="alert alert-warning alert-dismissible fade show" role="alert"> Holy guacamole! You should check in on some of those fields below. type="button" class="close" data-dismiss="alert" aria-label="Close"> aria-hidden="true">× JavaScript behavior
Triggers
Enable dismissal of an alert via JavaScript:
Or with data attributes on a button within the alert, as demonstrated above:
type="button" class="close" data-dismiss="alert" aria-label="Close"> aria-hidden="true">× Note that closing an alert will remove it from the DOM.
Methods
| Method | Description |
|---|---|
| $().alert() | Makes an alert listen for click events on descendant elements which have the data-dismiss=»alert» attribute. (Not necessary when using the data-api’s auto-initialization.) |
| $().alert(‘close’) | Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed. |
| $().alert(‘dispose’) | Destroys an element’s alert. |
Events
Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.
| Event | Description |
|---|---|
| close.bs.alert | This event fires immediately when the close instance method is called. |
| closed.bs.alert | This event is fired when the alert has been closed (will wait for CSS transitions to complete). |
$('#myAlert').on('closed.bs.alert', function () // do something… >)Вёрстка графических компонентов
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
При создании графических компонентов («виджетов») в первую очередь придумывается их HTML/CSS-структура.
Как будет выглядеть виджет в обычном состоянии? Как будет меняться в процессе взаимодействия с посетителем?
Чтобы разработка виджета была удобной, при вёрстке полезно соблюдать несколько простых, но очень важных соглашений.
Семантическая вёрстка
HTML-разметка и названия CSS-классов должны отражать не оформление, а смысл.
Например, сообщение об ошибке можно сверстать так:
Плохая вёрстка сообщения об ошибке: атрибут style! Плохая вёрстка сообщения об ошибке: несемантический class! В обоих случаях вёрстка не является семантической. В первом случае – стиль, а во втором – класс содержат информацию об оформлении.
При семантической вёрстке классы описывают смысл («что это?» – меню, кнопка…) и состояние (открыто, закрыто, отключено…) компонента.
У предупреждения будет класс warning и так далее, по смыслу.
Семантическая вёрстка упрощает поддержку и развитие CSS, упрощает взаимодействие между членами команды.
Такая вёрстка удобна для организации JS-кода. В коде мы просто ставим нужный класс, остальное делает CSS.
Состояние виджета – класс на элементе
Зачастую компонент может иметь несколько состояний. Например, меню может быть открыто или закрыто.
Состояние должно добавляться CSS-классом не на тот элемент, который нужно скрыть/показать/…, а на тот, к которому оно «по смыслу» относится, обычно – на корневой элемент.
-
, который скрывается-показывается, а к корневому элементу виджета, поскольку это состояние касается всего меню:
Или, к примеру, разметка для индикатора загрузки может выглядеть так:
Состояние индикатора может быть «в процессе» (loading) или «загрузка завершена» (complete). С точки зрения оформления оно может влиять только на показ внутреннего span , но ставить его нужно всё равно на внешний элемент, ведь это – состояние всего компонента.
Из примеров выше можно подумать, что классы, описывающие состояние, всегда ставятся на корневой элемент. Но это не так.
Возможно и такое, что состояние относится к внутреннему элементу. Например, для дерева состояние открыт/закрыт относится к узлу, соответственно, класс должен быть на узле.
Префиксы компонента у классов
Рассмотрим пример вёрстки «диалогового окна»:
.dialog .title < margin: 0; font-size: 24px; color: darkgreen; >.dialog .content < padding: 10px 0 0 0; >.dialog .close
Диалоговое окно может иметь любое HTML-содержимое.
А что будет, если в этом содержимом окажется меню – да-да, то самое, которое рассмотрели выше, со ?
Правило .dialog .title применяется ко всем .title внутри .dialog , а значит – и к нашему меню тоже. Будет конфликт стилей с непредсказуемыми последствиями.
Конечно, можно попытаться бороться с этим. Например, жёстко задать вложенность – использовать класс .dialog > .title . Это сработает в данном конкретном примере, но как быть в тех местах, где между .dialog и .title есть другие элементы? Длинные цепочки вида .dialog > . > .title страшновато выглядят и делают вёрстку ужасно негибкой. К счастью, есть альтернативный путь.
Чтобы избежать возможных проблем, все классы внутри виджета начинают с его имени.
Здесь имя dialog , так что все, относящиеся к диалогу, будем начинать с dialog__
.dialog__title < стиль заголовка >.dialog__content < стиль содержимого >.
Здесь двойное подчёркивание __ служит «стандартным» разделителем. Можно выбрать и другой разделитель, но при этом стоит иметь в виду, что иногда имя класса может состоять из нескольких слов. Например title-picture . С двойным подчёркиванием: dialog__title-picture , очень наглядно видно где что.
Есть ещё одно полезное правило, которое заключается в том, что стили должны вешаться на класс, а не на тег. То есть, не h2 < . >, а .dialog__title < . >, где .dialog__title – класс на соответствующем заголовке.
Это позволяет и избежать конфликтов на вложенных h2 , и использовать всегда те теги, которые имеют правильный смысл, не оглядываясь на встроенные стили (которые можно обнулить своими).
На практике из этих правил зачастую делают исключения. Можно «вешать» стили на теги и использовать CSS-каскады без префиксов, если мы при этом твёрдо понимаем, что конфликты заведомо исключены.
Например, когда мы точно знаем, что никакого произвольного HTML внутри элемента (или внутри данного поддерева DOM) не будет.
БЭМ
Описанное выше правило именования элементов является частью более общей концепции «БЭМ», которая разработана в Яндексе.
БЭМ предлагает способ организации HTML/CSS/JS в виде независимых «блоков» – компонентов, которые можно легко перемещать по файловой системе и между проектами.
Можно как взять часть идеологии, например систему именования классов, так и полностью перейти на инструментарий БЭМ, который даёт инструменты сборки для HTML/JS/CSS, описанных по БЭМ-методу.
Более подробное описание основ БЭМ можно почитать в статье https://ru.bem.info/articles/bem-for-small-projects/, а о системе вообще – на сайте https://ru.bem.info.
Итого
- Вёрстка должна быть семантической, использовать соответствующие смыслу информации теги и классы.
- Класс, описывающий состояние всего компонента, нужно ставить на его корневом элементе, а не на том, который нужно «украсить» в этом состоянии. Если состояние относится не ко всему компоненту, а к его части – то на соответствующем «по смыслу» DOM-узле.
- Классы внутри компонента должны начинаться с префикса – имени компонента. Это не всегда строго необходимо, но позволяет избежать проблем в случаях, когда компонент может содержать произвольный DOM, как например диалоговое окно с произвольным HTML-текстом. Использование .dialog__title вместо .dialog .title гарантирует, что CSS не применится по ошибке к какому-нибудь другому .title внутри диалога.