Скачать "Что такое сетка макета, практическое знакомство с Bootstrap | Практическая верстка 2018"

Обложка аудиозаписи

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

Предыдущее видео: Задаем имена областям css сетки в grid | CSS для Профи Следующее видео: Верстаем макет Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 2

Верстаем макет Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 2

Верстаем макет Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 2

Канал: Андрей Андриевский

Задаем имена областям css сетки в grid | CSS для Профи

Задаем имена областям css сетки в grid | CSS для Профи

Канал: Andrievskii Andreii

Grid и flex в одном документе | CSS для Профи

Grid и flex в одном документе | CSS для Профи

Канал: Андрей Андриевский

CSS Переменные, их применение | CSS для Профи

CSS Переменные, их применение | CSS для Профи

Канал: Андрей Андриевский

Верстаем адаптив для Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 5

Верстаем адаптив для Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 5

Канал: Andrievskii Andreii

Верстаем макет Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 1

Верстаем макет Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 1

Канал: Андрей Андриевский

Верстаем Footer Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 4

Верстаем Footer Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 4

Канал: Андрей Андриевский

Flexbox верстка | CSS для Профи

Flexbox верстка | CSS для Профи

Канал: Andrievskii Andreii

CSS сетка (GRID) | CSS для Профи

CSS сетка (GRID) | CSS для Профи

Канал: Андрей Андриевский

Верстаем блог MINIMO на Bootstrap 4 | Практика Bootstrap 4

Верстаем блог MINIMO на Bootstrap 4 | Практика Bootstrap 4

Канал: Андрей Андриевский

Верстка

HNML

HTML5

CSS

CSS3

Bootstrap

Bootstrap4

Bootstrap 4

row

col

col-sm

col-md

Class prefix

Grid options Bootstrap

container Bootstrap

верстка с нуля

курс верстки

download bootstrap

использование bootstrap

bootstrap для начинающих

bootstrap верстка

адаптивная верстка

адаптивная верстка bootsrtap

frontend

уроки frontend

бутстрап верстка

бутстрап

верстаем в бутстрап

знакомство с bootstrap

практика bootstrap

bootstrap уроки

bootstrap сетка

00:00:02

долгожданный момент когда мы приступаем

00:00:04

к записи серии

00:00:06

в плейлисте практической верстка и

00:00:09

сегодня у нас будет такой вот вводный

00:00:12

урок в котором я вас познакомлю с css

00:00:15

фреймворков bootstrap где расскажу для

00:00:18

чего нужен для чего был создан кто его

00:00:21

создал как применяется мы с вами

00:00:23

научимся его подключать к нашему макету

00:00:25

мы научимся понимать для чего и что там

00:00:28

написано и как он упрощает жизнь любому

00:00:30

из верстальщиков первое что я хочу

00:00:33

сказать что мы с вами ранее делали все

00:00:36

вручную то есть мы писали вручную всю

00:00:38

верстка то есть элементы позиционировали

00:00:41

размещали весь процесс верстки html и

00:00:45

css у нас была ручной никаких заготовок

00:00:48

не использовали то есть никакого года

00:00:49

кода нигде не брали то все вот поэтапно

00:00:52

you wear стали и это занимало какой-то процесс я

00:00:56

специально в прошлых сериях видео-урок

00:00:58

html css не затрагивал адаптивную

00:01:01

верстку так как мы ее будем затрагивать очень

00:01:03

плотно в этом курсе в этом плейлисте и

00:01:06

здесь вы уже наглядно на живых примерах

00:01:09

будете применять те вещи которые по сути

00:01:12

намного упростят вашу жизнь и помогут

00:01:14

вам верстать адаптивные страницы до

00:01:17

которые будут хорошо смотреться не

00:01:18

только на компьютерах но и на планшетах

00:01:21

и разных мобильных устройствах и не

00:01:23

только на мобильных

00:01:24

давайте начнем с bootstrap что это такое

00:01:27

для чего это было создано

00:01:28

значит в один там какой-то прекрасный

00:01:31

для нас верстальщика в день

00:01:33

разработчику twitter это реально правда

00:01:36

то не выдумано пришло в голову сесть и

00:01:38

сделать некие заготовки которые помогут

00:01:41

просто прописывать классы до

00:01:43

использовать какие-то названия элементов

00:01:46

страницы и уже исходя из этих классов и

00:01:49

названий элементов будет сразу

00:01:51

прикрепляться css свойства то есть будет

00:01:54

сразу тот функционал или тот вид

00:01:55

страницы который запланирован или

00:01:58

который должен там вести себя

00:02:00

соответственно так появились

00:02:01

определенные брик поинты до которые

00:02:04

можно проставлять

00:02:05

и на определенных

00:02:07

разрешениях экрана по своему будет вести

00:02:09

себя верстка где-то немножко сейчас

00:02:13

звучит для вас не понятно особенно для

00:02:14

тех кто никогда не работал с адаптивной

00:02:16

версткой кто не понимает что такое

00:02:18

медиазапросы кто не понимает что такое

00:02:20

сетка но мы сегодня вот как раз для того

00:02:24

и собрались чтобы так сказать расстаться

00:02:26

точки над i и уже последующих занятиях

00:02:28

со спокойной совестью приступить к

00:02:31

верстке и не путаться не теряться в каких-то

00:02:33

пониманиях знаниях и так далее итак что

00:02:37

такое сетка сетка это некое логическое

00:02:41

разбиение вашей страницы на определенные

00:02:43

участки колонки я бы сказал еще я для

00:02:47

примера здесь покажу вам два макета

00:02:49

которые случайно нашёл в интернете то

00:02:52

есть просто загуглил psd макет и

00:02:55

собственно у них уже есть какая-то сетка

00:02:57

давайте понаблюдаем вот на наш макет

00:03:00

значит если исходить из логики css

00:03:03

фреймворков быстрее особенно 3 серии

00:03:06

дано мы будем заниматься по 4 которая

00:03:08

совсем совсем недавно вышла и более

00:03:10

новое использует технологию flex верстки

00:03:13

о чем мы будем говорить уже в следующих

00:03:15

наших занятиях и в следующих

00:03:17

практических практическом занятий по

00:03:20

верстке но давайте обратимся сейчас вот

00:03:22

к этому макету которую меня открыто

00:03:24

фотошопе если смотреть на этот макет то

00:03:27

можно заметить некие такие вещи которые

00:03:29

изначально кажется неочевидными но после

00:03:32

того как я вам сейчас все объясню они

00:03:33

будут казаться довольно таки очевидные

00:03:35

понятны представьте что у вас всех

00:03:37

верстка делится на строки в каждой

00:03:41

строке есть определенное количество

00:03:42

колонок

00:03:43

