按钮下拉菜单的尺寸

定义按钮下拉菜单时,无论是按钮下拉菜单,还是拼接式按钮下拉菜单,都可以使用按钮的尺寸类 .btn-lg、或.btn-sm.btn-xs,来设置按钮的尺寸。如:

  1. <!-- Large button group -->
  2. <div class="btn-group">
  3.   <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
  4.     Large button <span class="caret"></span>
  5.   </button>
  6.   <ul class="dropdown-menu">
  7.     ...
  8.   </ul>
  9. </div>
  10. <!-- Small button group -->
  11. <div class="btn-group">
  12.   <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
  13.     Small button <span class="caret"></span>
  14.   </button>
  15.   <ul class="dropdown-menu">
  16.     ...
  17.   </ul>
  18. </div>
  19. <!-- Extra small button group -->
  20. <div class="btn-group">
  21.   <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
  22.     Extra small button <span class="caret"></span>
  23.   </button>
  24.   <ul class="dropdown-menu">
  25.     ...
  26.   </ul>
  27. </div>

效果如图 3‑24所示:

图3-24 按钮的尺寸

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

Bootstrap按钮下拉菜单的尺寸相关推荐

  1. Bootstrap 按钮下拉菜单

    按钮下拉菜单,就为按钮添加一个下拉菜单,当用户点击按钮时,再显示或隐藏下拉菜单.只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data ...

  2. WEB前端网页设计-Bootstrap 按钮下拉菜单

    目录 Bootstrap 按钮下拉菜单 分割的按钮下拉菜单 按钮下拉菜单的大小 按钮上拉菜单 Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单. ...

  3. bootstrap按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.向按钮添加下拉菜单,只需要简单地在一个 .btn-group 中放置按钮和下拉菜单即可.您也可以使用 <span class=" ...

  4. Bootstrap-CL:按钮下拉菜单

    ylbtech-Bootstrap-CL:按钮下拉菜单 1.返回顶部 1. Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉 ...

  5. Bootstrap创建拼接式按钮下拉菜单

    拼接式按钮下拉菜单 拼接式按钮下拉菜单由两个按钮拼接而成,一个是动作按钮,一个是下拉菜单开关按钮,它们之间被一个分隔线隔开.动作按钮用于完成按钮的原始功能,下拉菜单开关按钮用于显示下拉菜单. 只需在按 ...

  6. Bootstrap创建按钮下拉菜单

    按钮下拉菜单 下拉菜单组件是一个独立的组件,可以将页面上的任何元素(如,按钮.导航等)和下拉菜单进行组合,让相应的元素具有下拉功能. 如果把按钮和下拉菜单进行组合,并让按钮充当下拉菜单的开关,就可以实 ...

  7. Bootstrap系列 -- 34. 按钮下拉菜单

    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...

  8. html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单

    前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问题.不过大部分的内容我都过了一遍,并且用代码实现了一遍,而且看到了真实的效果.挺不错的.那么接下来的几篇文章主要 ...

  9. Boostrap的按钮下拉菜单

    按钮下拉菜单 引入Boostrap的CSS和JS <div class="btn-group"><button type="button" s ...

最新文章

  1. 深度学习遇上稀缺数据就无计可施?这里有几个好办法
  2. C# WPF Application 下的文件操作
  3. HALCON 1D Measure 算子初识
  4. 如何dos中查看当前MySQL版本信息?
  5. httos双向认证配置_APP爬虫双向认证抓包的两种方法
  6. linux刻录文件,Linux命令行下刻录CD-ROM数据光盘详细过程
  7. (bower、grunt、gulp、jspm、karmam、webpack) 前端工程自动化开发工具
  8. SpringBoot动漫弹幕网站 cartoon.liuyanzhao.com
  9. 智能门锁主流品牌有哪些?选购门锁时要注重产品的哪些特性?
  10. (休息几天)读曼昆之微观经济学——供给需求和政府政策
  11. html上传文件出现fakepath,chrome upload file 出现 fakepath,请解决方案
  12. Python 快速设置 Excel 表格边框
  13. 10秒!看清导数与微分的关系
  14. 做一个功能模块的实现流程
  15. 麻省理工学院公开课:算法导论
  16. Micron:DDR2 SDRAM与SODIMM
  17. 六家共享单车加入免押计划 押金模式即将崩盘?
  18. oracle 甩手 java ee_Eclipse正式代替Oracle接管Java EE
  19. 三分钟教会你用U盘装系统,再也不用花钱重装了
  20. Flask Warning: (1366, Incorrect string value: '\\xD6\\xD0\\xB9\\xFA\\xB1\\xEA...'

热门文章

  1. 烂泥:ubuntu中使用virt-manager图形化新建虚拟机
  2. web单页应用(一)
  3. Markdown简介
  4. DefaultIfEmpty
  5. java工程转maven工程_Java工程转换为Maven工程
  6. setTimeout、setInterval解刨
  7. Android-Window(一)——初识Window
  8. Android开发周报:Google 推出AR SDK、Android 8.0 Oreo 最终版发布
  9. protopype 和 __proto__的区别
  10. 生产库中遇到mysql的子查询