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. Netbeans 6.8 + apktool_2.0.0b9 动态调试smali文件

    前言 很早就知道用Netbeans能够单步调试smali,一直拖到现在才真正的自己实现了一次~ 下面是详细步骤! 0×1 环境及工具 a.apktool_2.0.0b9 下载地址:http://con ...

  2. PHP学习笔记--1，不总结，不掌握，不明白！

    不总结,不掌握,不明白! 前言: 学php一开始就是语法,变量,数组,函数,OOP(面向对象[封装,继承,多态,抽象]) 这些都是最基础的东西,但你还要懂一些在实际开发中要用的东西,比如基本的HTML ...

  3. 【翻译】go语言中的map实战

    业余时间翻译,水平很差,如有瑕疵,纯属无能. 原文链接 http://blog.golang.org/go-maps-in-action go语言中的map实战 1. 简介 哈希表是计算机科学中最重要 ...

  4. JQuery的隐式迭代和each函数和map函数

    1.JQuery选择器选择出来的是一个数组对象,可是给这些每一个元素都要设置内容时,就会隐式迭代,JQuery自己实现内部循环给每个元素绑定上设置. 2.如果是获取的话,那就是默认获取第一个元素的值. ...

  5. flex中form表单中子元素之间的距离控制

    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.ado ...

  6. linux权限---【600，644，700，755，711，666，777】 - - 博客频道 - CSDN.NET

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  7. SQL复习一（基础知识）

    1.什么是sql SQL(structure query language)是结构化查询语言,它是对关系型数据库的操作语言.它可以应用到所有的数据库中,例如:MySQL.Oracle.SQL serv ...

  8. C++中string类的使用方法

    如果所比较的两个string 相等,则返回0: 操作string 大于参数string,返回 正数:操作string 小于参数string,返回负数. (1) 比较操作string 与 _Str 或C ...

  9. 实现基本TCP套接字客户端

    //实现基本TCP套接字客户端var net = require('net');function getConnection(connName){ var client = net.connect({ ...

  10. ajax修改密码

    <div>用户名:<input type="text" id="uid" /><span id="tt" st ...