итак представьте что вот у нас шапка это

00:03:46

одна строка далее вот вот эта часть это

00:03:49

вторая строка потом у нас здесь идет вот

00:03:53

третья строка чуть ниже вот четвертая

00:03:56

строка здесь тоже идет такая большая

00:03:59

широкая строка и соответственно в каждой

00:04:02

строке есть свое определенное количество

00:04:03

колонок

00:04:04

если посмотреть на навигацию верхней

00:04:07

части то условно ее можно разбить там на

00:04:09

четыре части то есть вот у нас первая

00:04:12

часть вот у нас вторая часть здесь 3 и

00:04:16

здесь 4

00:04:18

соответственно если мы будем

00:04:19

использовать сетку bootstrap который

00:04:21

состоит из 12 колонн ок то мы понимаем

00:04:24

что вот эту часть можно отметить для

00:04:27

себя как часть которая состоит из

00:04:29

четырех колонок вот эту часть тоже как

00:04:32

из четырех вот эту как из четырех и вот

00:04:34

эту как есть 4 причем не обязательно

00:04:36

делать их 4 штуки по точнее по 3

00:04:39

извините за минуточку атакуют сделал да

00:04:42

то есть у нас получается здесь везде по

00:04:45

три так как у нас 12 то соответственно

00:04:48

12 делим на 4 нас получается по три

00:04:51

колонки но необязательно нам все это

00:04:54

делает вот именно так тем более что мы

00:04:56

видим что здесь идет какой то разрез мы

00:04:58

можем сделать это чуть по другому и

00:05:00

соответственно применить примерно такую

00:05:03

разбивку здесь мы можем использовать

00:05:05

допустим вот такую часть или даже вот

00:05:08

такую часть да там половину а здесь у

00:05:12

нас будет находиться вторая половина или

00:05:14

там допустим здесь у нас будет схема

00:05:16

здесь будет 5 то есть это смотрим уже

00:05:19

логически по макету понимаем как у нас

00:05:22

что будет где размещаться и

00:05:23

соответственно так делаем еще как

00:05:26

вариант можно сделать все это в одну в

00:05:29

одну строку в которой будет одна колонка

00:05:32

то есть вот такая большая широкая

00:05:33

колонка которая будет занимать 12

00:05:36

колонок по bootstrap у

00:05:37

и соответственно здесь уже при помощи

00:05:40

позиционирования либо

00:05:41

флотом мы можем разбивать и

00:05:43

соответственно размещать на сканд наш

00:05:45

контент а как нам интересно если

00:05:48

опуститься чуть ниже и посмотреть на

00:05:50

элементы страницы вот в этой области то

00:05:53

мы четко наблюдаем здесь 4 колонки то

00:05:56

есть но здесь визуально понятно что их

00:05:58

четыре и как бы здесь этим никто не

00:06:00

поспорит

00:06:01

соответственно нас вот получается

00:06:03

большая строка в которой есть четыре

00:06:05

колонки каждому вот этому элементу мы

00:06:07

будем задавать значение равное 3 то есть

00:06:11

мы будем говорить что это равная трём

00:06:13

это равное трем это тоже 3 и этот трем в

00:06:16

сумме это все у нас получается 12 да

00:06:18

откуда взяли вот эти 12 и почему я

00:06:21

говорю равную 3 ум равна четырем здесь

00:06:23

равна 12 допустим вот это вот будет

00:06:26

часть все очень просто представьте что у

00:06:29

вас сейчас я возьму

00:06:31

есть вот фотошопе текст представьте что

00:06:35

у вас есть вот вся ширина страницы

00:06:38

это сто процентов так ну конечно это

00:06:41

было глупо вот здесь это делать итак у

00:06:45

вас есть вся ширина страницы

00:06:48

это сто процентов вот ваши сто процентов

00:06:51

соответственно мы всю страницу делим на

00:06:54

12 каких-то участка 2-6 на практике

00:06:57

прорисую чтобы было очень понятно

00:06:59

попытаюсь точно подогнать 12

00:07:09

вот я быстренько набросал такую как бы

00:07:12

сетку в которой 12 колонн значит

00:07:15

смотрите что у нас получается каждая вот

00:07:18

отсюда вот по эту часть этого на

00:07:20

стопроцентная ширина вот она эти сто

00:07:23

процентов соответственно каждая колонка

00:07:25

она равна чем у нас выходит очень

00:07:28

простая такая формула которое выглядит

00:07:31

примерно вот так вот сто процентов

00:07:33

поделить на 12 и мы получаем вот как раз

00:07:40

одну колонку да то есть

00:07:42

точнее не так то есть у нас получается

00:07:49

следующая запись что вся ширина это сто

00:07:53

процентов сетка делятся на 12 колонок

00:07:56

соответственно если 100 поделить на 12

00:07:58

это равно размеру одной колонке

00:08:01

давайте вот здесь и даже вот так вот

00:08:03

буду делать вот это у нас равно размер

00:08:07

вот допустим вот этой колонке 100

00:08:10

поделить на 12 умножить на 2 это равно

00:08:12

размеру двум колонкам соответственно вот

00:08:14

у нас две колонки вот эта нас равно двум

00:08:17

размером 100 поделить на 12 умножить на

00:08:19

3 это равно размер утром колонкам вот

00:08:22

этим трем и так до 12 то есть когда на

00:08:25

100 поделить на 12 умножить на 12 то это

00:08:28

равна вся вот эта ширина соответственно

00:08:30

появились такие записи которые в strappy

00:08:34

они выглядят вот примерно как как вот

00:08:37

так cool md1 или допустим кол

00:08:44

черточка md4 ну их много мдм s-mx и так

00:08:51

далее но суть в том что вот эта запись

00:08:54

она говорит что на определенном размере

00:08:57

экрана мы к этому ещё подойдем дальний в

00:09:00

дальнейшем в этом или следующем видео

00:09:03

вот на определенном размере экрана у нас

00:09:06

вот это класс он будет отвечать за то

00:09:08

что элемент который на странице будет

00:09:12

равен дров на одной колонке

00:09:14

если там будет кол md4 то соответственно

00:09:17

на определенном размеры устройства вот

00:09:19

этот класс будет отвечать за отображение

00:09:22

размером равным четырем колонкам это все

00:09:26

сейчас теоретически немножко запутанно и

00:09:28

сложно но когда мы начнем с вами это все

00:09:30

практиковать поверьте это будет намного

00:09:32

проще и соответственно как я и рисовал

00:09:35

ранее что у нас получается здесь вот это

00:09:38

вся ширина 12 колонок значит в каждую

00:09:41

отдельную строку часть нам приходится по

00:09:45

3 колонки и вот для примера вот нашел

