SoFunction
Updated on 2025-04-03

Use and understanding of Bootstrap navigation bars 3

The following theoretical content is copied from Bootstrap Chinese website (a good bootstrap learning website)

Navigation bar

Default style navigation bar

Navigation bars are responsive basic components that act as navigation headers in your application or website. They are foldable (and can be turned on and off) on mobile devices and gradually become horizontally expanded mode as the viewport width increases.

The following code and comments are my understanding during the learning process

(Note to introduce necessary .css and .js viewing)

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap Navigation bar template</title>
 <link href="lib/bootstrap/css/" rel="stylesheet">
 <!--[if lt IE 9]>
 <script src="///html5shiv/3.7.2/"></script>
 <script src="////1.4.2/"></script>
 <![endif]-->
 </head>
 <body>

 <nav class="navbar navbar-default">
 <!-- <div class="container-fluid"> -->
 <!-- Will 100% Convert width layout to fixed width grid layout。 -->
 <div class="container">

 <!-- Brand trademark and Get better mobile group display-->
 <!-- .navbar-headerOne is placed in the elementbuttonButtonand一个aLink
  Let's talk about it simplyaLink，Used to place web pageslogo，It is usually required on the navigation bar
  buttonButton It's a switch，When displayed on mobile device,，The navigation bar is endless to display，The actual display form will collapse if the navigation content changes.，Collect as multi-line display，And hide，usebutton Button可控制其（show/hide）
  -->
 <!-- Brand and toggle get grouped for better mobile display -->

<!-- The following navigation header -->
 <div class="navbar-header">
  <!-- When the screen shrinks idforbs-example-navbar-collapse-1的elementhide，use下面这个button Called out #bs-example-navbar-collapse-1 element -->  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  <!-- <span class="sr-only">Toggle navigation</span> -->

  <!-- The following threespan 只是用来show Three Horizontal line style，You can clear the comments and see -->
  <!-- <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span> -->
  More
  </button>

  <!-- Will导航条内放置品牌标志的地方替换for <img> Elements can show your brand icons。because .navbar-brand Has been set to make up（padding）and高度（height），You need to add some according to your situation CSS Code to override the default settings。 -->
  <!-- Place for trademarks -->
  <a class="navbar-brand" href="#">Brand</a>
  <!-- aLink里当然也可以图片 or Font icon -->
 </div>


<!-- 以下for导航具体内容，Body part -->

 <!-- 收集导航Link、表单and其他内容 Convenient for mobile devices。收集hide -->
 <!-- Collect the nav links, forms, and other content for toggling -->
 <div class="collapse navbar-collapse" >
 <!-- There are five parts in the navigation bar Changes according to requirements-->
 <!-- Part One -->
  <ul class="nav navbar-nav">
  &lt;li class="active"&gt;&lt;a href="#">Link<span class="sr-only">(current)</span></a></li>  &lt;li&gt;&lt;a href="#">Link</a></li>  &lt;li class="dropdown"&gt;
  &lt;!-- Used to control 下拉列表show/hide --&gt;
  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Drop down <span class="caret"></span></a>  &lt;ul class="dropdown-menu"&gt;
  &lt;li&gt;&lt;a href="#">A Behavior</a></li>  &lt;li&gt;&lt;a href="#">Another behavior</a></li>  &lt;li&gt;&lt;a href="#">Other behaviors</a></li>  &lt;!-- .divider Divider Separate a line from above --&gt;
  &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#">Separated Links</a></li>  &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#">Another separated link</a></li>  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Part 2 A text --&gt;
  &lt;!-- Wrap the text in .navbar-textMiddle Time，for了有正确的行距and颜色，通常use &lt;p&gt; Label。 --&gt;
  &lt;p class="navbar-text"&gt;Text content&lt;/p&gt;

  &lt;!-- Part 3 It's a form--&gt;
  &lt;!-- Will表单放置于 .navbar-form Good vertical alignment can be shown within，and in narrower viewport（viewport）It is folded。 use对齐选项可以规定其在导航条上出现的位置。 --&gt;
  &lt;form class="navbar-form navbar-left" role="search"&gt;
  &lt;div class="form-group"&gt;
  &lt;input type="text" class="form-control" placeholder="Please enter content"&gt;
  &lt;/div&gt;
  &lt;button type="submit" class="btn btn-default"&gt;submit&lt;/button&gt;
  &lt;/form&gt;

  &lt;!-- 第四部分是一个独立Button --&gt;
  &lt;!-- For not included in &lt;form&gt; In-house &lt;button&gt; element，Plus .navbar-btn back，You can center it vertically in the navigation bar。有一些对于for辅助设备提供可识别Label的方法，For example， aria-label、aria-labelledby or者 title property。If none of these methods，屏幕阅读器Willuse placeholder property（如果这个property存在的话），But please note，use placeholder 代替其他识别Label的方式是不推荐的。 --&gt;
  &lt;button type="button" class="btn btn-default navbar-btn"&gt;独立Button&lt;/button&gt;

  &lt;!-- Part 5 --&gt;
  &lt;!-- or许你希望在标准的导航组件之外添加标准Link，So，use .navbar-link 类可以让Link有正确的默认颜色and反色设置。 --&gt;
  &lt;p class="navbar-text"&gt;Normal text&lt;a href="#" class="navbar-link"> Non-navigation link</a></p>  
  

 &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;

 &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
 &lt;/nav&gt;



 &lt;script src="lib/jquery/"&gt;&lt;/script&gt;
 &lt;script src="lib/bootstrap/js/"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;

