Exercise (Video): Responsive Design and Bootstrap Grid System Part 1

Loading...

来自 The Hong Kong University of Science and Technology 的课程

Front-End Web UI Frameworks and Tools: Bootstrap 4

1514 个评分

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1514 个评分

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

从本节课中

Front-end Web UI Frameworks Overview: Bootstrap

This module gives you a quick introduction to full-stack web development and the outline of the course. Then you will learn the basics of Bootstrap, setting up a web project using Bootstrap. You will learn about responsive design and the Bootstrap grid system. At the end of this module, you need to complete your first assignment.

Responsive Design9:13

Bootstrap Grid System27:02

Exercise (Video): Responsive Design and Bootstrap Grid System Part 120:25

Exercise (Video): Responsive Design and Bootstrap Grid System Part 214:54

与讲师见面

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

In the previous lectures,

we have learnt about responsive design and the bootstrap grid system.

We have seen how the bootstrap grid allows us to design responsive websites.

It's time for us to move onto the next exercise.

We'll begin to work with the index html page that we created in

our previous exercise and apply the bootstrap grid classes to make it responsive.

Taking a quick look at our web page in the browser we see that

it is still terrible although the fonts have improved a little bit,

and we are now using the bootstraps default fonts.

Let's now try and apply the bootstrap grid classes to index.html to improve its layout.

Going to the index.html page,

let me quickly draw your attention to this particular line in the

index.html page that we included already in the previous exercise.

I had referred to this line,

then we were talking about the bootstrap grid system.

So here, we see that we've specified the meta tags with a view port and the content,

width as device width,

and initial scale one and shrink to fit no.

So this meta tag allows us to make

our web page responsive by looking at the view port character.

Moving ahead to the next step.

We're going to roll down to the body of this index.html page,

and then look up the first div that comes right below the header tag there,

to this div you're going to apply the class container.

We have already learnt about the container class in the previous lecture.

So once we apply the container class,

then taking a look at our web page we see

that part of the content right there has already adapted itself.

Look at the difference between the content up here and the one below here.

Now this content down below here,

is in the footer of our index.html page and this content is in the header.

But that content on the middle is the actual content of our web page,

that is inside the div to which we apply the container.

So applying the container class you can immediately see that the width of the page within

which our content is laid out has now

shrunk and then you have some extra space left on either side,

so with this container width being a fixed size container,

our content will be fixed to this particular width on

the screen leaving enough margin on either side as white space.

Let's apply the same container class to both the header and the footer also,

and then see how the content changes.

Going back to our web page,

what I'm going to do now is for the inner content here,

the inner div inside the container,

I'm going to apply the class as the row class here,

to this first one,

and I'm going to simply copy this.

I'm going to apply the same to the second div here which is lined up for the div,

and also scroll down and then to the third div here,

I'm also applying the row class here.

So now, the content inside this outermost container class,

is now divided into three rows,

so whatever is inside here will be one row,

whatever is inside here,

will be the second row and the one in here will be the third row.

We'll later on apply the column classes to this.

Let us now move to the header in our index.html's body.

And to the header, I'm going to apply a class called as jumbotron.

The jumbotron component allows you to set

apart the content inside the jumbotron from the rest of the page.

We will see the result in a short while when we at the resulting web page.

Now, to the div inside this header,

I'm going to apply the class as container,

so that whatever is inside the content will

be now constrained by the container width there.

Similarly, moving down to the footer here,

in the footer also,

the first div inside the footer,

I'm going to apply the class as container.

And the div inside there,

I'm going to apply the class as row there,

to the div inside there.

So this div will take us all the way to this particular div here.

And then the next div also that is right below that,

I will apply the class as row.

So now my footer contains two rows here,

we'll style the content using column,

classes in a short while.

Going to the header also,

I will apply the row class to the second div inside the container div here.

So this div which matches I've got this,

will be one single row in the header.

