адаптация
Привет! Не могу вникнуть. Допустим есть несколько роу поделённых на colы: col-md-6 и col-md-6, col-md-7 и col-md-5. Какие колы к ним надо дописать, что бы нормально смотрелось на смартфонах и планшетах? Заранее спасибо.
Привет! Не могу вникнуть. Допустим есть несколько роу поделённых на colы: col-md-6 и col-md-6, col-md-7 и col-md-5. Какие колы к ним надо дописать, что бы нормально смотрелось на смартфонах и планшетах? Заранее спасибо.
для Bootstrap 4 размеры
Extra small
None(auto)
>=0px
<576px
.col-
Small
sm
>=576px
.col-sm-
Medium
md
>=768px
.col-md-
Large
>=992px
.col-lg-
Extra large
xl
>=1200px
.col-xl-
Для Bootstrap 3 немного отличаются но принцип тот же
Extra small
xs
or None(auto)
>=0px
<768px
.col-xs-
Small
sm
>=768px
.col-sm-
Medium
md
>=992px
.col-md-
Large
>=1200px
.col-lg-
Исходя из размеров подбираешь/меняешь кол-во колонок в зависимости от того какой контент в каждой колонке предполагается, чтобы этот контент помещался и смотрелся нормально. В икнтрументах разработчика можно сужать/расширять экран и смотрет как сайт будет выглядеть при указанных размерах, т.е. на разных устройствах.
Если не понятно - нарисуй на бумаге/в фотошопе макет как будет выглядеть сайт для всех размеров - какую часть ширины экрана будут занимать каждфй блок, при сужении будут ли блоки премещаться друг под друга и будут оставаться также в строку и т.п.
Т.е. изначально нужно понимать что хотим получить, дальше адаптировать в коде.