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): Responsive Design and Bootstrap Grid System Part 2
Loading...
來自 The Hong Kong University of Science and Technology 的課程
Front-End Web UI Frameworks and Tools: Bootstrap 4
816 個評分
The Hong Kong University of Science and Technology
816 個評分
課程 1（共 4 門，Specialization Full-Stack Web Development with React）
從本節課中
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.
與講師見面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
We'll continue with the bootstrap grid exercise
that we started out in the previous exercise.
We're going to do a few more things to our index.html
page in order to improve its layout.
We're going to use some custom CSS classes and add some color
to our index.html page using custom CSS classes.
The next thing that I'm going to do is go down to the footer and for this UL here,
you'll notice that this list when you look at
our web page is displayed in the web page using this bulleted list here.
I'm not too happy with this bulleted list,
I want to remove these bullet points and then simply show them as only the links there.
So to do that, I'm going to use another list style called as
list- unstyled and apply that to that UL tag there.
Going back to our web page,
to this UL tag in the footer,
I'm going to apply the class as list-unstyled,
and this would remove those bullets in front of these links there.
Now, let me add a few custom CSS classes to the index.html page.
To do that, we will now create a folder here and name it as the CSS folder here.
Inside the CSS folder,
I'm going to create a new file and name the file as styles.css.
Now, inside the styles.css file,
I can now add some CSS classes in order to style our page.
Let me add some CSS classes here.
So, I would add my first class as row header.
So as the name implies,
this class I am applying to the header.
And then, I would apply the margin as
zero pixel auto and
then padding as zero pixel auto.
So, this is for the row header.
So, I'm going to have zero margin and zero padding for the row header.
And then for the row contents,
so I'm going to add one more CSS class called row-content.
And then for this, I will add margin zero pixel auto,
and then padding have it at 50 pixel,
zero pixel, 50 and zero pixel.
Then I'm going to add a border at
the bottom of my row here.
And then, the border I will give it one pixel and then call it a ridge.
And I will set the minimum height to be 400 pixel for the content here.
That way, my web page will look like more nicer on the screen.
Now this again, you have to try and
see until you are satisfied with the way the page is laid out.
Now also, I'm going to include
one more class called as the footer which as you might have already guessed,
I'm going to apply to the footer and I
will apply a background color to the footer as D1C4E9.
If you ask me how I selected the color,
I just looked up the color and then I was happy with that color.
You can choose any color you want to apply,
but this color seems to be good for me.
So, I added that color.
And for the padding, for the footer,
I would add 20 pixel and zero pixels.
Now, once I have added this styles to my CSS file,
let me apply the CSS file to the index.html page.
I'm going to index.html page.
Obviously, I need to use that CSS file inside my index.html page.
So right after the bootstrap CSS file,
I'm going to do a link and style sheet,
and this is style.css file there.
So that is where my CSS file is stored.
So, I'm going to include that into my index.html page.
Now, I am going to go into the body and apply the classes that I have just created.
So going to the header,
I will apply the row header class to the div in the header.
Then, for the content,
I would apply the row content classes to the rows there.
So, to the three rows in the content,
I apply the row content class and then going down to the footer,
to the footer tag,
I will apply the class footer here,
and then save the changes.
Let's go and have a look at that page now.
Going to your web page,
we're already beginning to see some interesting changes to the web page.
So, you can now see that the content in
the web page has been laid out a bit more cleaner.
That is the border bottom that we added to the row content,
so you can see that there is enough separation between the rows although
the contents of the rows are still positioned towards the top in the rows,
so you have these three rows and then look at the footer,
the footer now has acquired the background color that I applied,
and notice how the links are styled with the list-unstyled on the left side here.
We are not done yet, we got to do a few more changes to the index.html page,
and then come back and have a look at the final result of this exercise.
Going back to your Editor,
I'm going to add a few more CSS classes into my style structure,
it is a file, so I'm going to go in there and then add a class called Jumbotron.
So, you'll see that we have already applied the Jumbotron to our header there.
Now, if I add more properties to this Jumbotron class here,
this will be applied to the Jumbotron,
in addition to the standard default Jumbotron that bootstrap already includes.
I'm going to add in a few more things,
I'm going to add in a padding of
70 and 30 pixel on its surroundings,
and then a margin of zero pixel all around,
and I will set the background of this to 9575CD.
This is somewhat of a darker purple color which seems to go very well on the Jumbotron.
Again, by trial and error,
I selected that color,
and also the text color as floral white.
So for the Jumbotron,
we are going to apply those classes, and also,
I'm going to apply one more class to the address class.
We have an address in the footer,
so I'm going to change the font size of that to 80 percent,
a slightly smaller font than the normal font,
and the margin, I will give it a zero pixel,
and the color, I'm going to use zero F,
zero F, zero F,
and then save the changes.
So couple more CSS classes added,
switching back to index.html.
What I'm going to do now,
is to go to the content rows and then
I'm going to try and position this content in the middle,
vertically in that row.
This is where I'm going to take the help of
the vertical alignment that bootstrap grid supports through the Flexbox support.
To do that, I would say align-items-center,
so this is the other class that I need to add, align-items-center.
And I'm going to add that to the remaining two rows also,
align-items-center to the second and the third row,
and that should do a vertical justification of the content of the rows.
We'll see the result in a minute.
Going down to the footer.
In the footer, you see that we have used
the column auto for this copyright content there.
Now, I'm going to position this right in the middle horizontally
using that justify-content-center class,
so there is a justify content and a few other classes there.
I'm going to use to justify-content-center class for that.
That will essentially position that column in the center of the row there.
That applied to that, and then,
one little change that I'm going to do,
is to this inner div there,
I'm going to apply a class as text-center to that,
so that these links are centered on the screen.
With these changes, let's go and take a look at the web page,
at end of this exercise.
Going to our web page,
our web page is already starting to look even better now,
so you can now see that the Jumbotron is now styled with a new background color,
which is a little dark purple there,
and the lettering is now in floral white color,
little bit indented there,
then you can now see that the content in the content rows are now vertically centered,
for the three content rows.
This is the use of the align-items-center that we applied to the rows there.
Then going to the footer,
you can now see that this copyright is now justified to the center of the screen.
Look at how the links here have been centered.
I realized that I want to also position this vertically centering to this particular row,
so let's go and apply one more class to move this to
the center of this particular row vertically.
So to do that, going back to index.
html, in the footer for that particular column which contains those,
I will apply the class as align-self-center.
This should be applied to the div which uses the column class.
With this, that particular content will be aligned to the center of the row.
The remaining content will still remain at the top.
Let's take a final look at the footer.
Going to the footer in our web page,
you can now see how this has been positioned vertically in the center.
These two pieces of content are still aligned to the top of the row,
that is fine because that looks okay on in there,
but this one I have dragged it down vertically to the center of this particular row.
With this, we complete this exercise.
In this exercise, we saw the use of custom CSS classes,
and also used some of the classes for
justifying the content horizontally and vertically in our rows.
This is a good time for you to do a good comment with the message,
Bootstrap grid, part two.
