Exercise (Video): Displaying Content: Tables and Cards

Loading...

来自 The Hong Kong University of Science and Technology 的课程

Front-End Web UI Frameworks and Tools: Bootstrap 4

1511 个评分

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1511 个评分

课程 1（共 4 门，Specialization Full-Stack Web Development with React）

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.

从本节课中

Bootstrap CSS Components

This module concentrates on Bootstrap's components that are designed using pure CSS classes. You will learn about Navigation and Navigation bar. Then, you will learn about buttons, forms, tables, cards, images and media, tags, alerts and progress bars. At the end of this module you need to complete your second assignment.

Bootstrap Tables and Cards4:30

Exercise (Video): Displaying Content: Tables and Cards18:17

与讲师见面

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Our next exercise looks at ways of displaying content on our web page.

They look at how we can include tables into our web page and how we can

style those tables using Bootstrap's classes for styling tables,

including responsive design of tables.

We'll also look at another versatile component

that is available in Bootstrap called as a card.

A card allows you to display content in millions of ways.

So we'll look at two different ways of using a card to display content.

Later on, we will see the use of cards again and again

for future designs of certain parts of our website.

To get started, open the aboutus.html page.

We are going to insert a table and two cards

into the aboutus.html page to display some card.

First, let's slowly scroll down until after that card for leadership information,

and right there I'm going to introduce another div within

which I'm going to enclose the table here.

So, I will introduce a new row here,

with the class as row row-content.

And inside this div,

we will introduce a column that will host the table here.

So, I will introduce a column, column 12,

column sm-9 and close the div.

And inside div, let me give a heading here

Facts and Figures and close the h2.

Right after that, let me introduce another div,

that the classes column sm and column sm-3 and close off that div there.

Right now we're going to leave the second div empty.

I'm going to fill in the table into the first div here and

then we'll take a quick look at the table after I add in the code for the table.

So here I have listed in the code for the table.

Let's take a quick look at the table and then we'll come back to discuss this code here.

Going to our About page that we already have been working on from earlier,

after the Corporate Leadership section,

you see a new row here introducing the table.

So, note how the table is styled,

so we have the header with an h2 included there,

but let's concentrate specifically on this table.

So you see that this table has been styled

using some Bootstrap classes that are used to enhance the table.

The header has been rendered with a dark background,

and then the rules are all designed in such a way that alternate rows are

in different color so that you can clearly distinguish the rows of this table.

This is what in Bootstrap terms is referred to as striped table.

This is one example of how you can style a table.

Now interestingly, if you look at the same table in a small device,

you would notice that the table is still

visible except that this table now becomes scrollable.

So, whatever can be displayed within the content will be shown and

the rest of the table can be scrolled horizontally in place.

So this is the responsive component of Bootstrap's support for tables in action.

Now let's go and take a look at the code itself.

Now obviously this table is fairly straightforward,

it has a bunch of rows and some columns.

So you'll be expecting me to use the typical th,

td and tr tags there.

Switching back to the code,

you'll notice that I am enclosing this table inside of

div to which I have applied the class table responsive.

So this is what makes this table responsive so that on

smaller screens you can horizontally scroll the table.

Now for the table itself,

notice how I have applied two classes.

One is the table class,

so this is overriding the default table

rendering on browsers by providing Bootstrap's own classes.

And the second one says table-striped.

So this is what designs a table with alternate rows in different colors here.

Then the head itself,

so you can see that the headers described here with the class thead-dark,

so this renders the head dark.

And then you'll see the table draw itself described here with the th tags here.

So this is standard table definition.

The body of the table itself is standard html use of tr,

and td, and th elements that you are already familiar with in html5.

So, this is what the table is constructed with,

and then you close the table body. So that's about it.

So we all that is unique about Bootstrap itself is the application of

this specific Bootstrap classes to

the table element itself to style it further,

to fit into a Bootstrap design web page.

The next component that I'm going to add into the

aboutus.html page is a card component in Bootstrap.

The card component allows us to display content

by setting it apart from the rest of that content.

Now here, scrolling to the first row here,

there we have our history in the second div use,

notice that the first div is already occupying col-sm-6,

the second div is currently empty.

So to this div,

I will add in the class as col-sm.

Thereafter, going into this div I will introduce another div to the class card here.

So inside those div,

I'm going to build up my card to display some content here.

So in this div, we will introduce a h3 that

