Twitter bootstrap — это интерфейсный фреймворк, разработанный для того, чтобы у вас была фреймворк для запуска всех ваших веб-проектов. Фреймворк содержит множество функций, таких как сетки, адаптивный дизайн , типографика, формы, таблицы, кнопки, навигация, метки, оповещения и индикаторы выполнения, и это лишь некоторые из них.
Twitter bootstrap — это проект github, разработанный веб-сообществом для веб-сообщества. Если у вас есть что добавить или вы хотите загрузить его, вы можете увидеть проект на github.
В этом посте мы рассмотрим одну из моих любимых функций в окнах начальной загрузки … оповещения . Они идеально подходят для отображения небольшого сообщения на экране для различных сценариев.
Есть несколько блоков предупреждений, которые поставляются с платформой:
- Сообщения
- ошибка
- успех
- Информация
Оповещение
Все окна предупреждений в загрузчике Twitter будут использовать класс предупреждений. Это задает стиль, который будут использовать все окна предупреждений, но для остальных я просто изменим цвета в соответствии со сценарием.
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
color: #c09853;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.alert-heading {
color: inherit;
}
.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: 18px;
}
HTML-код для их вызова очень прост, просто добавьте класс CSS во внешний тег div или абзаца.
<div class="alert">Example of an alert box.</div>
успех
Окно предупреждения об успехе будет использоваться, когда пользователь успешно выполнит задачу, и все, что CSS будет делать, это переопределить цвета стандартного окна предупреждения.
.alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
Когда вы используете этот класс CSS, вам нужно использовать и CSS оповещения, и CSS оповещения об успехе.
<div class="alert alert-success">Example of the successful alert box</div>
Опасность или ошибка
Окно предупреждения об ошибках работает так же, как окно успеха, оно просто используется для изменения цвета фона и текста.
.alert-danger,
.alert-error {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
Опять же, вам нужно использовать CSS предупреждений и CSS предупреждений об ошибках .
<div class="alert alert-error">Example of the error alert box</div>
Информация
Последний стиль — это информационный стиль, используемый для выделения сообщения пользователю, просто используя CSS-класс alert-info .
.alert-info {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
<div class="alert alert-info">Example of the information alert box</div>
Блоки для укладки
Наряду с другим стилем сценария начальная загрузка Twitter также предоставляет дополнительные CSS-классы для дальнейшей стилизации блоков предупреждений.
Добавляя класс
alert-блока, вы увеличиваете отступ поля.
.alert-block {
padding-top: 14px;
padding-bottom: 14px;
}
Следующий стиль уменьшит поля на тегах абзаца внутри блока alert.
.alert-block > p,
.alert-block > ul {
margin-bottom: 0;
}
.alert-block p + p {
margin-top: 5px;
}
HTML-код для добавления дополнительного отступа можно использовать, добавив класс CSS блока оповещений в одно из окон оповещения.
<div class="alert alert-information alert-block"> Example of the information alert box </div>
Это все окна предупреждений, которые вы в настоящее время получаете с помощью начальной загрузки Twitter. Конечно, есть множество других типов блоков предупреждений, которые вы хотели бы добавить, так почему бы не внести свой вклад в проект и добавить новые.
Примечание куратора: Это предварительно опубликованная статья. Из-за технических трудностей есть некоторые примеры, которые не могут быть включены. Примеры можно найти, нажав на ссылку источника ниже.