00:09:53

такую картинку в интернете то есть

00:09:54

смотрите у нас есть допустим хедер

00:09:56

который означает что он состоит из 12

00:09:59

вот этих bootstrap а вских колонны чик

00:10:02

то здесь написано 12 здесь идет

00:10:05

навигация которая тоже состоит из 12

00:10:07

обладали его нас в контент уже поделен

00:10:09

на две части то есть article у нас

00:10:11

состоится с 8 частей а и сайт то есть

00:10:16

боковой своей бар состоит из четырех

00:10:18

частей всего примерно очень просто

00:10:21

доступно и наглядно понятно как

00:10:23

используется собственно вот эти

00:10:24

разбиения по колонкам

00:10:26

далее чтобы познакомиться с самим быстро

00:10:29

пам нам нужно перейти на сайт

00:10:31

get bootstrap вот собственно

00:10:38

подсказывает нам google и перейти на

00:10:40

него на это сайтик значит здесь мы

00:10:44

появляемся на главной странице bootstrap

00:10:47

и не нужно пугаться английского язык

00:10:49

английский язык вообще нужно учить он

00:10:51

вам пригодится в нише идти и здесь у нас

00:10:55

есть уже стабильная 4 весь версия

00:10:58

bootstrap значит что нам можно сделать

00:11:01

как можно вообще подключить bootstrap

00:11:03

для подключения быстров есть собственно

00:11:06

два или три даже варианта первый вариант

00:11:10

это просто взять и скачать собственно

00:11:12

сам bootstrap

00:11:13

и подключать уже конкретно стиле джаз

00:11:17

либо css то что вам нужно и использовать

00:11:20

своем макете

00:11:21

следующий способ это вот брать

00:11:24

копировать вот такие вот ссылочке и

00:11:26

вставлять себе их в html и

00:11:28

соответственно вы будете подгружать из

00:11:31

сервера bootstrap из седел где

00:11:33

размещается данные

00:11:34

bootstrap по себе на сайт то что вам

00:11:38

нужно

00:11:39

ну соответственно взять вот этот линки

00:11:41

вставить себе в макет очень просто

00:11:43

поэтому я пойду

00:11:44

чуть более сложным путем и заодно и

00:11:46

расскажешь чего состоит вообще сам

00:11:48

фреймворк bootstrap и что с ним можно

00:11:50

делать поэтому мы здесь нажимаем дом

00:11:52

блок ждем пока у нас загрузится

00:11:55

собственно все что мы здесь скачиваем

00:11:58

так точнее еще ничего не загрузилась

00:12:00

здесь нам нужно вот здесь назад комплект

00:12:03

с снг с

00:12:04

то есть скомпилированные css и и java

00:12:07

script и сохраняем это все дело себе на

00:12:10

компьютер и так после того как я скачал

00:12:14

и разархивировать в папочку занятием у

00:12:17

меня появилось две папки джесс и css

00:12:20

имидж и все остальное здесь было давайте

00:12:23

сейчас посмотрим что java script java

00:12:26

script находятся все библиотеки сжатом и

00:12:29

несжатом не скомпилируем виде так как мы

00:12:32

в этом в этой серии уроков не будем

00:12:34

затрагивать java скрипта только css

00:12:36

соответственно я сразу удаляю jar squid

00:12:38

его использовать не буду остается у нас

00:12:41

css style этом мой файлик который пустое

00:12:44

здесь ничего абсолютно нету давайте

00:12:47

посмотрим вот мой style.css он пустой

00:12:51

но давайте я вам сейчас покажу что есть

00:12:53

в других файликах значит если посмотреть

00:12:57

допустим на просто bootstrap давайте мы

00:13:01

его здесь откроем то мы видим очень

00:13:03

много много реально очень много если вот

00:13:05

посмотреть в эту часто здесь ну просто

00:13:07

огромное количество стилей которые так

00:13:10

или иначе отвечает за стилизацию

00:13:13

страницы то здесь мы видим такие

00:13:15

параметры как h1 a6 где заданы какие-то

00:13:18

уже свойства параграфом заданные

00:13:21

свойства с писком и так далее то есть но

00:13:24

чтобы это использовать нужно понимать

00:13:26

как это работает и для чего это нужно и

00:13:28

как она была написана соответственно

00:13:31

есть также здесь файлике и bootstrap

00:13:34

грит и bootstrap grids сми прижатые

00:13:37

файлике и reboot для сбрасывания

00:13:41

мы будем использовать только один файлик

00:13:43

и выбор у нас остается вот нам бы stripe

00:13:47

green

00:13:48

css то есть можно вот посмотреть как он

00:13:52

выглядит я сейчас вот его закинул здесь

00:13:56

вот прописаны как раз вот эти брик

00:13:58

поинты то есть медиазапросы

00:14:00

указанные ширины который мы будем

00:14:02

использовать и здесь написаны параметры

00:14:04

для этих самых брек поинтов и вот о чем

00:14:07

я говорил да колледже

00:14:09

s m xl м.д.

00:14:12

то есть дальше со всем этим нам

00:14:13

предстоит познакомиться но смотрите уже

00:14:16

все это есть написано и нам собственно

00:14:19

вот эти медиазапросы писать уже не нужно

00:14:21

будет значит чем отличие bootstrap grid

00:14:25

от bootstrap grid мин это идет

00:14:27

оптимизированный если посмотреть на

00:14:29

bootstrap grid то он занимает 7 килобайт

00:14:32

если нагреть минтон занимает 29 килобайт

00:14:35

можно оставить и не оптимизированы и

00:14:37

потом что-то там свое дописывать но я

00:14:39

всегда придерживаюсь правило что мы

00:14:41

нигде ничего не дописываем и

00:14:43

соответственно используем только сжатый

00:14:47

оптимизированный файлик так значит вот

00:14:50

это оставляем и сверху все это дело тоже

00:14:53

удаляем вот то есть у нас остается

00:14:56

быстро пред именем минимизированный то

00:14:59

есть он сжатой и остается наш файлик css

00:15:01

который мы будем работать это все что

00:15:04

нам нужно для работы и с чем мы будем

00:15:06

работать используя framework быстро

00:15:08

после того как мы все это дело скачали

00:15:11

себе и установили следующая задача нам

00:15:13

приступить к собственно знакомства das

00:15:17

boot с трапом и нам нужно перейти в

00:15:20

разделе chick getting started

00:15:23

и здесь у нас есть вот старт template

00:15:26

то есть это некая такая заготовочка

00:15:28

которая показывает как как можно

00:15:31

приступать из чего можно приступать уже

00:15:34

для работы в нашем html

00:15:36

пока что все скопирую вот отсюда в наш

00:15:39

