Bootstrap系列 -- 29. 按钮组

时间:2022-09-21 09:26:11

  单个按钮在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&lt&semi;基础十三&gt&semi; 按钮组

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

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

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

  3. Bootstrap3系列:按钮组

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

  4. Bootstrap系列 -- 22&period; 按钮详解

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

  5. Bootstrap系列 -- 22&period; 按钮

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

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

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

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

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

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

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

  9. Bootstrap &lt&semi;基础七&gt&semi;按钮

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

随机推荐

  1. Emacs 之列编辑模式

    // */ // ]]> Emacs 之 列编辑模式 Table of Contents 1. Emacs 下列编辑模式常用命令 2. 可以参考 1 Emacs 下列编辑模式常用命令 先mark ...

  2. &lbrack;Unity3D&rsqb;图形渲染优化、渲染管线优化、图形性能优化

    原地址:http://blog.sina.com.cn/s/blog_5b6cb9500101dmh0.html 转载请留下本文原始链接,谢谢.本文会不定期更新维护,最近更新于2013.11.09   ...

  3. 着色Test

    1 2 3 4 5 6 7 8 9 10 def test:     print "just a test"     print "just a test"   ...

  4. WeQuant比特币交易策略回测记录

    程序参数 PARAMS = { "start_time": "2017-02-01 00:00:00", "end_time": &quot ...

  5. Jmeter 登入、新增、查询、修改、删除,动态传参。

    1.设置HTTP Request Defaults    请求默认值,这样之后每次请求同一个域名端口的时候后都不用输入协议.域名.端口号. 2.输入[登入]的接口号. 3.设置HTTP header  ...

  6. jQuery分步步骤

    插件描述:jQuery上一步.下一步,分步步骤,兼容性如下: 使用方法 1.引入样式和脚本 <link rel="stylesheet" type="text/cs ...

  7. 设计模式之单例模式及应用demo

    单例模式是创建型模式之一. 单例模式顾名思义是单例的,也就是只有一个实例化对象,这都来源于它的私有化构造函数. 单例模式特点: 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯一实例. 3. ...

  8. java之IDEA中使用Maven

    Maven的安装与使用 安装 1.下载,官网下载. 2.解压,存放路径中不可包含空格和中文.如:"E:\dev\workspace\maven\apache-maven-3.6.0&quot ...

  9. phpmyadmin nginx设置

    1,解压缩phpmyadmin4.2.8压缩包到/usr/local/phpMyAdmin 2,复制config.sample.inc.php为config.inc.php 3,修改nginx.con ...

  10. MATLAB中版本和日期函数

    本博客中输出版本号和日期的子函数,今天才发现忘记上代码了,这里补上 function banner() %% --------------------------------------------- ...