|
|||||||
|
Краткая памятка по Bootstrap CSS - контейнеры, колонки, классы размеров
Время создания: 21.03.2019 11:46
Автор: Xintrea
Текстовые метки: css, bootstrap, верстка, адаптивная
Раздел: Компьютер - Программирование - HTML и CSS - Bootstrap
Запись: xintrea/mytetra_syncro/master/base/1553157989ktkrj95ijv/text.html на raw.github.com
|
|||||||
|
|
|||||||
|
Стандартные блоки контейнеров <div class="container"> - ширина блока 940px (для десктопа), блок размещается по центру. То есть, для десктопа, слева и справа от данного блока будут отступы от краев страницы. Этот же блок, будучи отображенным на экране мобильника, отступов иметь не будет, и будет отображаться на всю ширину страницы. <div class="container-fluid"> - блок растягивается на всю ширину родительского элемента Строки в блоках В каждом блоке-контейнере следующим вложенным тегом обязательно должен быть блок с классом row, так называемая "строка блоков". Блок с классом row нужен для того, чтобы чтобы работало задание размеров для всех вложенных блоков. Классы размеров При написании классов, задающих размеры (в размерности "количество столбцов") используются следующие суффиксы:
Примеры написания классов: col-md-4, col-lg-5 и т.д. Пример блока с разбивкой на столбцы В следующем примере показывается использование сетки Bootstrap. Сетка имеет всегда 12 столбцов. Причем 12 столбцов в текущем обрамляющем блоке. В примере создаются блоки, каждый шириной 4 столбца. Эти блоки создаются в блоке с классом "container", ширина которого 940px для десктопа. Соответственно, ширина блоков получится по 313px. <body> <div class="container"> <div class="row"> <div class="col-md-4" style="background-color: #FF9999">Left</div> <div class="col-md-4" style="background-color: #99CCFF">Center</div> <div class="col-md-4" style="background-color: #00CC99">Right</div> </div> </div> </body> Ели окно будет меньше, чем 940px, то отступов у блока с классом "container" не будет. Если окно будет совсем узкое, то блоки выстроятся по вертикали, друг под другом. Пример адаптивной верстки для разных устройств В следующем примере показано, как можно задавать разную ширину блоков (в размерности описанных выше "виртуальных" столбцах) для разных типов устройств: <div class="row"> <div class="col-xs-12 col-sm-9 col-md-4 col-lg-6">Первый</div> <div class="col-xs-12 col-sm-3 col-md-8 col-lg-6">Второй</div> </div> Здесь ширина блоков будет следующая:
Изменение порядка следования блоков С этой темой надо разбираться отдельно... Кратко, что пока ясно - это возможность "засовывать" и "извлекать" блоки на определенных местах через механизм, похожий на стек. Пример: <div class="row"> <div class"col-lg-5 col-lg-push-7" style="background-color: #00DDFF">Первый</div> <div class"col-lg-7 col-lg-push-5" style="background-color: #CC00FF">Второй</div> </div> В этом примере слева окажется блок Второй (шириной 7 столбцов), а справа - Первый (шириной 5 столбцов). |
|||||||
|
Так же в этом разделе:
|
|||||||
|
|||||||
|
|||||||
|
