Bootstrap按钮组使用方法

yibin 2015-09-20 网站运营 500

当你需要在网站建设项目中进行一系列操作的时候,就很有可能需要用到按钮组,除此之外,当你的web应用在pad端或者手机端进行使用的时候,更可能会用到按钮组。
所以通过这篇文章让我们来学习一下,如果使用Bootstrap按钮组


基本Bootstrap按钮组

如果你想要把几个按钮放在一块,并且采用单选形式(例如文本编辑框中的对齐方式),那么你就可以采取这个按钮组的样式。
首先你需要定义一个class="btn-group"的父容器,然后在这个容器中写入对应的按钮即可,例如以下代码:<div class="btn-group">   <button type="button" class="btn btn-default">左对齐</button>   <button type="button" class="btn btn-default">居中对齐</button>  <button type="button" class="btn btn-default">右对齐</button> </div>


工具栏Bootstrap按钮组

如果你认为简单的按钮组无法满足自己的需求,自己需要对好几个按钮组进行排版分类,那么你就可以采用工具栏按钮组的形式进行使用。
这样一系列的按钮组就能够有序地进行排版,不会过于凌乱:<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>


按钮组尺寸设定

在之前的教程中我们学习过,Bootstrap按钮元素是可以通过调用样式来设定其大小的,如果要将按钮组中的按钮尺寸统一进行设置,当然不用每个按钮都设定过来这么麻烦。
我们只需要在父容器中添加对应的样式即可:<div class="btn-group btn-group-lg">...</div><div class="btn-group">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div>以上几个按钮组的尺寸分别由大到小,可以说非常方便。


Bootstrap按钮组嵌套

倘若你想要把一个按钮下拉菜单融入到一个按钮组中去,那么你就需要用到按钮组的嵌套。
理解起来非常容易,就是将按钮下拉菜单这个“按钮组”写入另一个“按钮组”中进行整合<div class="btn-group">   <button type="button" class="btn btn-default">1</button>   <button type="button" class="btn btn-default">2</button>   <div class="btn-group">     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">     下拉菜单 <span class="caret"></span>     </button>     <ul class="dropdown-menu">       <li><a href="#">下拉菜单1</a></li>       <li><a href="#">下拉菜单2</a></li>     </ul>   </div> </div>有这样的嵌套功能,使得按钮组的使用更加灵活方便。


Bootstrap按钮组垂直排列

默认的按钮组排列方式是水平的,如果你想要在自己的项目中将一个按钮组进行垂直排列,是不是也很麻烦呢?
答案是否定的,因为Bootstrap考虑到了这个情况,你只需要调用一个样式即可将自己的按钮组从水平排列形式变成垂直排列形式:<div class="btn-group-vertical"> ... </div>需要注意的是,如果你采用了btn-group-vertical样式的,那就不需要再引入btn-group样式了。


Bootstrap按钮组适应父容器样式

如果你想要让自己的按钮组在移动端有更好的展现形式,那么就可以用到这个样式。
它能够让你的按钮组根据父容器尺寸来设定各自相同的尺寸,采用响应式布局技术从而有利于移动端的用户体验<div class="btn-group btn-group-justified"> ... </div>通过加入btn-group-justified样式即可实现这个效果,不过跟垂直排列样式不同点在于,你还需要另外再引入一个btn-group样式。
除此之外,由于元素特性原因,该样式只能作用于a元素而不能用于button元素,这点需要注意。


写在文章最后

可以说Bootstrap按钮组考虑到了绝大多数的按钮组情况,并且针对移动端做了相应优化,赶紧试试它们在不同设备下的效果吧。


扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询