Делаем наше приложение симпатичнее в визуальном плане: подключим к проекту библиотеку Bootstrap.
Код из видео:
https://github.com/drucoder/sweater/tree/AddBootstrap
Сайт Bootstrap:
Первым делом перейдем на сайт 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/
Канал в Telegram: https://t.me/letsCode_dru
Чат в Telegram: https://t.me/joinchat/FeiP9xEhqHajfqhLr4z-Nw
Ссылка на плейлист: https://www.youtube.com/playlist?list=PLU2ftbIeotGpAYRP9Iv2KLIwK36-o_qYk
Ссылка на канал: https://www.youtube.com/channel/UC1g3kT0ZcSXt4_ZyJOshKJQ