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. JSTL select和checkbox的用法

    select的 用法 <select id="roleIds" name="roleIds" multiple="true" back ...

  2. FMDB 查询是否存在某个表，或某个数据

    //监测数据库中我要需要的表是否已经存在 NSString *existsSql = [NSString stringWithFormat:@"select count(name) as c ...

  3. ICE第二篇--一个"hello world"的简单例子

    1 本文介绍一个hello world输出的例子. ice应用的步骤如下: 1. 编写 Slice 定义并编译它. 2. 编写服务器并编译它. 3. 编写客户并编译它. 基本框架图示: 本文代码图示: ...

  4. Linux下Nginx、PHP、MySQL、Redis开机自启动设置

    一.Nginx开机启动设置 1.在/etc/init.d/目录下创建脚本 vi /etc/init.d/nginx 2.更改脚本权限 chmod 775 /etc/init.d/nginx 3.编写脚 ...

  5. precision、recall、accuracy的概念

    机器学习中涉及到几个关于错误的概念: precision:(精确度) precision = TP/(TP+FP) recall:(召回率) recall = TP/(TP+FN) accuracy: ...

  6. Android Material各种颜色设置

    Blogpost about support appcompat v21 from Chris Banes

  7. Mybatis 模糊查询 中文问题

    IDE编码:GBK ,换成UTF-8也不行! @Testpublic void testSearchStudents() {logger.info("查询学生(带条件)");Map ...

  8. s3c2440的GPIO驱动

    多个通用的GPIO,同时这些端口也拥有一些复用功能(如ADC输入),有部分端口只能输入,有部分端口只能输出,今天我们来看看如何设置一个GPIO的输出电平以及如何获取一个端口的GPIO电平 对GPIO进 ...

  9. iOS开发之圆角指定 分类： ios技术 2015-05-25 16:26 191人阅读 评论(0) 收藏

    如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某几个角(小于4)为圆角而别的不变时 ...

  10. ubuntu12.04+fuerte 下跑通lsd-slam——使用usb摄像头

    上一篇介绍了如何使用数据集跑lsd-slam,这篇介绍如何用一个普通的usb摄像头跑lsd-slam,默认ubuntu12.04,fuerte已经安装好,workspace也已设置,如果没有,请参考上 ...