Explore
For Enterprise
Join for Free
Log In

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

瀏覽 Coursera 的全部課程

瀏覽
搜索
企業版
登錄
免費加入

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

Loading...

Front-End Web UI Frameworks and Tools: Bootstrap 4

香港科技大学

4.8（1,722 個評分） | 41K 名學生已註冊

課程 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,722 個評分）

5 stars
1,432 ratings
4 stars
244 ratings
3 stars
32 ratings
2 stars
7 ratings
1 star
7 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.

從本節課中

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

腳本

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.

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

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

通過 App Store 下載

通過 Google Play 獲取

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

社區
Learners
Partners
Developers
Beta Testers
Translators

連接
博客
Facebook
領英
Twitter
Instagram
YouTube
技術博客

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