按钮组件主要的类名:

  .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. yarn详细入门教程(转载)

    简介Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具.就像我们可以从官方文档了解那样,它的目的是解决这些团队使用 n ...

  2. JVM之GC(二)

    昨天总结了GC之前要做的事情,今天介绍一下主流的GC算法. 先介绍一下几个名词: Stop The World(STW):JVM进行GC的时候总不能一边清理垃圾一边制造垃圾把,那么垃圾鉴定的准确性根本 ...

  3. Linux学习_菜鸟教程_4

    Linux远程登录 已经了解了登录流程,学会了用SecureCRT进行操作 Linux文件基本属性 Linux为保护系统安全,对不同的用户,开放不同的文件访问权限. 在linux中,我们可以使用ll或 ...

  4. A*寻路算法的个人理解

    A*寻路算法是一个求两点之间的最短路径的方法 算法详情如下: 准备工作: 两个容器:   open容器和close容器 价值估算公式:    F = G + H G:从起点移动到指定方格的移动代价: ...

  5. JS 通过url地址栏获取html页面名称

    有的时候需要获取页面名称,为此我在这里封装了一个方. 一.分别根据传递不同的参数,获取到html页面的名称. 通过传递参数,获取到html页面的名称:参数params 以下是参数解释说明 (1)par ...

  6. Java HashSet集合的子类LinkedHashSet集合

    说明 HashSet保证元素的唯一性,可是元素存放进去是没有顺序的. 在HashSet下面有一个子类java.util.LinkedHashSet,它是 链表 + 哈希表(数组+链表 或者 数组+红黑 ...

  7. 字典树(增删改查 HDU 5687)

    度熊手上有一本神奇的字典,你可以在它里面做如下三个操作: 1.insert : 往神奇字典中插入一个单词 2.delete: 在神奇字典中删除所有前缀等于给定字符串的单词 3.search: 查询是否 ...

  8. 信息: TLD skipped. URI: http://www.fusioncharts.com/jsp/core is already defined

    二月 02, 2018 11:43:28 上午 org.apache.catalina.startup.TaglibUriRule body 信息: TLD skipped. URI: http:// ...

  9. python 继承机制

    继承机制经常用于创建和现有类功能类似的新类,又或是新类只需要在现有类基础上添加一些成员(属性和方法),但又不想将现有类代码复制给新类.也就是说,通过继承这种机制,可以实现类的重复使用. class S ...

  10. ELK实战-elasticsearch安装

    操作系统: centos版本 7.4 防火墙 关闭 selinux 关闭 elasticsearch版本 6.3.2 java版本 1.8 server1 192.168.10.126 server2 ...