MODX Revo - Додавання кнопок соціальних мереж у футер, ІТ Шеф

Розмітка футера

Розмітку футера зробимо адаптивною за допомогою класів Twitter Bootstrap 3:

• на пристроях sm, md і lg (ширина більше або дорівнює 768 px) блоки розташуємо горизонтально.
• на пристроях xs (ширина менше 768 px) блоки розташуємо вертикально.

Наповнення футера контентом

Після створення розмітки перейдемо до заповнення футера контентом.

У блок div з помістимо текст та картинку:

У результаті вийде наступний код футера, який необхідно помістити в чанк "chunk.footer", створений на попередніх уроках:

Крім цього не забуваємо завантажити та підключити FontAwesome. Для цього відкриваємо сайт FontAwesome, завантажуємо архів, розпаковуємо його в директорію assets на сервері та підключаємо її за допомогою елемента link у чанці "chunk.head":

Оформлення футера

Оформлення футера виконаємо за допомогою стилів CSS:

Додамо створені стилі файл styles.css , розташований каталозі /assets/bootstrap/css на сервері.

Демонстрація футера на сторінці

Створений футер продемонструємо за допомогою таких зображень:

---