html чик и подключи туда все эти стили

00:15:44

значит лишнее мы сейчас отсюда будем

00:15:46

чистить

00:15:47

смотрите здесь как раз вот подключены

00:15:50

css стили с внешнего источника то есть с

00:15:53

сервера bootstrap мы этого использовать

00:15:56

не будем поэтому мы здесь

00:15:58

вот до хлев значит даже вот так мы

00:16:02

сейчас делаем это удаляем и

00:16:06

путь у нас соответственно будет нашу

00:16:09

папочку стилей а наша папочка стиле это

00:16:12

css слеш и далее нам нужно скопировать

00:16:15

название вот этого стиля

00:16:19

давайте мы его скопируем и сюда ставим .

00:16:23

css аналогично нам нужно подключить и в

00:16:26

корее стиле которые наши персональные в

00:16:29

которых мы будем что-то править что-то

00:16:32

вносить и они у нас называется style.css

00:16:36

вот подключили мы bootstrap узкие стиле

00:16:40

подключили свои стили так давайте еще

00:16:43

поездки что здесь на шапке написано

00:16:45

значит charset f8 это чтобы котировка не

00:16:48

слетала а вот me the name гепард content

00:16:53

with девайсов и не сыскал равна 1 если

00:16:57

вообще по-простому говорить то здесь

00:16:58

написано что ширина контента страницы

00:17:02

она всегда будет соотношение ширины

00:17:04

сайта но всегда будет равняться к ширине

00:17:06

просматриваем форшмак press просмотров

00:17:09

устройство или девайса то есть если вы

00:17:12

условно работаете с планшета то ширина

00:17:15

контента должна приравниваться к ширине

00:17:17

экрана как на планшете если вы работаете

00:17:20

с пока то ширина приравниваться к кпк

00:17:22

если вы работаете с телефона то

00:17:24

соответственно ширина будет

00:17:25

приравниваться к размерам телефона а

00:17:28

скал один это говорит о масштабировании

00:17:30

что она стоит стопроцентная то есть оно

00:17:33

равно единице то есть размеры не будет

00:17:35

ни увеличиваться и не уменьшаться

00:17:37

независимо на каких размерах и экранах

00:17:39

вы будете просматривать вашу горстку

00:17:41

также здесь у нас вот это все что за час

00:17:44

критон связано но мне нужно мы когда

00:17:46

будем работать скриптами тогда я

00:17:48

расскажу что и откуда брать и подключать

00:17:50

и у нас остается вот такой вот голые

00:17:52

шаблон который можно сохранить

00:17:54

перейти соответственно в наш браузер и

00:17:57

посмотреть так вот это мы можем удалить

00:18:00

посмотри что у нас здесь ну собственно

00:18:01

вот нас хелоу word здесь тайтлы есть все

00:18:05

то что в нашем html и в сексе есть носа

00:18:09

сессии пока что пусть пуста

00:18:11

давайте теперь знакомиться с сеткой

00:18:13

bootstrap а переходим на сайт strap

00:18:15

здесь нажимаем документации и далее

00:18:18

переходим play out так первое что с чем

00:18:23

нам стоит познакомиться это как

00:18:24

собственно работают контейнеры или

00:18:26

область

00:18:27

верстки или область размещения вашего на

00:18:29

пол контента содержимого страницы

00:18:32

она бывает двух типов значит бывает

00:18:34

фиксированной ширины когда у вас есть

00:18:36

контейнер который всегда будет

00:18:38

находиться по центру страницы

00:18:40

а по бокам будет какой-то прозрачный фон

00:18:42

также есть контейнеры которая занимает

00:18:44

всю ширину и собственно

00:18:46

в зависимости от того как вы хотите

00:18:48

чтобы ваш контейнер работал либо на всю

00:18:50

ширину либо на ширину

00:18:52

какую-то фиксированную вам нужно

00:18:54

прописывать определенный тип класса ну

00:18:57

давайте сразу это на практике будем

00:18:58

закреплять иначе теория без практики она

00:19:00

мертва и польза от этого не будет

00:19:02

никакой никому значит сразу мы здесь

00:19:05

напишем def в этом деле зададим какой-то

00:19:08

класс к примеру у нас будет класс контейнер

00:19:13

контейнер и соответственно мы сразу же

00:19:16

закроем этот div так вот только вот не

00:19:19

нужно здесь вот так вот делать вот

00:19:23

закрываем div внутри дива мы разметим

00:19:26

еще какой-то div с классом класс сам

00:19:32

бокс тоже его закроем вот и теперь

00:19:37

давайте пройдем наши стили и здесь для

00:19:39

этого класса бокс мы пропишем

00:19:42

что то такое да где у него будет скажем

00:19:48

так minheight

00:19:50

только не with a height то есть нам

00:19:53

высота нужно так минимальная высота у

00:19:57

него будет 200 пикселей и зададим ему

00:20:04

какой-то фон background допустим

00:20:08

черный у него будет фон

00:20:12

m черный фон а давайте сохранимся

00:20:17

перейдем наш браузер здесь обновим

00:20:19

страницу это такой черный то я что-то

00:20:22

там напутал походу в стилях где мои

00:20:25

стиле а но конечно девятка но неважно

00:20:29

здесь важно следующее смотрите браузер

00:20:32

меня как бы имеет ширину то есть ширина

00:20:36

движется да мы видим что я могу двигать

00:20:39

браузер и сам контейнер он видите как бы

00:20:42

до смещается но всегда находится четко

00:20:44

по центру вспомните как мы добивались в

00:20:46

прошлых занятиях где мы проходили курс

00:20:49

html css мы это делали при помощи марджи

00:20:52

на то есть мы задавали к это

00:20:54

фиксированную ширину и говорили margin 0

00:20:56

авто соответственно по бокам здесь отступа

00:20:58

были автоматически так вот это и есть

00:21:00

вот это свойство контейнер заметьте я

00:21:03

никаких cisa стилей не пишу да я не

00:21:05

говорю что выравнивается по центру что

00:21:07

по бокам было свободное пространство я всего

00:21:09

этого не пишу то есть идет уже

00:21:11

экономия я все что нужно мне было

00:21:13

прописать это класс контейнер ну и

00:21:16

какие-то там свойства для бокс чтобы

00:21:18

визуально вам показать теперь смотрите я

00:21:20

здесь поменяю вот это значение на

00:21:23

свойства которые нам предлагает

00:21:25

bootstrap на класс и этот класс

00:21:28

контейнер fluid ну кто знает английский

00:21:30

тот поймет что здесь имеется на всю

00:21:33

ширину до то есть по всей ширине

00:21:35

сохранимся так не будем мы сейчас ничего

00:21:38

донатить обновляем страницу и

