如何將關閉圖標添加到 bootstrap 5 移動菜單？
[英]How to add close icon to bootstrap 5 mobile menu?
問題描述
我是 web 開發的新手，我正在嘗試使用關閉圖標制作響應式/移動菜單，如何為 bootstrap 5 移動菜單顯示/添加關閉圖標？ 我探索並嘗試了很多，但不幸的是，無法實現這一目標。
任何幫助將不勝感激。 謝謝。
<,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>
- 我正在使用 Bootstrap 5 CDN
- bootstrap 5 的默認類
1 個解決方案
解決方案1
1 已采納 2021-02-22 10:00:36
試試看，注意使用 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>
如何更改基礎漢堡包圖標以在單擊時關閉圖標（即：移動菜單打開）
[英]How to change foundation hamburger icon to close icon on click (i.e: mobile menu open)
如何在移動視圖中更改 Bootstrap 導航欄父菜單項圖標的位置？
[英]How to change the position of Bootstrap Navigation Bar parent menu item icon at mobile view?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.