Assignment 2: Bootstrap CSS Components

Loading...

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

Front-End Web UI Frameworks and Tools: Bootstrap 4

752 個評分

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

752 個評分

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

Assignment 2: Bootstrap CSS Components4:33

與講師見面

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

It's time to move on to the second assignment in this course.

This week we had covered buttons, forms,

tables, cards, images, and media and then finally we covered badge.

So, this assignment we'll look at trying

to explore your understanding of all these topics.

Your second assignment consists of three tasks.

Let's go through each one of them step by step.

Your first task is to create a form in your index strategy table pitch.

So, this is right after the descriptions that we have so

use another row with the row content there.

Create a card in there with a title.

Reserve a table, and then inside that card,

in the card block, include a form.

The form will contain radio buttons.

You can check the documentation for forms to understand how to create radio buttons.

They are fairly straightforward.

So, we have inline radio buttons all the way ranging from one to

six and you will allow the user to select any one of these radio buttons.

So clicking on one of them,

will allow you to select the number of guests.

And the second piece of information is date,

and the third piece of information is time.

So, the date and time are going to be supported by two input fields

here and then we have a submit button here named

"reserve" with the button being in blue color.

So, remember all these different details here and this is in a card.

Now, this card if it is on a small to extra large screen size,

it will be centered in this row and it will occupy eight columns.

So you have two columns left here and two columns left there.

These are some clues about how you're going to position this.

For extra small screen sizes,

you occupy the entire screen width,

otherwise your form cannot be accommodated meaningfully there.

So, that's the first task in your second assignment.

If you recall, the left the second draw of our content unstyled,

you're going to use the media object now to style this content.

Note in particular that,

for the media object your image is going to appear on the right side,

so use the right set of

classes in order to make your image appear to the right side of the content,

unlike the other ones where the image appears on the left side.

And it has to be centered vertically here.

Also, note that you need to include a badge here with the word "new."

And so we have seen this already in

the exercise before so this should not be very difficult to achieve.

So, your second task, again,

is to use the media object to style this through.

The final task in the second assignment,

is to create a button here.

This would be a block button.

So, button block class which you're going to use.

Now, what you can do is you can reposition this content

here to occupy half the screen and

then these two will like the remaining part of the screen.

And use the words reserve table in there.

Not only that, when you click on this button,

you'll be taken down to the form at the bottom of the page,

which allows you to do the reservation.

So, this is where you need to use the HTML ways of

specifying IDs in order to achieve this action.

So going back again, this button should be positioned vertically in

table and should share the screen space half with your logo here.

The wordings here can occupy the remaining half of the scripts.

So you can use the column classes to adjust these things.

探索我們的目錄

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

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

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

通過 App Store 下載

通過 Google Play 獲取