Let's take a look at our resulting web page.

Going to our web page,

you can now see that the header content is now set apart from

the rest inside this grey box on top here.

But the content itself is now lined up with the content down below here.

Now, this is the result of using the container.

Moving to the footer,

you can now see that the footer content is also now lined up inside the container.

But the page still looks not that great,

we'll now apply the column classes to the inner divs now.

Going back to the index.html page,

we'll now start applying the column classes.

So going to the header, to the second inner div inside the jumbotron here,

let me apply a class as column 12, column sm-6.

So, here the content in

this first div will occupy the entire row for extra small screen sizes,

and then will occupy half the row so that's why column

sm-6 for small to extra large screen sizes.

Now, similarly for the second div here,

although it doesn't contain any content there,

I'm going to define the column classes here as column 12 and then column sm.

So, notice that here by specifying column 12,

I'm explicitly stating that for extra small screen sizes whatever content is

inside this div will be stacked below the content about here.

And then for small to extra large screen sizes,

this content will occupy the leftover amount of

columns in the row for small to extra large screen sizes.

So here in this case since six columns are occupied by this content,

this will get the remaining six columns there.

Moving down to the content rows here,

for the content here,

so for this first content,

which is a label here,

I'm going to apply the classes as column 12,

column sm-4, column md-3.

So, stating that for extra small screen sizes,

this will occupy the entire row, for small,

it will occupy full columns,

and then for medium to extra large,

it will occupy three columns in the row.

Now, so the remaining part will be occupied by the content down below here,

so to that, I will apply the classes as col,

indicating that this will be stacked below

the content here in the extra small screen sizes,

and then I'll say column sm,

so which means that this will occupy the remaining eight columns here,

because four columns is taken up by this one,

and then we'll say column md,

so which means that this will occupy

the remaining nine columns because three columns are taken

up for medium to extra large screen sizes by the content above here.

Now that I have defined for the first content row,

I'm going to take the same column class application here,

and then apply that to the second row here,

and also the third content row here.

Similarly, I'm going to copy this one and then apply the same to

the content divs down below here.

So now we have configured both the header and the content columns there.

Let's now move down to the footer.

In the footer, you'll notice that this div contains three inner divs here,

so for each of these three inner divs here,

I'm going to apply the corresponding column classes.

So for the first one,

which contains links to the various pages that will form part of this website,

I'm going to apply a column class,

as column four, column sm-2 here.

So meaning that for extra small screen sizes,

this will occupy four columns and for small to extra large,

it will occupy just two columns here.

Then for the second one,

the second div in there I will apply the classes as column seven.

So notice that I have four here and then seven here,

so that total occupies 11 columns.

I have left one column empty.

I'll come back later to apply an offset to take care of the extra column.

So this is column seven,

and then col-sm-5 to the second one.

So this is two plus five, seven.

So I still have five columns left over,

which I can use for the third div here.

Now for extra small screen sizes,

these two contents will be positioned side by side,

and then this div which contains links to

a social media site will be in a separate row stacked below.

But for small to extra large screen sizes,

the first one will occupy two columns,

the second will occupy five and the remaining will be

taken up by social media links here.

So for the third one,

I'm going to apply the class

as col-12 col-sm-4 here.

So col-12 col-sm-4, meaning that this will occupy

a separate set of 12 columns

stacked below the previous content for extra small screen sizes,

but for small to extra large it will occupy four columns.

So here we are four plus five,

nine plus two 11.

So one column is still leftover for small to extra large.

So that's how I'm going to apply that column closest to this.

Now, we still have the one below here where we contain the copyrights to this.

I'm going to apply the class as column auto,

meaning that this content will occupy

just enough columns as is required by the content there.

Later on you will see that I will position this content in the center of

the screen thereby using yet another bootstrap CSS class.

We'll come to that in the next exercise.

So with this we have applied various column classes to the header,

the content, and the footer.

