English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial di base di Bootstrap4

Bootstrap4 按钮组

　 　 Nel capitolo precedente, hai imparato come creare pulsanti di vari tipi e come modificarli utilizzando classi predefinite. Ma Bootstrap ti permette anche di combinare una serie di pulsanti in una riga utilizzando il componente del gruppo di pulsanti.

In Bootstrap 4 è possibile posizionare i pulsanti sulla stessa riga, aggiungendo la classe .btn-group all'elemento <div> per creare un gruppo di pulsanti.

Per creare un gruppo di pulsanti, è sufficiente avvolgere una serie di pulsanti con la classe .btn in un elemento e applicare la classe .btn-group, come nell'esempio seguente:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</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>Gruppo di pulsanti</h2>
　　<p>La classe .btn-group viene utilizzata per creare gruppi di pulsanti:</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>
测试看看 ‹/›

Suggerimento: Possiamo utilizzare .btn-group-lg|sm per impostare la dimensione del gruppo di pulsanti.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</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>Dimensione del gruppo di pulsanti</h2>
　　<p>Possiamo utilizzare le classi .btn-group-lg|sm|xs per impostare la dimensione del gruppo di pulsanti.</p>
　　<h2>Pulsanti grandi:</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>Pulsanti predefiniti:</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>Pulsanti piccoli:</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>
测试看看 ‹/›

Gruppi di pulsanti verticali

È possibile utilizzare la classe .btn-group-vertical per creare gruppi di pulsanti verticali:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</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>Gruppi di pulsanti verticali</h2>
　　<p>È possibile utilizzare la classe .btn-group-vertical per creare gruppi di pulsanti verticali:</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>
测试看看 ‹/›

Gruppo di pulsanti incorporato e menu a discesa

Possiamo impostare un menu a discesa all'interno del gruppo di pulsanti:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</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>Gruppo di pulsanti incorporato</h2>
　　<p>Impostazione menu a discesa del gruppo di pulsanti:</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>
测试看看 ‹/›

Menu a discesa pulsante diviso

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</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>Menu a discesa pulsante diviso</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>
测试看看 ‹/›

Gruppi di pulsanti verticali e menu a discesa

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</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>Gruppi di pulsanti verticali e menu a discesa</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>
测试看看 ‹/›

Creazione del pannello degli strumenti dei pulsanti

Puoi anche combinare insieme insiemi di pulsanti per creare componenti più complessi, come ad esempio il pannello degli strumenti dei pulsanti. Per creare un pannello degli strumenti dei pulsanti, è sufficiente avvolgere un insieme di gruppi di pulsanti in un

negli elementi, quindi si applicano le classi come nella seguente esempio:
<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</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>
测试看看 ‹/›

效果如下：

Bootstrap4 徽章Bootstrap4 按钮