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. input输入框和 pure框架中的 box-sizing 值问题

    在使用pureCSS框架的时候,遇到一个问题. input输入框,我给他们设置了宽度和padding值,我发现,在火狐和谷歌上面发现,增加padding值并不会影响最终的宽度,而在IE6 7下则会影响 ...

  2. Android学习笔记之LinearLayout

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. codeforce 611C New Year and Domino

    n*n预处理. 询问的时候用容斥,再删除边界. #include<cstdio> #include<cstring> #include<cmath> #includ ...

  4. iReport使用教程

    http://www.blogjava.net/keweibo/articles/239492.html 原创出处 http://blog.163.com/liushuo216@126/blog/st ...

  5. android怎么打开wifi的组播功能

    http://android.tgbus.com/Android/tutorial/201204/418987.shtml

  6. Lua学习系列（五）

    calling C functions from Lua 5.2 这篇文章也不错: http://blog.csdn.net/x356982611/article/details/26688287 h ...

  7. Cocos2dx 3.1.1 学习笔记整理(3)：逐帧动画

    以下代码是在cocos中使用,plist+png 还有SpriteBatchNode播放动画的代码,备份一下,以防git被墙: bool GameMain::init() { if( !Layer:: ...

  8. (简单) POJ 1860 Currency Exchange，SPFA判圈。

    Description Several currency exchange points are working in our city. Let us suppose that each point ...

  9. php学习记录

    放了寒假.期末考试折腾了一个月都不会写代码了. 一放寒假就找了套PHP培训的课程 在这做些笔记,系统的学习一下php 2017.1.14 介绍集成环境---wamp Apache服务器根目录 / -- ...

  10. 文本去重-----awk或者uniq

    对于awk '!a[$3]++',需要了解3个知识点 1.awk数组知识,不说了 2.awk的基本命令格式 awk 'pattern{action}'     省略action时,默认action是{ ...