Что такое Bootstrap

[saitikdev]

Что такое Bootstrap?

Это помощник в верстке страниц - это CSS Framework, применяя который вы можете быть уверены, что в мобилках и на с ПК вы будете видеть красивые колонки, все выровнено, то есть будет работать адаптивно.

Bootstrap вышел после того как популярность мобильных пользователей резко возросло.

Основное преимущество это БЫСТРОТА ВЕРСТКИ.

Классы имеют однотипные названия, поэтому когда вы придете на другой сайт и там увидите бутстрап, то вы легко включитесь в процесс, зная этот CSS framework.

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

Официальный сайт:  https://getbootstrap.com

[saitikdev]

Bootstrap - это еще увеличение продаж, как это выражается:

- размеры шрифтов и тд - задаются в относительных величинах гармоничных!!! (rem) - что гарантирует отличное отображение на всех устройствах, а не понятно что как обычно - на продажи сильно это влияет!
- есть иконки встроенные - их использование также положительно скажется на кошельке.

[saitikdev]

Изучаем основы Bootstrap за 1 минуту

Все, что надо понять - это как задаются размеры колонок. Весь экран делиться на 12 колонок по ширине - это основа!

задав для div класс col-xs-12 - он установит класс для всех устройств в 100% фиксированной ширины, а если col-sm-12 то это установит для всех устройств, что находится правее, а для xs устройств не установит и оно будет как обычный div, который по умолчанию имеют 100% ширины.

Если задать для 2ух дивов col-xs-8 col-xs-4 , то весь экран поделить на 2 части в этой пропорции и тд.

Но можно задать для одного дива разное поведение для разных устройств, например:
<div class="col-lg-4 col-md-8 col-xs-12">

Это основа была...

Далее нужно узнать об основных обертывающих контейнерах, есть с классом .container - это фиксированная max-width:1140px,
но если это будет .container-fluid то это уже вся ширина экрана.

Внутри .container будет еще один блок .row и далее уже колонки - это также как в таблице: первый тег table > row > td

Вот и вся основа...а то снимают видео по 10 часов, тут для вас вижимки...пользуйтесь)

[saitikdev]

Далее можно указывать какой блок должен быть виден:

там где * звездочка, ставится block, inline или inline-block  , а не цифры!

выставляя visible-xs-block он будет отображаться как блочный элемент только на xs размерах, во всех других случаях(как видно в таблице) этот блок будет скрыт!

[saitikdev]

Можно указать блок с классом .clearfix , чтобы сделать пробел между блоками по вертикали.

[saitikdev]

Для того, чтобы показать пробелы-колонки слева используется offset

Пример:

col-md-4 offset-md-4

переводится как сделай 4 колонки(col-md-4) и 4 колонки отступа слева (offset-md-4) на размерах md соответственно!

[saitikdev]

Появился интересный параметр, если вы хотите сделать 2ух или 3 колоночный дизайн в Bootstrap, то вам пригодится класс order:

можно поставить блок левее легче-простого достаточно добавить класс:
order-first

или правее
order-last

или обозначить цифрами:
order-1
то другой блок автоматом съедет левее


PS pull и push в новых версиях отменили как я понял, как раз в пользу этого order и margin-ов