Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Bootstrap ships with a nav bar that you can use in your web pages. This nav bar comes with many, many options for customization and styling. I'm at getbootstrap.com, and if you take a look here at that black navigation bar that is at the top of the web page, this is the navigation bar that we're going to work on coding next. So if you take a look at your Dreamweaver document, you'll notice the code looks very familiar compared to what we just had out in the previous video. It's a simple navigation bar. You can see that we have a nice bulleted list here.
So this is our starting point, and we're going to go ahead and start adding a few classes here to make his navigation bar. With any navigation bar that we make in Bootstrap, the very first step is to set our ul to have a class of nav, and then second, we're going to need to pick an active link here in our list, so li will have a class of active, and I'm going to set that on the home link, so that's step number one. Step number two is we're going to take this nav tag that I have on the outside of this, and I'm going to add another class to that as well.
So, I'm going to add the class here of navbar, and we need to add a div that goes around this as well, which seems to be important to the styling. So I'm going to add a div with a class of navbar-inner, and of course, don't forget to close that div down near the bottom. If we take a look at what we've got so far, just go ahead and save--so Ctrl+S or Command+S to save--and then let's preview this page in Firefox, you'll see that we have a navigation bar that will appear across the top of our page, very nice hover states on the links that are here.
The currently occupied page is indicated here with this nice gray box around the word Home, so everything is looking particularly lovely. One thing that we are missing is some kind of indication for what website that we are on, and that is also included in the specification for the navigation bar, so we can add that. Inside of Dreamweaver just after the div with the class of navbar-inner, we're going to add a class of brand. You, of course, can make this link anywhere that you like, probably back to your homepage, and you're going to put in the text that you want to appear as the identification for the website, so in this case, this will be the Roux Academy Conference /a, and if we save that again and we take a look at our web page here in Firefox, you'll see that we have some nice identification, which is clickable, will take me back to the homepage, would probably be the way that I would code it, and we have a navigation bar that appears here.
Now if I minimize my Firefox browser and I start to pull this in, you'll notice that the styling here kind of falls apart a little bit. You'll notice that the navigation wraps onto the next line, apart from the brand, which is nice. It's degrading somewhat gracefully here, but as I get particularly small, say mobile phone small, you can see that this is not as pretty as perhaps it could be. That's because we haven't added responsive aspect to this particular navigation bar just yet, but I've given you some basic styling for the navigation bar so far.
One last thing that you probably have noticed is that when we took a look at the navigation bar inside of Bootstrap, it was black, but here inside of my example it's white, and it's actually perhaps a little bit difficult to see here on the screen with this big white background next to it, but you can actually make this navigation bar black as well. So inside of Dreamweaver, up here where we have the nav with the class of navbar, go ahead and add navbar-inverse, and this will give you the inverted color.
If you Refresh the page again, we now have a black navbar closer to what you saw on that Bootstrap page. So this is the most basic markup for the navigation bar that ships with Bootstrap. We've gone through some simple things like setting up the general structure of it, we've added some branding to it so that we know what website we're on, and we also changed the color of this to black, so we have a white version and a black version of this particular navigation bar. Of course, you're more than welcome to override any of these colors or styles with your own, using a custom style sheet.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.