Какие классы классов загрузки Bootstrap3 следует использовать?

Как мы должны использовать классы столбцов (.col-xs -, col-sm -, col-md -, col-lg-)?Какие классы классов загрузки Bootstrap3 следует использовать?

Я имею в виду, я работаю над веб-приложением, которое в первую очередь нацелено на планшеты, но оно также должно хорошо работать на смартфонах и настольных компьютерах. Из документов bootstrap я вижу, что каждый из этих классов нацелен на один из типов/размеров устройства. Итак ... какой из них я выбираю? Я не думаю, что я должен создать другую версию страниц для каждого устройства ... а я?

Спасибо.

источник

2013-08-28 Edd

Попробуйте изменить размер в браузере, чтобы увидеть, как столбцы автоматически реагировать на экран размер в примерах, чтобы лучше понять, как это работает. И помните, что вы можете использовать несколько классов столбцов для одного и того же div. – JayGee

Я сделал это, но я признаю, что использование нескольких классов не перешло мне в голову..дух. благодаря – Edd

Нет, вам абсолютно не нужно создавать разные версии вашей страницы.

Все эти разные классы позволяют вам определять столбцы в разных разрешениях.

Если вы не хотите, чтобы уровень гранулярного контроля был установлен в бутстрапе для установки столбцов по всем точкам останова, почему бы не начать с столбцов col-md-* и посмотреть, что именно вы получите, вы можете быть довольны именно этим. Если вы решите, что вы хотите, чтобы столбцы были настроены для разных разрешений, вы можете абсолютно погрузиться и применить эти дополнительные классы.

источник

2013-08-28 18:10:31

Перейти к this page и попробуйте изменить размер. Вы увидите, что с разной шириной столбцы упорядочиваются по-разному.

Вы, как правило, не будет выбирать между различными типами (col-xs-*, col-sm-*, col-md-*,
col-lg-*). Обычно вы включаете один или несколько из них.

Для начала вы можете просто использовать col-md-* всюду. Если позже, используя сайт с меньшим экраном, вы увидите что-то, что не выложено так, как вы хотите, вы можете добавить больше классов (col-xs-*, col-sm-*). Но вы не обязательно удаляете классы col-md-*, которые вы уже выбрали.

источник

2013-08-28 18:18:33

Если планшет является вашей основной целью, рассмотрите, какой тип макета вы пытаетесь достичь с точки зрения количества горизонтальных столбцов.

Например, на таблетки вы хотите 3 колонки по горизонтали, так что вы будете использовать .col-sm-* ..

<div class="row"> 
     <div class="col-sm-4">..</div> 
     <div class="col-sm-4">..</div> 
     <div class="col-sm-4">..</div> 
</div>

Это также появится в 3 колонки на что-либо более широкой/больше, таких как рабочий стол, ноутбук. Поэтому вам нужно всего лишь использовать классы для самого маленького устройства, которое вы хотите поддерживать.

На устройствах размером менее .col-sm-* таблеток этот макет будет располагаться вертикально, а все столбцы будут меняться до 100% ширины. Если вы хотите сохранить 3 колонки даже на смартфонах вы бы добавить .col-xs-* класс ..

<div class="row"> 
    <div class="col-sm-4 col-xs-4">..</div> 
    <div class="col-sm-4 col-xs-4">..</div> 
    <div class="col-sm-4 col-xs-4">..</div> 
</div>

проверить это для различных сценариев: http://bootply.com/77634

источник

2013-08-28 18:36:31 ZimSystem

Какие классы классов загрузки Bootstrap3 следует использовать?

ответ

Смежные вопросы