Component arrangement

By adding.navbar-left and.navbar-rightTools allow navigation links, forms, buttons, or text to align. Both classes set floating styles for specific directions via CSS. For example, to align navigation links, you need to place them in a separate <ul> tag with the tool class applied.

These classes are mixin versions of .pull-left and .pull-right, but they are limited to media query, which makes it easier to handle navigation bar components on screens of various sizes.

Align multiple components to the right
Navigation bars currently do not support multiple .navbar-right classes. To give appropriate gaps between contents, we use negative margins for the last .navbar-right element. If multiple elements use this class, their margins will not appear normally as you expect.

We will revisit this feature when rewriting this component in v4 version.

Fixed on top

Adding the .navbar-fixed-top class allows the navigation bar to be fixed at the top, and can also contain a .container or .container-fluid container, so that the navigation bar is centered and padding is added on both sides.

Need to set padding for body elements
This fixed navigation bar will obscure other content on the page unless you set padding at the bottom of the <body> element. Use your own value or use the code given below. Tip: The default height of the navigation bar is 50px.

body { padding-top: 70px; }

 <nav class="navbar navbar-default navbar-fixed-top">
 <div class="container">
 ...
 </div>
 </nav>

Fixed at the bottom

Adding the .navbar-fixed-bottom class allows the navigation bar to be fixed at the bottom and can also include a .container or .container-fluid container, centering the navigation bar and adding padding on both sides.

Need to set padding for body elements
This fixed navigation bar will obscure other content on the page unless you set padding at the bottom of the <body> element. Use your own value or use the code given below. Tip: The default height of the navigation bar is 50px.

body { padding-bottom: 70px; }

<nav class="navbar navbar-default navbar-fixed-bottom">
 <div class="container">
 ...
 </div>
 </nav>

Stay at the top

By adding the .navbar-static-top class, you can create a navigation bar of equal width to the page, which disappears as the page scrolls down. You can also include a .container or .container-fluid container that is used to center the navigation bar and add padding on both sides.

By adding the .navbar-static-top class, you can create a navigation bar of equal width to the page, which disappears as the page scrolls down. You can also include a .container or .container-fluid container that is used to center the navigation bar and add padding on both sides. to center and pad navbar content.

 <nav class="navbar navbar-default navbar-static-top">
 <div class="container">
 ...
 </div>
</nav>

Inverse color navigation bar

The appearance of the navigation bar can be changed by adding the .navbar-inverse class.

<nav class="navbar navbar-inverse">
 ...
</nav>

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 Table usage 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.