按钮组件主要的类名:

  .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. 用 Serverless 快速搭建个人相册网站

    日常生活中我们经常会拍摄一些视频.照片等,这些文件会占用比较多的存储空间.本文将介绍一种方法:利用 ThumbsUp 工具,结合 Serverless Framework 的 component 快速 ...

  2. python3 三行代码基于HTTP2完美实现APNS推送【详解】

    第一次做苹果APNS(Apple Push Notification service)推送,关于APNS推送原理以及证书的获取方式网上已经有许多资料,在此不做过多赘述,需要注意的是证书分为测试证书和正 ...

  3. vue学习--组件之间的传值方式

    1.概述 vue由多个组件构成页面,在不同的组件中有不同的联系,组件之间的传值是十分有必要的 2.父子组件之间传值 --props和$emit 父传子:通过props 方法:子组件:props:['m ...

  4. cogs 397. [USACO Oct09] 热浪 Dijkstra

    397. [USACO Oct09] 热浪 ★☆   输入文件:heatwvx.in   输出文件:heatwvx.out   简单对比时间限制:1 s   内存限制:128 MB 德克薩斯純樸的民眾 ...

  5. dfs - 卡一个无符号长整形

    Given a positive integer n, write a program to find out a nonzero multiple m of n whose decimal repr ...

  6. 执行sql中的 函数,function

    CREATE FUNCTION [dbo].[GetWeight] ( ,)--重量/体积重 ) ,) as begin --顺丰重量/体积重以0.5kg为单位向上取值(小数点后两位4舍5入) ,) ...

  7. 对网站和项目使用IIS Express的64位版

  8. window10配置python虚拟环境的路径

    当我们搭建python+django项目的时候,需要配置虚拟环境,从而使项目与项目之间的包相互隔离,互不影响. 1.配置虚拟环境前,首先需要安装两个包 pip install virtualenvwr ...

  9. 临近年关,修复ASPNETCore因浏览器内核版本引发的单点登陆故障

    临近年关,咨询师提出360,搜狗急速浏览器无法单点登陆到公司核心产品WD, 报重定向过多. 现象 经过测试, 出现单点登陆故障的是搜狗,360等主打双核(默认Chrome内核)的浏览器, 较新式的Ed ...

  10. Django 数据库连接缓存的坑

    https://www.cnblogs.com/xcsg/p/11446990.html