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. eclipse的插件

    jode_1.0.6(Java Optimize and Decompile Environment ) 非常好用的Eeclipse的反编译插件,随时点击,随时查看源代码,但他的官方下载的都是核心源码 ...

  2. Zabbix的安装及简单配置

    Mysql源码安装:Mysql安装脚本 PHP源码安装:基于LNMP的Zabbbix之PHP源码安装 Nginx源码安装:Nginx安装 Zabbix监控端源码安装(包含Server和Agent):l ...

  3. Linux内核源码分析--内核启动之(3)Image内核启动(C语言部分)（Linux-3.0 ARMv7）

    http://blog.chinaunix.net/uid-20543672-id-3157283.html Linux内核源码分析--内核启动之(3)Image内核启动(C语言部分)(Linux-3 ...

  4. openstack controller ha测试环境搭建记录（七）——配置glance

    在所有集群安装glance软件:yum install -y openstack-glance python-glanceclient 在任一节点创建glance用户:mysql -u root -p ...

  5. Spring自学教程-IOC、DI、AOP(二)

    一.spring的IOC-就是怎样使用spring来创建对象 二.springDI(依赖注入)-就是怎样给属性赋值 通过set方式赋值 以下我们只需要记住两点的赋值,基本类型和引用类型的赋值 基本类型 ...

  6. 3、手把手教你Extjs5(三)MVVM特性的简单说明

    下面我们来看一下自动生成的代码中的MVVM架构的关系.Main是一个可视的控件,MainController是这个控件的控制类,MainModel是这个控件的模型类. 在上面的图片中,左边是Main. ...

  7. 使用STM8SF103 ADC采样电压（转）

    源:使用STM8SF103 ADC采样电压 硬件环境: STM8SF103 TSSOP20封装 因为项目需要用到AD采样电池电压,于是便开始了使用STM8S ADC进行采样,也就有了下文. 手册上对S ...

  8. iOS开发——单例模式

    一.用if语句实现单例 1.在.h文件中 #import <Foundation/Foundation.h> @interface YYTRequestTool : NSObject +( ...

  9. ucos任务控制块详解

    Ucos实现多任务的基础包括几个方面:任务控制块,任务堆栈,中断,任务优先级,一一说起 首先,任务控制块的结构如下 //系统在运行一个任务的时候,按照任务的优先级获取任务控制块,再在任务堆栈中获得任务 ...

  10. 利用STM32F唯一96bit序列号实现反拷贝加密的源代码公开（转）

    源:利用STM32F唯一96bit序列号实现反拷贝加密的源代码公开 //---------------------------------------------------------------- ...