按钮组件主要的类名:

  .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. iOS从gif获取图片数组

    iOS中,当我们UIImageView实现动画时,如果图片是gif则不会自动播放gif图片,我们可以从gif图片中读取出每一帧的图片,然后组成图片数组,之后再实现使用UIImageView实现动画效果 ...

  2. Salesforce LWC学习(十一) port 1717报错的处理

    使用vs code开发lwc的步骤,通常为先创建项目(create project)然后授权一个org(authorize an org),授权以后我们通常便会download代码到本地或者Uploa ...

  3. Vmware下Ubuntu 14.04静态IP地址的设置方法

    一.环境 宿主机 Win 8.1 虚拟机工具 VMware 10.0 虚拟主机系统 Ubuntu 14.04   二.说明 这里需要注意的是:VMware对于VMnet8采用如下规则(192.168. ...

  4. UGUI源码之Selectable

    Selectable是Button.InputField.Toggle.ScrollBar.Slider.Dropdown的基类. Selectable的继承的类与接口如下: public class ...

  5. 1.常用的cmd命令

    dir      =>  查看当前目录下的所有文件夹 cd..    =>  返回上一级目录 cd/     =>  返回根目录 cd 文件夹  =>  打开当前目录下指定的子 ...

  6. hdfs断电报错解决

    一,/home/hadoop/tmp/dfs/name/current 目录下查看文件二,1.stop hadoop所有的服务;2.重新格式化namenode即可: hadoop根目录下: hadoo ...

  7. unittest模块使用方法

    unittest模块常用属性 1. unittest.TestCase类:所有的测试用例类继承的基类 定义一个测试用例类,需要继承TestCase,比如: class BaiduTest(unitte ...

  8. python实现数据结构-队列

    注:本文档主要是学习<Python核心编程(第二版)>时的练习题. 队列是一种"先进先出"的数据结构(FIFO),是一种操作受限的线性结构,先进队列的成员先出队列.示意 ...

  9. 个人第4次作业——alpha项目测试

    这个作业属于哪个课程 http://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业的要求在哪里 https://www.cn ...

  10. 【WPF学习】第二十章 内容控件

    内容控件(content control)是更特殊的控件类型,它们可包含并显示一块内容.从技术角度看,内容控件时可以包含单个嵌套元素的控件.与布局容器不同的是,内容控件只能包含一个子元素,而布局容器主 ...