Основной курс Bootstrap

Bootstrap плагины

Ленты прогресса Bootstrap Миниатюры Bootstrap

Внимания Bootstrap

Эта глава объясняет уведомления (Alerts) и классы, предоставляемые Bootstrap для уведомлений. Уведомления (Alerts) предоставляют пользователям способ определить стиль сообщения. Они предоставляют контекстную информацию о обратной связи для типичных операций пользователя.

Вы можете добавить опциональную кнопку закрытия к уведомлению. Чтобы создать инлайн удаляемое уведомление, используйте jQuery плагин Уведомления (Alerts).

Вы можете создать <div> и добавить к нему .alert class и четыре контекстных класса (т.е. .alert-success、.alert-info、.alert-warning、.alert-dangerодин из которых, чтобы добавить базовое уведомление. Ниже приведен пример этого:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
　　　　<title>Пример Bootstrap - Уведомления (Alerts)</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-success">Успех! Удачно завершено отправление.</div>
<div class="alert alert-info">Информация! Обратите внимание на эту информацию.</div>
<div class="alert alert-warning">Предупреждение! Не отправляйте.</div>
<div class="alert alert-danger">Ошибка! Внесите некоторые изменения.</div>
</body>
</html>

Проверьте это <‹/›>

Результаты будут показаны следующим образом:

Удалаемые уведомления (Dismissal Alerts)

Шаги по созданию удаляемого уведомления (Dismissal Alert):

Создавая <div> и добавляя к нему .alert class и четыре контекстных класса (т.е. .alert-success、.alert-info、.alert-warning、.alert-danger）之一, чтобы добавить базовое предупреждение.
同时向上面的 <div> class добавьте опциональные .alert-dismissible.
Добавьте кнопку закрытия.

Ниже приведен пример этого:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap - Удалаемые уведомления (Dismissal Alerts)</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-success alert-dismissible">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Успех! Удачно завершено отправление.
</div>
<div class="alert alert-info alert-dismissible">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Информация! Обратите внимание на эту информацию.
</div>
<div class="alert alert-warning alert-dismissible">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Предупреждение! Не отправляйте.
</div>
<div　class="alert　alert-danger　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Ошибка! Внесите некоторые изменения.
</div>
</body>
</html>

Проверьте это <‹/›>

Результаты будут показаны следующим образом:

Ссылки в предупреждениях (Alerts)

Шаги по созданию ссылок в предупреждениях (Alerts):

Создавая <div> и добавляя к нему .alert class и четыре контекстных класса (т.е. .alert-success、.alert-info、.alert-warning、.alert-danger）之一, чтобы добавить базовое предупреждение.
Используйте .alert-link Элементы для быстрого предоставления ссылок с соответствующими цветами.

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap　-　Ссылки в предупреждениях (Alerts)</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="alert　alert-success">
	<a　href="#"　class="alert-link">Успех! Отлично завершено отправление.</a>
</div>
<div　class="alert　alert-info">
	<a　href="#"　class="alert-link">Информация! Обратите внимание на эту информацию.</a>
</div>
<div　class="alert　alert-warning">
	<a href="#" class="alert-link">Предупреждение! Пожалуйста, не отправляйте.</a>
</div>
<div class="alert alert-danger">
	<a href="#" class="alert-link">Ошибка! Пожалуйста, внесите некоторые изменения.</a>
</div>
</body>
</html>

Проверьте это <‹/›>

Результаты будут показаны следующим образом:

Ленты прогресса Bootstrap Миниатюры Bootstrap