首页 > 其他分享 >Bootstrap5 Navbar多级下拉框

Bootstrap5 Navbar多级下拉框

时间:2024-07-22 17:26:22浏览次数:9  
标签:Dropdown Navbar Action Another action Bootstrap5 下拉框

实现目标:

 

 

1、访问 Bootstrap5-navbar  

2、修改dropdown为多级

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
	  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
	 
</head>
<body>
	
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
       

	   <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
			
					  <li class="nav-item dropdown drop-down02">
						  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
							Dropdown
						  </a>
						  <ul class="dropdown-menu sub-menu02" aria-labelledby="navbarDropdown">
							<li><a class="dropdown-item" href="#">Action</a></li>
							<li><a class="dropdown-item" href="#">Another action</a></li>
							<li><hr class="dropdown-divider"></li>
							<li><a class="dropd

标签:Dropdown,Navbar,Action,Another,action,Bootstrap5,下拉框
From: https://blog.csdn.net/yushangyong/article/details/140613433

相关文章

  • devexpress dxNavBar 用法
    unitUnit2;interfaceusesWinapi.Windows,Winapi.Messages,System.SysUtils,System.Variants,System.Classes,Vcl.Graphics,Vcl.Controls,Vcl.Forms,cxGraphics,cxControls,cxLookAndFeels,cxLookAndFeelPainters,dxNavBarGroupItems,dxNavBarCollns,......
  • uniapp+vue3封装下拉框(支持单选、多选)
    子组件代码<template><viewclass="uni-select-dc"><viewref="select"class="uni-select-dc-select":class="{active:active}"@click.stop="handleSelect">......
  • selenium07_select下拉框
    有以下2种方法定位下拉框: 方法一:最基本的元素定位方法,定位下拉框,再定位下拉框中的元素 方法二:fromselenium.webdriver.support.selectimportSelectel=driver.find_element_by_id("nr")  #先定位到下拉框Select(el).select_by_index(0)  #通过下拉框中元素的......
  • vue elementUI el-tree 下拉树功能(包括搜索/默认高亮/展开下拉框默认定位于选中项的位
    <template><div><el-form:model="formData"ref="refFormData"label-width="180px"><el-form-itemlabel="景点"prop="location_id"><el-selectv-model="formData.location_name&qu......
  • Select 下拉框的操作
    关于下拉框的操作:返回所有项返回所有被选中的选项通过value属性选中or取消选中选项通过index索引选中or取消选中选项通过标签文本选中or取消选中选项取消选中所有选项fromseleniumimportwebdriverfromtimeimportsleepfromseleniu......
  • 给下拉框写cs代码
    protectedoverridevoidOnLoad(EventArgse){base.OnLoad(e);Control.Click+=Control_Click;container.DataChanged+=container_DataChanged;Control0.Click+=Control0_Click;stringsql1=@"selectmfgord......
  • 修改element-ui日期下拉框datetimePicker的背景色样式
    如图: 1、修改背景色.el-date-picker.has-sidebar.has-time{  background:#04308D;  color:#fff;  border:1pxsolid#326AFF}.el-date-picker__header-label{  color:#ffffff;}.el-date-tableth{  color:#fff;}.el-icon-d-arrow-......
  • select 下拉框不可选
    select下拉框不可选disabled和readonlyselect下拉框不可选择CSSpointer-events属性通常情况下,设置表单输入框不可操作的时候会选择使用disabled或者readonly,那么disabled和readonly有什么区别呢?disabled和readonly首先来说这两个属性都可以作用在表单元素上,使......
  • comboBox 下拉框的基础使用
    privatevoidFrmAddStudent_Load(objectsender,EventArgse){StudentClassServerstudentClassServer=newStudentClassServer();List<StudentClass>students=studentClassServer.GetStudentClasses();//获取下拉框的数据//向集合第一个位置插入......
  • 前端菜鸡流水账日记 -- select下拉框单选改多选
    哈喽哇大家,感觉好久不见咯,儿童节过的还开心嘛,hhh,昨天我可没有偷懒,我是上班了的,只不过没有遇到什么问题,所以呢就没有分享,这不是今天就遇到了就来了!那让我们步入正题吧我今天要说的是ant下的select下拉框,正常的使用的话,配置好ant然后引用就是这样的<a-sel......