Explore
For Enterprise
Join for Free
Log In

Гуманитарные науки и искусства
Бизнес
Компьютерные науки
Наука о данных
Информационные технологии
здоровье
Математика и логика
Личное развитие
Естественные и технические науки
Социальные науки
Изучение языков
Степени
Сертификаты

Полный обзор Coursera

Обзор
Поиск
Для организаций
Войти
Присоединиться бесплатно

Lecture 26, Part 2: The Bootstrap Grid System

Loading...

HTML, CSS, and Javascript for Web Developers

Университет Джонса Хопкинса

4.8 (оценок: 5,030) | Зарегистрировано учащихся: 180K

Курс 4 из 6 — Веб-разработка на Ruby on Rails Специализация

Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones. In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

Просмотреть программу курса

Получаемые навыки

Html, JavaScript, Css Frameworks, Cascading Style Sheets (CCS)

Рецензии

4.8 (оценок: 5,030)

5 stars
4,427 ratings
4 stars
509 ratings
3 stars
48 ratings
2 stars
23 ratings
1 star
23 ratings

JH

Jun 01, 2019

Very interesting and well presented. It's difficult to address all the different experience levels so some points were (to me) a bit laboured, but overall a useful, informative and enjoyable course.

FP

Jan 14, 2017

Excelent course with an excelent teacher. I just found this course kind of easy comparing to Ruby courses (interoduction, rails and mongodb). It could have more chalanging assignments.\n\n5 stars!!

Из урока

Introduction to CSS3

A lot of people "tinker" with CSS. In this module, we'll take you from the very basics of CSS3 to some fairly advanced concepts like floating and CSS rule conflict resolution. We'll go over the 'box model', background property, etc. We'll finish off the module with learning about Responsive Design using our own CSS code as well as start introducing Twitter Bootstrap with its essential Grid System.

Lecture 25, Part 1: Introduction to Twitter Bootstrap5:32

Lecture 25, Part 2: Introduction to Twitter Bootstrap7:50

Lecture 26, Part 1: The Bootstrap Grid System9:00

Lecture 26, Part 2: The Bootstrap Grid System9:50

Module 2 Wrap-Up0:38

Преподаватели

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science

Текст видео

[MUSIC]

Okay so here I am in Sublime Text and I'm looking at the file called

grid-before.html which is located in the examples Lecture26 folder.

And the first thing I'm going to do is I'm going to go ahead and

remove this HTML5 shim.

It's really only needed here as it says here for IE 8 support.

And we really want to drop by IE 8 support at this point.

It's such a minute number of people that actually are still using IE 8.

We're going to go ahead and just disregard that.

But other than that our file is a regular HTML starter file for a Bootstrap page.

It's got the CSS that we imported.

We have some custom styles imported as well and we have jQuery Bootstrap,

JS, and again the script.js which we might need further down the line.

Let's go ahead and examine our HTML.

It's very simple, I just got a bunch of divs, and I already kind of premade it so

we'll be able to follow the Bootstrap structure that it needs to have,

in order to have a Bootstrap grid system.

And it's got just three column, column one, column two, column three.

Let's go ahead and save that and

let's take a look as to what this looks like in the browser.

As you can see right now they're just behaving just like regular divs,

they're stacking one up on the other, column one, column two, column three.

So let's begin to build this out by first of all following the rule that we spoke

about is that, every grid system has to be inside a container class.

And in this case, we're going to go ahead and go with container fluid.

What that should do, is that should give us some padding on the side.

So if we go back to the browser and refresh,

you'll see that we got some padding here and it's actually 15px to be precise.

Next we need to place our columns inside a row class.

So we're going to say class and say row.

And once that's done we can go ahead and now specify a class for

each of one of our columns.

And in this case we'll go ahead and specify class equals to and

we'll say column and we'll do nd and let's say -4.

And when we do that, that will give us 4, 4 and 4, so three columns across.

Let's save that.

Let's go ahead and take a look at what we have in the browser.

We'll refresh.

And voila, we have three columns across.

Now, where did this gray and red border, gray inside and red border, come from?

Well, if we go back and we actually open up our css and look at the css >

styles.css, you'll see that actually just premade some styles for row.

I gave it margin 15px.

So between different rows that we're going to have, we have some spacing.

And row div, I basically gave it a red border and a background color of gray.

So that's where that's coming from.

So as you hopefully remember from the first part of the lecture is,

md is a sizing identifier that stands for some break point.

Let's go ahead and go to the browser, and go to getbootstrap.com, and

we'll go to CSS.

And we'll look at the grid system.

And scroll down and take a look at this table that they have here.

And it will tell you what md stands for, md stands for anything above 992px.

So according to this, it means that anything below this will cause our columns

to stack one up on each other.

So right now they're behaving like regular columns.

So if I open Chrome developer tools, as I squeeze the browser in the top

right corner we'll see how wide the browser is in pixels.

