gruppi di pulsanti
Bootstrap consente di raggruppare una serie di pulsanti insieme (su una sola riga) in un gruppo di pulsanti:
Utilizzare un <div> elemento con classe .btn-group per creare un gruppo di pulsanti:
Esempio
<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> Prova tu stesso " Suggerimento: Invece di applicare misure pulsante per ogni pulsante in un gruppo, utilizzare la classe .btn-group-* a misura tutti i pulsanti del gruppo:
Esempio
<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> Prova tu stesso " Gruppi di pulsanti verticali
Bootstrap supporta anche i gruppi di pulsanti verticali:
Utilizzare la classe .btn-group-vertical per creare un gruppo di pulsanti verticale:
Esempio
<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> Prova tu stesso " Giustificati gruppi di pulsanti
Per coprire l'intera larghezza dello schermo, utilizzare il .btn-group-justified classe:
Esempio con <a> elementi:
Esempio
<div class="btn-group
btn-group-justified">
<a
href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div> Prova tu stesso " Nota: Per <button> elementi, è necessario avvolgere ogni pulsante in un .btn-group classe:
Esempio
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn
btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div> Prova tu stesso " Pulsante Nesting Gruppi & discesa menu
gruppi di pulsanti Nest di creare menu a discesa:
Esempio
<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 <span class="caret"></span></button>
<ul
class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div> Prova tu stesso " Dropdowns pulsante Dividi
Esempio
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div> Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »