How to do bootstrap navigation

Making a Bootstrap navigation includes the following five steps: 1. Create a navigation bar container; 2. Add a navigation bar brand; 3. Create a navigation link; 4. Add responsive buttons; 5. Create a folded navigation link.

How to make Bootstrap navigation

The navigation bar in Bootstrap is a common navigation component that can be used to organize and link website pages. Here is a step-by-step guide to using Bootstrap to create a navigation bar:

1. Create a navigation container

Create a navigation bar container using the <nav></nav> element:

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

• navbar class applies the navigation bar style of Bootstrap.
• navbar-expand-lg class expands the navigation bar when the screen is wider.
• navbar-light and bg-light classes set the light theme of the navigation bar.

2. Add navigation bar brand

Navigation bar brand or website name and logo can be added via the <a></a> element:

 <code class="html"><a class="navbar-brand" href="#">网站名称</a></code>

3. Create a navigation link

Create a list of navigation links using the <ul></ul> element:

 <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="#">关于我们</a> </li> <li class="nav-item"> <a class="nav-link" href="#">服务</a> </li> </ul></code>

• navbar-nav class links the list to the navigation bar.
• The mr-auto class aligns the list right.
• nav-item class applies navigation bar link style.
• nav-link class applies navigation bar link link style.

4. Add responsive buttons

Use the <button></button> element to add a button to switch the navigation bar on a smaller screen:

 <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>

• navbar-toggler class applies button style.
• data-toggle="collapse" property enables the button to toggle collapsed content.
• data-target="#navbarNav" attribute specifies the target element to be switched.

5. Create a folded navigation link

Use the <div> element to create a collapsed content for a navigation link:<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;关于我们&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;服务&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;/code&gt;</pre> <ul> <li> <code>collapse navbar-collapse class applies a folded content style.

id="navbarNav" property matches data-target property of the button.