Bootstrap4 Tutorial Básico

Bootstrap4 Grupo de botões

　　 No capítulo anterior, você aprendeu como criar diferentes tipos de botões individuais e como modificá-los usando classes pré-definidas. No entanto, o Bootstrap também permite que você combine um grupo de botões em uma linha usando o componente de grupo de botões.

Bootstrap 4 Permite que coloquemos os botões na mesma linha, você pode adicionar .btn na classe do elemento <div>-Classe group para criar o grupo.

Para criar um grupo de botões, basta empacotar uma série de botões com a classe .btn dentro de um elemento e aplicar .btn-Classe group, como mostrado no exemplo a seguir:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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>Grupo de botões</h2>
　　<p>　.btn-Classe　.group　usada para criar grupos de botões:</p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

Avisos: Podemos usar .btn-group-lg|sm　classe para definir o tamanho do grupo de botões.

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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>Tamanho do grupo de botões</h2>
　　<p>Podemos usar　.btn-group-lg|sm|xs　classe para definir o tamanho do grupo de botões.</p>
　　<h2>Botão grande:</h2>
　　<div class="btn-group btn-group-lg">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>Botão padrão:</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>Pequeno botão:</h2>
　　<div class="btn-group btn-group-sm">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

垂直按钮组

可以使用 .btn-group-vertical 类来创建垂直的按钮组：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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>垂直按钮组</h2>
　　<p>U可以使用　.btn-group-vertical 类来创建垂直的按钮组：</p>
　　<div class="btn-group-vertical">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

内嵌按钮组及下拉菜单

我们可以在按钮组内设置下拉菜单：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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>内嵌按钮组</h2>
　　<p>按钮组设置下拉菜单:</p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Sony
　　　　　　</button>
　　　　　　<div class="dropdown-menu">
　　　　　　　　<a class="dropdown-item" href="#">Tablet</a>
　　　　　　　　<a class="dropdown-item" href="#">Smartphone</a>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

拆分按钮下拉菜单

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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>拆分按钮下拉菜单</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　　　<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Tablet</a>
　　　　　　<a class="dropdown-item" href="#">Smartphone</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

垂直按钮组及下拉菜单

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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>垂直按钮组及下拉菜单</h2>
　　<div class="btn-group-vertical">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　　　Sony
　　　　　　</button>
　　　　　　<div class="dropdown-menu">
　　　　　　　　<a class="dropdown-item" href="#">Tablet</a>
　　　　　　　　<a class="dropdown-item" href="#">Smartphone</a>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

创建按钮工具栏

您还可以将按钮组的集合组合在一起，以创建更复杂的组件，例如按钮工具栏。要创建按钮工具栏，只需将按钮组的集合包装在一个

元素中，然后.btn-toolbar在其上应用类，如以下示例所示：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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>
　　　　<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
　　　　<div class="btn-group mr-2">
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-font"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-bold"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-italic"></i>
　　　　　　　　</button>
　　　　</div>
　　　　<div class="btn-group mr-2">
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-left"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-center"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-right"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-justify"></i>
　　　　　　　　</button>
　　　　</div>
　　　　<div class="btn-group">
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-undo"></i>
　　　　　　　　</button>
　　　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

O efeito é o seguinte:

Bootstrap4 Bilhete Bootstrap4 Botão