Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
looking at the services page, this is a page where we've done a lot of work on in this particular training title, and I've copied this over from the exercise files folder, if you go to 05_02 copy the html file from there, into your bootstrap folder, and this is the page that we have seen many, many times before. Across the bottom of this page, before you've seen a series of boxes of some kind or another, most recently I think they were thumbnails. I've taken that bottom row apart again. And I've recoded it now into a bulleted list at the top here and then four little chunks of text.
So, I'm going to start by taking a look at this page in Sublime Text. We are down around line 69. So, here is the start of this particular code. So what I've done is, whereas before we had these titles of vaccinations, checkups, senior pets and diet plans, as headings that were associated with each little piece of content, I just rearranged these into an unordered list. So it's the same old code you've seen before. It's just now marked up as a list. And then the little blocks of text that were inside of the thumbnail in the site are now listed here underneath starting around line 79.
And it's just a little paragraph of text along with a button to read more. So, what I need to do now is two things. One is I need to make sure that, this actually winds up looking like tabs, and the way that's going to happen is that the unordered list that's up here around line 70 will wind up behaving as the tab portion of this content. We then need to associate those tabs with the content that's going to appear within that tab. Which is the content that you see starting around line 79. So, we're going to have to somehow associate the fact that when you click on the word vaccinations, up around line 71, that the text that you see in the box will be the paragraph that you see starting around line 79.
These are the pieces that we're going to work on. So, I'm going to start with the bulleted list, and what we're going to do here is we're going to give this bulleted list a class of nav, and nav hyphen tabs. That is something that you've seen before. The fact is, we've styled the navigational bars in the previous video. You saw that we use nav and nav tabs or nav and nav pills. In order to style a, unordered list as tabs or pills. So that was pretty straight forward to make that turn into tabs.
So that's the second thing that we need to do. The third thing that we're going to do, is we're going to identify which of these links is going to open which chunk of content down below. And we're going to do this by ID. So what we need to do is we're going to set up the content that starts around line 79 With some divs that are going to have an ID associated with them. And then the tabs are going to point to those IDs. I'm going to set up the tab portion first here. Up here in line 71, where you just have the pound sign right now, inside of the href tag.
We're going to make that go to Vacc that's going to be my id of vacc short for vaccination that I need to set up further down the page. I'm going to set up that id in just a moment. So I'm going to set each of these up. So I'm going to call this check ups, and I'm going to to call this one senior And I'm going to call this one diet. As always it doesn't really matter what you call these ID's, you can call them anything you like. I prefer to make them relevant to the content so they're somewhat self documenting. Now that I'm calling ID's that don't exist might be a good idea to make those ID's exist.
So down here, after line 78 here where I had a note that this is where the vaccinations are starting, I'm going to add a div with a class of tab, hyphen, content. And this div is simply here to point out that all of these bits of paragraphs here are all part of what's going to happen with tabs. That's the whole purpose of this. And also not to display that content on the page. Unless it's specifically being called by a tab that you've clicked on.
So, that one div surrounds everything. Then, around each of these little chunks of code that are going to wind up being the content of the tabs, we're going to add an additional div. And that div will have a class of tab-pane. And fade. That's going to go on all of them. But because I want to start with this particular div, the one about the vaccinations, I'm also going to add an active class. In other words, this is the one that we're starting with. And an In class, as in This is the one we want to appear first.
So all of that goes in the very first div and then after the read more here on line 82 we can go ahead and close that div. So then here for check ups we're going to do the same kind of thing again. I'm going to put in my div just after that checkups comment, and I'm going to add a div with the class of tab-pane, and fade. That's all we need, just tab-pane and fade. And we're also going to give this the ID, of checkups.
And I forgot to add that ID up in the very first one. So, I'll go back and add that in just a second. Slash div. Back up here at line 80, I forgot to add that ID. So, this will be the ID of vacc. Okay. Then, down here for senior pets, we're going to add another div, with a class of, just like before tab, hyphen, pane and fade, and this one will have an ID of senior, and slash div will come after line 94 here. And then for diet plans on line 98, We'll have a div with a class of tab hyphen pain fade and an ID of diet.
And a slash div after that read more so that slash div's going to come on line 101. So lemme just go through one more time exactly how this code works now that we've got all the classes and IDs in place. Here at line 71, for example, we have an LI here that is corresponding to a href with an id of vacc that id, of course, is down here at line number 80. So, what will happen is when you click on this link for vaccinations in line 71.
So we have 2 parenthesis that are together here. We have two curly brackets that are together here, this parenthesis goes with this parenthesis over here, and their word functions in there, and it starts with a dollar sign. That's the line of code. This is the magic line of code that starts everything, or a lot of things that you're going to wind up doing in JQuery. And I find that it's easiest to write it all on one line like this to make sure that you've put in all of your parentheses an all of your curly brackets all at once. An then, click in between the two curly brackets, an hit Return. An then, that way you'll make sure that all of your parentheses, an curly brackets, an everything has been closed, because it is so easy to miss that.
Well, there's a number of ways that you can do this. The way I've chosen to do it is to say within the class of nav tabs, which is in the UL here, take the very first a in the list, whatever that first a is. You can certainly add an id here or something and, and write your selector based on that, but I'm just working with the HTML and the CSS that I have here. So my CSS selector then down here at the bottom will be as follows. Inside of single quotes dot nav hyphen tabs, and then space a colon first. Alright? So that's just going to select that very first link within the list that happens to be about the tabs.
So, just to prove to you that it's working I'll click on diet plans here, and then I'm going to refresh the page and now you can see that vaccinations was selected. When this page is refreshed and when it eventually opens. Now that we've got the tabs working, and that they're in place, and things are looking reasonable, one of the things you might want to do next is just add a little bit of styling here. For example, how cool would it be, if we had a little border that wrapped all the way around the tab area down here and make it look more like a box sort of the self-contained kind of thing.
And what if the glyphicons that are here next to the words, vaccinations checkups senior pets and diet plans, what if they were one color, when the tab was not selected? But a different color when the tab was selected? So, those might be the couple of little styles you might want to add, just to clean this up and give it a little bit of polish. So, let's go ahead and write some CSS for that. If you're not sure exactly what I've just done, you can take a look at the CSS inside of the text file that I've given you in your exercise files folder. So, I'm going to open up custom.css, and I'm going to scroll all the way down to the bottom of the file and I'm going to add some more CSS.
First of all, I'm going to add a class of tab, hyphen, pane. This is the area where that tabbed, the content is going to appear. And I'm just going to give this a border on the left side of, let's say, one pixel solid, #ddd. I'm also going to give it a border on the right. Same thing, one pixel solid #ddd. And I'm going to give it a border on the bottom. One pixel solid #ddd. Great, then I'm also going to give this a little bit of padding. Because I don't want the content running right straight up against that border, so I'm going to add some padding.
On all four sides of 0.8 ms. So just that one little style if we go ahead and save and refresh our page here. There we go we have this nice little box now that goes around our content. It looks, I think, a little bit more tab like. You can actually see that the tab is associated with the text underneath. And it's not all smooshed up against the edges of those borders. Okay, so then in terms of styling these glyphicons, we need to add a few little styles, and actually take out a few styles as well. The style I'm going to remove is up here in your custom styles sheet, lines 18 through 21.
It's calling for the glyphicon-pushpin and the glyphicon-heart. And just going to pull that out, so now what we have is a glyphicon that's going to be this tan color and that's pretty much all we're going to have. So I'm going to save this one more time and just to show you that that's working if I refresh my page. Now they're all tan glyphicons. Which is just great. So now all I have to do is say, for the tab that is the active one, the glyph icon there, I'd like that to be a different color. And active will be a class that will be assigned to each one of these tabs by JQuery, depending on where you are in the tab structure.
So, let's back up on line fifteen, I have changed the color there, to 3F2B22, which is I think the brown color. So, if you go ahead and save that style sheet, and you refresh your page again, now you will see that the active tab has the tan color glyphicon. And the other ones are dark, and when I switch tabs, now my glyphicon colors are changing right along with things here. So that's kind of a nice effect to have here for your tabs. So tabs can be a great way of presenting little bits of information here in a very small space.
It adds a little bit of interactivity to your page. And, once you throw in a few little styles here, you have a very nice looking interface.
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.
Your file was successfully uploaded.