Сделай сам Адаптивный Дизайн Часть 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 дюймов и выше экранов.

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

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

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

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

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

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

• Телефоны: размеры экрана менее 768 пикселей
• Таблетки: размеры экрана больше 768 пикселей в ширину, но менее 992 пикселей в ширину
• Ноутбуки: размеры экрана более 992 пикселей в ширину, но менее 1200 пикселей в ширину
• Настольные мониторы : размеры экрана более 1200 пикселей

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

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

.myArticleWrapper p {

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

}

}

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

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

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

<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.

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

Похожие

Комментарии