Grupuri Button
Bootstrap vă permite să grupați o serie de butoane împreună (on a single line) într - un grup de buton:
Utilizați un <div> Element cu clasa .btn-group pentru a crea un grup de buton:
Exemplu
<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> Încearcă - l singur » Sfat: În loc să aplice dimensiuni buton pentru fiecare buton dintr - un grup, folosiți clasa .btn-group-* la dimensiunea toate butoanele din grupa:
Exemplu
<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> Încearcă - l singur » Grupuri Buton vertical
Bootstrap sprijină , de asemenea , grupuri de butoane verticale:
Utilizați clasa .btn-group-vertical pentru a crea un grup de buton vertical:
Exemplu
<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> Încearcă - l singur » Grupuri Button justificate
Pentru a cuprinde întreaga lățime a ecranului, utilizați .btn-group-justified clasa:
Exemplu cu <a> elemente:
Exemplu
<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> Încearcă - l singur » Notă: Pentru <button> elemente, trebuie să înveliți fiecare buton într - un .btn-group de clasă:
Exemplu
<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> Încearcă - l singur » Butonul de cuibărit Grupuri & meniurile derulante
Grupuri de butoane Nest pentru a crea meniuri derulante:
Exemplu
<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> Încearcă - l singur » DROPDOWNS Button Split,
Exemplu
<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> Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »