Bootstrap 4. Сетка. Подробное руководство

3403 ratings | 80404 views


Bootstrap 4. Сетка. Подробное руководство

Полезно? Подпишись на канал: Создание интернет-магазина от А до Я: Создание новостного сайта от А до Я: Фриланс для начинающих: Страница урока: Всем привет, друзья! 18 января 2018 года случилось важное событие — вышла из беты долгожданная версия Bootstrap 4, основанная на использовании модели Flexbox для разметки, которая в настоящее время уже имеет поддержку всех современных браузеров и является более удобной и гибкой для разработчиков. Сегодня мы подробно разберем работу с сеткой Bootstrap 4, по ходу дела сравнивая её со старой версией. Данный урок будет полезен вам не только если вы новичок и знакомитесь с Bootstrap, но и в том случае, если вы опытный разработчик и хотите изучить все правила и нюансы верстки с использованием сетки Bootstrap 4. Группа Вконтакте: Реклама на канале:

Comments to the video: Bootstrap 4. Сетка. Подробное руководство

Nikita Denisov 2 months ago
Как именуется твоя тема ?
Срега Пилипенко 2 months ago
Здравствуйте, у меня отчего-то не работает упорядоченность частей, а пишу будто и вы
Nikita Denisov 2 months ago
Долго находил про это видео. А то на бутстрапе 3.7.6 надоела верстать
Мuтный кот 2 months ago
Все понятно, все по делу!)
Макар Корнилов 2 months ago
Спасибо за задание. Ты хороший преподаватель.
Марат Марат 2 months ago
Подскажите, а будто верстать макет веб-сайта шириной контейнера в 980px?
MAX AMIRAX 2 months ago
Привет, Алексей! Отличный канал! Скажите изволь, в какой программке либо на каком веб-сайте вы пишете код и сходу же видите итог? Не сумел отыскать ключ. Спасибо за ответ
EgRomz Vu 3 months ago
ТЫ.ПРОСТО.ЛУЧШИЙ.
sergey kireev 3 months ago
Отличные уроки отменная понятная выговор
eduard medinschii 3 months ago
Не сообразил для чего необходимы order, если можно попросту в правильном порядке сделать div
eduard medinschii 3 months ago
Интересная информация , благодарю
WebDesign Master 3 months ago
Для сотворения подходящего потока. Например, для SEO будет полезным сначала располагать контент, если веб-сайт имеет левый сайдбар. В таком случае можно переопределяться размещение более принципиальных частей выше в потоке.
CryNet 3 months ago
Привет. Такая ситуация. Уставил gulp глобально, запускаю его из проекта, однако он сетует на неимение команды start в package.json. Как быть?
CryNet 3 months ago
Что прописывать с start?
Дмитрий Пышный 3 months ago
Видео - супер!!! Спасибо!
andry__ s 4 months ago
Огромное благодарю за видео! Все весьма тщательно и понятно :)
Alexander Vorobiov 4 months ago
Благодарю за доходчивое и лаконичное изложение. Вчера, ради опыта сверстал веб-сайт на Bootstrap 4. Выписал вопросы, на которые сейчас отыскал исчерпающие ответы. Коллеги, вы все используете SCSS SASS? Действительно комфортно компилировать потом каждой правки файл. Неужели ровная правка CSS это убогое глухое либо SASS - попросту престижная фича?
Ви Кинг 4 months ago
Здравствуйте,благодарю за подробное видео. И таковой проблема,кушать-ли у вас видео задание верстки с внедрением сетки bootsrap 4,без использования bootstrap.css,sass и остального.
Roman Sharpe 4 months ago
Хороший задание
Владислав Володько 4 months ago
для bootstrap 4 непременно использовать лишь препроцессор sass?
Olatera D 4 months ago
господи, благодарю золотой человег!!!! в конце концов-то обычное видео на российском по сетке для новичков.
Никита Савченко 4 months ago
Побольше бы такие людей, которые верно без воды и понятным языком доносят информацию. Благодарю за уроки!
Владимир Охрименко 5 months ago
крутое видео! лайк и подписка! благодарю
Dez U 5 months ago
благодарю, а если мне необходимо поменять кол-во колонок на других разрешениях? к примеру, из четырёх колонок сделать 6 на разрешении больше 1600 (не 1200) и к примеру, из 2-ух сделать одну, на разрешении меньше 450 (не 576)? в таких случаях bootstrap подходит?
Belyash 5 months ago
для чего для этого отдельный фреймворк подключать? либо бутстрап 4 автоматом избавляет баги, связанные с кроссбраузерностью, которые бывают при обыкновенной работе с флексами (к примеру, на неких версиях ios либо ie)?
WebDesign Master 5 months ago
Совершенно правильно. Это лёгкий, отточенный и верный Фреймворк.
Guru Dk 5 months ago
Подскажите изволь, будто поменять размер.container? Например, мне необходимо ширину в 1580px.
Zurab Pro 5 months ago
Мне Grid больше приглянулся, расскажи будто нибудь сопоставление, своё мировоззрение, думаю было бы любопытно
brin gonor 5 months ago
Алексей сделай Flex-box для самых малых будет многим любопытно
Max Krutov 5 months ago
Здравствуйте! Оцените изволь и покритикуйте мой 1-ый сделанный веб-сайт на Bootstrap 4! Основы я брал конкретно из данного урока, потому тут и пишу с благодарностью создателю!!! Мой веб-сайт - mytest.cc.ua
M 5 months ago
Обзор хороший Алексей! Bootstrap сделали весьма большенный рывок, вечно грезил о таких функциях!
Артем Табаков 6 months ago
Очень приглянулся материал! После этого обучающего видео смотрел будто верстают макет веб-сайта. Все было максимально ясно.
Ivan D 6 months ago
Спасибо отлично все обьяснил
Viktor Podzirov 6 months ago
Спасибо
Sergey Greyse 6 months ago
глас бомбический естественно
klim turutin 6 months ago
Все круто и понятно, однако отчего нету примера с hidden?
Nick Green 6 months ago
Спасибо, весьма наглядно и информативно! Как думаете, CSS Grid потеснит в будущем Bootstrap?
Ihme Vehje 6 months ago
Здравствуйте. Не подскажете - какой редактор употреблялся при разработке этого видео, и будто освоить сокращения при написании, чтоб код трансформировался этак, будто у Вас на видео (я этак понимаю, это особенности редактора).
WebDesign Master 6 months ago
Здравствуйте.
Олександр Кушнір 6 months ago
Не могли бы показать ссылку на исходники! Спасибо.
Олександр Кушнір 6 months ago
Спавсибо !
WebDesign Master 6 months ago
Andrey Nik 6 months ago
А будто сделать чтоб от md разрешения к примеру логотип был слево А если разрешении меньше он вставал по центру, а не прижимался к левому краю ?
Mister Sandman 6 months ago
Как лишь собрался обучать bootstrap, этак выходит твой видос, это наилучший и самый удобопонятный видеоурок по сетке bootstrap 4 какой я смотрел, а смотрел я немало, благодарю для тебя большущее за то что ты делаешь.
Ingvar Ishchenko 6 months ago
ОГРОМНОЕ СПАСИБО! ВСЕ ОЧЕНЬ ПОДРОБНО И ПОНЯТНО!
Кристина Близнюк 7 months ago
Верстать по сетке имеет резон лишь тогда ,когда и макет был изготовлен по сетке?
Владимир Горинов 7 months ago
Алексей, использую ваш стартовый штамп по 4 бутстрапу, в макете какой верстаю ширина контейнера 1230 пикселей, а в бутстрапе по умолчанию 1140. В 3 бутстрапе была возможность на веб-сайте использовать customize, я лицезрел это в вашем видео, однако в 4 не отыскал его. Есть ли возможность поменять размер контейнера вручную? либо использовать container fluid?
Владимир Горинов 7 months ago
Спасибо Алексей, вы реальный профи в собственной области. Всего вам неплохого!
WebDesign Master 7 months ago
.container-fluid: ----max-width: подходящая ширина
Владимир Горинов 7 months ago
А вы почаще итого будто верстаете и делаете дизайн, если не секрет? Постоянно меняете размер сетки под определенный проект, если сетка не стандартная бутстраповская?
WebDesign Master 7 months ago
Используйте container-fluid, если дудки желания заморачиваться с вычислениями ширин и брейкпоинтов.
Burduja Serghei 7 months ago
За order-first благодарю))
Ber1al221 7 months ago
Спасибо за управление. Есть таковой проблема: стоит ли использовать интегрированные составляющие Бутстрап либо довольно лишь сетки.
ex btrg 7 months ago
Лучший)
Ruslan Tsarenko 7 months ago
Можно ли подключать w-100 обыденным css,а не sass файлом? Как именуется файл в архиве какой отвечает за w-100?
Denis Denisenko 7 months ago
подскажите будто сделать этак: col-md-3(1) col-md-3(2) col-md-3(2) - на десктопах а на мобильных центральный блок был первым 2 1 3
Alena Akulova 7 months ago
Спасибо! Более понятного разъяснения не отыскать!
ve or 7 months ago
Ставь лайк если с умным видом смотрел полный видос, и нихуя не сообразил
Александр Ше 7 months ago
благодарю вам за полезную информацию. Если сможете подскажите что не хватает в коде для отправки e-mail в последующей форме (снимок экрана шаблона программки Pingendo 4 Bootstrap, вот тут видать этот кусочек кода: ) Сделал страничку, добавил футер с простейшей формой подписки однако она не присылает на админскую почту данные. А урока будто связать код формы с выполнением деяния ни где не отыскал (всюду лишь уроки по наружному виду форм)
WebDesign Master 7 months ago
Psiho Nort 7 months ago
Спасибо за управление, годнота !
Дмитрий Зацепин 7 months ago
Вот чтоб этак вышло.
Дмитрий Зацепин 7 months ago
Алексей, огромное благодарю за хороший задание, будто вечно! Вы большенный молодчина! У меня проблема, может быть ли средствами сетки bootstrap сделать этак чтоб.col был высотой на 2 ряда, будто союз столбцов в таблице? Спасибо.
Заур Аллахвердиев 7 months ago
Всем привет! Такая неувязка-bootstrap и FlexBox совместно вообщем не работают, не могу осознать из за чего, работают лишь по отдельности, флексовые классы в bootstrap вообщем не работают. Что мастерить?
Евгений Разумный 8 months ago
Подскажите будто мастерить перезагрузку странички автоматом потом сохранения Ctrl+S// это скрипт какой-то?
oxmad 8 months ago
Если использовать твой optimizedHTML 4, то у меня отчего-то не работают стили Bootstrap, сетка работает, а вот если испытать сделать кнопки либо меню, то ничего не выходит. Мб я криворукий, однако желал бы уточнить, у всех нормально со стилизацией?
oxmad 8 months ago
Сам нашёл ответ на собственный проблема) В libs нужно подключить bootstrap.scss
MEC Production 8 months ago
Как задать 6 колонок к примеру для экстра малеханьких экранов?
TheNexGames 8 months ago
Добрый вечер, таковой проблема. Будет ли задание(и) где вы используете Bootstrap 4+sass при верстки с psd будто был задание до этого Создание веб-сайта с нуля ?
Nekchich 21 8 months ago
Просто и понятно ни капли воды , респект.
RavenGuitarist 8 months ago
Так, хорошо, проблема раковый, на самом деле, однако мне будто у меня не движутся лыжи. В этом стартовом шаблоне Медиа требования,по какой-то причине, не реагируют на позволение, и изменяют параметр на всех разрешениях, самостоятельно от того для какого я медиа запрос указываю. С чем это может быть связано? С бутстрап 3 таких заморочек вовек не наблюдалось.
WebDesign Master 8 months ago
Шаблон протестирован. Ознакомьтесь пристально с работой брейкпоинтов.
xAllx Don 8 months ago
можно тайминги в шапку ?
Олег 777 8 months ago
будто расположить видеотрансляцию с другого веб-сайта у себя на веб-сайте?
Sergey Bagretsov 8 months ago
Как меня бесит это подключение к Sass и иным сервисам, когда попросту хочешь подключить библиотеки и верстать с Emmet. Пишу это лишь поэтому, что не отыскал адекватной bootstrap-grid.css либо конструктора. Хочется знать, что необходимо переработать, чтоб переместить проекты с Bootstrap 3 на 4.
SuperKatSSS 8 months ago
Чётко, понятно, наглядно. Отличный обозрение, благодарю!
Алексей Демшин 8 months ago
Привет, в планах кушать уроки по созданию веб-сайта на bootstrap 4 ???
Владимир Степанов 8 months ago
Ты попросту молодчина!!!
Павел Холунин 8 months ago
мне было удобнее подключать файл bootstrap сходу в стили. И в нем закоментить не необходимое.
Алексей Слепцов 8 months ago
Подскажите, у меня кушать два класса -.row> col-md-9 и col-md-3. Как сделать этак, чтоб при наименьшем разрешении первой показывался col-md-3, а позже лишь col-md-9 ? Спасибо огромное!
Алексей Слепцов 8 months ago
Тарас Шевченко там необходимо прибавлять класс order
Тарас Шевченко 8 months ago
Отличный проблема! Меня тоже интересует) Вы отыскали решение?
Alex Kovry 8 months ago
Можете сбросить попросту html+css, а то не пашет? Многие не шарят что там с gulp и остальным мастерить :D Спасибо за уроки!
Andrew Markelov 8 months ago
удивительно, у меня вышина примыкающих колонок не возрастает до самой дольшой
Братишкин - СМЕШНЫЕ МОМЕНТЫ 8 months ago
Капец ты пишешь стремительно
Антон Корнюшкин 8 months ago
Как выгрузить файлы локально на optimizedhtml 4 ?? чрез rsync никак не выходит
Василий Некто 8 months ago
Алексей, подскажи, изволь, будто в шаблоне 4ой версии трудиться со шрифтами? В файле _fonts.sass добавил шрифты: +font-face( opensans , ./fonts/OpenSans/OpenSans ) +font-face( opensans , ./fonts/OpenSans-Light/OpenSans-Light , lighter) +font-face( opensans , ./fonts/OpenSansSemibold/OpenSansSemibold , bold) Но при таком синтаксисе заместо регуляр все пора прет лайт. Как верно использовать позже объявленные шрифты?
Duma Koshka 8 months ago
Алексей будто вечно на высоте! Отдельное благодарю за пикселей заместо пикселов )
Андрей Мягков 8 months ago
Алексей, пробовали ли Вы редактор MS Visual Studio Code? Многие перебежали на него с Sublime, т.к. способностей намного больше. Может сделаете обозрение?
WebDesign Master 8 months ago
Да, пробовал. Отличный редактор.
Tatyana Dovzhich 8 months ago
ОГРОМНЕЙШЕЕ ВАМ СПАСИБО!!!! за все Ваши уроки. Очень подробное, толковое описание всех тонкостей и аспектов верстки. Пожалуйста, продолжайте в том же духе! Вы делаете мир умнее, а означает и добрее :)
knoonik 9 months ago
Получается, лишь если вручную забиваешь localhost: 3000 раскрывается проект. Как сделать чтобы сходу раскрывалось что нужно без излишних манипуляций?
WebDesign Master 8 months ago
Измените соответственный параметр в таске browser-sync.
knoonik 9 months ago
Алексей, денек хороший! В браузере ни чего не раскрывается. Все делаю по аннотации: 1 Download OptimizedHTML 4 from GitHub; 2 Install Node Modules: npm i; 3 Run the template: gulp. После пуска gulp возникает вот это: + browser-sync@2.23.6 updated 1 package in 27.105s D:\xampp\htdocs\Web_Design_M_Bootstrap> D:\xampp\htdocs\Web_Design_M_Bootstrap>gulp [13:52:51] Using gulpfile D:\xampp\htdocs\Web_Design_M_Bootstrap\gulpfile.js [13:52:51] Starting 'sass'. [13:52:51] Starting 'js'. [13:52:51] Starting 'browser-sync'. [13:52:51] Finished 'browser-sync' after 140 ms [13:52:51] Finished 'js' after 228 ms [13:52:52] Finished 'sass' after 871 ms [13:52:52] Starting 'watch'. [13:52:52] Finished 'watch' after 22 ms [13:52:52] Starting 'default'. [13:52:52] Finished 'default' after 53 μs [Browsersync] Access URLs: ------------------------------------ Local: External: ------------------------------------ UI: UI External: ------------------------------------ [Browsersync] Serving files from: app Помогите, изволь разобраться. Спасибо!
knoonik 9 months ago
Сделал! Спасибо)))
WebDesign Master 9 months ago
Откройте вручную либо измените соответственный параметр в таске browser-sync.
Артём Киричук 9 months ago
Очень круто жду джедай вёрстку 8
Pavel Hlinski 9 months ago
Приятно что Вы не попросту бубните материал, а вкладываете душу в разъяснение. Спасибо!
vova al 9 months ago
супер!благодарю.how old are you?
toor 9 months ago
Алексей, вы не планируете запустить платные курсы? Например интернет-разработчик
Валик Давидюк 9 months ago
будто именуется тема и цветовая схема в sublime ?
Тарас Шевченко 8 months ago
Monokai
Виктор Валерьевич 9 months ago
Алексей, что можешь произнести про smartgrid Дмитрия Лаврика? Стоит ли оно того либо лучше bootstrap 4 юзать?
WebDesign Master 9 months ago
Юзайте что вам удобнее.
Виктор Валерьевич 9 months ago
Мегареспект для тебя Алексей, 2 денька находил метод будто поменять ширину контейнера в новеньком бутстрап, а оказалось необходимо использовать 4-й штамп для верстки и все там вшито.
Вячеслав Гатиятуллин 4 months ago
На видео гласит Евгений Попов
Sasha Karalchuk 9 months ago
здрасти, желал выяснить, для чего стоит использовать бутстрап при верстке, обыкновенно с его помощью делаю лишь сетку остальное с помощью sass, заблаговременно благодарю
Sasha Karalchuk 9 months ago
еще проблема, отчего открываю попросту страничку index.html в уроке, отображается лишь разметка без стилей, если запустить чрез gulp(будто я сообразил на локальном сервере) то все отлично
Anthony Hale 9 months ago
Можешь изволь отозваться, какие у тебя цены на различные типы веб-сайтов? Допустим этак: landing page под ключ 40к, веб лавка под ключ 150к и т.д.
Sergei Verenikin 9 months ago
В версии 3.3.7 (min-width: 1200px) .container width: 1170px; , а в 4.0.0 @media (min-width: 1200px) .container max-width: 1140px;
Qwed Live 9 months ago
а будто отцентровать row? если кушать header и плюс еще одинешенек row какой обязан быть по центру(если мастерить space between то она закрепляется книзу)
Андрей Порсев 9 months ago
Жду с не терпеньем последующие уроки, о которых ты упоминал в этом уроке. Спасибо за труды.
Алексей 9 months ago
благодарю за детальный задание, Алексей. Не могу отыскать видео про компьютер и обстановку рабочего места. хотелось бы услышать ваши мысли по поводу организации рабочего места: стол, стул и т. п.
Vasiliy M 8 months ago
освещение,влажность,температура
Нуриддин Махмудов 9 months ago
Скажите изволь ,отчего у меня не работает col align-self ,вообщем не работает! плиз?
Сергей Алексеев 9 months ago
Как поменять краска колонки?
Андрей Роджер 9 months ago
Алексей, из всех блогеров, ты объясняешь лучше всех!!! Побольше уроков,а то скучнова-то
Влад Горпинич 9 months ago
Алексей, нужна ваша поддержка по фреймворку Unyson! Как с вами можно снестись, кроме комментов на ютубе?
Vasiliy M 8 months ago
Влад Горпинич голубя вышли
Dmitriy Sparrow 9 months ago
Чувак, ты МАШИНА. Спасибо, что не забрасываешь канал! Не пропадай
Андрей Иладий 9 months ago
Прошу вас сделать Джедай Верстки с внедрением Pixel perfect.
Андрей Иладий 9 months ago
Я увидел в неких вакансиях это будто непременное заявка
WebDesign Master 9 months ago
Разве на данный момент кто-то верстает Pixel perfect? Я задумывался респонсив вёрстка более животрепещуща на этот момент. Интересно, где вы в 2018 услышали о таком устаревшем подходе? )) Прочитали статью 2012 года? :-)
Mikhail Volosovich 9 months ago
Ты весьма отлично ведёшь ,за два твоих ролика ,я сообразил больше чем чрез неделю просмотров .
Виталий Викторович 9 months ago
После возникновения и поддержки css-grid бутстрап в топку
Василий Некто 9 months ago
Алексей, на 28:19 ты произнес, что все элементы по-умолчанию растягиваются на схожую высоту. У меня этак не вышло. И когда в этом видео я услышал такое - был весьма удивлен. Но проанализировав твои файлы из видео я сообразил, что по-умолчанию все элементы принимают высоту родителя, если она задана на физическом уровне и больше высоты частей. Я верно сообразил?
Василий Некто 9 months ago
Спасибо. Есть еще чета вопросов. 1. Есть ли возможность сортировки (ордеринга) по брейкпоинтам (к примеру.sm-order-2.lg-order-5)? 2. Остались ли классы смещения push и pull в 4ой версии? Или будто они поменялись?
WebDesign Master 9 months ago
Да, поглядите обертку. Враппер обязан быть высочайшим. Естественно.
Тимофей Белоусов 9 months ago
Первый один встречаю вас на ютубе и любопытно услышать ваше мировоззрение о Foundation Flex, Знакомы? Юзайте? Если дудки, то отчего? Хотелось бы выяснить ваше мировоззрение!
Наталья Ульянова 9 months ago
Отличный обозрение Bootstrap 4, прямиком то, что я находила, благодарю!!
dsX _ 4 months ago
нез