Faire une navigation bootstrap comprend les cinq étapes suivantes: 1. Créer un conteneur de barre de navigation; 2. Ajouter une marque de barre de navigation; 3. Créez un lien de navigation; 4. Ajouter des boutons réactifs; 5. Créez un lien de navigation plié.

Comment faire de la navigation bootstrap

La barre de navigation en bootstrap est un composant de navigation commun qui peut être utilisé pour organiser et lier les pages du site Web. Voici un guide étape par étape pour utiliser Bootstrap pour créer une barre de navigation:

1. Créer un conteneur de navigation

Créez un conteneur de barre de navigation à l'aide de l'élément <nav></nav> :

 <code class="html"><nav class="navbar navbar-expand-lg navbar-light bg-light"></nav></code>

• navbar applique le style de barre de navigation de Bootstrap.
• navbar-expand-lg étend la barre de navigation lorsque l'écran est plus large.
• navbar-light et bg-light définissent le thème léger de la barre de navigation.

2. Ajouter la marque de barre de navigation

La marque de navigation ou le nom et le logo du site Web peuvent être ajoutés via l'élément <a></a> :

 <code class="html"><a class="navbar-brand" href="#">網(wǎng)站名稱</a></code>

3. Créez un lien de navigation

Créez une liste de liens de navigation à l'aide de l'élément <ul></ul> :

 <code class="html"><ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">主頁</a> </li> <li class="nav-item"> <a class="nav-link" href="#">關(guān)于我們</a> </li> <li class="nav-item"> <a class="nav-link" href="#">服務(wù)</a> </li> </ul></code>

• navbar-nav relie la liste à la barre de navigation.
• La classe mr-auto aligne la droite de la liste.
• nav-item Class applique un style de liaison de barre de navigation.
• La classe nav-link applique le style de liaison de la barre de navigation.

4. Ajouter des boutons réactifs

Utilisez l'élément <button></button> pour ajouter un bouton pour changer la barre de navigation sur un petit écran:

 <code class="html"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button></code>

• La classe navbar-toggler applique le style de bouton.
• data-toggle="collapse" permet au bouton de basculer le contenu effondré.
• data-target="#navbarNav" spécifie l'élément cible à commuter.

5. Créer un lien de navigation plié

Utilisez l'élément <div> pour créer un contenu effondré pour un lien de navigation:<pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt; &lt;ul class=&quot;navbar-nav&quot;&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;主頁&lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;關(guān)于我們&lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;服務(wù)&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;/code&gt;</pre> <ul> <li> <code>collapse navbar-collapse Class applique un style de contenu plié.