单个按钮在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. oracle表空间相关

    数据库被划分为若干个表空间,每个表空间内保存一组相关的逻辑对象.每个表空间由一个或者多个数据文件组成.oracle中的数据逻辑上存储在表空间里,物理上存储在属于该表空间的数据文件里.表空间是用户和物理 ...

  2. js获取页面传过来的参数

    //接收页面传过来的值 //RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i" ...

  3. CentOS 6.5安装MongoDB

    1.创建mongodb.repo文件在/etc/yum.repos.d/目录下创建文件mongodb.repo,它包含MongoDB仓库的配置信息,内容如下: [mongodb] name=Mongo ...

  4. UVA 11355 Cool Points(几何)

    Cool Points We have a circle of radius R and several line segments situated within the circumference ...

  5. hdu 1003 Max sum(简单DP)

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Problem ...

  6. Linux运维式具之pdsh

    做系统运维的时候,我们经常需要同时在多台机器上执行相同的命令,这个时候可以使用类似pssh,pdsh的并行执行shell的工具. 当然,之前在没有使用这些工具之前,如果有ssh无密码互访,我们可以自己 ...

  7. [转]Flash ActionScript2.0面向对象游戏开发-推箱子

    本文转自:http://www.alixixi.com/Dev/W3C/Flash/2007/2007070868666.html 概述: Flash ActionScript2.0是一种面向对向的编 ...

  8. 双向广搜 codevs 3060 抓住那头奶牛

    codevs 3060 抓住那头奶牛 USACO  时间限制: 1 s  空间限制: 16000 KB  题目等级 : 黄金 Gold   题目描述 Description 农夫约翰被告知一头逃跑奶牛 ...

  9. sql 入门经典(第五版) Ryan Stephens 学习笔记 (第一,二,三,,四,五章)

    SQL - Structured  Query Language (结构化查询语言) 1/ SQL 命令的类型 : 数据定义语言: DDL 数据操作语言: DML 数据查询语言: DQL 数据控制语言 ...

  10. C++基础笔记(四)C++内存管理

    析构函数 * 析构函数在对象所占用内存释放时调用,通常用来释放相关的资源 * 析构函数就是一个特殊的类成员函数,它是构造函数相反 构造函数:对象在分配内存之后,立即调用 析构函数:对象在内存被释放之前 ...