Bootstrap buton grupları birden fazla butonun tek bir özellik altında toplanması halidir. Bootstrap buton grupları:
olarak 3 farklı şekilde bulunmaktadır.
Yatay düğme grupları temel düğme grupları olarakta geçmektedir.
<div class="btn-group" role="group" aria-label="Yatay Düğme Grupları">
<button type="button" class="btn btn-secondary">Sol</button>
<button type="button" class="btn btn-secondary">Orta</button>
<button type="button" class="btn btn-secondary">Sağ</button>
</div>
Butonların dikey olarak görünmesini istediğimiz zaman kullanılır.
<div class="btn-group-vertical">
<button type="button" class="btn btn-info"> Html </button>
<button type="button" class="btn btn-info"> Css </button>
<button type="button" class="btn btn-info"> JavaScript </button>
<button type="button" class="btn btn-info"> Bootstrap </button>
</div>
Butonların açılır menü halinde olması için kullanılır.
<div class="btn-group" role="group" aria-label="Açılır Menü">
<button type="button" class="btn btn-info">Html</button>
<button type="button" class="btn btn-info">Css</button>
<div class="btn-group" role="group">
<button id="butongrup1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootstrap
</button>
<div class="dropdown-menu" aria-labelledby="butongrup1">
<a class="dropdown-item" href="#">Bootstrap 3</a>
<a class="dropdown-item" href="#">Bootstrap 4</a>
</div>
</div>
</div>
Önceki Ders: Bootstrap Butonlar |