четверг, 14 июня 2018 г.

Bootsrap 4. Сетка

.col - применяется для авто компановки.
.w-100 - ширина 100%.
.justify-content-center - выравнивание контента по центру
.justify-content-end - выравнивание контента правому краю
.justify-content-around - задает выравнивание элементов вдоль главной оси
.justify-content-between - растягиваются, как ячейки таблицы


<div class="container-fluid">
<div class="container">
<div class="row text-center">  <!-- .col - применяется для авто компановки  -->
<div class="col"><img src="img/sea3.jpg" alt="" class="w-100"></div>
<div class="col"><img src="img/sea3.jpg" alt="" class="w-100"></div>
<div class="w-100"></div> <!-- Блок с классом w-100 (ширина 100%) переносит элемет на новую строку -->
<div class="col"><img src="img/sea3.jpg" alt="" class="w-100"></div>
<div class="col"><img src="img/sea3.jpg" alt="" class="w-100"></div>
</div>
</div>
</div>

<!--
justify-content-center - выравнивание контента по центру
justify-content-end - выравнивание контента правому краю
justify-content-around - задает выравнивание элементов вдоль главной оси
justify-content-between - растягиваются, как ячейки таблицы
-->

<div class="container-fluid">
<div class="container">
<h1>Пример столбцов</h1>
<div class="row text-center justify-content-center">
<div class="col-xs-12 col-sm-4 col-lg3"><img src="img/sea3.jpg" alt="" class="w-100"></div>
<div class="col-xs-12 col-sm-4 col-lg3"><img src="img/sea3.jpg" alt="" class="w-100"></div>
<div class="col-xs-12 col-sm-4 col-lg3"><img src="img/sea3.jpg" alt="" class="w-100"></div>
<div class="col-xs-12 col-sm-4 col-lg3"><img src="img/sea3.jpg" alt="" class="w-100"></div>
<div class="col-xs-12 col-sm-4 col-lg3"><img src="img/sea3.jpg" alt="" class="w-100"></div>
</div>
</div>
</div>

Комментариев нет:

Отправить комментарий

Materialize-css. Футер

Сделаем футер и прижмем к низу страницы. Документация: https://materializecss.com/footer.html