Bootstrap 组件-按钮式下拉菜单

最新推荐文章于 2023-08-14 19:30:11 发布
最新推荐文章于 2023-08-14 19:30:11 发布
阅读量510 收藏 3
点赞数
分类专栏： 前端-Bootstrap
  • 单按钮下拉菜单


    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle "  data-toggle="dropdown">
     default
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle "  data-toggle="dropdown">
     primary
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle "  data-toggle="dropdown">
     success
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle "  data-toggle="dropdown">
     info
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn-warning dropdown-toggle "  data-toggle="dropdown">
     warning
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle "  data-toggle="dropdown">
     danger
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div style="height:100px"></div>
  • 分裂式按钮下拉菜单


    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<div class="btn-group">
   <button type="button" class="btn btn-default">默认</button>
   <button type="button" class="btn btn-default dropdown-toggle"
      data-toggle="dropdown">
      <span class="caret"></span>
 
   </button>
   <ul class="dropdown-menu" role="menu">
     <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
   </ul>
</div>
 
<div style="height:100px"></div>
  • 按钮大小


    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<div class="btn-group">
    <button type="button" class="btn btn-lg btn-default dropdown-toggle " data-toggle="dropdown">
     大号
      <span class="caret"></span>         
    </button>
       
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
   
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn btn-default dropdown-toggle " data-toggle="dropdown">
     默认
      <span class="caret"></span>         
    </button>
       
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
   
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div> 
  
<div class="btn-group">
    <button type="button" class="btn btn-sm btn-default dropdown-toggle " data-toggle="dropdown">
     小号
      <span class="caret"></span>         
    </button>
       
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
   
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div> 
  
<div class="btn-group">
    <button type="button" class="btn btn-xs btn-default dropdown-toggle " data-toggle="dropdown">
     更小
      <span class="caret"></span>         
    </button>
       
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
   
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div> 
   
<div style="height:100px"></div>
  • 向上弹出式菜单


    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<div style="height:150px"></div>
 
<div class="btn-group dropup">
    <button type="button" class="btn btn-default dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown">
     default
      <span class="caret"></span>         
    </button>
       
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
   
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>

    aria-labelledby role="presentation" 这些是给视觉障碍人士用的，有些读屏软件会识别。
    有了 data-toggle="dropdown" 这句话，才有点击出来下拉的效果

