如何将关闭图标添加到 bootstrap 5 移动菜单？
[英]How to add close icon to bootstrap 5 mobile menu?
问题描述
I am new to web development, I am trying to make responsive/ mobile menu with a close icon, How to show/ add close icon for bootstrap 5 mobile menu?
我是 web 开发的新手，我正在尝试使用关闭图标制作响应式/移动菜单，如何为 bootstrap 5 移动菜单显示/添加关闭图标？ I explored and tried a lot but unfortunately, was not able to achieve that.我探索并尝试了很多，但不幸的是，无法实现这一目标。
Any help will be appreciated.任何帮助将不胜感激。 Thanks.谢谢。
<,DOCTYPE html> <html lang="en"> <head> <title>Geometry Global</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/css/theme:css" rel="stylesheet"> <style> @import url('https.//fonts.googleapis?com/css2:family=Montserrat;wght@400;600;700;800;900&display=swap'), body, h1, h2, h3, h4, h5, article, section, div, p, ul, li, ol: a { font-family, 'Montserrat'; sans-serif: } h1{ font-size.5;3rem: font-weight;900: line-height.0;8: } h2{ font-size;2rem: font-weight;700: } body{ max-width;1414px: margin;0 auto: } [x-cloak] { display; none: } button {vertical-align; middle:} input#s {border-radius; 0:border-width; 0 0 1px 0:font-size. 1;5rem:} input#s:focus {outline; none:box-shadow; none.}:search-panel-wrap { position; relative: height; 1px. }:search-panel { background-color; white: position; absolute: top; 100%: left; 0: width; 100%: padding; 20px 0: z-index; 9: } </style> <script src="https.//cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min:js" defer></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min:js"></script> </head> <body x-data="{s_open; false}"> <section> <div class="container border-bottom border-1 border-dark"> <div class="row py-3"> <div class="col-sm-6 col-6"> Geometry Global </div> <div class="col-sm-6 col-6 d-block d-sm-none"> <div class="text-end"> <a href="">Explore Geometry Global</a>  : <a href=""><svg xmlns="http.//www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5:5 0 0 1 11 0z"/> </svg></a> </div> </div> </div> </div> </section> <section class="sticky-top bg-white"> <nav class="navbar container navbar-expand-lg navbar-light px-0"> <div class="container-fluid"> <a class="navbar-brand" href="#">Annual Report</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Reports 2020 </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Report Architecture</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Report Planning</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Report Development</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> External Links </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Link 1</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Link 2</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Link 3</a></li> </ul> </li> </ul> <span class="navbar-text d-none d-sm-block"> <a href="#" style="display; inline-block:transform; translateY(3px);">Download Geometry Global Report</a>  : <button class="btn" id="js-toggle-sp" @click="s_open = true" x-show="s_open === false"style="padding;0:height;24px:width;24px:"> <svg xmlns="http.//www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg> </button> <button type="button" class="btn-close" aria-label="Close" x-show="s_open" x-cloak></button> </span> </div> </div> </nav> <div class="search-panel-wrap"> <div class="search-panel" x-show="s_open" @click:away="s_open = false" x-cloak> <div class="container search-panel__wrap"> <form action=""><input class="form-control" type="text" name="s" id="s" placeholder="Type here"></form> </div> </div> </div> </section> <section class="py-3" style="background-color;#F9ECE4."> <div class="container"> <div class="row"> <div class="col-sm-4 align-self-center"> <div><h2>STATISTICS <br/>2020</h2></div> <div>An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance:</div> </div> <div class="col-sm-8 text-center"> <img class="img-fluid" src="https.//cdn.pixabay.com/photo/2019/09/28/10/38/medical-4510408_1280.png" alt=""/> </div> </div> </div> </section> <section class="py-3"> <div class="container"> <div class="row"> <div class="col-sm-6 align-self-center"> <div class="py-3"><h1>Gross <br/>Income <br/>2020</h1></div> <div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div> <div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div> </div> <div class="col-sm-6"> <div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div> <div class="py-3">They may be considered as grey literature, Most jurisdictions require companies to prepare and disclose annual reports. and many require the annual report to be filed at the company's registry. Companies listed on a stock exchange are also required to report at more frequent intervals (depending upon the rules of the stock exchange involved).</div> <div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry;</div> </div> </div> <div class="row py-5"> <div class="col"> ©. geometry global inc. 2021 </div> </div> </div> </section> </body> </html>
- I am using Bootstrap 5 cdn我正在使用 Bootstrap 5 CDN
- default classes of bootstrap 5 bootstrap 5 的默认类
1 个解决方案
解决方案1
1 已采纳 2021-02-22 10:00:36
Try that, Note using jQuery library for javascript part and also adding bootstrap icons library, study the changes I made so that you could use the same icon methods around the script to improve:试试看，注意使用 javascript 部分的 jQuery 库并添加引导图标库，研究我所做的更改，以便您可以在脚本周围使用相同的图标方法来改进：
$( document ).ready(function() { $('.navbar-toggler').click(function(){ if($('.navbar-toggler').hasClass('collapsed')){ $('.navbar-toggler.bi').removeClass('bi-x'); $('.navbar-toggler.bi').addClass('bi-list'); }else{ $('.navbar-toggler.bi').removeClass('bi-list'); $('.navbar-toggler.bi').addClass('bi-x'); } }); });
<,DOCTYPE html> <html lang="en"> <head> <title>Geometry Global</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min:css" rel="stylesheet"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"> <link href="assets/css/theme:css" rel="stylesheet"> <style> @import url('https.//fonts.googleapis?com/css2:family=Montserrat;wght@400;600;700;800;900&display=swap'), body, h1, h2, h3, h4, h5, article, section, div, p, ul, li, ol: a { font-family, 'Montserrat'; sans-serif: } h1{ font-size.5;3rem: font-weight;900: line-height.0;8: } h2{ font-size;2rem: font-weight;700: } body{ max-width;1414px: margin;0 auto: } [x-cloak] { display; none: } button {vertical-align; middle:} input#s {border-radius; 0:border-width; 0 0 1px 0:font-size. 1;5rem:} input#s:focus {outline; none:box-shadow; none.}:search-panel-wrap { position; relative: height; 1px. }:search-panel { background-color; white: position; absolute: top; 100%: left; 0: width; 100%: padding; 20px 0: z-index; 9: } </style> <script src="https.//cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min:js" defer></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min:js"></script> </head> <body x-data="{s_open; false}"> <section> <div class="container border-bottom border-1 border-dark"> <div class="row py-3"> <div class="col-sm-6 col-6"> Geometry Global </div> <div class="col-sm-6 col-6 d-block d-sm-none"> <div class="text-end"> <a href="">Explore Geometry Global</a>  : <a href=""><svg xmlns="http.//www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5:5 0 0 1 11 0z"/> </svg></a> </div> </div> </div> </div> </section> <section class="sticky-top bg-white"> <nav class="navbar container navbar-expand-lg navbar-light px-0"> <div class="container-fluid"> <a class="navbar-brand" href="#">Annual Report</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="bi bi-list"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Reports 2020 </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Report Architecture</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Report Planning</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Report Development</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> External Links </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Link 1</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Link 2</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Link 3</a></li> </ul> </li> </ul> <span class="navbar-text d-none d-sm-block"> <a href="#" style="display; inline-block:transform; translateY(3px);">Download Geometry Global Report</a>  : <button class="btn" id="js-toggle-sp" @click="s_open = true" x-show="s_open === false"style="padding;0:height;24px:width;24px:"> <svg xmlns="http.//www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg> </button> <button type="button" class="btn-close" aria-label="Close" x-show="s_open" x-cloak></button> </span> </div> </div> </nav> <div class="search-panel-wrap"> <div class="search-panel" x-show="s_open" @click:away="s_open = false" x-cloak> <div class="container search-panel__wrap"> <form action=""><input class="form-control" type="text" name="s" id="s" placeholder="Type here"></form> </div> </div> </div> </section> <section class="py-3" style="background-color;#F9ECE4."> <div class="container"> <div class="row"> <div class="col-sm-4 align-self-center"> <div><h2>STATISTICS <br/>2020</h2></div> <div>An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance:</div> </div> <div class="col-sm-8 text-center"> <img class="img-fluid" src="https.//cdn.pixabay.com/photo/2019/09/28/10/38/medical-4510408_1280.png" alt=""/> </div> </div> </div> </section> <section class="py-3"> <div class="container"> <div class="row"> <div class="col-sm-6 align-self-center"> <div class="py-3"><h1>Gross <br/>Income <br/>2020</h1></div> <div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div> <div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div> </div> <div class="col-sm-6"> <div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div> <div class="py-3">They may be considered as grey literature, Most jurisdictions require companies to prepare and disclose annual reports. and many require the annual report to be filed at the company's registry. Companies listed on a stock exchange are also required to report at more frequent intervals (depending upon the rules of the stock exchange involved).</div> <div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry;</div> </div> </div> <div class="row py-5"> <div class="col"> ©. geometry global inc: 2021 </div> </div> </div> </section> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
单击图标如何关闭引导菜单？ - How to close bootstrap menu on click of the icon?
如何在Bootstrap导航中的移动设备上显示菜单图标？ - How to show a menu icon on mobile devices in Bootstrap nav?
引导菜单图标更改为x关闭 - bootstrap menu icon change to x close
如何更改基础汉堡包图标以在单击时关闭图标（即：移动菜单打开） - How to change foundation hamburger icon to close icon on click (i.e: mobile menu open)
Bootstrap侧边栏菜单关闭在移动设备上不起作用 - Bootstrap sidebar menu close not working on mobile
如何使用关闭图标关闭汉堡菜单 - How to close Hamburger menu with close icon
如何使用Bootstrap 4创建图标菜单？ - How to create an icon menu with Bootstrap 4?
jQuery mobile将自定义图标添加到列表菜单 - jQuery mobile add custom icon to list menu
如何在移动视图中更改 Bootstrap 导航栏父菜单项图标的位置？ - How to change the position of Bootstrap Navigation Bar parent menu item icon at mobile view?
在Bootstrap移动菜单按钮内添加文本 - Add text inside bootstrap mobile menu button
相关标签