Bootstrap 组件-下拉菜单

最新推荐文章于 2024-06-03 20:31:46 发布
最新推荐文章于 2024-06-03 20:31:46 发布
阅读量2.3k 收藏
点赞数
分类专栏： 前端-Bootstrap
  • 下拉菜单

    菜单div
    <div class="dropdown">
    下拉按钮，id用来给下拉菜单指向用的
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
    菜单列表，aria-labelledby="dropdownMenu1" 就是用来指向哪个菜单，因为有可能有多个菜单
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    菜单项
    <li><a href="#">HTML</a></li> 

    <!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="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
      http://192.168.1.189
      <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>   
 
<div style="height:100px"></div>
  • 标题不可点击

    标题不可点击
    <li role="presentation" class="dropdown-header">Dropdown header</li>
    <!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="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
      http://192.168.1.189
      <span class="caret"></span>         
    </button>
     
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">
             静态页面(不可点击)
          </li>
 
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
 
          <li class="dropdown-header">
              动态页面(不可点击)
          </li>
 
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
 
<div style="height:100px"></div>
  • 分割线

    菜单分割线
    <li role="presentation" class="divider"></li>
    <!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="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
      http://192.168.1.189
      <span class="caret"></span>         
    </button>
     
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">
             静态页面
          </li>
 
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
 
          <li role="presentation" class="divider"></li>
 
          <li class="dropdown-header">
              动态页面
          </li>
 
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
 
<div style="height:100px"></div>
  • 禁用项

    禁用的菜单项
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a></li>
    <!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="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
      http://192.168.1.189
      <span class="caret"></span>         
    </button>
     
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">
             静态页面
          </li>
 
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
 
          <li role="presentation" class="divider"></li>
 
          <li class="dropdown-header">
              动态页面
          </li>
 
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a></li>
 
    </ul>
</div>   
 
<div style="height:200px"></div>

litengbin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap系列之下拉菜单（Dropdowns）
老__L的博客
06-06 1万+
使用Bootstrap下拉插件切换上下文覆盖来显示链接列表和更多内容。下拉列表是可切换的，上下文覆盖显示链接列表和更多。它们与包含的Bootstrap下拉式JavaScript插件进行交互。它们是通过点击而不是悬停来切换的;这是一个有意的设计决策。下拉框建立在第三方库Popper上，它提供动态定位和视口检测。请确保在Bootstrap JavaScript之前包含或使用包含Popper的 / 。Popper不用于定位导航栏中的下拉框，因为动态定位不是必需的。如果您从源代码构建我们的JavaScript，它需
Bootstrap的下拉菜单组件相关知识
昊虹AI笔记
10-12 2690
Bootstrap的下拉菜单组件
BootStrap入门到实战：BootStrap组件（一）- Glyphicons字体图标、下拉菜单、按钮组、按钮式下拉菜单
最新发布
林林一928的博客
06-03 838
一、Glyphicons字体图标二、下拉菜单 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性用jQuery实现1.3 菜单向上弹出2. 对齐.默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐3.对齐4.分割线5.禁用的菜单项三.按钮组。四.按钮式下拉菜单，1. 单按钮下拉菜单，2. 分裂式按钮下拉菜单...
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）
wocwin的博客
02-28 1万+
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）
Bootstrap 下拉菜单（Dropdowns）
书香水墨
07-23 2万+
一、Bootstrap 下拉菜单（Dropdowns） 1.1 基本下拉框 dropdown指定下拉菜单，下拉菜单都包裹在 .dropdown 里,dropdown-menu指定下拉菜单 <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"...
JS组件Bootstrap实现下拉菜单效果代码
10-22
1. **Bootstrap 下拉菜单**：Bootstrap 提供了一个方便的下拉菜单插件，可以轻松地添加到导航、按钮等组件上。 2. **数据属性**：通过 `data-toggle="dropdown"` 和 `data-target` 属性来激活和定位下拉菜单。 3. **...
Bootstrap按钮下拉菜单组件详解
09-02
Bootstrap按钮下拉菜单组件是网页设计中常用的交互元素，它为用户提供了一种高效的方式来展示多个相关的操作选项。这个组件基于Bootstrap框架，一个流行的前端开发工具包，它简化了网页的布局和样式设计。在...
Bootstrap实现下拉菜单多级联动
08-28
Bootstrap 实现下拉菜单多级联动 Bootstrap 是一个非常流行的前端框架，它提供了许多实用的组件和工具，使得开发者可以快速构建漂亮的网页。今天，我们将讨论如何使用 Bootstrap 实现下拉菜单多级联动。 在 ...
Bootstrap布局组件教程之Bootstrap下拉菜单
09-02
在Bootstrap框架中，下拉菜单的实现依赖于JavaScript插件，特别是Dropdown组件，它使得用户能够通过点击一个按钮或者链接来显示或隐藏一个下拉列表。 在HTML结构中，创建一个Bootstrap下拉菜单需要以下基本步骤： ...
bootstrap实现二级下拉菜单效果
08-28
Bootstrap 实现二级下拉菜单效果 Bootstrap 是一个流行的前端框架，提供了许多实用的 UI 组件，包括按钮、导航、 Alerts 等。今天，我们将详细介绍如何使用 Bootstrap 实现二级下拉菜单效果。 首先，让我们了解...
Bootstrap编辑表格插件
10-16
包含bootstrap可编辑表格、下拉框、日期三个控件，功能齐全，使用简单，用法请参见http://blog.csdn.net/lzxadsl
bootstrap-select 下拉框demo（含多种样式）
12-09
bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demo
Bootstrap组件_下拉菜单
Leon_Jinhai_Sun的博客
03-08 436
下拉菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="stylesheet" href="bootstrap.min.css"> <script ...
Bootstrap 组件 - 按钮组与下拉按钮（Button Groups & Button Dropdowns）
热门推荐
Try my best
01-28 3万+
按钮组（Button Groups） 单个按钮组 用.btn-group封装多个带.btn的 1 2 3 多个按钮组 将多个放进中。 ... ... 垂直按钮组 向.btn-group添加.btn-group-vertical。 ... 下拉按钮（Button Dropdowns）
1-2. Bootstrap 下拉菜单总结（组件）
淡泊以明志，宁静以致远
02-11 829
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 网络游戏 <span class="caret"></span> </button&gt...
Bootstrap图标菜单按钮组件
Just The Way You Are
07-15 2096
小图标组件 Bootstrap提供了免费的263个小图标，具体可以参考中文官网的组件连接 使用i或者span标签来配合使用 <!--使用小图标--> <i class="glyphicon glyphicon-star"></i> <span class="glyphicon glyphicon-star"></span> <!--也可以结合按钮--> <button class="btn b
bootstrap图标菜单和按钮组件
杨哥的博客
05-22 1401
图标菜单和按钮组件 图标菜单和按钮组件 下拉菜单 首页 咨询 产品 关于 下拉菜单

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值