Explore
For Enterprise
Join for Free
Log In

Imperial College London
Apply to the Global Master of Public Health degree
Get a world-class education and the research skills needed for a career in public health.
Macquarie University
Interested in earning an MBA degree online?
Apply by the final deadline on July 20th and prepare yourself for the workplace of the future.

瀏覽 Coursera 的全部課程

瀏覽
頂級課程
企業版
登錄
免費加入

Assignment 2: Bootstrap CSS Components

Loading...

Front-End Web UI Frameworks and Tools: Bootstrap 4

香港科技大学

4.8（2,469 個評分） | 57K 名學生已註冊

課程 1（共 4 門，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 (Front-End Framework), Node.Js, Jquery, SASS (Stylesheet Language)

審閱

4.8（2,469 個評分）

5 stars
2,041 ratings
4 stars
359 ratings
3 stars
43 ratings
2 stars
15 ratings
1 star
11 ratings

LH

Aug 02, 2017

The lecturer is very clear on every step of the learning process, is super responsive on the discussion forums, and everything he does, he explains well before doing it. Highly recommend this course.

AA

Jul 12, 2018

One of the best courses I have ever taken. Everything is explained in the best way possible. The Instructor is also good. Must give this course a try. It enhanced my knowledge of the subject matter.

從本節課中

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

以免費的價格試聽課程

腳本

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

關於
管理團隊
工作機會
目錄
證書
MasterTrack™ 證書
學位
企業版
政府版
面向校園

社區

學生
合作夥伴
開發者
Beta 測試人員
專業譯員
博客
技術博客

更多

條款
隱私
幫助
內容訪問
媒體
聯繫我們
目錄
附屬公司

隨時隨地學習

關注我們

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