Bootstrap4 Tutorial Básico

Bootstrap4 Mensagem de alerta

Bootstrap 4 pode ser implementado facilmente uma mensagem de alerta.

A caixa de mensagem pode usar a classe .alert, seguida por .alert-sucesso, .alert-informação, .alert-aviso, .alert-perigo, .alert-primário, .alert-secundário, .alert-ligeiro ou .alert-classe escuro para implementar:

exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura,　inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2Caixa de mensagem/h2>
　　A caixa de mensagem pode usar a classe .alert, seguida por uma classe de cor específica para implementar:/p>
　　<div class="alert alert-sucesso">
　　　　<forte>Sucesso!/forte>　Especifique as informações de mensagem de sucesso da operação.
　　</div>
　　<div class="alert alert-informação">
　　　　<forte>Informação!/forte>　Atenção para esta informação.
　　</div>
　　<div class="alert alert-aviso">
　　　　<forte>Alerta!/forte>　Configure as informações de alerta.
　　</div>
　　<div class="alert alert-perigo">
　　　　strong>Erro!</ação falhou
　　</div>
　　<div class="alert alert-primário">
　　　　strong>Primeiro!</strong>Esta é uma informação de operação importante.
　　</div>
　　<div class="alert alert-secundário">
　　　　strong>Secundário!</strong>Mostrar algumas informações não importantes.
　　</div>
　　<div class="alert alert-escuro">
　　　　<strong>Cinza Escuro!</strong>Caixa de Mensagem Cinza Escuro.
　　</div>
　　<div class="alert alert-ligeiro">
　　　　<strong>Cinza Clara!</strong>Caixa de Mensagem Cinza Clara.
　　</div>
</div>
</body>
</html>

Teste e Veja ‹/›

Adicionar link de mensagem

Na caixa de mensagem, adicione a classe alert ao marcador de link:-classe link para definir a cor do link de alerta:

exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura,　inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2Adicionar link de mensagem </h2>
　　Na caixa de mensagem, adicione a classe alert ao marcador de link:-classe link para definir a cor do link de alerta: </p>
　　<div class="alert alert-sucesso">
　　　　<forte>Sucesso!/Deve ler com atenção <a href="#" class="alert-link">esta informação</a>.
　　</div>
　　<div class="alert alert-informação">
　　　　<forte>Informação!/Deve ler com atenção <a href="#" class="alert-link">esta informação</a>.
　　</div>
　　<div class="alert alert-aviso">
　　　　<forte>Alerta!/Deve ler com atenção <a href="#" class="alert-link">esta informação</a>.
　　</div>
　　<div class="alert alert-perigo">
　　　　strong>Erro!</Deve ler com atenção <a href="#" class="alert-link">esta informação</a>.
　　</div>
　　<div class="alert alert-primário">
　　　　strong>Primeiro!</Deve ler com atenção <a href="#" class="alert-link">esta informação</a>.
　　</div>
　　<div class="alert alert-secundário">
　　　　strong>Secundário!</Deve ler com atenção <a href="#" class="alert-link">esta informação</a>.
　　</div>
　　<div class="alert alert-escuro">
　　　　<strong>Cinza Escuro!</Deve ler com atenção <a href="#" class="alert-link">esta informação</a>.
　　</div>
　　<div class="alert alert-ligeiro">
　　　　cinza!/Deve ler com atenção <a href="#" class="alert-link">esta informação</a>.
　　</div>
</div>
</body>
</html>

Teste e Veja ‹/›

Fechar a caixa de mensagem

Podemos adicionar .alert-dismissible classe, em seguida, adicione-dismiss="alert" classe para configurar a operação de fechamento da caixa de mensagem。

exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura,　inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Fechar a caixa de mensagem</h2>
　　<p>Podemos adicionar .alert-dismissible classe, em seguida, adicione class="close" e data-dismiss="alert" classe para configurar a operação de fechamento da caixa de mensagem.</p>
　　<div class="alert alert-sucesso alerta-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<forte>Sucesso!/forte>　Especifique as informações de mensagem de sucesso da operação.
　　</div>
　　<div class="alert alert-info alerta-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<forte>Informação!/forte>　Atenção para esta informação.
　　</div>
　　<div class="alert alert-aviso alerta-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<forte>Alerta!/forte>　Configure as informações de alerta.
　　</div>
　　<div class="alert alert-perigo alerta-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Erro!</strong>Operação falhada.
　　</div>
　　<div class="alert alert-alert alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Primeiro!</strong>Esta é uma informação de operação importante.
　　</div>
　　<div class="alert alert-alert alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Secundário!</strong>Mostrar algumas informações não importantes.
　　</div>
　　<div class="alert alert-alert alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Cinza Escuro!</strong>Caixa de Mensagem Cinza Escuro.
　　</div>
　　<div class="alert alert-alert alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Cinza Clara!</strong>Caixa de Mensagem Cinza Clara.
　　</div>
</div>
</body>
</html>

Teste e Veja ‹/›

Avisos: × (×) é um caractere entity HTML, usado para representar a operação de fechamento, em vez da letra "x".

Animação da caixa de mensagem

.fade e .show classes são usadas para configurar o efeito de desvanecimento e entrada ao fechar a caixa de mensagem：

exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura,　inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Animação da caixa de mensagem</h2>
　　<p>.fade e .show classes são usadas para configurar o efeito de desvanecimento e entrada ao fechar a caixa de mensagem:</p>
　　<div class="alert alert-sucesso alerta-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<forte>Sucesso!/forte>　Especifique as informações de mensagem de sucesso da operação.
　　</div>
　　<div class="alert alert-info alerta-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<forte>Informação!/forte>　Atenção para esta informação.
　　</div>
　　<div class="alert alert-aviso alerta-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<forte>Alerta!/forte>　Configure as informações de alerta.
　　</div>
　　<div class="alert alert-perigo alerta-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Erro!</strong>Operação falhada.
　　</div>
　　<div class="alert alert-alert alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Primeiro!</strong>Esta é uma informação de operação importante.
　　</div>
　　<div class="alert alert-alert alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Secundário!</strong>Mostrar algumas informações não importantes.
　　</div>
　　<div class="alert alert-alert alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Cinza Escuro!</strong>Caixa de Mensagem Cinza Escuro.
　　</div>
　　<div class="alert alert-alert alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Cinza Clara!</strong>Caixa de Mensagem Cinza Clara.
　　</div>
</div>
</body>
</html>

Teste e Veja ‹/›

Bootstrap4 Botão Bootstrap4 Jumbotron