00:21:40

соответственно наблюдаем что у нас

00:21:42

абсолютно на всю страницу на как бы я не

00:21:44

двигал у нас на всю ширину но

00:21:47

соответственно есть отступ и здесь без

00:21:48

этого никак если мы исследуем элемент то

00:21:52

мы увидим что у нашего

00:21:53

так даже не так вот здесь вот у нашего

00:21:59

блока класс контейнер fluid есть

00:22:01

определенные по денги морщинки которые

00:22:03

собственно эти параметры и задают то

00:22:05

есть если мы сейчас вот так вот сделаем

00:22:07

то получим абсолютно стопроцентную

00:22:10

ширину но и в боди тоже нужно это все

00:22:12

дело убирать если она есть то есть мы

00:22:14

это все можем наблюдать до

00:22:16

соответственно мы понимаем что теперь у

00:22:19

нас есть возможность задавать как

00:22:21

фиксированный контейнер по ширине так и

00:22:24

задавать контейнер

00:22:25

free with который будет растягивать

00:22:27

контент на всю ширину стране перед тем

00:22:30

как мы продолжим я хочу вам показать

00:22:32

маленькую такую фишечку

00:22:33

по поводу сабой мадофф которыми я верста

00:22:37

и вы наверное заметили что с обоими

00:22:38

работаю значит смотрите нажимаем

00:22:40

сочетание контур shift п либо же у кого

00:22:45

контур shift по либо у кого не сам

00:22:48

macbook не windows и mac туна команд

00:22:50

shift в

00:22:51

и попадаем вот в такую панель здесь нам

00:22:53

нужно написать

00:22:54

инст такой вот сокращение инст и выбрать

00:22:58

здесь пекарь control install-package

00:23:00

выбираем и здесь нам нужно найти

00:23:03

bootstrap пишем будут и в известность вы

00:23:07

высвечивается то есть специальные

00:23:09

плагины по bootstrap и значит смотрите

00:23:11

нам нужно выбрать под strap 4 авто

00:23:15

комплит после того как вы выбрали у вас

00:23:17

будет установлен авто комплит для того

00:23:21

чтобы заполнять до заполнять ваши

00:23:23

параметры

00:23:24

когда вы верстается то есть к примеру я

00:23:27

заставлю черточку

00:23:28

даже нет не так вот я пишу контейнер и

00:23:33

вот здесь наблюдая сразу вот подсказка

00:23:36

контейнер fluid видите заметьте раньше

00:23:39

такого не было и вот здесь bootstrap 4 у

00:23:41

вас очень много будет подсказок и всего

00:23:44

того что поддерживает bootstrap вот те

00:23:47

свойства которые мы никогда с вами не

00:23:49

проходили на предыдущих занятиях

00:23:50

но которые вам пригодятся в будущем и

00:23:53

которым с которыми будем знакомиться и

00:23:54

которые уже есть в шиты собственно в

00:23:57

bootstrap и и в они теперь появляются

00:23:59

вас с обоими как подсказка единстве

00:24:02

нужно проделать тот путь который я вам

00:24:04

только что показал давайте знакомиться

00:24:07

дальше с bootstrap и перейдем мы с вами

00:24:09

теперь в игре нажимаем grid и здесь я

00:24:12

хочу немножко так кратце вкратце

00:24:14

пройтись по примером для того чтобы вы

00:24:17

понимали для чего и как это работает и

00:24:20

как мы это будем применять самое главное

00:24:22

как мы будем применять

00:24:23

возможно там понимание этого всего

00:24:25

придет не сразу у меня в свое время это

00:24:27

довольно-таки длительный процесс заняла

00:24:30

и чем больше практиковался чем больше

00:24:32

мир стал при помощи bootstrap тем больше

00:24:34

у меня как бы приходило понимание

00:24:35

соответственно давайте и сейчас

00:24:38

от отец а не от того что вы все это поняли

00:24:40

а от того чтобы вы нашли применение

00:24:43

всему этому и поняли насколько это

00:24:44

упрощает упрощает вашу жизнь

00:24:46

смотрите верху вот с примера это вот три

00:24:50

блока такие они не важно какой ширины но

00:24:53

они идут друг за другом и в одну линию

00:24:55

размещены так вот чтобы вот таких

00:24:57

сверстать нам достаточно вот посмотреть

00:24:59

на вот этот пример как он сделан и

00:25:01

соответственно мы получим точно такие же

00:25:04

блоки и соответственно у нас будет точно

00:25:07

такой же эффект

00:25:08

давайте это дело скопирую так это мы

00:25:10

будем размещать внутри контейнера сейчас

00:25:14

мы все это дело под корректируем а но

00:25:19

даже и немножко не так скопировал и

00:25:22

соответственно вот так вот нужно это

00:25:25

скопировать

00:25:26

так у нас есть здесь строка сделаем вот

00:25:31

так вот а теперь у нас есть все это вся

00:25:34

красота у нас присутствует значит у нас

00:25:36

есть виде с классом контейнер далее у

00:25:38

нас идет строка помните я говорил что

00:25:40

все содержимое у нас находится в строках

00:25:42

то есть начали идут строки их может быть

00:25:45

много до могут быть разные высоты строки

00:25:48

а внутри едет при помощи колонок

00:25:50

содержимое то есть он может быть одна

00:25:52

колонка на всю строку может быть

00:25:54

допустим несколько колонок

00:25:56

вот допустим примерно вот такой может

00:25:58

содержимым быть вот здесь у нас три

00:26:01

колонки они имеют разные там величины

00:26:03

соответственно здесь у нас идет одна

00:26:05

строка в которой колонка есть потом идет

00:26:08

еще одна колонка и еще одна колонка

00:26:11

его здесь строка у нас замыкается то

00:26:13

есть в одной строке мы размещаем 3 дива

00:26:16

и здесь как раз мы прописываем вот эти

00:26:18

кол с.м. давайте вернёмся к нашему

00:26:21

макету и поймем что давайте начали

00:26:24

сохраним посмотрим что это нам даст и

00:26:25

тогда будем уже разбирать почему так

00:26:27

произошло так ну единственно конечно не

00:26:32

хватает здесь какой-то стилевое обертки

00:26:34

давайте я сейчас добавлю эту стилевую

00:26:36

оберточка потому что без нее как то у

00:26:38

нас все плохо васенька смотрится так это

00:26:41

у нас дивы и давайте для де в мы вот

00:26:46

вместо боксом и здесь

00:26:47

пропишем div div ну пускай будет

00:26:53

минимальна как эта высота сохранимся

00:26:56

обновляем конечно отступов нету и в этом

00:26:59

проблема потому что мы все уступы убрали

00:27:01

тогда скорее всего мы приступим по

00:27:05

другому но соответственно мы наблюдаем

00:27:07

вот я зашел в стиле только границу

00:27:10

прописал border один пиксель можно еще

00:27:13

прописать здесь padding который будет у

00:27:16

нас допустим 10 пикселей чтобы было это

00:27:18

четко красивее

00:27:20

обновляемся и наблюдаем вот такую

00:27:22

картину что у нас здесь есть но только у

00:27:25

нас есть много диву то соответственно

00:27:26

все они получили какие-то границы но

00:27:30

суть в том что у нас есть вот один тип

00:27:32

второе третье и они вот занимают ровно

00:27:35

день делятся в трех колонн очках красиво

00:27:38

да то есть и соответственно если мы

00:27:40

сейчас будем брать и двигать наш окно

00:27:44

нашего браузера то соответственно

00:27:46

получаем уже некую адаптивность почему

00:27:49

некую потому что смотрите как только мы

00:27:51

доходим до состояния где невозможно

00:27:54

читать уже они у нас перестроиться друг

00:27:56

подруга чтобы это сделать без помощи

00:28:00

bootstrap нам пришлось бы очень много

00:28:02

писать стилей медиа запросов но все это

00:28:05

решило запись вот кол с.м. если мы здесь

00:28:08

sm поменяем на md

00:28:11

давайте здесь md пропишу заметьте я не

00:28:15

указывал точнее они здесь в примере не

00:28:17

указывали количество колонок

00:28:21

то есть здесь нету голым в этом 4 да они

00:28:24

просто написали календы и это обозначает

00:28:26

что колонки будут в одной полосе но в

00:28:30

ширина их будет варьироваться от

00:28:31

содержимого

00:28:33

так давайте обновимся особо ничего не

00:28:36

поменялось но сотрите как только я

00:28:38

дохожу до чуть меньшего чуть меньше

00:28:41

ширины соответственно все перестраиваться то

00:28:43

есть если мы пишем м с то это вот где то

00:28:47

вот здесь бы начало перестроиться вот на

00:28:49

этой позиции когда я пишу

00:28:51

мдк перестройка у нас идет уже по сути

00:28:53

на планшете то есть на планшете мы

00:28:55

получаем уже вот такой вид как будет

00:28:57

какой бы получили на телефоне

00:28:59

вот такой простой пример но давайте

00:29:03

опустимся ниже и немножко подробнее

00:29:05

разберем весь этот пример значит если

00:29:08

пролистать ниже от примера который

00:29:10

предоставляет разработчики bootstrap мы

00:29:12

видим следующую к таблицам таблица

00:29:15

называется

00:29:16

опции сетки датой с или glide absence

00:29:19

значит что в этой сетки можно для себя

00:29:22

интересного почерпнуть первое что чем мы

00:29:26

уже работали это вот такая запись call

00:29:28

черточка и здесь можно указывать какое

00:29:30

то какой то цифры по это значение и

00:29:32

соответственно это будет как

00:29:35

автоматически работать то есть ну нету

00:29:37

ни какой ширины она работает

00:29:38

автоматически от содержимого контента то

00:29:40

есть если мы здесь указываем прописи сэм

00:29:44

то соответственно это все будет дело

00:29:45

работать до 500 точнее от 576 пикселей

00:29:49

то есть мы видим знак больше равно

00:29:52

и соответственно это все дело включается

00:29:54

в нас только тогда когда у нас 540

00:29:56

пикселей

00:29:58

как это на практике применяется как это

00:30:01

работает соответственно смотрите если я здесь вот

00:30:04

в нашем макете напишу с мсм то мы вернем

00:30:09

то что и была по сути у нас здесь и

00:30:11

самки бились с примера так сны давайте

00:30:17

сделаем не 3 o 4

00:30:19

так я сейчас возьму вот еще одна

00:30:22

скопирую и вставлю сюда же вот теперь у

00:30:26

нас четыре колонки будет и давайте

00:30:28

посмотрим что у нас получается но вот

00:30:30

собственно 4 колонки и как только я

00:30:32

достигну

00:30:33

размера экрана в 576 пикселей и меньше

00:30:38

то соответственно у нас перейдет перри

00:30:42

распределение вот оно здесь это

00:30:44

перераспределение происходит и колонки

00:30:47

уходят друг под друга то есть они

00:30:49

становятся друг подружкой чтобы

00:30:54

удостовериться что я вас не обманываю

00:30:56

давайте здесь сделаем следующее

00:30:58

и когда мы начинаем двигать мы здесь

00:31:01

наблюдаем вот в этом месте шириной

00:31:03

экрана и смотрите как только у нас

00:31:06

доходит ширина до 570 там чем-то

00:31:11

пикселей

00:31:12

все нас идет перестройка 578 все идет

00:31:16

перестройка сейчас вернемся посмотрим

00:31:20

576 то есть смотрите вот 500 577 еще все

00:31:28

нормально и уже на следующем пиксель и

00:31:31

вот у нас все дела перестраиваться я

00:31:36

надеюсь что этот момент он вам понятен

00:31:38

то есть как работает система как только

00:31:41

мы прописываем класс sm то

00:31:43

соответственно при разрешении 576

00:31:46

пикселей и меньше у нас идет перестройка

00:31:49

под мобильный вид блоков то есть они

00:31:51

становятся банально друг под другом если

00:31:54

мы допустим напишем md то перестройка

00:31:56

такая будет происходить уже после 700 68

00:32:00

пикселей ну вот нас вот это вот

00:32:02

называется брэйк поинты то есть вот эти

00:32:04

вот меточки это кабрик понты

00:32:07

каждому брик пойнту мы можем привязывать

00:32:09

определенные параметры и задавать их

00:32:11

определенным элементом на странице и это

00:32:14

очень удобно и еще смотрите если я даже

00:32:16

сейчас поменяю вот здесь у нас 4 они всю

00:32:22

ширину снимают я могу больше сделать я

00:32:24

могу сделать их не 4 скажем так вот a6

00:32:34

вот теперь их 6 и я не все равно будет

00:32:36

равномерно разделяться на всю ширину и

00:32:40

это выглядит красиво и так же они будут

00:32:42

все схлопываться и друг подруга

00:32:44

становиться уже на телефоне

00:32:46

то есть мы получаем адаптивность при

00:32:49

этом не заморачиваясь какие стили

00:32:51

прописывают какие медиазапросы задавать

00:32:53

все это за нас делает собственно css

00:32:56

файлы которые мы подключили

00:32:57

вот здесь bootstrap grid мин css и еще

00:33:02

такой момент даже если я сейчас здесь

00:33:04

допишу fluid вот он подсказывает

00:33:09

сохранюсь система будет работать

