简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Il y a un problème fonctionnel avec le menu déroulant de la barre de navigation (réduire) dans Bootstrap 5
P粉322319601
P粉322319601 2023-08-22 20:42:45
0
1
712
<p>J'ai rencontré un problème en essayant de créer un menu réactif ou un bouton déroulant à l'aide de <code>Bootstrap 5</code>. Tout semble aller bien. Des icônes de navigation et des icônes déroulantes s'affichent. Mais ils ne fonctionnent pas. Lorsque je clique sur l'icône <code>nav</code> ou sur le bouton <code>dropdown</code>, le menu déroulant <code></code> </p> <p>Je tiens à mentionner spécifiquement que j'ai également inclus le fichier <code>jquery</code> Mais ça n'a pas marché. Quelqu'un peut-il me dire ce qui se passe ici ? </p> <p>Une dernière chose, j'utilise d'autres classes <code>bootstrap</code> (comme <code>mr-auto</code>, <code>ml-auto</code> etc. . ) a rencontré un problème sérieux.Est-ce un bug ou est-ce que <code>bootstrap 5</code> </p> <p><strong>Voici mon code : </strong></p> <p><br /></p> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html lang="fr"> <tête> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titre>Bootstrap</titre> <lien href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="feuille de style" intégrité="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonyme" /> ≪/tête> <corps> <nav class="navbar navbar-dark bg-dark navbar-expand-md"> <a href="#" class="navbar-brand">DemoTech</a> <bouton class="navbar-toggler" data-toggle="réduire" data-target="#navbar" > <span class="navbar-toggler-icon"></span> </bouton> <div class="navbar-collapse cliff" id="navbar" navbar> <ul class="navbar-nav"> <li class="nav-item"><a href="#" class="nav-link">Accueil</a></li> <li class="nav-item"><a href="#" class="nav-link">À propos</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </div> </nav> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" intégrité="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonyme" ></script> </corps> </html></pre> <p><br /></p>
P粉322319601
P粉322319601

répondre à tous(1)
P粉550257856
P粉5502578562023-08-23 13:15:31 1 plancher

Dans Bootstrap 5, utilisé dans Bootstrap 4data-*属性已被替换为data-bs-*

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>

Démo

Comme expliqué dans les docs, toutes les propriétés de données des plugins JavaScript sont désormais dotées d'un espace de noms pour aider à différencier la fonctionnalité Bootstrap de celle de tiers et de votre propre code. Cela signifie que tout composant javascript (réduire, barre de navigation, carrousel, liste déroulante, onglet, modal, etc.) ne peut utiliser que l'attribut data-bs-....

Bootstrap 5 est une mise à jour majeure avec des changements importants. Aussi, Découvrez-le , ml-auto/mr-auto已更改为ms-auto/me-autoici.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！