#131 Navs Activity Website Design using Nav Tabs and Nav Pills


In this video we’re going to learn how to create components like nav tabs enough bills using bootstrap . So let’s start with the love taps. Let’s create some basic taps using bootstrap so we can create an unloaded list. OK. And you can happily place a few list items inside the list go for for list items. Third each one is going to have a roll presentation. OK. And a link with an entry. OK so let’s just duplicate this for list items. OK. So let’s add some text inside cyclings So let’s go for something like home messages and occasions and contacts us. OK. So so to create tabs we’re going to need to give the least a class. So the first class we’re going to use is going to be enough. You can see how this styling changed. You can see the whole states when we hope on the components. Also we need a class for nav tabs. So it’s going to be enough tabs. OK I can already see how the nav tabs. No. OK so we have created a basic bootstrap or basic push up nav tabs using the nerve enough tabs classes . OK. So now let’s do a few more things. Let’s add some icons so it’s I’d like one just before the Home tab using a glyph icon. So we’re going to create a spud. OK. We’re going to give it a glass Cliff. Cliff I can then leave like go home. OK. All right let’s do the same thing for messages. So we going to add a span just before text this time we want to add an envelope just before text. OK. Also we can add a bunch writes of a text showing for example how many messages how many new messages the user has got. So to do that we need to add another span after the text. And this time span is going to be of class much. OK let’s play some text for example three four three messages. OK you can do the same thing with notifications. Just copy the spin and it’s up after text. OK. All right. So we can change the styling of the Nav tabs so that they take the whole width of the viewport. And also they can have the same with all of them. So there is a class for that. It’s going to be enough Josephite. Colleges are diskless lists though. You can see that they always take the full width of the viewport So in the x rays more devices under seven hundred sixty eight pixels you can see that the US sucks. But just beyond 768 pixels we can see that they take the whole width of the viewport and they are like OK. And all the way they have the same way OK. All right so let’s move to nerve pills. So this creates another list. Some items. Again real presentation. Each of them is going to have a link within inches. OK so is this for example is one who then page on page to page three. OK. So we’re going to add a class to our list. So first we still need the enough plus. OK. And then we are going to use the class of pills. Let’s make sure everything is fine we please. So I’d. OK. So we’ve just created a basic nerve pills using bootstrap. We can make these studies if you want to by adding the nerve socket class. OK. Also we can make a certain item active. So let’s say first item it is make it active. We need to use the class active. Well that’s OK I can do the same thing with our NAV tabs. So let’s make the home item active OK and class active. OK . All right. So OK let’s add something else. Let’s make a certain item disabled. So to do that is make the page 3 Item disabled. So we need the class disabled. This is pretty straightforward. OK. All right so we have learned how to create enough components basic knife components using bootstrap in the next video will get introduced to us

Add a Comment

Your email address will not be published. Required fields are marked *