00:33:11

аналогично только теперь она на всю

00:33:13

ширину растягиваются но работает все

00:33:16

аналогично то есть это применяется как

00:33:20

сжатой области контента таки контента

00:33:23

который будет находиться строгом

00:33:25

контейнере то есть с выравниванием по

00:33:27

центру теперь хочу ваше внимание

00:33:31

обратить на следующую вещь смотрите у

00:33:35

нас есть записи которые идут с м при

00:33:39

ставочка да так называемые префиксы м д

00:33:41

л д и excel соответственно это

00:33:45

сокращение от название которые идут в

00:33:47

заглавии колонна к extra large это excel

00:33:50

то есть все что идет больше 1200

00:33:52

пикселей ларч это все что идет от 1200

00:33:56

до 900 92 пикселей ну соответственно

00:33:59

здесь как бы всё логично и понятно по

00:34:01

таблице я думаю как бы базовая

00:34:03

математика у всех присутствует но

00:34:04

смотрите как работает bootstrap значит

00:34:07

сетка bootstrap она работает по методике

00:34:11

вёрст верстки first мобайл что такое

00:34:14

фёст мобайл это когда верстается в

00:34:16

начале все под мобильные устройства и

00:34:18

только потом верстается планшет и п.к.

00:34:20

то есть сайт делается минималистичным

00:34:23

под мобильные устройства дизайн

00:34:25

прорисовывается и по мере увеличения

00:34:26

экрана на сайт могут добавляться

00:34:29

какой-то функционал который на телефоне

00:34:31

либо неуместен либо он там лещине и то

00:34:34

же самое касается и блоков и всего

00:34:36

остального до например вот мобильное

00:34:38

меню больше никогда на мобильном

00:34:40

телефоне не увидите меню такое как

00:34:41

увидите на сайте она появляется только

00:34:43

на десктопе широкое такое бы

00:34:46

шо я до с какими-то картинками на

00:34:48

телефоне это просто какая то кнопочка

00:34:49

которую вы кликаете вас появляется

00:34:51

дополнительный элемент странице такой

00:34:53

выпадающий выезжающая штука и так далее

00:34:56

соответственно есть и прослеживают

00:34:58

логику мобайл first то соответственно

00:35:00

все параметры в bootstrap и они

00:35:03

начинаются с показательным мобильных что

00:35:07

это такое как это понять на практике

00:35:08

давайте сейчас

00:35:09

к нашему примеру вернемся смотрите у нас

00:35:12

с 6 картинок

00:35:13

6 картинок и они отображаются все

00:35:17

одинаково пространства занимает и как бы

00:35:19

мы не двигали наш ползунок только на

00:35:22

мобильной версии они как бы будет

00:35:24

схлопываться друг под друга но если я

00:35:27

сейчас пойду в наш html и здесь пропишу

00:35:31

допустим следующее что я хочу допустим

00:35:34

чтобы каждая из этих картинок занимало у

00:35:36

меня по 6 так давайте сейчас вот так вот

00:35:41

сделаю чтобы быстрее было вот и я напишу

00:35:46

что каждая из них будет занимать у меня

00:35:47

шесть строк но давайте вернемся вот сюда

00:35:51

и поймем что всего строк 12 до вспомним

00:35:57

что в быстро по всего 12 строк то есть

00:35:59

12 колонок вот всего колонны 12

00:36:02

соответственно мы понимаем что если

00:36:04

указываю 6 это будет половина нашего

00:36:07

размера то есть я сейчас

00:36:09

другими словами сказал что вот каждая из

00:36:11

этих ячеек теперь занимает не какое-то

00:36:14

там случайное количество пространства

00:36:15

лишь бы вот в эту строку поместится а

00:36:18

она занимает четко половину вот этого

00:36:21

пространства то есть задал уже как бы

00:36:23

фиксированное расширение которое состоит

00:36:25

из 6 строчек даст части колонок не

00:36:28

давайте обновимся видим что вышло а

00:36:30

вышло следующее что теперь они стали вот

00:36:33

в такой ряд но в чем подвох подвох здесь

00:36:37

даже не подвоха в чем как бы логика

00:36:38

bootstrap в том что я прописал это для

00:36:41

маленьких устройств

00:36:42

вот смотрите я написал что если размер

00:36:44

будет меньше 576 пикселей это только

00:36:47

тогда они станут по 6 то есть вот с.м.

00:36:50

но так как наследование работает от

00:36:53

меньшего к большому то соответственно по

00:36:55

6 они будут абсолютно везде и на больших

00:36:58

экранах и на маленькие

00:36:59

и везде и даже если я сейчас вот буду

00:37:02

уменьшать то меня все равно будет по 6

00:37:04

только пока не дойдет до самого мелкого

00:37:06

размера то есть вот до этого только

00:37:09

здесь они схлопываться друг подруга

00:37:12

вы спустя что же делать если я хочу

00:37:14

допустим там на планшете чтобы были не

00:37:18

по 6 а не в два рядочка так как вот

00:37:21

здесь а чтобы допустим по три шли все

00:37:24

очень просто мы здесь дописываем давайте

00:37:26

здесь поставлю вот такие

00:37:29

кстати вот как я это делаю я просто

00:37:31

зажимаю контур и выделяю места которые

00:37:35

мне еще нужны для работы здесь пишем кол

00:37:38

черточка здесь уже пишем md и пишем 4

00:37:44

соответственно что я здесь написал

00:37:46

я написал что вот на этих разрешениях

00:37:49

экрана то есть все что идет от 706 10 8

00:37:54

пикселей до девятьсот девяносто два

00:37:56

пикселя у нас она будет идти по три

00:38:00

колонки занимают по три строки сама о

00:38:02

bootstrap и почему по три потому что я

00:38:04

здесь указал 4 соответственно 12 на 4

00:38:07

это получается три колонки

00:38:08

давайте сохранимся перейдем наш браузер

00:38:14

обновляемся и наблюдаем вот такую

00:38:17

картину и как бы я не растягивал сейчас

00:38:19

браузер это будет это будет работать для

00:38:22

всех больших размеров потому что идет

00:38:24

наследование соответственно если я

00:38:26

сейчас начну ужимать то вот на каком то

00:38:29

определенном размере

00:38:31

у меня вот они становятся уже вот в

00:38:34

таком виде то есть в две колонки

00:38:36

перестраиваются еще меньше они друг

00:38:38

подруга вот так вот наглядно мы с вами уже

00:38:41

проделали адаптивную верстку

00:38:43

соответственно вот это уже похоже на

00:38:46

адаптивную верстку да вот мы видим как

00:38:48

при изменении экрана у нас все красиво

00:38:51

меняется и схлопывается я понимаю что

