How to add navigation toolbar in

Bootstrap? The following article will introduce to you the usage of the Bootstrap5 navigation toolbar (Navbar) component. I hope it will be helpful to you!

1 Working Principle

Bootstrap navigation toolbar (Navbar) is more powerful than the navigation learned in the previous section, and it is responsive and structured. Includes branding, navigation, forms, etc., as well as support for folding plugins. [Related recommendations: "bootstrap Tutorial"]

Before you start using the navigation bar, you need to know the following:

• The navigation bar needs to be packaged with .navbar , and use .navbar-expand{-sm|-md|-lg|-xl} to give responsive folding and use color scheme class.
• The default content width of the navigation bar is floating. Changing the containers limits the horizontal width in different ways.
• Use spacing and flexible box common classes to control the spacing and alignment of objects in the navigation bar.
• The navigation bar is responsive by default, but this option can be easily modified.
• Use nav elements to ensure affinity, or use more general elements such as divs.
• Indicate the current location by setting aria-current="page" on the current page, or setting aria-current="true" on the current item in the group.

2 The structure of the navigation bar

2.1 Supported sub-elements

The navigation bar has built-in support for some sub-elements. Choose from the following options based on your requirements:

• navbar-brand for your company, product or project name.

• navbar-nav provides highly complete and lightweight navigation (including support for drop-down lists).

• navbar-toggler is used for our folding plugin and other navigation toggling behavior.

• Common classes for spacing and flexible boxes are used for form control and behavior.

• navbar-text is used for vertically centered text strings.

• .collapse.navbar-collapse Groups and hides navigation bar content through parent layer breakpoints.

• Add optional .navbar-scroll to set the maximum height and scroll the expanded navbar content.

The following is an example of a child element included in a responsive navigation bar that automatically collapses at md breakpoints.

The navigation displayed before and after the breakpoint is as shown in the figure

Click on the three horizontal lines on the right to display the following image , click here to restore

After the above example, if you want to implement it by handwriting code, it will take a lot of effort. Now just copy and paste. Below we introduce in detail the functions and usage of each component.

2.2 Brand (navbar-brand)

You can place text, images, images and text combinations in it. In the above example, we put the logo image.

Text

The image has been used in the above example, now let’s mix the image and text

2.3 Navigation

The navigation connection is established on the .nav we learned before, and toggler classes need to be used to establish appropriate response styles. Navigation elements in a navbar take up as much horizontal space as possible to keep your navbar content safely aligned.

• Enabled status - use .active - to represent the current page. Can be used directly on .nav-link or directly on .nav-item.
• Please note that you should add the aria-current attribute on the .nav-link itself.

Concise method without using a list.

The two have the same effect

You can also use drop-down menus in the navigation elements of the navigation bar. Dropdown menus require a wrapper element for positioning, make sure to use separate and nested elements for .nav-item and .nav-link as shown below.

2.4 Form

You can place various forms and components in the navigation bar, such as the search form in 13.2.1, the search form in navbar Direct child elements use flex layout, and the default is justify-content: space-between, which means aligning both ends. Use other single star box classes as needed to adjust this behavior.

input群组也可以这样使用。如果导航条整个都是表单，或者大部分是表单，则可以使用form元素作为容器并保存HTML。

表单导航条也支持各种按钮。这也大大的提醒了我们可以使用垂直对齐工具来对齐不同大小的元素。

2.5 文本

透过.navbar-text导航条可以包含一些文本。该class调整了文本字串的垂直对齐和水平间距。貌似这个用的不多，直接拿官方例子。

根据需要与其他元件和通用类别混合使用。

3 配色方案

由于主题class和background-color通用类别class的结合，主题化导航条从未如此简单。从navbar-light选用浅色背景颜色，或者navbar-dark用于深色背景颜色。然后，使用.bg-*通用类别自定义。

更多颜色在通用类>背景颜色中查看，在前面章节表格颜色中也有相关介绍。

4 容器

虽然不是必需的，但您可以把导航条包装在.container中，将其置中于页面。您可以使用任意响应式容器以更改导航条中内容的显示宽度。这部分内容比较简单，我就不在演示了。

5 定位

使用我们的定位通用类别将导航条放置在非静态位置。选择固定到顶部、固定到底部、或粘贴到顶部（会随着页面滚动，直到物件达到顶部，并停留在原处）。固定的导航条使用position:fixed，这意味着它们会脱离正常的DOM的文件流，并且可能需要自定义CSS（例如body上的padding-top），以防止与其他元素重叠。 还要注意.sticky-top使用position:sticky，并没有被所有浏览器支持。

向下拉动滚动条后变化

通过上面的例子我们可以看出

• 固定到顶部和固定到底部虽然在container内，但是效果上不会受影响，其宽度超出了container限制。
• 使用了固定到顶部后，默认导航条会自动排在其后。
• 粘贴到顶部会自动跟在已有可视元素后面
• 当拖动滚定条后，固定到顶部和固定到底部位置不变，但默认和粘贴到顶部会被拖上去。

6 滚动

添加.navbar-nav-scroll到 .navbar-nav （或其他navbar子组件），以在折叠的navbar的可切换内容内启用垂直滚动。默认情况下，滚动以75vh（或75%的视口高度）启动，但您可以使用本地CSS自定义属性（--bs-navbar-height或自定义风格）覆盖该属性。在较大的视口中，当导航栏展开时，内容将显示为默认导航栏中的内容。

请注意，当设置overflow-y:auto（需要在此处滚动内容）时，这种行为可能会带来溢出的缺点，overflow-x相当于auto，它将裁剪一些水平内容。

以上是手册对此内容的解释，啰嗦了很多，其实很简单，直接看效果图就好了，说白了就是强制在移动状态下点击三道横线出现一个滚动条，俺老刘觉得这纯属多事。

7 响应性行为

导航条可以使用.navbar-toggler，.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}决定它们的内容何时会摺叠。结合其他通用类别，您可以选择何时显示或隐藏特定元素。

对于不需要折叠的导航条，在导航条中加入.navbar-expand。对于总是折叠的导航条，不要加任何.navbar-expand class。

8 切换元素

导航条的切换元素（toggler）预设情况下会对齐左边，但如果它们位于同层级的.navbar-brand后面，它们将自动和最右边对齐。反转您的标记将对调切换元素的位置。以下是不同切换元素样式的示例。

8.1 在最小断点没有.navbar-brand：

8.2 在最小断点左侧有一个品牌名称，右边是切换元素：

8.3 在最小断点左侧有一个切换元素，右边是品牌名称

8.3 外部内容

有时会需要使用折叠插件来触发位于.navbar外的容器内容。因为插件是透过匹配id和data-bs-target来执行的，这将很容易完成！ 这个很有意思，给个完整代码，自己试试看。

  
    
    
    
    
    
    
  

  
      


        

            

                

                
Collapsed content
                Toggleable via the navbar brand.
                
                
                
        
   
     
  

今天的课程就到这里，。请关注我，及时学习 俺老刘原创的《Bootstrap5零基础到精通》第14节 Bootstrap5滑动导航组件使用。

如果这篇文章对你有帮助，记得随手点赞哦！

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

The above is the detailed content of How to add navigation toolbar in Bootstrap? A brief analysis on the usage of Navbar component. For more information, please follow other related articles on the PHP Chinese website!