Как работают в Bootstrap сетке следующие классы xs, sm, md, lg?

Question

[Raul Abdullin]

Читаю документацию по Бутстрап сетке и запутался. Для каждого размера экрана прописываются классы xs, sm, md, lg. При этом в документации bootstrap-3.ru/css.php#grid как-то непонятно расписано, что если использоваться например только xs класс, то он будет работать для всех размеров или как-то так. Вообщем такой вопрос, на практике для живых проектов чаще всего прописываются все 4 класса или есть какие-то лайф хаки в медиазапросах? Просьба ответить в очень простой форме, так как в верстке новичок :)

Answer 1

[rhost]

каждый класс "xs, sm, md, lg" это разный media запрос.
.col-xs- стили будут применяться на всех размерах экрана
.col-sm- стили будут применяться если у устройства ширина ≥768px
.col-md- стили будут применяться если у устройства ширина ≥992px
.col-lg- стили будут применяться если у устройства ширина ≥1200px

Comments

[y0u]

.col-xs не имеет медиа запроса

[rhost]

y0u, чутка ошибся

[Raul Abdullin]

спасибо большое

[rhost]

raulvodov, я маленько ошибся и лучше прочитать вариант который написал y0u

[Raul Abdullin]

rhost, а в чем именно ошиблись? я не совсем понимаю, что значит не имеет медиазапросов?

[rhost]

raulvodov, если вы укажите класс ".col-xs" то стили будут работать на всех разрешениях.

[Raul Abdullin]

rhost, ага понял, еще раз спасибо.
А не подскажите как подключить сетку к проекту?
Т.е. я кастомизировал бутстрап и скачал только grid system для бутстрап 3.3.7.
Со всех остальных пунктов и полей убрал галочки.
В итоге скачалась папка в которой содержится config.json и css папка:
bootstrap-theme.css
bootstrap-theme.min.css
bootstrap.css
bootstrap.min.css
Все эти 4 css файла относятся к сетке или какой-то один нужно подключить?

[rhost]

raulvodov, ну, bootstrap.css надо подключить к сайту

[Raul Abdullin]

rhost, т.е. учитывая, что я кастомизировал этот архив, то в bootstrap.css находится только сетка верно?

[rhost]

raulvodov, по идеи да, так и должно быть

[Raul Abdullin]

rhost, ок спасибо большое

Answer 2

[Shinso]

Все зависит от отго что делаешь, но у меня лично lg почти никогда не используется сразу ставлю md так как на таких размерах изменения особых на макете нет, если видишь что у тебя колонки по количеству как были на большом разрешении так и остались на мобильном то сразу ставь xs, в общем использование крайне простое например было у тебя на большом экране подрят 4 картинки с подписями, для каждой пропивываешь col-md-3 затем на неком размере при адаптиве они уже выглядят слишком маленькими ставишь еще каждому по col-sm-6 и они уже будут не 4 в ряд а 2 ряда по 2 картинки и когда экран сузиться до меньшего чем sm разрешения они уже станут по одной в ряд

Comments

[Raul Abdullin]

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