litengbin
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap组件之按钮式下拉菜单小结
08-31
主要介绍了bootstrap组件之按钮式下拉菜单，包括单按钮下拉菜单，分裂式下拉菜单和向上弹出式菜单，本文给大家介绍的非常详细，需要的朋友参考下吧
学习记录：Bootstrap 按钮式下拉菜单
人生苦短，何妨一试
02-13 645
按钮式下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../bootstrap-3.4.1/bootstrap-3.4.1/dist/css/bootstrap.min.css"> </head> <body> .
1-5. 很实用的 Bootstrap 按钮式下拉菜单
淡泊以明志，宁静以致远
02-11 4414
按钮式下拉菜单 如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可 可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单 分割的按钮下拉菜单 <div class="btn-group"> <button type="button" class="btn ...
Bootstrap下拉菜单使用方法
我的web前端学习
01-16 5614
如何使用Bootstrap下拉菜单组件 Bootstrap下拉菜单组件使用起来非常容易，首先你需要定义一个class="dropdown"的div，然后在这个div标签中写入触发下拉框的按钮以及对应的下拉菜单，类似代码如下：<div class="dropdown"> 下拉按钮<a role="menuitem" tabindex="-1" href="#">下拉菜单1<a
WEB前端网页设计-Bootstrap 按钮下拉菜单
君逍遥o
03-16 1377
如需向按钮添加下拉菜单，只需要简单地在一个 .btn-group 容器中放置按钮和下拉菜单即可
Bootstrap 下拉菜单
fiona_0427的博客
05-21 396
1.使用：下拉菜单触发器和下拉菜单都包裹在.dropdown里（默认菜单向下弹出），如果想让菜单向上弹出可以使用.dropup进行包裹。 2.可以使用caret字体图标为下拉菜单加上三角形标志，可以 跟着dropdowm/up变三角形的方向 <div class="dropdown"> <button class="dropdown-toggle" data-toggle="dropdown" id="m1"> ...
Bootstrap——按钮式下拉菜单、输入框组
Shiliang1995
06-15 1500
<!-- 图标 --> <!-- aria-label属性表示该标签的意图 --> <!-- 如果图标纯粹当装饰作用时，可以给这些图标设置aria-hidden=“true”属性 -->
Bootstrap CSS组件之按钮下拉菜单
11-29
组合式下拉菜单 分离式下拉菜单 向上弹起的下拉菜单 //源码，css实现方式主要是设置.dropdown-menu样式容器的bottom为100% .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu
基于bootstrap按钮式下拉菜单组件的搜索建议插件
08-31
主要为大家详细介绍了基于bootstrap按钮式下拉菜单组件的搜索建议插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
零基础Bootstrap入门教程(19)--下拉菜单、按钮式下拉菜单
程序员大阳
02-28 3654
本文目录1. 概述2. 下拉菜单2.1 普通下拉菜单2.2 更换颜色2.3 更换尺寸2.4 添加分割线2.5 菜单分组2.6 上拉菜单3. 按钮式下拉菜单4. 小结 1. 概述 下拉菜单使用频率也是比较高的，比较常见的使用场景是在导航菜单栏，某个主菜单含有下拉的子菜单。 Bootstrap为下拉菜单提供了两种实现方式，即普通的下拉菜单还有按钮式的下拉菜单。我们先看一张图观察下，从图中可以看出，普通下拉菜单和按钮式下拉菜单的样式基本相同，唯一比较明显的区别是：普通下拉菜单相当于菜单，前后自动换行；而按钮式的下
Bootstrap 按钮下拉菜单
最新发布
shengyin714959的博客
08-14 145
本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在一个容器中放置按钮和下拉菜单即可。您也可以使用 来指示按钮作为下拉菜单。
Bootstrap框架--1.5下拉菜单
weixin_46479909的博客
07-07 286
target="_blank"：新开一个窗口打开链接。
html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单
weixin_42501270的博客
06-03 1466
前面的文章算是把Bootstrap CSS部分简单的学习了一遍，应该忽视了比较多的细节问题。不过大部分的内容我都过了一遍，并且用代码实现了一遍，而且看到了真实的效果。挺不错的。那么接下来的几篇文章主要来讲解Bootstrap的组件。那么本文主要来讲解以下内容再来熟悉一下这个开始建立一个页面的代码，首先新建一个测试网页加入如下代码复制代码代码如下:Bootstrap下拉菜单用于显示链接列表的可切换、...
【Bootstrap 4】按钮组
扬大酸奶的博客
01-04 513
Table of Contents   创建按钮组（.btn-group）  设置按钮组大小（.btn-group-lg/.btn-group-sm） 设置按钮组垂直（.btn-group-vertical） 内嵌按钮组及下拉菜单 拆分按钮下拉菜单 ​  Table of Contents 创建按钮组（.btn-group）  设置按钮组大小（.btn-group-lg/.bt...
Bootstrap下拉单选框，下拉搜索多选框Bootstrap-select
藏经阁
12-05 5361
下面给大家介绍一款集下拉搜索多选框，下拉单选框与一体的bootstrap组件Bootstrap-select，bootstrap-select.js是一款Bootstrap下拉框功能增强插件。它为bootstrap下拉框增加了分组功能，多选功能，搜索功能，自定义内容和图标等多种功能，非常强大。实现效果如下。 一、使用方法 在页面中引入jquery和bootstrap相关文件，以及boots...
设置bootstrap按钮组默认选中状态
09-30 4556
使用bootstrap(V3.3.7)按钮组（btn-group）时，很多时候我们需要按钮组在显示的时候，预先设置一个按钮处于选中状态。 <div class="text-right" style="margin-bottom:0.5em;"> 排序：<span class="btn-group btn-group-sm" role="group" id="orderB...
bootstrap --下拉组件 按钮组 按钮工具栏
我的专栏
05-17 1555
<!-- 为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。 --> --> <!--[if lt IE 9] --> <!-- ' 下拉菜单：内部用ul li btn实现 使用方法：首先要
Bootstrap组件之下拉菜单、按钮组、按钮式下拉菜单
LimonSea的博客
11-03 575
字体图标的使用 出于性能的考虑，所有图标都需要一个基类和一个对应图标的类，中间需要加空格 不能与其他组件混合使用，不能在同一元素上与其他类共同存在，必须承载在span标签中 下拉菜单： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉菜单&..
Bootstrap 组件：下拉菜单组件的使用
WangMin@汪末末
09-04 800
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 用于显示链接列表的可切换、有上下文的菜单。如果要实现下拉菜单的交互性， 要使用JavaScript 。 实例 将下拉菜单按钮触发器和下拉菜单都包裹在.dropdown里，或者另一个添加了position: relative;的元素。然后加入组成菜单的 HTML 代码。 为下拉菜单的父元素设置.dropdown类，菜单向下弹出: <div class="dropdown"> <b
Bootstrap组件
07-29
1. 按钮（Button）：提供了各种样式的按钮，包括基本按钮、链接按钮、下拉菜单按钮等。 2. 导航栏（Navbar）：用于创建网页的顶部导航栏，可以包含品牌logo、链接、下拉菜单等。 3. 卡片（Card）：以卡片的形式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值