Bootstrap Tables and Cards

Loading...

來自 The Hong Kong University of Science and Technology 的課程

Front-End Web UI Frameworks and Tools: Bootstrap 4

810 個評分

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

810 個評分

課程 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

[MUSIC]

Let's briefly discuss about bootstrap tables.

What does bootstrap bring to styling tables that we include in our web pages?

We'll also look at another bootstrap component called as bootstrap card,

which is a very versatile component for displaying content.

There may be many occasions where you want to present tabular content

on your web page.

Tables were essentially designed for

that purpose, but soon there after web page

designers hijacked tables into using for

designing and laying out content in the pages.

Because inherently, the original HTML did not have

the ability to properly lay out content in a web page.

Of course, with the arrival of grid-based layouts like the bootstrap grid,

the tables have been turned on tables.

And increasingly, people are preferring not to use tables

as a main sort of building content layout in web pages.

Grid-based layouts are better designed for this purpose.

Here is an example of what we can do to a standard HTML table

by using several classes that bootstrap provides for styling tables.

So here, you can see that the set apart by displaying

it in darker color and then the rows themselves are highlighted

by displaying alternate rows with different backups.

The table used in bootstrap based that page

is similar to how you use tables in standard HTML pages.

But of course, you apply the class table which is

supported in bootstrap to a standard table tech.

In addition, bootstrap provides many different classes for styling tables like,

table striped for zebra striped tables as we saw in the example earlier.

Similarly, we have table bordered for borders.

Tables, table-hover, table-sm for tables with cell padding cut in half.

And similarly, table-responsive can be applied to a div around tables, so

that the tables can be made responsive where it is shown on smaller screen sizes.

The tables will then be able to scroll horizontally and vertically.

Also, you could apply backgrounds to individual row of tables or

entire tables themselves.

Here are a couple of examples of how you could apply a background

color to a particular row or a particular cell in table.

Another versatile component that is available in bootstrap

is a bootstrap card.

Sometimes, you may want to highlight some content on your web page.

So this is where bootstrap comes come to your aid.

In Bootstrap card is a versatile component that allows you to

display content in myriads of ways.

You would notice that it allows you to have headers for cards.

You can also include images in cards.

You can include images in the background of cards.

You can even change the background colors of cards.

Many features are supported by cards.

Here are a couple of examples of cards that we will see in the exercises later.

We will also see more versatile us of cards in later exercises and

other courses in this specialization.

Card is a very important company that can be effectively used for

displaying content.

It's time to move on to the next exercise where we will use tables and

cards to display some content in our web page.

[MUSIC]

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2018 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取