Оповещения W3.CSS
Класс w3-panel идеально подходит для отображения всех типов предупреждений:
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Оповещения часто отображаются с использованием яркого цвета:
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Пример
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Показать предупреждения
Предупреждение!
Желтый часто указывает на предупреждение, которое может потребовать внимания.
Предупреждение!
Желтый часто указывает на предупреждение, которое может потребовать внимания.
Пример
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Показать успехи
Успех!
Зеленый часто указывает на что-то успешное или позитивное.
Успех!
Зеленый часто указывает на что-то успешное или позитивное.
Пример
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Отображение информации
Информация!
Синий часто указывает на нейтральное информативное изменение или действие.
Информация!
Синий часто указывает на нейтральное информативное изменение или действие.
Пример
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Использование контейнера
Класс w3-container также можно использовать для отображения предупреждений:
Пример
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Оповещения во всех цветах
Оповещения часто отображаются специальными цветами, но можно использовать любой цвет:
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Пример
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Закрытие оповещений
Чтобы закрыть окно предупреждения, нажмите X в правом верхнем углу:
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Чтобы создать X, закрывающий оповещение, добавьте элемент <span> с классом w3-button и событием onclick :
Пример
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Совет: HTML × сущность является предпочтительным значком для кнопок закрытия (а не буквой «X»).
Округленные оповещения
Используйте классы w3-round , если вам нужны закругленные углы:
Успех!
Здесь используется w3-раунд.
Успех!
Здесь используется w3-round-large.
Успех!
Здесь используется w3-round-xxlarge.
Пример
<div class="w3-panel w3-green w3-round">
Оповещение как карта
Используйте класс w3-card , если вы хотите, чтобы предупреждение отображалось в виде карточки:
Предупреждение!
Желтый часто указывает на то, что требует внимания.
Пример
<div class="w3-panel w3-yellow w3-card-4">