按钮(按钮组)

  使用方法:按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。使用一个名为btn-group的容器。

<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-backward"></span>
</button>

<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
</div>

  也可以使用别的标签,唯一要保证的是:不管使用什么标签,.btn-group容器里的标签元素需要带有类名.btn

按钮(按钮工具栏)

  在富文本编辑器中,将按钮组分组排列在一起,比如复制,粘贴等。bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组btn-group按组放在一个大的容器btn-toolbar中

<div class="btn-toolbar">
<div class="btn-group">

</div>
<div class="btn-group">

</div>
<div class="btn-group">

</div>
<div class="btn-group">

</div>
</div>

   按按钮组大小设置:

    .btn-group-lg:大按钮组

    .btn-group-sm:小按钮组

    .btn-group-xs:超小按钮组

按钮(嵌套分组)

  

<div class="btn-group">
<button class="btnbtn-default" type="button">首页</button>
<button class="btnbtn-default" type="button">产品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">联系我们</button>
<div class="btn-group">
<button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">公司简介</a></li>
<li><a href="##">企业文化</a></li>
<li><a href="##">组织结构</a></li>
<li><a href="##">客服服务</a></li>
</ul>
</div>
</div>

按钮(垂直分组):

  在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可

<div class="btn-group-vertical">
<button class="btnbtn-default" type="button">首页</button>
<button class="btnbtn-default" type="button">产品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">联系我们</button>
<div class="btn-group">
<button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">公司简介</a></li>
<li><a href="##">企业文化</a></li>
<li><a href="##">组织结构</a></li>
<li><a href="##">客服服务</a></li>
</ul>
</div>
</div>

  展示效果为:

按钮(等分按钮)

  等分按钮也被称为自适应分组按钮,其实现在按钮组"btn-group"上追加一个"btn-group-justified"

  注意:在制作等分按钮组时,请尽量使用<a>标签元素来制作按钮,因为使用<button>标签元素时,使用display:table在部分浏览器中支持并不友好。

按钮(下拉菜单)

  按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果,简单点就是点击一个按钮,会显示影藏的下拉餐单。

  按钮下拉菜单其实就是普通的下拉菜单,只不过把<a>标签元素换成了‘button’标签元素。唯一不同的外部容器,“div.dropdown”换成了“div.btn-group”:

  

<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
</ul>
</div>

  

按钮的向下向上三角形:

  按钮的向下三角形,我们通过<button>标签中添加一个<span>标签元素,并且命名为"caret"。有时候我们的下拉菜单会向上弹起,这个时候,我们的小三角形需要朝上显示,实现方法:需要在.btn-group类上追加dropup类名。

bootstrap-12的更多相关文章

  1. Bootstrap 12 栅格系统

    栅格系统简介 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列.它包含了易于使用的预定义类,还有强大的mix ...

  2. bootstrap 布局(收藏/摘抄)

    bootstrap 12栅格 布局

  3. Hybrid框架UI重构之路:四、分而治之

    上文回顾:Hybird框架UI重构之路:三.工欲善其事,必先利其器 上一篇文章有说到less.grunt这两个工具,是为了css.js分模块使用的.UI框架提供给使用者的时候,是一个大的xxx.js. ...

  4. php常用面试知识点

    1.php基础 2.mysql基础 3.js基础 4.jq 5.正则 6.面向对象 7.分页类,购物车类,数据库类,上传类,图片处理类 8.smarty模板技术(以及自己写模板引擎) 9.ajax 1 ...

  5. Web前端开发推荐阅读书籍、学习课程下载

    转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...

  6. 渣渣菜鸡的 ElasticSearch 源码解析 —— 启动流程(上)

    关注我 转载请务必注明原创地址为:http://www.54tianzhisheng.cn/2018/08/11/es-code02/ 前提 上篇文章写了 ElasticSearch 源码解析 -- ...

  7. 第十二章 类加载器&反射

    12.1.类加载器 12.1.1.类加载 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过类的加载.类的连接.类的初始化这三个步骤来对类进行初始化.如果不出现意外情况,JVM将会连续完成 ...

  8. Django 接口自动化测试平台

    本项目工程 github 地址:https://github.com/juno3550/InterfaceAutoTestPlatform 0. 引言 1. 登录功能 2. 项目 3. 模块 4. 测 ...

  9. python 各模块

    01 关于本书 02 代码约定 03 关于例子 04 如何联系我们 1 核心模块 11 介绍 111 内建函数和异常 112 操作系统接口模块 113 类型支持模块 114 正则表达式 115 语言支 ...

  10. Python Standard Library

    Python Standard Library "We'd like to pretend that 'Fredrik' is a role, but even hundreds of vo ...

随机推荐

  1. linux 双网卡实现

    linux实现双网卡,在虚拟机中创建一个新网卡,NAT方式连接,其中eth0设置为连接外网,目前eth0为自动分配状态,所以将代码注释掉了,eth1设置为连接内网.

  2. Query Designer中的特征限制(Characteristic Restrictions)、缺省值(Default Values)、自由特性(Free Characteristics)

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. 深入浅出设计模式——原型模式(Prototype Pattern)

    模式动机在面向对象系统中,使用原型模式来复制一个对象自身,从而克隆出多个与原型对象一模一样的对象.在软件系统中,有些对象的创建过程较为复杂,而且有时候需要频繁创建,原型模式通过给出一个原型对象来指明所 ...

  4. Scrum Meeting 1-20151201

    任务安排 姓名 今日任务 明日任务 困难 董元财 学习下拉刷新的实现 完成下拉刷新的实现 手机的点击动作长按和下拉有类似的地方,比较难解决 胡亚坤 学习圆形头像代码设计 完成圆形头像代码设计 无 刘猛 ...

  5. IE6/7常用的hack

    hack基础: IE6: _selector{property:value;} selector{property:value;property:value !important;} //IE6 不支 ...

  6. ThinkPHP配置信息

    在index.php文件中设置常量: define('BIND_MODULE', 'Home'); 进行绑定默认访问的模块. 同样的,也可以在配置文件config.php中的配置数组中设置配置常量: ...

  7. 插件框架(Plugin Framework)

    HOW TO MAKE PLUGIN FRAMEWORK 插件系统构建 Dissect Eclipse Plugin Framework

  8. JQuery text()、html() 以及 val()

    获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元 ...

  9. zoj 1789 The Suspects

    好高兴,又AC一道 ,不过是很类似的两道..还是好高兴呀思想跟2833是一样的,不过要重新设计输入和输出.老师上课又重新讲解了一下,因为嫌疑人已知是0,所以加入集中时应该默认让数值小的做树根,即最终让 ...

  10. 51nod 1445 变色DNA(dij)

    题目链接:51nod 1445 变色DNA 看了相关讨论再去用最短路:val[i][j]之间如果是'Y',说明i可以到达j,并且i到达j的代价是i那行 1到j-1 里面'Y'的数量. 最后,求 0到n ...