Shulou(Shulou.com)06/02 Report--

This article focuses on "how to add navigation toolbars in Bootstrap". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to add a navigation toolbar in Bootstrap"!

1 working principle

The Bootstrap navigation toolbar (Navbar) is more powerful and responsive than the navigation learned in the previous section, with structures including brands, navigation, forms, etc., as well as support for folding plug-ins.

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

The navigation bar needs to be wrapped in .navbar and given responsive folding and using color scheme class via .navbar-expand {- sm |-md |-lg |-xl}.

The default content width of the navigation bar is floating, and changing containers limits the horizontal width in different ways.

Use spacing and elastic box generic classes to control the spacing and alignment of objects in the navigation bar.

The navigation bar is responsive by default, but you can easily change this option.

Use the nav element to ensure affinity, or you can use more generic elements, such as div.

Indicate the current location by setting aria-current= "page" to the current page, or aria-current= "true" to the current project in the group.

2 sub-components supported by structure 2.1 of the navigation bar

The navigation bar has built-in support for some child components. You can choose from the following options depending on your needs:

Navbar-brand is used 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 collapse plug-in and other navigation toggling behaviors.

Spacing and elastic box general classes are used for form control and behavior.

Navbar-text is used for vertically centered text strings.

Collapse.navbar-collapse groups and hides the contents of the navigation bar through parent breakpoints

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

The following is an example of including sub-components, including a responsive navigation bar that automatically folds at the md breakpoint.

Navigation demonstration

Home document version Bootstrap 4 Bootstrap 5 Previous version of message search

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

Click the three horizontal lines on the right to show the following figure, and click restore here.

After the above example, if you want to implement the handwritten code, it will take a lot of work, just copy and paste it now. Next, we will introduce in detail the functions and usage of each part of the components.

2.2 Brand (navbar-brand)

You can put text, images, images and text combinations inside. In the above example, we put logo images.

Words

NavbarNavbar

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

Bootstrap

2.3 Navigation

The navigation connection is based on the .nav we learned earlier, and we need to use toggler classes to establish the appropriate response style. The navigation elements in the navigation bar will take up as much horizontal space as possible to keep the contents of your navigation bar safely aligned.

Enabled status-represents the current page with .active -. It can be used directly for .nav-link or directly subordinate. Nav-item.

Note that you should add the aria-current attribute to the .nav-link itself.

Navigation demonstration

Brand home page function Price Disabled

A concise method that does not use lists.

Function price of brand home page Disabled

The two have the same effect.

You can also use the drop-down menu in the navigation component of the navigation bar. The drop-down menu requires a wrapper element to be positioned, so be sure to use separate and nested elements for .nav-link and .nav-nav-item, as shown below.

Navigation demonstration

Brand home page function Price drop-down menu one menu two menu three

2.4 form

You can put various forms and components in the navigation bar, such as the search form in 13.2.1, and the direct child elements in navbar are typeset using flex, which is preset to justify-content: space-between, that is, alignment at both ends. Use other single-star box classes to adjust this behavior as needed.

Input groups can also be used in this way. If the navigation bar is full of forms, or mostly forms, you can use the form element as a container and save the HTML.

Navigation demonstration

@

The form navigation bar also supports various buttons. This is also a great reminder that we can use the vertical alignment tool to align elements of different sizes.

Main buttonSmaller button

2.5 text

The .navbar-text navigation bar can contain some text. The class adjusts the vertical alignment and horizontal spacing of text strings. It seems that this is not used much, just take the official example.

Navbar text with an inline element

Mix with other components and generic categories as needed.

Navbar w/ text Home Features Pricing Navbar text with an inline element

3 color scheme

Due to the combination of the theme class and the background-color generic category class, the themed navigation bar has never been so simple. Choose a light background color from navbar-light, or navbar-dark for a dark background color. Then, customize using the .bg-* generic category.

Navigation demonstration

Function price of brand home page About search Brand The price of the home page function is about Search for brand home page Function Price about search

More colors can be found in the general class > background colors, which are also described in the table colors in the previous section.

4 containers

Although not required, you can wrap the navigation bar in .container and center it on the page. You can use any responsive container to change the display width of the content in the navigation bar. This part is relatively simple, so I won't demonstrate it any more.

Navbar5 positioning

Use our positioning generic category to place the navigation bar in a non-static position. Choose to pin to the top, pin to the bottom, or paste to the top (scrolls with the page until the object reaches the top and stays in place). Fixed navigation bars use position:fixed, which means that they deviate from the normal DOM file stream, and may require custom CSS (such as padding-top on body) to prevent overlap with other elements. Also note that sticky-top uses position:sticky and is not supported by all browsers.

Navigation demonstration

Fixed to top by default, fixed to bottom and pasted to top

Change after pulling down the scroll bar

From the above example, we can see

Fixed to the top and fixed to the bottom, although within the container, but the effect will not be affected, its width exceeds the container limit.

When pinned to the top, the default navigation bar automatically follows.

Pasting to the top automatically follows the existing visual elements

When you drag the scroll bar, the fixed to the top and the fixed to the bottom position remain the same, but the default and paste to the top will be dragged up.

6 Scroll

Add .navbar-nav-scroll to .navbar (or other navbar subcomponents) to enable vertical scrolling within the switchable content of a collapsed navbar. By default, scrolling starts at 75vh (or 75% of the viewport height), but you can override it with a local CSS custom attribute (--bs-navbar-height or custom style). In larger viewports, when the navigation bar expands, the content is displayed as the default navigation bar.

Note that this behavior may lead to overflow when setting overflow-y:auto (where you need to scroll the content), overflow-x is the equivalent of auto, which will crop some horizontal content.

The above is the manual explanation of this content, a lot of wordiness, in fact, it is very simple, just look at the effect picture directly, to put it bluntly, it is forced to click on three horizontal lines in the mobile state to appear a scroll bar, I Lao Liu thinks this is purely trivial.

Navbar scroll Home Link Link Action Another action Something else here Link Search

7 responsive behavior

Navigation bars can use .navbar-toggler,.navbar-collapse and .navbar-expand {- sm |-md |-lg |-xl} to determine when their contents will be folded. In conjunction with other common categories, you can choose when to show or hide specific elements.

For navigation bars that do not need to be collapsed, add .navbar-expand to the navigation bar. For navigation bars that are always folded, do not add any. Navbar-expand class.

8 switch elements

The toggler of the navigation bar is aligned to the left by default, but if they are behind the. navbar-brand at the same level, they are automatically aligned to the rightmost. Reversing your tag will switch the position of the element. The following is an example of different styles of switching elements.

8.1 there is no .navbar-brand:Hidden brand Home Link Disabled Search at the minimum breakpoint

8.2 there is a brand name on the left side of the minimum breakpoint and a switching element on the right: Navbar Home Link Disabled Search

8.3 there is a switching element on the left side of the minimum breakpoint, and on the right is the brand name Navbar Home Link Disabled Search

8.3 external content

It is sometimes necessary to use a collapse plug-in to trigger the contents of a container located outside the .navbar. Because plug-ins are executed by matching id and data-bs-target, this will be easy to do! This is very interesting. Give me a complete code and try it for yourself.

Navigation demonstration

Collapsed content Toggleable via the navbar brand. At this point, I believe you have a deeper understanding of "how to add navigation toolbars in Bootstrap". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.