SoFunction
Updated on 2025-04-02

2 ways to implement navigation bars by Bootstrap

Preface:Navigation is one of the important elements of a website, which can facilitate users to find the various functional services provided by the website. The navigation method is also very diverse and diverse. In the following content, two ways to create navigation bars are introduced.

1. Use button group to implement it.The code is as follows:

<div style="width:100%; background:#ff0">
 <div class="btn-group">
 <button class="btn btn-default" type="button">front page</button>
 <button class="btn btn-default" type="button">Product Display</button>
 <button class="btn btn-default" type="button">Case Study</button>
 <button class="btn btn-default" type="button">Contact Us</button>
 <div class="btn-group">
 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">about Us<span class="caret"></span></button>
 <ul class="dropdown-menu">
 &lt;li&gt;&lt;a href="#">Company Profile</a></li> &lt;li&gt;&lt;a href="#">Corporate Culture</a></li> &lt;li&gt;&lt;a href="#">Organizational Structure</a></li> &lt;li&gt;&lt;a href="#">Customer Service</a></li> &lt;/ul&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;

2. Bootstrap has specially made corresponding css classes for navigation.The code is as follows:

&lt;div style="width:100%; background:#ff0"&gt;
&lt;ul class="nav nav-pills nav-justified"&gt;
 &lt;li&gt;&lt;a href="##">Home</a></li> &lt;li&gt;&lt;a href="##">Contact Us</a></li> &lt;li&gt;&lt;a href="##">Product Display</a></li> &lt;li class="dropdown"&gt;
 &lt;a href="##" class="dropdown-toggle" data-toggle="dropdown">About us<span class="caret"></span></a> &lt;ul class="dropdown-menu"&gt;
 &lt;li&gt;&lt;a href="#">Company Profile</a></li> &lt;li&gt;&lt;a href="#">Corporate Culture</a></li> &lt;li&gt;&lt;a href="#">Organizational Structure</a></li> &lt;li&gt;&lt;a href="#">Customer Service</a></li> &lt;/ul&gt;
 &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

If you want to set the navigation bar to display vertically, the first method can add .btn-group-vertical after -group, and the second method can add .nav-stacked after -group.

If you want to learn more, you can clickhereLet’s study and attach 3 exciting topics to you:

Bootstrap learning tutorial

Bootstrap practical tutorial

Bootstrap plug-in usage tutorial

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.