Создание адаптивного сайта с Bootstrap 3. Урок 2. Системы сеток Bootstrap

Автор Georgiy Dronov
Создание адаптивного сайта с Bootstrap 3. Урок 2. Системы сеток Bootstrap

Доброго времени суток дорогие друзья.

С вами снова. Александр I — это второе занятие курса после адаптивного сайта при помощи bootstrap-3. Сегодня у нас такая основополагающая тема на которой мы рассмотрим примеры по созданию адаптивной сетки при помощи которой мы сможем позиционировать наши блоки на всех разрешениях экранах также мы сможем их менять размеры то есть по работам с изображением изображение именно в общем мы посмотрим все те основные моменты которые нам будут нужны при создании любого адаптивного интерфейса для начала.

Давайте познакомимся с нашим планам сегодняшнего занятия.

Ну сначала мы вообще разберёмся тоже такое сетка, что — это чем так хороша. И как с ней работать далее мы посмотрим на. Медиа запросы которые могут нам помочь ну к примеру вот у нас есть на большом экране есть один блок. Да вот он выглядит так на маленьком экране. Мы хотим чтобы он был пример. Уменьши если. Света не красного то есть мы сможем менять свойства. Для различных. Для различных элементов на разных разрешениях экрана мы просто посмотрим как же строятся в принципе сайт на bootstrap, что нам нужно как нам правильно построить эту самую сетку мы — это посмотрим уже готовых на примерах и также разберём структуру нашего будущего макета мы с вами перейдем непосредственно к практике и на ней я вам покажу например. А как же адаптировать эту сетку под все разрешения экрана то есть мы уже с вами неинтересно будем работать адаптивность будем смотреть пробовать. Как нужно менять классы как нельзя менять класса и так далее в одной немножко посмотрим на тебя классы для изображения на изображениях лучше всего будет видно вот — это вот изменение разрешений изменение блоков и так далее. Ну давайте снова жмём на официальный сайт bootstrap вот и непосредственно начнём разбираться с нашей сеткой как выполнить из предыдущего занятия есть два таких класса контейнеры container-fluid в которых собственно и лежит эта самая я самый блоки которые будут размещаться при помощи этой сетки и вот bootstrap нам рекомендуют класть вот в этот элемент его в канинсулин элемент блок с классом в котором у нас и будет собственно вся вот эта вот колоночки эти наши которых я говорил у нас 12 и. Давай тоже для начала. Взгляни на эту таблицу которая чрезвычайно важно особенно в этот. Верхняя строка тоже. На ней написано. Ну Начнем с того, что здесь говорится, что при больших разрешениях да то есть экранах свыше 1200 ширина контейнера помним дадут элемент с классом контейнер 1170 пикселей то есть вот мы сейчас смотрим вот у нас этот сайт дал мне экран у большим 1200 пикселей и вот на нём он в контейнере. Давайте взглянем на. Класс вот смотрите контейнер выбираем его и справа мы видим ширина 1170 пикселей вот понятно да. Теперь давайте мы с вами будем постепенно менять разрешение. Возьмите в правом верхнем углу браузера у нас пишется разрешение экрана первая цифра. Как пить когда мы опустим его. Да смотрите вот. Обрати внимание на эту на этот столбик. То есть когда мы опускаем. Иван меньше чем 1200. Пикси Как дела. Что было видно то у нас вот смотрите на изменяющиеся вот эти вот цифры делай меньше чем 1200 об и о нашей на контейнер контейнеровоз на 970 пикселей вот как здесь написано как только мы опустим них 992 пикселя ширина нашего контейнера стоят 750 пикселей вот смотрите 992 пикселя мы делаем вот и ширина контейнера вот как мы видим всё правильно осталось 750 пикселей ширина контейнера ну и соответственно в это. Это у нас вот написано здесь — это будет стоить планшета на телефонах даже экран будет меньше 768 пикселей совсем вот эти вот маленькие контейнеры на странице уже нет этих обществ по бокам. А вот так вот у нас такое. Восток меньше. И вот самый широкий контейнер нас вот здесь далее. То есть. Ну понятно да с контейнерами. Всё ясно разобрались теперь. Что же касается тех самых колонок. Давайте вот перейдём сюда и посмотрим на вот эту вот съёмку, но для начала для начала. Давайте вот не будем обращать на — это внимание на md немножко позже расскажу вот одну колонку занимает верно здесь у нас занимает 8. Посмотрите вот у нас нижеприведенных бёрст к 1 стр 12 колонок. Они лежат все. Запомните bootstrap класс для складывания наших вот этих вот колонна чик контейнер ролл и пошли наши колонки в одну колонку и вот смотрите сильно. Коломна ширина колонки опять же на больших экранах она будет примерно 97 пикселей на средних 8162 и тут уже идут и как мы видим диапазон слишком большой и он в процентах уже чётко в процентах будет задаваться далее смотрите. Что такое MD значит примеру вот у нас здесь также вот допустим таблички. Давайте разберем LG pj9 запоминаем просто. НДС СМС maldives и XS Extra Small Devices здесь у нас сейчас как бы экран не MD он большой, но если 1 класс именно вот для средних экранов. То есть если нас написано по сути, что ширина этой колонки на средних то есть этот блок вот этот будет равен 1 колонки на средних мониторах. Но и на больших он также будет ширине одной колонки равен запоминаем. Здесь тоже самое пишет смд 86 ширина данного блока будет равна 8 колонка вот уже 12 школа. МВД sm-6 и соответственно кодекс с 12-ой 12 кодексов 12. Понятно Давай 126 col-sm 12 кодекса 112 можно голосом не задавать можем сразу, но здесь у нас помимо этого ещё меняется расположение этих блок в медиа запросах прописывается. Что например вот этот блок будет шириной ты мне 60 пикселей не 60%. Да вот. Ну как сейчас. Но она же будет 100 и будет располагаться не справа там снизу и там стоять на картинках будет 40% остановка пример да то есть при помощи. Медиа запросов мы меняем вот расположение блоков во сне свойства для них на мобильных телефонах.

0 комментариев
0

Читайте также