按钮组件主要的类名:

  .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. MongoDB 上手开发实践(入门上手开发这一篇就够了)

    前言 MongoDB是一个介于 关系数据库 和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.它支持的数据结构非常松散,是类似 json 的 bson 格式,因此可以存储比较复 ...

  2. Vim区块选择

    区块选择的按键意义: 区块选择的按键意义 v 字符选择,光标经过的地方反白 V 列选择,光标经过的列反白 [ctrl]+v 区块选择,可以用长方形的方式选择资料 d 将发白的地方删除掉 y 将反白的地 ...

  3. java小项目之:植物大战僵尸,这个僵尸有点冷!内附素材源码

    Java小项目之:植物大战僵尸! <植物大战僵尸>是由PopCap Games开发的一款益智策略类单机游戏,于2009年5月5日发售,这款游戏可谓是无人不知无人不晓. 在我身边,上到40岁 ...

  4. rabbitmq系列(一)初识rabbitmq

    为什么要使用消息中间件 案例:假如我们开发了一个商品抢购网站.这个网站的目的就是在某一时间点进行抢购商品,同时要求用户注册,在注册的时候会同时给用户电话和邮箱中发送验证码,以便完成信息注册.传统做法应 ...

  5. 【转】Twitter算法面试题详解(Java实现)

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://androidguy.blog.51cto.com/974126/1319659 ...

  6. Java类成员之代码块

    代码块含义:使用{ }括起来的代码 代码块类型: 1.局部代码块:定义在方法体中. 2.构造代码块:也叫初始化代码块,定义在类中方法体之外. 3.静态代码块:定义在类中方法体之外,被static修饰符 ...

  7. 深度学习论文翻译解析(七):Support Vector Method for Novelty Detection

    论文标题:Support Vector Method for Novelty Detection 论文作者:Bernhard Scholkopf, Robert Williamson, Alex Sm ...

  8. 使用Java实现简单的Http服务器

    在Java中可以使用HttpServer类来实现Http服务器,该类位于com.sun.net包下(rt.jar).实现代码如下: 主程序类 package bg.httpserver; import ...

  9. python——pickle模块的详解

    pickle模块详解 该pickle模块实现了用于序列化和反序列化Python对象结构的二进制协议. “Pickling”是将Python对象层次结构转换为字节流的过程, “unpickling”是反 ...

  10. Java架构师中的内存溢出和内存泄露是什么?实际操作案例!

    JAVA中的内存溢出和内存泄露分别是什么,有什么联系和区别,让我们来看一看. 01 内存泄漏 & 内存溢出 1.内存泄漏(memory leak ) 申请了内存用完了不释放,比如一共有 102 ...