Creating Button Groups Using BootStrap Classes
Thanks to the BootStrap .btn-group selector, we can combine the buttons into a group to get different looks.
The code for the example above is as follows:
<div class="btn-group">
<button type="button" class="btn btn-info">Buton1</button>
<button type="button" class="btn btn-primary">Buton2</button>
<button type="button" class="btn btn-success">Buton3</button>
<button type="button" class="btn btn-info">Buton4</button>
<button type="button" class="btn btn-primary">Buton5</button>
<button type="button" class="btn btn-success">Buton6</button>
</div>
As you can see, the bootstrap buttons we know from the previous topic are enclosed in a div with .btn-group applied. It's that simple.
We can also apply all the classes we saw in the previous topic (btn-lg, btn-md ...) and our own styles to the buttons within the group.
If we want our buttons to be placed one under the other instead of side by side, it will be enough to use the .btn-group-vertical class.
If we want the horizontal button group to occupy the place where it is located and if we are using the a tags, it will be sufficient to use the btn-group-justified selector together with the btn-group class.
<div class="btn-group btn-group-justified">
<a class="btn btn-info" href="#">Buton1<
/a>
<a class="btn btn-info" href="#">Buton2</a>
<a class="btn btn-info" href="#">Buton3</a>
</div>
However, if we are using the button tag, we need to enclose each button separately in a div.btn-group to achieve the same thing.
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-info">Buton1</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Buton2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Buton3</button>
</div>
</div>
Dropdown menus can also be used within the button group:
If we examine the codes of the example above, you will see that another div.btn-group is opened within the button group to create the dropdown menu and a ul list is created in it.
<div class="btn-group">
<button type="button" class="btn btn-primary">Buton1</button>
<button type="button" class="btn btn-primary">Buton2</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Buton3 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Buton3.1</a></li>
<li><a href="#">Buton3.2</a></li>
<li><a href="#">Buton3.3</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary">Buton4</button>
</div>
Pop-up buttons like the following can also be made:
<div class="btn-group">
<button type="button" class="btn btn-primary">Buton1</button>
<button type="button" class="btn btn-primary">Buton2</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="#">Buton2.1</a></li>
<li><a href="#">Buton2.2</a></li>
<li><a href="#">Buton2.3</a></li>
</ul>
</div>
bootstrap button groups, buton group, button, group, buton grubu, kullanımı, bootstrap buton grupları, örnekleri
EXERCISES
There are no examples related to this subject.
Read 927 times.