Bootstrap入门（九）组件3：按钮组
 
先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加）

<link href="css/bootstrap.min.css" rel="stylesheet">
 
1.按钮组
先在容器中创建一个class为 btn-group的div

　　　　 <div class='container'>

            <div class='btn-group'>

                ...

            </div>

        </div>

在其中添加第一个按钮组

　　　　 <div class='container'>

            <div class='btn-group'>

                <button type="button" class="btn btn-default">left</button>

                <button type="button" class="btn btn-default">mid</button>

                <button type="button" class="btn btn-default">right</button>

            </div>

        </div>

效果为：

默认的按钮组是水平放置的，如果我们想垂直放置，可以把class='btn-group'改为class='btn-group-vertical'，新添加
　　　　　　　<div class='btn-group-vertical'>

                <button type="button" class="btn btn-default">left</button>

                <button type="button" class="btn btn-default">mid</button>

                <button type="button" class="btn btn-default">right</button>

            </div>

效果为：

2.按钮工具栏

创建一个 class='btn-toolbar'的div

　　　　<div class='btn-toolbar'>

           ...

        </div>

在里面可以新建多个按钮组，可以使用到组件1的字体图标，比如

　　　　 <div class='btn-toolbar'>

            <div class='btn-group'>

                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>

                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>

                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>

            </div>

            <div class='btn-group'>

                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>

                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>

                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>

            </div>

            <div class='btn-group'>

                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>

                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>

                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>

            </div>

        </div>

为了方便使用了同一个图标，可以按实际情况修改，成为一个工具栏，效果为

3.按钮组的大小
bootstrap是响应式布局，在尺寸方面也有要求，其实跟之前的区别不大
　　　　 <div class="container">

            <div class='btn-group btn-group-lg'>

                <button type="button" class="btn btn-default">left</button>

                <button type="button" class="btn btn-default">mid</button>

                <button type="button" class="btn btn-default">right</button>

            </div>

            <div class='btn-group btn-group'>

                <button type="button" class="btn btn-default">left</button>

                <button type="button" class="btn btn-default">mid</button>

                <button type="button" class="btn btn-default">right</button>

            </div>

            <div class='btn-group btn-group-sm'>

                <button type="button" class="btn btn-default">left</button>

                <button type="button" class="btn btn-default">mid</button>

                <button type="button" class="btn btn-default">right</button>

            </div>

            <div class='btn-group btn-group-xs'>

                <button type="button" class="btn btn-default">left</button>

                <button type="button" class="btn btn-default">mid</button>

                <button type="button" class="btn btn-default">right</button>

            </div>

        </div>

效果非常明显，为

4.两端对齐排列的按钮组
　　　　 <div class="btn-group btn-group-justified">

            <div class='btn-group'>

                <button type="button" class="btn btn-default">left</button>

            </div>

             <div class='btn-group'>

                <button type="button" class="btn btn-default">mid</button>

            </div>

             <div class='btn-group'>

                <button type="button" class="btn btn-default">right</button>

            </div>

        </div>
他会继承父类全部的宽度
效果为：

Bootstrap入门（九）组件3：按钮组的更多相关文章

  1. Bootstrap入门（六）按钮和图片

    Bootstrap入门(六)按钮和图片   先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="styleshe ...

  2. Bootstrap历练实例：基本按钮组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单

    下拉菜单 dropdown 对齐方式: .dropdown-menu-right     .dropdown-menu-left <div class="container" ...

  4. bootstrap学习笔记<十>（按钮组，导航）

    1)按钮组.样式:class="btn-group" <div class="btn-group"> <button class=" ...

  5. Bootstrap入门九：辅助类

    1.情境文本颜色 通过颜色来展示意图,Bootstrap 提供了一组工具类.这些类可以应用于链接,并且在鼠标经过时颜色可以还可以加深,就像默认的链接一样. <p class="text ...

  6. Bootstrap入门（十）组件4：按钮组与下拉菜单结合

    Bootstrap入门(十)组件4:按钮组与下拉菜单结合   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) < ...

  7. Bootstrap入门（十九）组件13：页头与缩略图

    Bootstrap入门(十九)组件13:页头与缩略 1.页头 2.默认的缩略图 3.自定义缩略图 页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔.它支持 h1 标签内内嵌 ...

  8. Bootstrap入门（十一）组件5：输入框组

    Bootstrap入门(十一)组件5:输入框组   1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...

  9. BootStrap入门教程 (三) ：可重用组件（按钮，导航，标签，徽章，排版，缩略图，提醒，进度条，杂项）

    上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前 ...

随机推荐

  1. mysql 索引对于select速度提升作用实验

    说明:News2在News的基础上把is_active加上索引. mysql> select count(*) from News2 where is_active=1; +---------- ...

  2. web容器启动顺序

    web容器启动顺序: 第一:context-param 第二:Listerer 第三:Filter 第四:servlet

  3. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

  4. git使用系列（一）

    git commit 的时候出现了问题: change not staged for commit. no changes added to commit(use "git add" ...

  5. kafka第六篇---多个进程读不齐

    问题: 4台kafka组成的集群,多余5个进程读的话,造成偏移不齐. 解决办法: 用小于4个进程执行,如果执行够快,就可以追得上

  6. css padding和margin的百分比

    前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...

  7. Laravel邮件发送问题小解

    在Laravel中已经有内置了发送邮件的功能,通过 Mail::send 可发送邮件,但要使用这个函数必须先进行相关配置. 在 /app/config/mail.php 中设置你的邮件参数,如下: 1 ...

  8. HDU 3903 Trigonometric Function

    这题真难,并不会推理... #include<cstdio> #include<cstring> #include<cmath> #include<algor ...

  9. Java Dwr3实现消息推送步骤详解

    DWR包含两个主要的部分:允许JavaScript从WEB服务器上一个遵循了AJAX原则的Servlet中获取数据.另外一方面一个JavaScript库可以帮助网站开发人员轻松地利用获取的数据来动态改 ...

  10. MPU6050首例整合性6轴的姿态模块（转）

    源:MPU6050首例整合性6轴的姿态模块 Mpu6050为全球首例整合3轴陀螺仪.3轴加速器.含9轴融合演:MPU-6000为全球首例整合性6轴运动处理组件,相较于多组件方案,免除了组合陀螺仪与加速 ...