'btn':加按钮样式

btn-small btn-large:调整按钮大小

btn-primary....:调整按钮风格

btn-group:声明这是一个按钮组

<span class='caret'></span>:上图的三角形图标元素

按钮、按钮大小、按钮风格<br><div class=''><a class='btn' href='javascript:;'>常规按钮</a><a class='btn btn-small' href='javascript:;'>小按钮</a><a class='btn btn-large' href='javascript:;'>主要按钮</a><a class='btn btn-primary' href='javascript:;'>primary</a><a class='btn btn-danger' href='javascript:;'>danger</a><a class='btn btn-warning' href='javascript:;'>warning</a><a class='btn btn-success' href='javascript:;'>success</a><a class='btn btn-info' href='javascript:;'>info</a><a class='btn btn-inverse' href='javascript:;'>inverse</a></div><br>按钮组<br><div class='btn-group'><a class='btn ' href='javascript:;'>按钮1</a><a class='btn ' href='javascript:;'>按钮2</a><a class='btn ' href='javascript:;'>按钮3</a></div>

下拉菜单

<div class='btn-group'>

  <a class='btn'>按钮4</a>

  <a class='btn dropdown-toggle' data-toggle='dropdown' href='javascript:;'>

    <span class='caret'></span>

  </a>

  <ul class='dropdown-menu'>

    <li><a href='javascript:;'>item1</a></li>

    <li><a href='javascript:;'>item2</a></li>

    <li><a href='javascript:;'>item3</a></li>

  </ul>

</div>

转载于:https://www.cnblogs.com/carolina/p/5623071.html

bootstrap:按钮,下拉菜单相关推荐

  1. Bootstrap 按钮下拉菜单

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

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

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

  3. Bootstrap按钮下拉菜单的尺寸

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

  4. bootstrap按钮下拉菜单

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

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

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

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

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

  7. Bootstrap创建按钮下拉菜单

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

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

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

  9. Boostrap的按钮下拉菜单

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

  10. html按钮的下拉菜单,按钮下拉菜单

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

最新文章

  1. 【区间DP】释放囚犯
  2. 理解SQL SERVER中非聚集索引的覆盖,连接,交叉和过滤
  3. 关于bin和obj文件夹。debug 和release的区别(转)
  4. 如何在Hibernate Search 5.5.2 / Apache Lucene 5.4.x中处理停用词?
  5. 计算机英语讲课笔记04
  6. java catch自定义异常_Laravel - 自定义处理程序中的Catch异常
  7. cannot open shared object file: No such file or directory
  8. Linux私房菜阅读笔记
  9. python之爬虫学习记录与心得
  10. pcb设计单点接地示意图_EMC设计之接地、PCB布局布线、屏蔽设计
  11. paip.activex控件在WEB中使用流程与工具
  12. 并行计算、分布式计算、网格计算讲解
  13. Java处理图片报错:two SOF markers
  14. 凝思系统激活序列号_凝思磐石安全操作系统
  15. anaconda python更换清华源
  16. 神经网络预测鸢尾花的种类
  17. 决策树常见的面试点整理
  18. 5G技术发展的发展现状,未来发展有哪些关键点和趋势
  19. 怎么让电脑上的图片全屏显示呢
  20. python超声成像仿真_平面波超声成像(Filed II仿真代码)

热门文章

  1. 2022-2028年中国橡胶密封制品行业市场研究及前瞻分析报告
  2. 百度paddle学习笔记
  3. 【PyTorch学习笔记】4:在Tensor上的索引和切片
  4. 深入理解 Embedding层的本质
  5. window10+python3.7安装tensorflow--gpu tensorflow 安装
  6. Java堆和栈的基本理解
  7. LeetCode中等题之区域和检索 - 数组可修改
  8. 目标检测推理部署:优化和部署
  9. 人脸真伪验证与识别:ICCV2019论文解析
  10. 客快物流大数据项目(四十六):Spark操作Kudu dataFrame操作kudu