Bootstrap Buton Gruplama

Semih
20 Ağustos 2015 Perşembe
0

btn-group sınıfı ile butonlar gruplanıp bir araya getirilir.

Örnek:

<div class="btn-group">
	<button type="button" class="btn btn-success">Anasayfa</button>
	<button type="button" class="btn btn-info">Makaleler</button>
	<button type="button" class="btn btn-default">Soru-Cevap</button>
	<button type="button" class="btn btn-danger">Yazarlar</button>
	<button type="button" class="btn btn-warning">Hakkımızda</button>
</div>

 

Daha karmaşık gruplamalar için btn-group sınıflarını btn-toolbar sınıfı içerisine almamız gerekir.

Örnek:

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
        <button type="button" class="btn btn-default">4</button>
    </div>
    
	<div class="btn-group">
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
        <button type="button" class="btn btn-default">7</button>
    </div>
      
	<div class="btn-group">
        <button type="button" class="btn btn-default">8</button>
    </div>
</div>

 

btn-group'lar için kullanabileceğimiz boyutlandırmalar: btn-group-lg,  btn-group-sm,  btn-group-xs

Örnek:

<div class="btn-group btn-group-lg">
	<button type="button" class="btn btn-success">HTML</button>
	<button type="button" class="btn btn-info">CSS</button>
	<button type="button" class="btn btn-default">Java</button>
	<button type="button" class="btn btn-danger">C#</button>
	<button type="button" class="btn btn-warning">SQL</button>
</div>

 

btn-group'lar için kullanabileceğimiz hizalamalar: pull-left, pull-rightbtn-group-justified

 

pull-left ve pull-right isminden kolayca anlaşılıyor. Biri sola, diğeri sağa hizalamayı sağlar.

btn-group-justified ise kaç tane buton konulduysa 12 grid'e eşit yayılacak şekilde butonların genişliklerini ayarlar.

Örnek:

<div class="btn-group pull-left">
	<a class="btn btn-success" role="button">Semih</a>
	<a class="btn btn-info" role="button">Ferik</a>
	<a class="btn btn-warning" role="button">Fatma Nur</a>
</div>

<div class="btn-group pull-right">
	<a class="btn btn-danger" role="button">Aaaa</a>
	<a class="btn btn-default" role="button">Bbbb</a>
	<a class="btn btn-primary" role="button">Cccc</a>
</div>

<div class="btn-group btn-group-justified">
	<a class="btn btn-warning">sadasd</a>
	<a class="btn btn-danger">sdadasssssss</a>
	<a class="btn btn-success">nanan</a>
</div>

 

Buton ve Açılır Menü Bir Arada Kullanım

<div class="btn-group">
	<button type="button" class="btn btn-success">Makale</button>
	<button type="button" class="btn btn-danger">Yazar</button>

	<div class="btn-group">
	<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Açılır Menü <span class="caret"></span></button>
	
	<ul class="dropdown-menu">
		<li><a href="#">Anasayfa</a></li>
		<li><a href="#">Makaleler</a></li>
		<li><a href="#">Yazarlar</a></li>
		<li><a href="#">Hakkımızda</a></li>
	</ul>
	</div>
</div>

 



Yorum yaz