Gruppi di pulsanti Bootstrap
Gruppi di pulsanti
Bootstrap ti consente di raggruppare una serie di pulsanti insieme (su un'unica riga) in un gruppo di pulsanti:
Usa un <div>elemento con classe .btn-groupper 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>
Suggerimento: invece di applicare le dimensioni dei pulsanti a tutti i pulsanti di un gruppo, utilizza la classe .btn-group-lg|sm|xsper ridimensionare 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>
Gruppi di pulsanti verticali
Bootstrap supporta anche i gruppi di pulsanti verticali:
Usa la classe .btn-group-verticalper 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>
Gruppi di pulsanti giustificati
Per coprire l'intera larghezza dello schermo, usa la .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>
Nota: per <button>gli elementi, devi racchiudere ogni pulsante in una .btn-groupclasse:
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>
Nidificazione di gruppi di pulsanti e menu a discesa
Gruppi di pulsanti Nest per 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>
Menu a discesa dei pulsanti divisi
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>