Explore
For Enterprise
Join for Free
Log In

艺术与人文
商务
计算机科学
数据科学
信息技术
健康
数学和逻辑
个人发展
物理科学与工程
社会科学
语言学习
学位
证书

浏览 Coursera 的全部课程

浏览
搜索
企业版
登录
免费加入

Exercise (Video): Images and Media

Loading...

Front-End Web UI Frameworks and Tools: Bootstrap 4

香港科技大学

4.8（1,974 个评分） | 44K 名学生已注册

课程 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（1,974 个评分）

5 stars
1,634 ratings
4 stars
285 ratings
3 stars
38 ratings
2 stars
9 ratings
1 star
8 ratings

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.

BB

Nov 07, 2018

The instructor knows his subject well. He uses real world examples that allow you to achieve something tangible. On a personal note I loved listening to his instruction. He is an enjoyable teacher.

从本节课中

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.

Images and Media5:19

Exercise (Video): Images and Media11:22

教学方

Jogesh K. Muppala
Associate Professor

脚本

Time to move onto the next exercise.

In this exercise, we're going to deal with images,

how do we include images in our web pages,

and how we can make use of the media object in our web page.

As the first step,

go to your exercise instructions and download image.zip file,

and then save it to your confusion folder.

And then unzip the file to obtain a folder named, img,

and inside that you will find

a few images that we are going to make use of in this exercise.

All the images are in png format in that folder.

We are now going to work to add some images to the page.

First, let's add in the logo for our restaurant.

So, going to the index.html page, in the Jumbotron,

you'll see the second div here got the col-sm.

So, we you're going to fix that up by adding to this div,

and align self center to this div.

Now, to this div,

we're going to add in an image.

So, let me use the image with the source, img.

We have already put the image folder containing the images into our project.

So, from there, I will add the logo.png file as the image here.

In addition, I'm going to add the class as image fluid,

so that this image will automatically be responsive and adapt to the screen size.

Let's save the changes.

We're going to apply the same change to both aboutus.html page,

and also the contactus.html page in the Jumbotron.

Now, when you take a closer look at your web page,

you'll find that in the Jumbotron,

right after this wordings,

you will see the image for our restaurant inserted in there.

Next, we'll go into the navbar,

and then where we have this for the navbar brand,

I'm going to replace these words for the restaurant with the corresponding logo.

So, these words I'm going to replace that with img,

and source is logo.png.

In addition, I'm going to specify a height attribute of 30,

and a width attribute of 41 to this logo.

This size is apt for the navbar brand there.

So, let's save the changes.

I'm going to go and make the same change in the aboutus.html page,

and also the contactus.html page.

Taking a look at the web page now,

you'll see the restaurant's name has now been replaced

with the restaurant's logo in small size there.

You now see that when you navigate to the About page,

you will see the image being included there,

and similarly on the Contact page,

you will see that the image has been updated going back to the main page.

Now, what we're going to do,

is to use a media object in place of these descriptions that we have here,

and then use the media object to replace

these with the description and also an image to be included.

That gives a better view of our web page.

So, let's go ahead and make that change.

To make use of the media object in our index.html page,

we will go to the first row of content here.

And then right there in the second div,

I'm going to introduce a new dev with the class media,

and enclose the content inside this div there,

closing off the div.

Now, inside this div,

I'm going to introduce an image to be used there.

Here I go in and say image class,

and in order to use an image in a media object,

we need to apply some additional flex related classes here,

so I apply the d-flex, and then mr-3.

So, M meaning margin right with number 3.

That gives sufficient margin to the right of this image,

so that the description is slightly set apart from the image in the web page.

And then I will use image thumbnail for this image,

and then also use align-self-center for the image,

and then type in the source of the image, which is img,

and you can look

up the image name in the img folder,

and let me give it an alternative there,

and close off the image.

This will now include the image into my midi object.

In addition, I'm going to create the media body for this image by

saying div class media body,

and then enclosed this h2 and p that contains the description inside this div there.

So, let me indent the content there,

and then close off that div here.

With that, my description is enclosed inside the media body.

In addition to this h2,

I'm going to introduce a class as mt-0.

With this, this class says margin top zero.

This title will be aligned to the top of this particular media object here.

With these changes, let's save the changes and

then go and take a quick look at our web page.

Going to our web page,

you will immediately notice the change in the web page.

You can now see that there is an image position here,

and then the description

that was earlier in that location has been properly positioned here.

Contrast this with the remaining two rows,

and you now begin to see how the media object helps us

to transform that into something more vibrant.

I'm going to do the same thing to the third row here.

The second row will be left as an exercise for you in the assignment.

Going to that third drill,

I'm going to apply a similar change to this third row to introduce the media object here.

Let me introduce the media object there,

and then to this div,

go into the media object,

and then introduce the image that I'm going to use here.

I use the class as d-flex mr-3.

If you are positioning the image to the right side,

then you need to give a margin as ml-3 for it.

In addition, I'm going to add in the image thumbnail class to this,

and then also say, align-self-center.

These are the classes that I'm going to add to this image.

And then, let's specify the source of this image,

img and alberto.png, and then I'll specify the alternative.

And after this, this h2 and h4 and the p,

I'm going to close them inside a media-body div here,

closing off the media body div.

We now have completed the media object in the third row.

Let's save the changes,

and then go and take a look at our web page next.

Now, taking a look at our web page,

you'll notice that we have the dish description there.

Now, if you move to the third row,

you now see how the third row has also been redefined.

Note the use of the media left,

meaning that the image is positioned to the left side in this media object,

and then media middle page positions the image in the middle of the description.

You can also use media top and media bottom,

to align the image to the top and the bottom of this description.

With this, we complete this exercise.

In this exercise, we looked at the use of images and media object in our web page.

This is a good time, again,

to do a good comment,

with the message, images and media.

探索我们的目录

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

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

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

通过 App Store 下载

通过 Google Play 获取

Coursera
关于
管理团队
工作机会
目录
证书
MasterTrack™ 证书
学位
企业版
政府版

社区
Learners
Partners
Developers
Beta Testers
Translators

连接
博客
Facebook
领英
Twitter
Instagram
YouTube
技术博客

更多
条款
隐私
帮助
内容访问
媒体
联系我们
目录
附属公司