пятница, 15 июня 2018 г.

Bootstrap 4. Вставка видео

<!-- Видео. Начало -->
<!--
Начальная ссылка:  https://www.youtube.com/watch?v=SP9A1gg4mv0
Ссылка для вставки: https://www.youtube.com/embed/SP9A1gg4mv0
16by9 - это стороны видео для отображения
-->

Bootstrap 4. Карточки

Классы: card, card-body, card-title, card-text.
card-img-overlay - отображает текст на картинке
card-group - группа карточек, card-deck - делает промежутки между карточками

Bootstrap 4. Flexbox

Флекс боксы.

Bootstrap 4. Классы отступов

Классы можно посмотреть на сайте: https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/
В Бутстрап 4 есть классы для отступов m, p  др.
https://getbootstrap.com/docs/4.1/utilities/spacing/

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

Bootsrap 4. Форма в модельном окне

Напишем форму регистрации.

Bootsrap 4. Модальное окно

Заметка: добавление класса modal-lg делает окно большим, а modal-sm - маленьким.

Bootsrap 4. Сетка

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

Bootsrap 4. Слайдер

Дополним страницу слайдером.

Bootstrap 4. Навигация

Цветовые схемы navbar:
navbar-dark bg-dark
navbar-light bg-primary/light

Цвет фона можно переопределить на любой свойсвом background-color.

Фиксированный navbar достигается добавлением класса fixed-top или sticky-top
Фиксирует внизу страницы: fixed-bottom

понедельник, 4 июня 2018 г.

Настройка MODx

1. Отправляемся в пункт меню "Приложения" - "Установщик".
На самой странице нажимаем "Загрузить дополнения".

Materialize-css. Футер

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