And I should be able to get to 992px wide for the screen

without anything collapsing or the columns not stacking one up on the other.

But the second I get to 991, which will be one less, so

that means the md style set of styles will no longer apply and

these columns will stack one up on the other.

So let's go ahead and do that.

So we are right now at 993, 92 and then we'll go to 91.

It becomes stacking one up on the other.

So hopefully, that kind of shows you what that md really means.

It means when the columns will start collapsing one up on the other.

So as I mentioned in part one,

that's only because there's no other styles really that are specified here.

However if we went ahead and specified a different style that will be in the range

that we spoke about which is below 992px, 991 and below.

So for that we'll say small, we'll make it six.

So if we make this six that means that column one will take half the screen.

Column two will take half the screen.

And since we're still in the same row, column three,

we'll go ahead and wrap to the next line.

And it will still take half the screen.

So let's go ahead and save that and go back to our browser.

We'll refresh.

And as we start squeezing the browser, when we get to less than 992,

what's going to happen is, is the first column is going to take half the screen,

the second column is going to take half the screen, and the third one will also

take half the screen but it will wrap itself on the next line.

However that's not the end of it.

If we go back to the documentation and take a look, this small that we

specified has a break point of 768px.

So which means that these columns will still collapse and

stack one up on the other If I squeeze the browser below 768px.

So let's go ahead and try to do that.

And we'll go back here, and 768, right

around here, 768, 67, and therefore, it starts collapsing.

So, the collapsing will still happen,

it will just happen at a different break point.

Okay so let's make the browser back up to the full screen.

So let's go back to our code.

And we'll go ahead and copy this whole row, and we'll paste it again.

And if we do that,

now we visually separate it, row number one from row number two.

So if we go back to the browser.

And refresh, remember I created some margin below the row.

So now you see exactly the same thing and as we squeeze the browser,

both sets of rows will behave exactly the same way.

So you can see the first set of rows is behaving, one two and

three on the second line.

And so is the second row behaving one two.

And the third column is on the line right below.

Okay, so there's one more variation that I should show you that you

should really have to pay attention to.

So, let's go back to the documentation and

let's take a look at this table one more time.

You could see that the grid behavior is a little bit different for

extra small, the col-xs versus the rest of them.

The grid behavior says here, it's going to be horizontal

at all times as opposed to the ones that are small, medium, or large.

They'll be collapsed to start and then will be horizontal above break point.

So, basically, they'll be stacking below these numbers but

anything above that, they will actually be horizontal and try to lay themselves out.

Which means that if you want to guarantee that there is always going to be

a particular layout, you could just specify it in the col-xs and it will stay.

No matter what the size of the screen, that's the layout that will stay.

Let's go ahead and go back to the code editor and test this out.

Let's scroll down a little bit here, and we'll copy this row right here and

we'll make another row just like that.

And what we'll do is we'll go ahead and remove, actually,

just about everything here.

And we'll say, column xs, extra small, and 6.

So now what we're saying is, is that we want the first column to take up

half the screen, the second to take up half the screen, and

the third to wrap around and take up half the screen.

But we want that to always happen.

In other words, we don't want it to collapse at any point or

do anything different at any point.

So, if we go back to the browser and, we'll go ahead and refresh this page.

You see that even above 1200px,

which that is what it is right now, it is still staying in this particular layout.

And if I squeeze the browser more and

more, it will continue staying in this layout.

So at a certain point even those columns will collapse because they're specified

as small.

So go back to our code editor, as you can see they're specified as small so

the second we go below the small breakpoint, this too will collapse.

However, since this is specified as xs that will never collapse.

It will always stay exactly the same.

So to summarize, we spoke about the structure that the Bootstrap expects for

the grid-based layout to work.

In other words, the grid needs to be inside of the container class or container

fluid class and also all columns must be inside an element with the row class.

We spoke about the Bootstrap grid system column classes and

the fact that they have a size identifier that identifies at which breakpoints

specified column spans will be ignored and then all elements will collapse.

In other words, the columns will start stacking one up on the other.

And as part of our demo we spoke about the fact that if no other rules apply,

specifying col-xs- will keep that layout no matter what size of the screen.

Next we're going to switch gears a little bit.

And we're going to get into a little bit more of a business/requirements analysis

and requirements gathering type of mode.

And I'll try to go over some basic ideas as to what to expect when you visit

with a real client.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2019 Все права защищены.

Загрузить из App Store

Загрузить в Google Play

Coursera
О проекте
Руководство
Карьера
Каталог
Сертификаты
Сертификаты MasterTrack™
Степени
Для организаций
Для правительственных организаций

Сообщество
Learners
Partners
Developers
Beta Testers
Translators

На связи
Блог
Facebook
LinkedIn
Twitter
Instagram
YouTube
Технический блог

Еще
Условия
Конфиденциальность
Помощь
Доступность
Пресса
Контакты
Справочник
Филиалы