简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the difference between .nav and .navbar in bootstrap

小云云
Release： 2017-12-18 11:58:09
Original
3965 people have browsed it

The navigation bar is a great feature and a prominent feature of Bootstrap websites. The navigation bar serves as the responsive foundational component of the navigation header in your app or website. The navigation bar collapses in mobile viewports and expands horizontally as the available viewport width increases. At the core of the Bootstrap navigation bar, the navigation bar includes the site name and basic navigation definition styles. This article mainly introduces the detailed explanation of the difference between .nav and .navbar in the bootstrap navigation bar. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can help everyone.

1. Simple navigation composed of ul and li: 

<ul class="nav nav-pills justify-content-center bg-dark nav-dark">
    <li class="nav-item">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">1</a>
    </li>
    <li class="nav-item">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">2</a>
    </li>
    <li class="nav-item">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">3</a>
    </li>
  </ul>

 

//解析：.nav .nav-item .nav-link表示ul li是导航——.nav-pills表示胶囊状导航——.bg-dark/.nav-dark表示黑底白字——.justify-content-center表示导航栏在浏览器上居中显示
Copy after login

is displayed on the browser as:

Reduce the browser window Displayed as:

2. Navigation bar - class="navbar navbar-expand-sm" in

Related labels：
bootstrap
source：php.cn
Previous article：The latest AngularJs verification mobile phone number example sharing Next article：Vue interceptor vue-resource Interceptor usage detailed explanation
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Steps to install jQuery in Nuxt.js Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...
From 2023-11-06 16:41:50
0
1
225
Laravel 9 still can't find App.css and App.js, even after running npm run dev Being fairly new to Laravel, I made sure I did check out the documentation for Laravel9 be...
From 2023-10-26 23:41:22
0
1
489
Customize Bootstrap 4's grid system breakpoints I have an application where the design requires 1280 breakpoints from desktop to tablet or...
From 2023-10-18 23:01:50
0
2
197
How to make header images, text and buttons responsive I'm making a website using Bootstrap5. In the header of the website I am using carousel fr...
From 2023-09-17 09:51:15
0
1
283
Why doesn't my Bootstrap navigation bar render correctly? I'm trying to make a navigation bar using Bootstrap4 but my code doesn't seem to work. My ...
From 2023-09-16 16:14:06
0
1
522
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！