Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Detailed explanation of the difference between .nav and .navbar in bootstrap

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

小云云
Release： 2017-12-18 11:58:09
Original
4073 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
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
From 2024-04-06 12:53:11
0
1
376
Bootstrap switch not working properly when web page is resized This is the code: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security&q...
From 2024-04-05 08:45:39
0
1
3443
Display AWS PDF files in Bootstrap mode in Laravel I have downloaded aws url like https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/65...
From 2024-04-04 22:16:18
0
1
1450
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