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.
Exercise (Video): Images and Media
Loading...
来自 The Hong Kong University of Science and Technology 的课程
Front-End Web UI Frameworks and Tools: Bootstrap 4
691 个评分
The Hong Kong University of Science and Technology
691 个评分
课程 1（共 5 门，Specialization Full Stack Web and Multiplatform Mobile App Development）
从本节课中
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.
与讲师见面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
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.
