Александр Попов (athunder) wrote,
Александр Попов
athunder

Bootstrap - набор инструментов для создания сайтов и веб-приложений

Поигрался несколько дней с Bootstrap - набором инструментов для создания сайтов и веб-приложений (фреймворк для фронтэнда). Bootstrap (Бутстрап) включает в себя HTML и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая 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".

В общем-то можн было на этом остановиться. Но интересно было посмотреть на дополнительные "плюшки" Bootstrap. В результате добавил разделители в ниспадающем меню, бэджи вроде "выплаты получены", а также хлебные крошки (breadcrumbs) для поисковиков. Плюс поиск заменил на Яндекс поиск по сайту и данному блогу в ЖЖ одновременно, но это уже без Bootstrap.

http://emoney.al.ru/

Конечно здесь нет тегов и многих других удобных вещей. Зато нет проблем с упавшей базой данных (что у нас часто происходило на обычном хостинге при использовании Wordpress, vBulletin), да и за обновлением не нужно следить так пристально, как в случае со скриптами на PHP. Но конечно уязвимости находят и Javascript, так что совсем забрасывать обновления не стоит.

В общем Bootstrap - это очень хороший инструмент. Но конечно он не идеален. Например, можно найти следующие недостатки:

  • стили и скрипты получаются большего размера, чем реально используемые на сайте (а поисковики следят и за скоростью загрузки страницы),

  • хотя картинки  масштабируются для показа на мобильных устройствах, сами изображение остаются теми же самыми, так что при маленьком разрешении экрана загружается всё та же большая картинка,

  • при смене версии Bootstrap очень многие классы могут поменяться. Банально в 3 версии адаптивность картинки обеспечивалась классом .img-responsive , а теперь для этого используется класс .im-fluid. Или бэджи в 3-ей версии использовались с классом .label, в 4-ой уже с классом .badge.



via
Tags: bootstrap, framework, pinegrow, адаптивный дизайн, веб-дизайн, веб-разработка
Subscribe

Recent Posts from This Journal

promo athunder may 26, 2013 11:36 17
Buy for 10 tokens
Вы можете вернуть процент с покупок, используя специализированные Интернет сервисы возврата наличных (cash back, кешбэк, кэшбэк, кэшбек). Такие сервисы предоставляют ссылки на Интернет-магазины. Переходя по ним и совершая покупки, вы получаете процент в виде наличных обратно. Если обычные сайты…
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments