Bootstrap4 Tutorial Básico

Bootstrap4 Menu suspenso

Quando o usuário passar o mouse sobre ou clicar no elemento desencadeador, geralmente é usado um menu suspenso dentro do título da navegação para exibir a lista de links relacionados. Você pode usar o plug-in de menu suspenso Bootstrap para adicionar menus suspenso alternativos a quase qualquer conteúdo (como links, botões ou grupos de botões, barras de navegação, tabs e navegação em cápsulas, etc.) sem precisar escrever nenhum código JavaScript。

Bootstrap4 O menu suspenso depende de popper.min.js。

O menu suspenso é alternativo, é um menu de contexto exibido em formato de lista de links。

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">
　　<h2Menu suspenso</h2>
　　<p>.dropdown classe é usada para especificar um menu suspenso。</p>
　　<p>.dropdown-classe menu para configurar o menu suspenso real.</p>
　　<p>Podemos usar um botão ou link para abrir o menu suspenso, o botão ou link precisa adicionar .dropdown-toggle e data-propriedade toggle="dropdown" 。</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-dropdown primário-alternar" data-toggle="dropdown">
　　　　　　Botão dropdown
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

Exemplo de análise

.dropdown classe é usada para especificar um menu suspenso。

Podemos usar um botão ou link para abrir o menu suspenso, o botão ou link precisa adicionar .dropdown-toggle e data-propriedade toggle="dropdown" 。

<div> elemento adiciona .dropdown-classe menu para configurar o menu suspenso real, e então adicionar .dropdown-classe item.

Também podemos usar no <a> tag：

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">
	<div class="dropdown">
	　　<a class="btn btn-dropdown secundário-toggle" href="#" role="button" id="dropdownMenuLink" data-alternar="menu" aria-tempopup="verdadeiro" aria-expandido="falso">
		link Dropdown
	　　</a>
	　　<div　class="dropdown-menu" aria-labelledby="dropdownMenuLink">
		<a　class="dropdown-item" href="#">Ação</a>
		<a　class="dropdown-item" href="#">Outra ação</a>
		<a　class="dropdown-item" href="#">Algo aqui</a>
	　　</div>
	</div>
</div>
</body>
</html>

Teste e veja ‹/›

Linha divisória do menu suspenso

.dropdown-divider classe usada para criar uma linha horizontal no menu suspenso：

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">
　　<h2>No menu suspenso</h2>
　　<p>.dropdown-divider classe usada para criar uma linha horizontal no menu suspenso：</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-dropdown primário-alternar" data-toggle="dropdown">
　　　　　　Botão dropdown
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　　　<div　class="dropdown-divisória></div>
　　　　　　<a　class="dropdown-item" href="#">Outro link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

Título do menu suspenso

.dropdown-A classe header é usada para adicionar um título ao menu suspenso：

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">
　　<h2>No menu suspenso</h2>
　　<p>.dropdown-A classe header é usada para adicionar um título ao menu suspenso：</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-dropdown primário-alternar" data-toggle="dropdown">
　　　　　　Botão dropdown
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<h5　class="dropdown-header">Cabeçalho do Dropdown</h5>
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　　　<h5　class="dropdown-header">Cabeçalho do Dropdown</h5>
　　　　　　<a　class="dropdown-item" href="#">Outro link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

Itens disponíveis e desativados no menu suspenso

.active classe fará com que as opções do menu suspenso sejam destacadas (adicionando fundo azul)。

Para desativar as opções do menu suspenso, você pode usar a classe .disabled 。

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">
　　<h2Menu suspenso</h2>
　　<p>.active classe fará com que as opções do menu suspenso sejam destacadas (adicionando fundo azul)。</p>
　　<p>Para desativar a opção do menu suspenso, você pode usar a classe .disabled.</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-dropdown primário-alternar" data-toggle="dropdown">
　　　　　　Botão dropdown
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item" href="#">Normal</a>
　　　　　　<a　class="dropdown-item active" href="#">Ativo</a>
　　　　　　<a　class="dropdown-item disabled" href="#">Desativado</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

Posicionamento do menu suspenso

Se quisermos alinhar o menu suspenso à direita, podemos adicionar a classe .right no elemento .dropdown-Adicionar .dropdown após a classe .menu-menu-Classe .right.

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">
　　<h2Menu suspenso</h2>
　　<p>Se quisermos alinhar o menu suspenso à direita, podemos adicionar a classe .right no elemento .dropdown-Adicionar .dropdown após a classe .menu-menu-Classe .right</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-dropdown primário-alternar" data-toggle="dropdown">
　　　　　　Botão dropdown
　　　　</button>
　　　　<div　class="dropdown-menu dropdown-menu-right">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

Configuração da direção de abertura do menu suspenso

A direção padrão de abertura do menu suspenso é para baixo, claro, também podemos definir diferentes direções.

Definir o menu suspenso que se abre para a direita

Se você desejar que o menu suspenso se abra para a direita, você pode adicionar a classe "dropright" no elemento div:

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">
　　<h2Menu suspenso</h2>
　　<p>Classe .dropright para definir o menu suspenso que se abre para a direita:</p><br>
　　<!--　Botão padrão dropright　-->
	<div　class="btn-group dropright">
	　　<button　type="button"　class="btn　btn-dropdown secundário-alternar" data-alternar="menu" aria-tempopup="verdadeiro" aria-expandido="falso">
		Dropright
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Links do menu suspenso　-->
		<a　class="dropdown-item" href="#">Ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Outra ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Algo aqui</a>
　　　　　　　　<div　class="dropdown-divisória></div>
　　　　　　　　<a　class="dropdown-item" href="#">Link separado</a>
　　　　　　　　</div>
	</div>
	<!--　Botão Split dropright　-->
	<div　class="btn-group dropright">
	　　<button　type="button"　class="btn　btn-secundário">
		Split dropright
	　　</button>
	　　<button　type="button"　class="btn　btn-dropdown secundário-toggle　dropdown-toggle-split"　data-alternar="menu" aria-tempopup="verdadeiro" aria-expandido="falso">
		<span class="sr-only">Alternar Dropright</span>
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Links do menu suspenso　-->
		　<a　class="dropdown-item" href="#">Ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Outra ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Algo aqui</a>
　　　　　　　　<div　class="dropdown-divisória></div>
　　　　　　　　<a　class="dropdown-item" href="#">Link separado</a>
	　　</div>
	</div>
</div>
</body>
</html>

Teste e veja ‹/›

Definir o menu suspenso que se abre para cima

Se você desejar que o menu suspenso que se abre para cima, você pode adicionar a classe "dropup" no elemento div:

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">
　　　　<h2Menu suspenso</h2>
　　　　<p>Classe .dropup para definir o menu suspenso que se abre para cima:</p><br><br><br><br><br><br><br><br>
　　<!--　Botão padrão dropup　-->
　　　　<div　class="btn-group dropup">
　　　　<button　type="button"　class="btn　btn-dropdown secundário-alternar" data-alternar="menu" aria-tempopup="verdadeiro" aria-expandido="falso">
　　　　　　　　Dropup
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　<!--　Links do menu suspenso　-->
　　　　　　　　<a　class="dropdown-item" href="#">Ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Outra ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Algo aqui</a>
　　　　　　　　<div　class="dropdown-divisória></div>
　　　　　　　　<a　class="dropdown-item" href="#">Link separado</a>
　　　　</div>
　　　　</div>
　　　　
　　　　<!--　Botão Split dropup　-->
　　　　<div　class="btn-group dropup">
　　　　<button　type="button"　class="btn　btn-secundário">
　　　　　　　　Split dropup
　　　　</button>
　　　　<button　type="button"　class="btn　btn-dropdown secundário-toggle　dropdown-toggle-split"　data-alternar="menu" aria-tempopup="verdadeiro" aria-expandido="falso">
　　　　　　　　<span class="sr-only">Alternar Dropdown</span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　<!--　Links do menu suspenso　-->
　　　　　　　　<a　class="dropdown-item" href="#">Ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Outra ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Algo aqui</a>
　　　　　　　　<div　class="dropdown-divisória></div>
　　　　　　　　<a　class="dropdown-item" href="#">Link separado</a>
　　　　</div>
　　　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

Definir o menu suspenso que se abre para a esquerda

Se você desejar que o menu suspenso saia para cima, você pode adicionar a classe "dropleft" no elemento div:

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" style="text-align:center;">
　　<h2Menu suspenso</h2>
　　<p>Classe .dropleft para definir a exibição do menu suspenso para a esquerda:</p><br>
　　<!--　botão esquerda padrão　-->
	<div　class="btn-esquerda agrupada">
	　　<button　type="button"　class="btn　btn-dropdown secundário-alternar" data-alternar="menu" aria-tempopup="verdadeiro" aria-expandido="falso">
		esquerda
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Links do menu suspenso　-->
		<a　class="dropdown-item" href="#">Ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Outra ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Algo aqui</a>
　　　　　　　　<div　class="dropdown-divisória></div>
　　　　　　　　<a　class="dropdown-item" href="#">Link separado</a>
	　　</div>
	</div>
<br><br><br>
	<!--　botão esquerda dividida　-->
	<div　class="btn-esquerda agrupada">
	　　<button　type="button"　class="btn　btn-secundário">
		esquerda dividida
	　　</button>
	　　<button　type="button"　class="btn　btn-dropdown secundário-toggle　dropdown-toggle-split"　data-alternar="menu" aria-tempopup="verdadeiro" aria-expandido="falso">
		<span class="sr-só">Alternar esquerda</span>
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Links do menu suspenso　-->
		<a　class="dropdown-item" href="#">Ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Outra ação</a>
　　　　　　　　<a　class="dropdown-item" href="#">Algo aqui</a>
　　　　　　　　<div　class="dropdown-divisória></div>
　　　　　　　　<a　class="dropdown-item" href="#">Link separado</a>
	　　</div>
	</div>
</div>
</body>
</html>

Teste e veja ‹/›

Configuração de menu suspenso no botão

Podemos adicionar um menu suspenso ao botão:

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">
　　<h2>botão de menu suspenso</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primário">Primário</button>
　　　　<button　type="button"　class="btn　btn-dropdown primário-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-secundário">Secundário</button>
　　　　<button　type="button"　class="btn　btn-dropdown secundário-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-sucesso">Sucesso</button>
　　　　<button　type="button"　class="btn　btn-sucesso dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-info">Informação</button>
　　　　<button　type="button"　class="btn　btn-info　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-warning">Aviso</button>
　　　　<button　type="button"　class="btn　btn-warning　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-danger">Dano</button>
　　　　<button　type="button"　class="btn　btn-danger　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

Bootstrap4 Foliagem Bootstrap4 Cartão