Tutorial básico do Bootstrap

Plugin do Bootstrap

Barras de Progresso do Bootstrap Miniaturas do Bootstrap

Avisos do Bootstrap

Este capítulo explicará o aviso(Alerts) e as classes de aviso fornecidas pelo Bootstrap. O aviso(Alerts) oferece aos usuários uma maneira de definir o estilo das mensagens. Eles fornecem feedback de contexto informativo para operações de usuário típicas.

Você pode adicionar um botão de fechar opcional à caixa de aviso. Para criar uma caixa de aviso inline cancelável, use Aviso(Alerts) jQuery plugin。

Você pode criar um <div> e adicionar um .alert classe e quatro classes de contexto (ou seja .alert-sucesso、.alert-informação、.alert-aviso、.alert-perigo）um dos quais, para adicionar uma caixa de aviso básica. O exemplo a seguir ilustra isso:

exemplo online

exemplo

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
　　　　<title>Exemplo Bootstrap　-　Aviso(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">Sucesso! Concluído com sucesso o envio.</div>
<div　class="alert　alert-informação">informação! note esta informação.</div>
<div　class="alert　alert-aviso">aviso! não faça o envio.</div>
<div　class="alert　alert-perigo">erro! faça algumas alterações.</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

alertas canceláveis(Dismissal Alerts)

Os passos para criar um alerta cancelável(Dismissal Alert) são os seguintes:

criando um <div> e adicionando um .alert classe e quatro classes de contexto (ou seja .alert-sucesso、.alert-informação、.alert-aviso、.alert-perigo）um, para adicionar uma caixa de alerta básica.
ao mesmo tempo, adicione o opcional .alert-descartável。
adicionar um botão de fechar.

O exemplo a seguir demonstra isso:

exemplo online

exemplo

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Exemplo Bootstrap　-　alertas canceláveis(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-alerta de sucesso-descartável">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	sucesso! foi bem-sucedido no envio.
</div>
<div　class="alert　alert-alerta de informação-descartável">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	informação! note esta informação.
</div>
<div　class="alert　alert-alerta de aviso-descartável">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	aviso! não faça o envio.
</div>
<div　class="alert　alert-alerta de perigo-descartável">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	erro! faça algumas alterações.
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

link em alertas(Alerts)

Os passos para criar links em alertas(Alerts) são os seguintes:

criando um <div> e adicionando um .alert classe e quatro classes de contexto (ou seja .alert-sucesso、.alert-informação、.alert-aviso、.alert-perigo）um, para adicionar uma caixa de alerta básica.
usar .alert-link classe para fornecer rapidamente links com cores correspondentes.

exemplo online

exemplo

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Exemplo Bootstrap　-　link">alertas(Warnings)中的链接</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">sucesso! foi bem-sucedido no envio.</a>
</div>
<div　class="alert　alert-info">
	<a　href="#"　class="alert-link">Informação! Preste atenção a esta informação.</a>
</div>
<div　class="alert　alert-warning">
	<a　href="#"　class="alert-link">Aviso! Não submeta.</a>
</div>
<div　class="alert　alert-danger">
	<a　href="#"　class="alert-link">Erro! Faça algumas alterações.</a>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Barras de Progresso do Bootstrap Miniaturas do Bootstrap