单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等

  按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。对于结构方面,非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中。

  除了可以使用<button>元素之外,还可以使用其他标签元素,比如<a>标签。唯一要保证的是:不管使用什么标签,“.btn-group”容器里的标签元素需要带有类名“.btn”

  注意:

  1、默认所有按钮都有圆角

  2、除第一个按钮和最后一个按钮(下拉按钮除外),其他的按钮都取消圆角效果

  3、第一个按钮只留左上角和左下角是圆角

  4、最后一个按钮只留右上角和右下角是圆角

<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
</div>

Bootstrap系列 -- 29. 按钮组的更多相关文章

  1. Bootstrap<基础十三> 按钮组

    按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...

  2. Bootstrap系列 -- 30. 按钮工具栏

    在富文本编辑器中,将按钮组分组排列在一起,比如说复制.剪切和粘贴一组:左对齐.中间对齐.右对齐和两端对齐一组.Bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组“btn-grou ...

  3. Bootstrap3系列:按钮组

    1. 基本实例 1.1 示例代码 <div class="btn-group"> <button type="button" class=&q ...

  4. Bootstrap系列 -- 22. 按钮详解

    Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格.默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色 ...

  5. Bootstrap系列 -- 22. 按钮

    Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格.默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色 ...

  6. Bootstrap系列 -- 35. 按钮的向下向上三角形

    按钮的向下三角形,我们是通过在<button>标签中添加一个“<span>”标签元素,并且命名为“caret”. <div class="btn-group d ...

  7. Bootstrap系列 -- 34. 按钮下拉菜单

    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...

  8. Bootstrap系列 -- 32. 按钮垂直分组

    实际运用当中,总会碰到垂直显示的效果.在Bootstrap框架中也提供了这样的风格.我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可. <div ...

  9. Bootstrap <基础七>按钮

    任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <butto ...

随机推荐

  1. 常用vi编辑命令

    在自己的博客里存起来,这么多全记住确实有点难,时不时的翻一翻到是可以的. 摘自:http://www.cnblogs.com/junw_china/articles/1708967.html 光标控制 ...

  2. JFrame小练习1

    1.文本域组件 public class TestJTextArea { public static void main(String[] args) { JFrame jf=new JFrame(& ...

  3. Linux iptables

    一.简介 http://liaoph.com/iptables/ 二.操作 1)查看规则 iptables -t filter -L -n iptables -t nat -L -n iptables ...

  4. OpenXml 入门----OpenXml Tools使用技巧

    简介: Office2007以上版本的文档其实可以转换为XML格式.截图如下: Test.doc 解压过后已经完全变为文件夹和xml文件,文档的属性和信息都存储在了xml里面.根据XML就封装出了Op ...

  5. EM basics- the Maxwell Equations

    All the two important problems that the EM theory trys to describe and explain are propogation and r ...

  6. codeforces 719E E. Sasha and Array(线段树)

    题目链接: E. Sasha and Array time limit per test 5 seconds memory limit per test 256 megabytes input sta ...

  7. UESTC 880 生日礼物 --单调队列优化DP

    定义dp[i][j]表示第i天手中有j股股票时,获得的最多钱数. 转移方程有: 1.当天不买也不卖: dp[i][j]=dp[i-1][j]; 2.当天买了j-k股: dp[i][j]=max(dp[ ...

  8. JavaWeb学习之Servlet(一)----MyEclipse及Tomcat的配置

    [声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4134921.html [开发环境] 物理机版本:Win 7旗舰版(64位 ...

  9. Android数据存储(二)----PreferenceFragment详解

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  10. POJ 1151 Atlantis 线段树求矩形面积并 方法详解

    第一次做线段树扫描法的题,网搜各种讲解,发现大多数都讲得太过简洁,不是太容易理解.所以自己打算写一个详细的.看完必会o(∩_∩)o 顾名思义,扫描法就是用一根想象中的线扫过所有矩形,在写代码的过程中, ...