Баннер


Адаптивный дизайн на Bootstrap

Адаптивный дизайн на BootstrapВ современном мире тяжело представить себе человека, не имеющего у себя в кармане какого-нибудь смартфона, а дома, например, планшета или ноутбука. В связи с этим, веб-дизайнерам приходится выкручиваться для того, чтобы их прекрасный сайт одинаково хорошо смотрелся как на маленьких экранах, так и на большом плазменном телевизоре. А на помощь им приходит адаптивный дизайн.

Как уже не трудно догадаться, адаптивный дизайн – дизайн сайта, который обеспечивает хорошее и красивое отображение веб-страницы на всех видах устройств. Суммируя: если вы заказываете создание сайта по адресу apsite.in.ua и хотите, чтобы он одинаково выглядел и на телефоне, и на планшете, и на компьютере и даже на телевизоре, самый лучший помощник в этом деле вам – Twitter Bootstrap.

Существует множество различных CSS-фреймворков, которые сами определяют масштабы экрана и под них «подгоняют» ваш сайт. Примеры: Twitter Bootstrap, Skeleton, Gumby Framework, Gridless и др. Но в данной статье мы рассмотрим наиболее популярный и передовой – Bootstrap.

Небольшая предыстория: раньше Bootstrap разрабатывался конкретно для компании Twitter, как внутренняя библиотека, а позже (19 августа 2011 года) был выложен в открытый доступ для общего пользования. Последняя версия фреймворка – Bootstrap 4, которая была выпущена 18 января 2018 года.

Огромным преимуществом Bootstrap’а является то, что помимо необходимого адаптивного дизайна он также имеет большую библиотеку различных инструментов: значки, кнопки, меню, индикаторы. С полным списком можно ознакомиться на официальном сайте фреймворка https://getbootstrap.com/.

Адаптивный дизайн в Bootstrap представляет собой сетку, состоящую из строк (row) и колонок (col). Максимальное количество колонок в одной строке – 12. Тут всё очень просто: вы задаёте (присваиваете класс) определенные размеры нужной ячейки в пропорциях для каждого отдельного устройства. Например, col-lg-5 col-xs-3 col-sm-11. Что это значит? Это значит, что на больших экранах ширина данного столбца будет отображаться в соотношении 5/12, на маленьких – 3/12, а на средних – 11/12.

Если разобраться в этом деле, то совсем скоро вы полюбите Bootstrap за его простоту и уникальность. Единственной проблемой фреймворка является отсутствие официальной русской документации. В интернете вы можете наткнуться на множество одинаковых сайтов, которые, по сути, представляют машинный перевод официального справочника по Bootstrap с ошибками и опечатками, поэтому это может вас запутать. Но это ещё один повод подучить английский язык, ведь без него в программировании почти что никуда.

Баннер

Добавить комментарий


Защитный код
Обновить

Баннер

Новости в сети