This is a good time for us to save the changes and then go and take

a look at the updated indexed or HTML page.

Taking a look at our index.html page,

you'll notice how in the header which is the Jumbotron,

the content is now occupying just half of the screen there.

The other half of the screen of this particular row is now left empty.

Coming down to the content rows,

you see that the label on the left side occupying

three or four columns depending upon which screen size were using,

and the remaining being occupied by the rest of the content.

So here we have one row,

the second row, and the third row.

And then the footer here you can see that the links are on the left side,

the others in the middle,

and then the social media links on the right side.

So this is for a medium sized screen.

Now if you want to look at the same view for an extra small or small screen sizes,

if you're using Chrome,

then Chrome has the developer tools that you can

turn on by clicking on the view developer tools,

and when the developer tools come up,

you will notice, let me reduce the size here.

You will notice this small to windows there.

So clicking on that will turn on the responsive view for these sites there.

So you can see that in here the view of this same web page on a pixel to site,

which is 411 by 731 in portrait mode,

so which is corresponding to an extra small screen size,

so you can see how the content is laid out.

So you can see the Jumbotron content there

and then the remaining part of the content down below here.

And then down to the footer.

So in the footer you can see how the links and ad does have laid out side by side.

Now reducing the screen size so that we can see how that footer is laid out here.

So the remaining part, you have the links on the left side,

you have the address on the right side,

and then the social media links down below in a separate row here,

and then the copyright at the bottom there.

So this is the interesting view that we see for extra small screen sizes.

Getting back to our code here,

I'm going to now apply the order and offset classes to

this content in order to display the content in a slightly different manner.

So going to the content row here,

for the two divs here which contain the content,

I'm going to apply the classes as

order-sm-last for the first row here.

And then for that one down below here I will apply order sm first to the row down here.

So which means that when this content is displayed,

this content will be pulled to the left side of the screen and then

this column will be pushed to the right side of the screen.

So this will be ordered to the right side and this will be ordered to the left side.

As I explained about the order clauses in the previous lecture.

Similarly from the second row,

I'm going to leave it as such but from the third row I'm going to apply

the same set of order classes.

So I'm going to go to the third row here,

and then apply the order-sm-last to this one,

and then I will apply the order-sm-first to this one.

And so this one again will be reordered

such that this content will appear to

the left side and this content will appear to the right side.

This is just a way of positioning the content in a bit more interesting way.

Now moving down into the footer here,

now I'm going to apply an offset class here.

So notice that I have mentioned that these two columns will occupy four plus seven, 11.

So one column is leftover.

So I'm going to apply an offset-1 class to this one.

So which means that this content on this div will be pushed right by one column here.

Similarly since I said offset one,

this will be applied to extra small all the way up to the extra large screen sizes.

And so that is the use of the offset class.

So now that we have made the changes,

let's save the changes and then go and take a look at our web page in the browser.

Going back to that browser,

you now see how the header is as before,

but in the first content row,

you see that this content has been pushed to

the left side and the label to the right side.

The second row is different has being maintained just as before.

But for the third you'll see that this has been

pushed to the right and this has been pushed to the left.

So that is the use of the order-sm-last and order-sm-first class is there.

Now going to the footer,

you now see that the content in the first div here has been pushed right by one column,.

So you can see that there is one column of whitespace here,

and this isn't pushed right and the remaining ones have been formatted accordingly.

So with this we complete the changes

to our index.html page or additional page for this particular exercise.

With this we complete this particular exercise.

In this exercise we looked at the use of the container, row,

and column classes in order to design our web page a little bit nicer.

In the second part of the exercise which will follow this,

we're going to add more to try and improve the way these web pages are rendered.

It is still not to my satisfaction.

Obviously, there is still room for improvement.

This may be a good time for you to do a git comment with

the message Bootstrap Grid Part One.

探索我们的目录

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

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

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

通过 App Store 下载

通过 Google Play 获取