the class as card-header bg-primary.

So you'll see that this h3 will be displayed as

a card header with that background as primary

and then text white which Bootstrap class will define the text to be white in color.

And then inside this h3,

I'm going to introduce the title for this card here which

is 'Facts At a Glance.'

So that I can show some content inside this div here.

Now, to this card,

next I'm going to add in another inner div

here with the class as card-body,

and inside this card-body will be

the actual content that have been displayed in this card.

Let's save the changes and then go and have a look quickly at our web page.

Going to our web page,

we can already see the card taking shape in our web page,

so you can see that the left half is occupied by the History

and the right half you'll see the card put into place.

Let's add some content into this card.

Going into this card block,

now I'm going to use a description list

and this description list in Bootstrap allows me to

apply the row and column classes to it and thereby format the content inside.

So inside this description list,

I'm going to add

in the dt that the class and col-6 here,

so meaning that this is going to occupy six columns

inside this description list which itself is a row here.

So nesting as you see coming into picture here.

So to this dt,

I am going to add in so this description title here,

and then below that I will add in the dd with

the class col-6 here and then I can add in some context here.

And dd here.

Let's save the changes and take a quick look at our card.

Going to our card, you can now see how

the description list allows me to display information.

Inside my card, you can see the left side and the right side clearly displayed.

Here we are taking advantage of the description list and,

adding in the information there.

Let me finish up the remaining parts in here by adding in the code,

and then come back and take a look at the final version of this card.

Here, you can see that I have completed adding in

the remaining parts of my description list.

Let's go and take a quick look at our final version of that card.

Taking a look at the card,

and how it is taking shape.

Here, you can now see how we can make use of a card to display

some content in our web page and set it

apart from the rest of the content to the Web page.

So, a card is a very versatile component that allows us to display content like this.

Let's continue with this exercise,

adding in another card to this web page.

Let's now again go back to our aboutus.html page.

And right below the card that we have already added previously,

I'm going to add in another div with the class "col-12" here.

And then, inside this div,

I'm going to construct another card here to display some additional information.

So inside this div,

I will construct a card with

the class "card card-body bg-light."

So, you'll see that I am applying both the card and the card-body to the same div here.

So which means that this particular card is not going to have

any card header but instead just contains the card-body here.

And then, also, the bg-light means that the background will be in faded color.

Somewhat of a grayish color added to the background.

So this also seeks this card apart from the rest of the content here.

Now, inside this card,

I'm going to make use of a block code to display

some interesting little funny piece of information there.

So I will use a blockquote.

This is also an HTML tag here.

And then to this, I will apply the blockquote class of Bootstrap.

So Bootstrap styles this blockquote in its own way.

So let's close up that blockquote.

And inside this blockquote,

I'm going to include a quotation here.

So I'll start with a p,

and apply a class called mb-0.

The mb-0 is a utility class that Bootstrap provides.

What this means is margin-bottom zero.

For this particular, whatever it is included in this p tag,

we'll have a bottom margin of zero.

And this helps me to display the content correctly here.

So here I'm going to add in the actual content there,

and then close this p. So this p contains the actual quotation.

Now, to this quotation,

so you see that in your content,

you can also include quotations in your code there.

So to this, I can also add a footer with the class.

So let me push the footer indentation.

So this footer is also a class that blockquote supports.

So whatever you include in the blockquote,

together with the footer,

will enable you to display the author of this quotation.

So here I am including the author,

and then one more.

Using the cite, I can even cite the source of this quotation.

So you can see that.

Again, this is just some quotation that I'm using just for fun to show you,

also at the same time illustrating,

how the blockquote works,

and also how we can create another kind of card in Bootstrap.

So with this, we have added in the code for displaying the blockquote here.

So let me see if that changes,

and then we'll go and take a look at how this quotation is displayed in our web page.

Going to the browser, in our page,

you can see that our history and the facts at a glance are displayed side by side.

Down below that, I have this long piece of content here.

Let's have a look at the same page in an extra small screen.

So in an extra small screen,

you can see that the history and the facts are stacked on top,

and the quotation is right down below here in its own card.

So you can see two cards,

one below other here,

and then the table itself displayed at the bottom.

So the table itself is a scrollable table here.

So with this, we complete this exercise.

So in this exercise,

we learned about how we can use tables and cards for displaying content in our web page.

Now that we have completed this exercise,

it's a good time to do a git commit.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2019 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取