Also see we’ve used data-toggle=collapse that Bootstrap uses to hide/show the menu items in smaller windows. This link is visible only on the smaller screens with a list icon. Just below the branding, you might be seeing an additional link with the navbar-toggler class that wraps a span navbar-toggler-icon. The nav items are wrapped inside an additional div with the classes collapse navbar-collapse, which are used to make the menu appear like a stack when viewing in smaller browsers. It should be clear that adding the class navbar-brand gives the title a clean look and is used for the website’s name. The branding and menu items are self-explanatory. Let’s see the real magical stuff that makes the navigation responsive. Till now, whatever we’ve added is just the basic structure of our navigation bar. The container is used to contain everything inside the navigation bar as a wrapper.
Responsive layout small devices bootstrap code#
Let’s move ahead and insert some more code into it: The navbar-light and bg-light classes control the text color and background color of the navigation bar respectively. An additional fixed-top class makes it stick to the top of the page. The navbar class is for showing the navigation section. This is going to be fixed to the top of the website, as you’ve seen in the demo page. It will contain the website’s title and some right-aligned menu link items. Let’s build the navigation bar of the website.
0 kommentar(er)