00:38:55

это все очень трудно осознать и усвоить

00:38:58

но это все дело будет приходить с

00:38:59

практикой и я думаю что в процессе нам

00:39:02

все легче и легче будет это понимать и

00:39:04

легче будет верстать здесь главное

00:39:07

понимать что что если мы прописываем

00:39:09

какие-то свойства используя префикс sm

00:39:12

то это все будет 1

00:39:13

по сравняться выше на все другие

00:39:15

разрешения экранов если допустим мы

00:39:17

хотим чтобы на каком-то размере экрана у

00:39:20

нас себя вело по другому там устройство

00:39:22

то соответственно мы копируем этот

00:39:23

prefix записываем его класс заметьте это

00:39:27

все классы да это готовые классы которым

00:39:29

уже в нашем быстро пи прописаны свойства

00:39:32

и применяем вот эти самые значения

00:39:35

но чтобы так сказать подвести итоги и

00:39:38

укрепить тему я еще здесь пропишу

00:39:41

свойства для супер больших экранов это у

00:39:44

нас будет

00:39:45

кол черточка xs xl точнее увидите

00:39:51

подсказывает сразу excel и здесь я

00:39:54

поставлю два

00:39:55

то есть что это значит что на больших

00:39:58

разрешениях экрана у нас каждая

00:40:01

каждый блок будет занимать ровно две

00:40:03

строки

00:40:05

вот сетки bootstrap и соответственно

00:40:08

давайте обновляемся и что я вижу что

00:40:10

здесь они в один ряд

00:40:11

потому что их 6 сетка из 12 строк

00:40:15

соответственно каждое занимаешься с две

00:40:17

строки и как только я начну сжимать это

00:40:20

все дела на какой-то момент они

00:40:21

перестроятся вот так вот еще на какой-то

00:40:24

момент они вот так вот перестроиться и

00:40:26

на телефон они перестраивается вот так

00:40:29

то есть вот здесь уже совершенно

00:40:31

адаптивный блок который мы абсолютно

00:40:34

можем спокойно заверстать

00:40:35

в том моменте где у нас вдруг надо будет

00:40:38

шесть элементов в одну строку применить

00:40:41

я надеюсь что хотя бы теоретически вы

00:40:45

поняли что теперь намного проще строят

00:40:48

адаптивную верстку намного проще

00:40:50

работать с перестроением

00:40:53

элементов заметь я никаких флотов не

00:40:55

использую никаких клэр сликсов

00:40:57

позиционирование и так далее не было

00:40:59

применено на странице все делается

00:41:02

абсолютно классами прописанными заранее

00:41:05

в css ремарки

00:41:07

bootstrap на сегодня это будет все и не

00:41:09

хочу перегружать вас информации в

00:41:12

следующем уроке мы более детально

00:41:13

углубимся в bootstrap дам вам домашнее

00:41:17

задание который будет состоять из

00:41:19

простой верстке и подгона под адаптив

00:41:22

нескольких строк в которые будет

00:41:24

состоять с разных элементов и будет дома

00:41:26

обязательно потренируйтесь подделать и если вдруг

00:41:28

что не получается не паникуйте

00:41:30

отложите продолжите на следующем занятии

00:41:32

и когда в вас более будет глубокое

00:41:35

понимание тогда соответственно вы все

00:41:37

это дело я и закончите и так домашним

00:41:40

ваше здание значит есть изображение

00:41:44

которое выглядит на п.к.

00:41:46

то есть вот такой каркас соответственно

00:41:49

все это вам нужно с нуля сверстать по

00:41:51

текущему видеоуроку

00:41:52

у него и шапка которые на всю ширину у

00:41:55

него есть два блока вы думаете им

00:41:57

какое-то название

00:41:58

четыре блока и footer так он выглядит на

00:42:01

пока на меньших размеров то есть на

00:42:05

планшетах или на ноутбуках каких-то

00:42:07

малоформатных он выглядит следующим

00:42:08

образом то есть шапка блоки уже уходят

00:42:12

большие друг по другу а те блоки которые

00:42:14

были четыре варианта не по 2 становится

00:42:17

и на телефоне соответственно логично что

00:42:20

все становится у нас друг под другом то

00:42:22

есть у нас есть шапка у нас есть два

00:42:26

больших блока потом идут 4 поменьше

00:42:28

блока и в самом низу

00:42:30

идет footer это будет ваше домашнее

00:42:32

задание попробуйте вот при помощи тех

00:42:35

знаний которые получили использовать их

00:42:37

и сверстать вот такое вот такой вот

00:42:41

макет на этом все до следующего видео

00:42:44

урока надеюсь что занятиях эти сложные

00:42:46

но интересные тем не менее если вы

00:42:48

поймете насколько это упростит вам

00:42:50

будущем жизнь как верстальщик у

00:42:51

насколько это сэкономит время и упростит

00:42:54

возможно сделать адаптивные красивые

00:42:56

вещи то я думаю вы будете в восторге

00:42:58

пишите свои вопросы в комментариях

00:43:00

подписывайтесь на канал не забываем

00:43:02

ставить лайк и бы эта мотивация для

00:43:04

выхода более быстрых и новых видео и до

00:43:07

скорого

Описание:

ПОДДЕРЖАТЬ АВТОРА И КАНАЛ: https://www.liqpay.ua/uk/checkout/380638562538 Webmoney: Z166344793421 R369744777501 U871336351200 Телеграмм чат: https://t.me/joinchat/FQXf-hN9LRuCosQCWtzY3g Вступайте в группу и задавайте интересные вопросы!!! Чтобы верстать страницы сайте быстро и главное эффективно нужно понимать и уметь применять CSS фрейморки и их фишки. Что мы рассмотрим сегодня: - Сетка верстаемой страницы - Кем и для чего написан Bootstrap - Скачивание и подлючение Bootstrap - Понимание Grid системы Bootstrap - Строки ROW и колонки COL- - Применение на практике полученных знаний сетки Bootstrap Материалы урока и ДЗ: https://drive.google.com/drive/folders/1ZgpggbQzh8pXi4yp4jcho_K2r8fQpF_m?usp=drive_open

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Что такое сетка макета, практическое знакомство с Bootstrap | Практическая верстка 2018"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Что такое сетка макета, практическое знакомство с Bootstrap | Практическая верстка 2018" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Что такое сетка макета, практическое знакомство с Bootstrap | Практическая верстка 2018"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "Что такое сетка макета, практическое знакомство с Bootstrap | Практическая верстка 2018" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Что такое сетка макета, практическое знакомство с Bootstrap | Практическая верстка 2018"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Что такое сетка макета, практическое знакомство с Bootstrap | Практическая верстка 2018"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.