Общее представление о Bootstrap и его классах мы получили из предыдущих постов, в сегодняшней статье рассмотрим более подробно работу с bootstrap и html компонентами в шаблонах PrestaShop.
Метка: вёрстка для мобильных устройств
Новогодние праздники позади и мы продолжаем знакомство с реализацией Bootstrap в шаблонах PrestaShop. Для навигации рекомендую использовать первый пост в цикле статей. В Bootstrap есть множество дефолтных классов с заранее заданными стилями поведения – PrestaShop поддерживает большинство из них.
В преддверии нового года предлагаю познакомиться с еще одной важной темой для верстки шаблона PrestaShop с поддержкой Bootstrap, а новогодние праздники потратить на закрепление материала )
Итак перейдем к теории — Bootstrap использует 12 колоночную сетку, которая позволяет построить гибкий макет. Вы можете использовать медиа запросы для указания контрольных точек для сетки. Дефолтное значение оптимизировано для самых низких разрешений экрана (480px – экраны самых маленьких телефонов), поэтому для этого случая использовать медиа конструкцию не нужно.
Как и обещала от теории переходим к практике, в сегодняшнем посте опишу подробнее применение Bootstrap в структуре шаблона PrestaShop.
Для полноценной работы Bootstrap необходимо использование HTML5. Будьте внимательны используя свойство doctype в своих шаблонах.
Начиная с версии PrestaShop 1.6 базовый шаблон разрабатывается на основе фрэймворка Bootstrap. Поэтому даже если Вы не планируете разработать шаблон с нуля, а только хотите внести ряд правок в текущий – необходимо ознакомиться с этой технологией.
Вёрстка для мобильных устройств — очень мало освещённая и молодая тема для веб-разработчиков. Перед собственно постом с технической информацией, позвольте сделать небольшое лирическое отступление.
Мобильный телефон давно перестал быть только средством для звонков и отправки смс, благодаря безлимитным тарифам от сотовых операторов теперь можно полноценно «сёрфить» в сети. Например, согласитесь удобно посмотреть новое меню любимого кафе или адрес и схему проезда шинного центра который порекомендовал ваш друг. Получив смс о распродаже в магазине, можно сразу же зайти на их сайт и просмотреть есть ли интересные предложения. Преимущества мобильного интернета можно перечислять бесконечно, но чтобы воспользоваться этими благами нужна отдельная вёрстка и дизайн для мобильных устройств. К счастью большинство заказчиков и разработчиков это понимают, тема веб-разработки под мобильные устройства становиться всё популярнее.