Spring Boot: оформляем UI с Bootstrap

Spring Boot Web Application (MVC): Делаем наше приложение симпатичнее в визуальном плане: подключим к проекту библиотеку Bootstrap. Код из видео: https://github.com/drucoder/sweater/tree/AddBootstrap Сайт Bootstrap: https://getbootstrap.com/ Первым делом перейдем на сайт Bootstrap и откроем руководство быстрого старта: https://getbootstrap.com/docs/4.1/getting-started/introduction/ Скопируем из него тэги, подключающие стили и скрипты Bootstrap и вставим их в наш главный шаблон common.ftl. После этого обернём директиву #nested этого шаблона в стили контейнера со страницы руководства, описывающей систему сеток Bootstrap: https://getbootstrap.com/docs/4.1/layout/grid/ Следом переделаем наше меню навигации по странице руководства, описывающей примеры оформления навигационных панелей: https://getbootstrap.com/docs/4.1/components/navbar/ Для упралением отображения элементов меню в зависимости от того, залогинен ли пользователь и какие у него права, нам необходимо создать шаблон, не содержащий оформления, но определяющий полезные значения: имя пользователя и признак того, что пользователь имеет админские права. Для этого используем директиву Freemarker assign: https://freemarker.apache.org/docs/ref_directive_assign.html Для включения этого шаблона в панель навигации используем директиву include: https://freemarker.apache.org/docs/ref_directive_include.html При компоновке объектов на странице часто возникает необходимость добавить отступ между элементами. Для этого в Bootstrap присутствует набор стилей с отступами: https://getbootstrap.com/docs/4.0/utilities/spacing/ Далее мы перерабатываем форму логина с использованием стилей из руководства по оформлению форм: https://getbootstrap.com/docs/4.1/components/forms/ Переходим к странице добавления и просмотра сообщений, где меняем офрмление формы ввода нового сообщения, сделав форму ввода "схлопываемой" по примеру из документации: https://getbootstrap.com/docs/4.1/components/collapse/ И последним штрихом меняем оформление сообщений в виде карточек, сверстанных в 3 колонки: https://getbootstrap.com/docs/4.1/components/card/ ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ➡ Твиттер: https://twitter.com/letsCodeDru ➡ Чат в Discord: https://discord.gg/xs6XxSx ➡ Группа Вконтакте: https://vk.com/letscodedru ➡ Канал в Telegram: https://t.me/letsCode_dru ➡ Чат в Telegram: https://t.me/joinchat/FeiP9xEhqHajfqhLr4z-Nw ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ Поддержать проект: ➡ Patreon https://www.patreon.com/letscodedru ➡ Яндекс.Деньги https://money.yandex.ru/to/41001451675086 ➡ PayPal paypal.me/letscodedru ➡ Qiwi https://qiwi.me/letscode ➡ WebMoney/BitCoin https://funding.webmoney.ru/d/drucoder ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ Ссылка на плейлист: https://www.youtube.com/playlist?list=PLU2ftbIeotGpAYRP9Iv2KLIwK36-o_qYk Ссылка на канал: https://www.youtube.com/channel/UC1g3kT0ZcSXt4_ZyJOshKJQ Ссылка на Яндекс.Дзен: https://zen.yandex.ru/media/id/5ac20956168a91ffeae449c5

Видео Spring Boot: оформляем UI с Bootstrap автора CSS от идеи до запуска