![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
alexpоигрался несколько дней с Bootstrap - набором инструментов для создания сайтов и веб-приложений (фреймворк для фронтэнда). Bootstrap (Бутстрап) включает в себя HTML и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения. При создании сайтов данные инструменты позволяют использовать популярные наработки и не заниматься рутиной.
Лично мне Bootstrap понадобился для адаптивного дизайна (responsive design), чтобы обеспечить просмотр на мобильных устройствах, доля которых постоянно растёт. В общем-то мобильные браузеры вроде Opera довольно неплохо показывают сайты, не оптимизированные для мобильных устройств. Но поисковые системы понижают в поиске сайты без поддержки смартфонов и планшетов.
Можно было плюнуть на старый сайт или воспользоваться движком для сайта (CMS), в том числе тем же Wordpress. Но при этом помимо переноса данных пришлось бы повозиться с перенаправлением старых страниц на новые.
Для создания шаблона страницы воспользовался условно-бесплатным редактором Pinegrow. В его арсенале оказался шаблон offcanvas.html с ниспадающим верхним меню и правым меню. Естественно эта страница с адаптивным дизайном. Правда, после сохранения страницы правое меню переставало работать, так что пришлось разобраться почему (отсутствовал файл offcanvas.js).
Pinegrow - это очень навороченный визуальный редактор страниц, который позволяет создавать их, как в Word, но при этом иметь возможность повозиться с HTML, CSS, Javascript. Поддержка Bootstrap и Foundation даёт возможность использовать наработанные инструменты веб-дизайна. Редактор довольно понятный интуитивно, но лучше конечно изучить его полноценно.
Собственно мне нужен был только простой шаблон страницы с меню, поскольку шаблоны на сайте использую при помощи SSI (несложный язык для динамической «сборки» веб-страниц на сервере).
После изменения дизайна старого сайта, появилось новое меню. Но возникли проблемы с тем, что само содержимое статей вовсе не оптимизировано для мобильных устройств. Но это легко исправить:
Конечно здесь нет тегов и многих других удобных вещей. Зато нет проблем с упавшей базой данных (что у нас часто происходило на обычном хостинге при использовании Wordpress, vBulletin), да и за обновлением не нужно следить так пристально, как в случае со скриптами на PHP. Но конечно уязвимости находят и Javascript, так что совсем забрасывать обновления не стоит.
В общем Bootstrap - это очень хороший инструмент. Но конечно он не идеален. Например, можно найти следующие недостатки:
Лично мне Bootstrap понадобился для адаптивного дизайна (responsive design), чтобы обеспечить просмотр на мобильных устройствах, доля которых постоянно растёт. В общем-то мобильные браузеры вроде Opera довольно неплохо показывают сайты, не оптимизированные для мобильных устройств. Но поисковые системы понижают в поиске сайты без поддержки смартфонов и планшетов.
Можно было плюнуть на старый сайт или воспользоваться движком для сайта (CMS), в том числе тем же Wordpress. Но при этом помимо переноса данных пришлось бы повозиться с перенаправлением старых страниц на новые.
Для создания шаблона страницы воспользовался условно-бесплатным редактором Pinegrow. В его арсенале оказался шаблон offcanvas.html с ниспадающим верхним меню и правым меню. Естественно эта страница с адаптивным дизайном. Правда, после сохранения страницы правое меню переставало работать, так что пришлось разобраться почему (отсутствовал файл offcanvas.js).
Pinegrow - это очень навороченный визуальный редактор страниц, который позволяет создавать их, как в Word, но при этом иметь возможность повозиться с HTML, CSS, Javascript. Поддержка Bootstrap и Foundation даёт возможность использовать наработанные инструменты веб-дизайна. Редактор довольно понятный интуитивно, но лучше конечно изучить его полноценно.
Собственно мне нужен был только простой шаблон страницы с меню, поскольку шаблоны на сайте использую при помощи SSI (несложный язык для динамической «сборки» веб-страниц на сервере).
После изменения дизайна старого сайта, появилось новое меню. Но возникли проблемы с тем, что само содержимое статей вовсе не оптимизировано для мобильных устройств. Но это легко исправить:
- Картинки хорошо масштабируются при добавлении class="img-fluid" к тегу img.
- Видео с youtube масштабируется, если тег iframe окружить div с class="embed-responsive embed-responsive-16by9". Правда, для видео приходится выбирать соотношение сторон (в данном примере 16 на 9, поскольку именно такие видео у меня и использовались).
- Таблицы скролируются на мобильном устройстве с маленьким экраном, если добавить к тегу table класс class="table table-responsive".
Конечно здесь нет тегов и многих других удобных вещей. Зато нет проблем с упавшей базой данных (что у нас часто происходило на обычном хостинге при использовании Wordpress, vBulletin), да и за обновлением не нужно следить так пристально, как в случае со скриптами на PHP. Но конечно уязвимости находят и Javascript, так что совсем забрасывать обновления не стоит.
В общем Bootstrap - это очень хороший инструмент. Но конечно он не идеален. Например, можно найти следующие недостатки:
- стили и скрипты получаются большего размера, чем реально используемые на сайте (а поисковики следят и за скоростью загрузки страницы),
- хотя картинки масштабируются для показа на мобильных устройствах, сами изображение остаются теми же самыми, так что при маленьком разрешении экрана загружается всё та же большая картинка,
- при смене версии Bootstrap очень многие классы могут поменяться. Банально в 3 версии адаптивность картинки обеспечивалась классом .img-responsive , а теперь для этого используется класс .im-fluid. Или бэджи в 3-ей версии использовались с классом .label, в 4-ой уже с классом .badge.
