This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.
Exercise (Video): Tabs
Loading...
来自 The Hong Kong University of Science and Technology 的课程
Front-End Web UI Frameworks and Tools: Bootstrap 4
754 个评分
The Hong Kong University of Science and Technology
754 个评分
课程 1（共 4 门，Specialization Full-Stack Web Development with React）
从本节课中
Bootstrap Javascript Components
This module concentrates on Bootstrap's JavaScript based components. You will learn about tabs, pills and tabbed navigation, collapse, accordion, scrollspy, affix, tooltips, popovers, modals and the carousel. At the end of this module you need to complete the third assignment.
与讲师见面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
In this exercise, we're going to explore Bootstrap's tab-based navigation,
Bootstrap's support for tabs,
and how tabs can be used to organize content on your web page.
And how you can navigate from one tab to another tab,
and then reveal content in each of those tabs in web page.
Now, you will here see me using the nav class,
and then further qualify it using the nav tabs class.
The same approach can be also used with the nav pills
that we looked at in the previous lecture.
To get started with this exercise,
we will go into aboutus.html page.
And then right there,
where we have the corporate leadership content there,
after the h2, I'm going to introduce the tabbed navigation.
So, this is where I'm going to make use of the ul with the class nav nav-tabs.
So, you have seen that earlier when we constructed the nav bar,
we also used the ul inside the nav bar to specify the navigation items there.
Similar approach here, except that here we're going to
use the ul with the nav and the nav tabs here.
So, inside this ul,
we will construct the navigation structure for this tabbed navigation here.
So in there, I will use the list item with the class nav-item,
and construct the navigation around this list item.
So, this introduces the first item into my nav tabs.
Right after that, inside there I will introduce an a with the class nav-link active.
So, this one, as you see,
if you recall from the way we use the ul with the nav item and nav link.
In the nav bar,
we are seeing a similar approach here.
So, nav-item active, and then href.
So, this would be a reference to tab pane later on,
which would have the ID of peter there,
and role is tab for this one,
and data-toggle tab.
So, you can see the Bootstrap's javascript component coming into picture here.
And then I will say Peter Pan,
and then close off the a tag there.
So, this would complete our first tab in our tabbed navigation.
Let me complete the rest of the code,
and then we'll come back and review the rest of the code there.
So, here you can see that I have completed this navigation structure here.
Similarly, I am defining the list items for the remaining free corporate leaders here.
Now this, let me save the change.
And then let's go and take a quick look at the web page.
Switching to the web page,
you now see how using the nav nav tabs we have created
this navigation structure right below the corporate leadership here.
So, this navigation structure meaning that I should be able to navigate and
view each one of them in more detail by clicking on this.
So, that is how the tabbed navigation works here.
Now, obviously, the content of each one of them should
appropriately show only that person's details here.
So, this is where the use of tabbed content
and the tab pane classes will come into effect.
And we're going to enclose this content using that.
And then tie this to those navigation,
tab navigation up here,
so that only one single corporate leader's information
is displayed on the screen at a time.
Once we complete setting up that tabbed navigation,
then we'll move down into the actual content here.
And then now, I'm going to reorganize this content into four separate tab panes,
each of which will be shown when
the corresponding tab pane is selected in the tabbed navigation.
So, to get started,
the first thing that we're going to do is to go in and separate
each of these four corporate leaders into the four parts there,
so that it's easy for me to see what I am doing.
So, at the h3,
I'm cutting them into four different parts,
and then we'll be able to work with these.
So, now I have one, two, three, four.
So, this content now needs to be enclosed inside a div
with the class tab-content.
So, all this content that we have for
the four different corporate leaders should be enclosed inside a tab-content div there.
So, now I have enclosed that inside the tab contact.
Now, for each one of them,
I need to create another div with the classes tab pane and some additional classes.
And then organize this contact.
So, let's start with the first one.
So, for the first corporate leader,
I'm going introduce a new div with role as tabpanel.
So, this serves as the tab panel that will be displayed
when the first tab navigation is selected.
And the corresponding class that I need to apply is tab-pane.
So, this is the tab pane,
the actual content that is contained in there.
And then another class that I apply is fade.
So, the fade class allows this content to fade in.
So, this is an animation class that Bootstrap supports.
Also, I apply this class called show.
The show class essentially specifies
that this particular content should be shown when the page is first rendered.
So, it will apply the show class only to the first tab pane,
the remaining tab panes will not have the show class applied.
And the last class that I'm going to apply is active because this is
the tab pane that is going to be displayed in the page when the page is first rendered.
In addition, for the navigation to work,
I need to give this a and ID,
and since I used hashtag Peter for the tab navigation content,
so I'm going to apply the ID as Peter here.
And so, when this is referred to in a link there with hashtag Peter,
this is the corresponding pane that I am referring to.
Now, what I'm going to do is I'm going to copy this div from there.
And then I'm going to apply this div to the second corporate leader's information,
except that for this one I should only apply the tab pane and fit.
The show and active should not be applied for the remaining three.
And the ID here should be Danny for the second one.
I'm going to simply copy this code,
and then paste that for the third corporate leader here.
And then so the tab panel and the third one is Agumbe.
And the the last one,
again, I paste that in,
and then the ID should be changed to Alberto,
and close off this div here.
So, this div for the last one should be closed off at that point.
And that should take care of the four tab panels that I need.
Going in and indenting this content,
so that I am satisfied,
my obsession is satisfied there.
Okay, that completes the organization of the tab content.
Now, let's save the change and go and take
a quick look at what the web page look likes now.
Going to our web page,
you now see that our web page is only displaying the content corresponding to their CEO.
If you switch to any one of the other ones,
you will see that the corresponding information is displayed.
And notice how this information fades in when you select that particular user.
But, of course, if you are happy with this,
then that's fine, we can stop at this point.
But I would like to nicely define a real tab around this.
So, this is where I'm going to apply a few CSS attributes,
properties to this particular tab here,
so that it's nice,
clean tab structure being defined there.
So, let's create a few CSS properties for this.
The last step, switching to styles.css.
After the navbar inverse,
I'm going to introduce the CSS classes for the tab content,
so I specify for the tab-content,
border-left: 1px solid DDD.
And I'm going to apply the same for border-right and bottom.
I don't need to apply to the top because the top is governed
by the tab navigation already.
And then let me give a padding of 10 pixel all around,
and then save the changes.
Let's go and take a look at our web page after this.
Switching back to our page,
now you see a nice,
clean tab-like structure being created.
So that when you navigate to each one of them,
that corresponding information is appropriately displayed in its own tab.
This completes this exercise where we looked at
the use of tabbed navigation for our web page.
And then we saw how we can create tab navigation and enclose other content.
This is also a good time for you to do a Git Comment with the message tabs.
