按钮组件主要的类名:

  .btn-toolbar     把几个  .btn-group 组合在一起,更复杂的组件

  .btn-group

  .btn-group-vertical   垂直堆叠显示    默认的是水平堆叠

  按钮组件大小:   .btn-group-lg大号      .btn-group-sm中号       .btn-group-xs 小号

综合用法: 可以根据需要自行组合

  <div class="btn-toolbar">

    <div class="btn-group">

  `    <button class="btn  btn-default ">按钮1</button>

      <button class="btn  btn-default">按钮2</button>

    </div>

    <div class="btn-group">

      <button class="btn  btn-default ">按钮1</button>

      <button class="btn  btn-default ">按钮1</button>

      <div class="btn-group">  <!--这一部分和 定义下拉菜单的代码一样 .dropdown-->

        <button class="btn btn-default  dropdown-toggle"    data-toggle="dropdown">下拉按钮 <span class="caret"></span></button>

        <ul class="dropdown-menu" role="menu">

          <li  class="dropdown-header">标题</li>

          <li><a>html</a></li>    

          <li class="divider"><li>

          <li><a>css</a></li>      

        </ul>

      </div>

    </div>

  </div>

bootstrap 按钮组件的更多相关文章

  1. 详解Bootstrap按钮组件

    按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css    3131行~3291行 按钮 ...

  2. 详解Bootstrap按钮组件(二)

    按钮下拉菜单 按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的.它们唯一的不同是外部容器div.dropdown换成了div.btn-group <div class="btn-g ...

  3. 第二百三十七节,Bootstrap图标菜单按钮组件

    Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组 ...

  4. 详解Bootstrap缩略图组件及警示框组件

    缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息.bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合b ...

  5. 详解Bootstrap导航组件

    在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS:  navs.less SASS:  _navs.scss 标签形导航,也称选项卡导航 标签形 ...

  6. BootStrap布局组件

    BootStrap字体图标(Glyphicons) BootStrap下拉菜单:下拉菜单是可以切换的,是以列表格式显示链接的上下文菜单. 类 描述 .dropdown 指定下拉菜单 .dropdown ...

  7. BootStrap常用组件及响应式开发

    BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...

  8. 第二百四十七节,Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

  9. 【转载】BootStrap表格组件bootstrap table详解

    (转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

随机推荐

  1. C语言---总结

    基础 程序结构是三种: 顺序结构.选择结构(分支结构).循环结构. 读程序都要从 main()入口, 然后从最上面顺序往下读(碰到循环做循环,碰到选择做选择),有且只有一个main函数. 计算机的数据 ...

  2. 学以致用,react学习前奏准备阶段

    ReactJS:支持React开发,提供JSX代码提示,高亮显示,ReactJS官方介绍 1.cdm→  componentDidMount: fn() { ... }   cdm 2.cdup→  ...

  3. mqtt实现跨平台跨应用通讯

    介绍 最近物联网应用一直很火,也打算做一些这方面的尝试,就边学边做在家花了2天时间做了一个简单demo,功能很简单,使用emq x 作为mqtt broker,用python写了一个定时抓取主机CPU ...

  4. 案例分析丨H&M用设计冲刺将App研发周期缩短为6个月

    案例背景 H&M是一家来自瑞典的时装公司,1947年成立.截至2018年6月,H&M 分店遍布全球 68 个国家和地区,分店数目为 4338 间. 作为快速服装生产商,H&M的 ...

  5. [思维导图] C标准库

  6. 四、JVM之栈与栈帧

    栈: 1.又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一端进行插入和删除运算.这一端被称为栈顶,相对地,把 另一端称为栈底.其特性是先进后出. 2.栈是线程私有的,生命周期跟线程相同,当创 ...

  7. LeetCode 第98题--验证二叉搜索树

    1. 题目 2.题目分析与思路 3.代码 1. 题目 给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数.节点的右子树只包含大于当 ...

  8. Django框架的初使用

    1Django框架的初使用 说起Django框架,肯定需要首先明确一个概念,即软件框架.下面就是第一个问题: 1 软件框架(software framework) 1.1 概念界定 软件框架:通常指的 ...

  9. CSS动效集锦,视觉魔法的碰撞与融合(三)

    本文讲述的原理和相关demo 扇形DIV的使用——实现雷达扫描图 DIV环形布局—实现loading圈 动画的向量合成—实现抛物线动画 无限滚动动画—实现跑马灯效果 perspective和trans ...

  10. C++中虚析构的作用

    为了当用一个基类的指针删除一个派生类的对象时,派生类的析构函数会被调用. 基本概念: 析构函数是用来回收对象的: 虚析构函数是析构函数的一种: 基类是一类对象共有属性的抽象.比如,猫和狗都是动物,都会 ...