连在一起的按钮:.btn-group

<div class="btn-group" role="group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">left</button>
<button class="btn btn-default">left</button>
</div>

按钮工具栏:把一组btn-group 放进.btn-toolbar

垂直连在一起的按钮:.btn-group-vertical

分裂按钮下拉菜单

 <div class="btn-group">
<button class="btn btn-default" >下拉菜单</button>
<button class="btn btn-default" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">选择一</a></li>
<li><a href="">选择二</a></li>
</ul>
</div>

Bootstrap 按钮组的更多相关文章

  1. Bootstrap<基础十三> 按钮组

    按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...

  2. Bootstrap <基础七>按钮

    任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <butto ...

  3. Bootstrap系列 -- 29. 按钮组

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常 ...

  4. Bootstrap3基础 btn-group-vertical 按钮组(横着、竖着排列)

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  5. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  6. Bootstrap <基础二十三>页面标题(Page Header)

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

  7. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  8. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  9. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  10. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

随机推荐

  1. border、margin、padding三者的区别

    当你写前端的时候,肯定会遇到border,margin和padding这几个单词. 如: padding: 16px 0; margin: 0 10px; 在CSS中,他们是表示距离的东西,很多人刚开 ...

  2. Maya脚本——重命名物体的名称

    该脚本用于将图1中的命名变更为图2中的,把maya中使用相同名称的物体都重命名为不同的名称. 重命名的规则是:组名_原名称_序号 查阅了maya的官方手册:http://download.autode ...

  3. JAVA方法的重载(overload)和覆盖(override)

    方法的重载(overload)和覆盖(override) 有的时候,类的同一种功能有多种实现方式,到底采用哪种实现方式,取决于调用者给定的参数.例如我们最常用的System.out.println() ...

  4. 《DWZ笔记一》<select>动态联动菜单

    联动菜单,即组合框Combo box,在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name ...

  5. 1029对c语言文法的理解

    <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...

  6. [转帖] 部分收费的Oracle JDK VS 完全免费的OpenJDK

    来源: http://www.flammulina.com/2018/10/28/%E9%83%A8%E5%88%86%E6%94%B6%E8%B4%B9%E7%9A%84oracle-jdk-vs- ...

  7. 第168天:json对象和字符串的相互转换

    json对象和字符串的相互转换 1.json对象和字符串的转换 在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和pa ...

  8. 百度editor编辑器添加新字体

    Ueditor本身自带11种字体,添加如下: 1.找到文件 ueditor/lang/zh-cn/zh-cn.js ,添加字体 'fontfamily': {        'songti': '宋体 ...

  9. CERC2013(C)_Magical GCD

    题意是这样的,给你一个序列a[i],需要你选一段连续的序列a[i]到a[j],使得长度乘以这个段的gcd最大. 一开始总是以为是各种神奇的数据结构,诶,后来才发现,机智才是王道啊. 可以这样考虑,每次 ...

  10. 【Java】关于@RequestBody

    首先@RequestBody需要接的参数是一个string化的json,这里直接使用JSON.stringify(json)这个方法来转化 其次@RequestBody,从名称上来看也就是说要读取的数 ...