Сделай сам Адаптивный Дизайн Часть II: Проектирование с Bootstrap

  1. Используйте редактор кода
  2. Используйте точки останова Bootstrap
  3. Держите структуру отдельно от презентации

Во второй части нашей серии DIY Responsive Design мы покажем вам, как использовать CSS-сетку Bootstrap для создания адаптивных шаблонов магазинов. Bootstrap - это популярная платформа HTML, CSS и Javascript для разработки адаптивных сайтов, которая является идеальным местом для начала создания страниц для нескольких устройств.

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

Для упрощения сетка Bootstrap разбивает веб-сайты на набор из двенадцати строк столбцов. Строки начальной загрузки определяют группу элементов страницы, которые появляются рядом на странице вместе. Классы столбцов начальной загрузки описывают, сколько столбцов в строке занимает элемент на экранах определенного размера.

Оттуда это становится вопросом понимания имен классов столбца Bootstrap. Они содержат три части. Первый «col» идентифицирует имя как один из классов столбцов. Во-вторых, «xs», «sm», «md» и «lg» описывают размеры окна браузера, на которые отвечает класс.

  • xs = экраны мобильных телефонов
  • sm = экраны планшета
  • md = большие экраны планшетов и меньшие мониторы ноутбуков, как правило, от 11 до 13 дюймов
  • LG = 15 дюймов и выше экранов.
Наконец, числа (от 1 до 12) представляют, сколько столбцов в строке должен занимать элемент. Таким образом, .col-sm-1 занимает одну колонку на планшетном устройстве, а .col-md-6 занимает шесть колонок на экране ноутбука. Существует много того, что нужно для создания хорошо структурированной страницы, объединяющей все браузеры, и следующие советы и рекомендации помогут вам создать адаптивные макеты с наименьшим количеством возможных проблем.

Используйте редактор кода

Для достижения наилучших результатов при создании адаптивных страниц на платформе Volusion мы рекомендуем вам использовать редактор кода, а не визуальный редактор. Использование редактора кода гарантирует, что ненужные стили или элементы не будут добавлены на вашу страницу во время работы над ней. Вы можете включить редактор кода на платформе Volusion, щелкнув </> на панели инструментов окна редактирования.

Не копируйте и не вставляйте содержимое из форматированного текста в редактор. Среды форматированного текста, такие как Microsoft Word или Adobe InDesign, представляют собой инструменты, позволяющие редактировать представление текста и макеты страниц. Копирование текста из такой среды расширенного текста может включать информацию о форматировании, которая может вызвать проблемы.

Рекомендуется использовать текстовый редактор, такой как Атом или же Возвышенный текст написать свой HTML и CSS при создании страниц. Эти текстовые редакторы предлагают подсветку синтаксиса и набор плагинов, которые помогут вам при написании кода.

Используйте точки останова Bootstrap

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

Мы рекомендуем использовать CSS медиа-запрос правила, которые соответствуют Bootstrap при создании страниц вашей статьи. Выравнивание стилей для настройки при настройке сетки Bootstrap поможет вашим страницам лучше реагировать на различные размеры экрана.

Bootstrap определяет четыре точки останова которые представляют размеры экрана телефона, планшета, ноутбука и рабочего стола.

  • Телефоны: размеры экрана менее 768 пикселей
  • Таблетки: размеры экрана больше 768 пикселей в ширину, но менее 992 пикселей в ширину
  • Ноутбуки: размеры экрана более 992 пикселей в ширину, но менее 1200 пикселей в ширину
  • Настольные мониторы : размеры экрана более 1200 пикселей
Чтобы создать свои собственные медиа-запросы, просто выберите размер экрана, на который вы хотите настроить таргетинг, и создайте правило CSS для этого размера экрана. Например, предположим, что вы хотите настроить таргетинг на телефоны:

@media только экран и (максимальная ширина: 768 пикселей) {

/ * Ваши правила CSS здесь * /

.myArticleWrapper p {

размер шрифта: 18 пикселей;

}

}

Совет для профессионалов: при работе с медиа-запросами напишите универсальные правила CSS для стилей, которым не нужно реагировать на различные устройства и размеры экрана, и используйте только правила медиа-запросов для изменения стилей, которые должны реагировать на устройства и размеры экрана.

Держите структуру отдельно от презентации

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

Общая структура элемента для подражания может быть:

<div class = " myArticleWrapper ">

<div class = "row">

<div class = "col-sm-6 col-md-3">

<div class = " myArticleContent "> ... </ div>

</ DIV>

<div class = "col-sm-6 col-md-3">

<div class = " myArticleContent "> ... </ div>

</ DIV>

<div class = "col-sm-6 col-md-3">

<div class = " myArticleContent "> ... </ div>

</ DIV>

<div class = "col-sm-6 col-md-3">

<div class = " myArticleContent "> ... </ div>

</ DIV>

</ DIV>

</ DIV>

Обратите внимание на классы div myArticleWrapper и myArticleContent . Используйте эти элементы для добавления границ CSS, фона, применения дополнительных полей и отступов или других подобных структурных стилей. Не используйте элементы с классами Bootstrap (т.е. .row или .col-sm-6.col-md-3). Причиной этого является то, как веб-браузеры отображают страницы, используя Модель коробки , Изменение полей, отступов или ширины элементов Bootstrap повлияет на то, как эта библиотека использует блочную модель для создания отзывчивой страницы.

Это завершает часть Bootstrap нашего Руководства по адаптивному дизайну. В следующем и последнем посте мы поделимся общими рекомендациями по HTML и CSS.

Заинтересованы в том, чтобы наша команда разработала адаптивный шаблон или страницу для вашего бизнеса? Проверьте наш услуги по индивидуальному дизайну и премиум шаблоны !

Заинтересованы в том, чтобы наша команда разработала адаптивный шаблон или страницу для вашего бизнеса?