—»     —»   Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap
  Раздел: Руководства   Комментариев: 1  

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap



«Добро пожаловать в адаптивный интернет!», - в прошлом году и в продолжении эту фразу можно было встретить практически повсеместно, настолько часто, что некоторые клиенты даже стали задавать вопросы о том, что же это такое. Лично для нас эта тема очень интересна, так как вряд ли кто-то вспомнит, чтобы клиенты спрашивали что-то о мобильных или планшетных версиях веб-сайта.

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

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

Адаптивный веб-дизайн – это подход, который часто называют даже складом ума, так как здесь важно изменить сам ход мышления, если вы собрались переходить на адаптивный дизайн. Основная суть в адаптивном дизайне заключается в том, что один дизайн отвечает за все. Больше не будет никаких m.domain.com, не будет touch.domain.com, не будет 3 и более отдельных CSS-файлов, не будет 7 PSD-файлов для каждого устройства или ориентации устройства. Будет просто domain.com, который будет отлично приспосабливаться как к экрану настольного ПК, так и к мобильным устройствам и планшетам.

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

Забавный факт: сегодня мы можем использовать media query для устройств, которые весят, скажем, до 3 килограмм. Забавно, не правда ли?

Если вы надумаете заниматься разработкой адаптивных дизайнов, то есть несколько аспектов, которые следует учитывать:

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

* Больше тестирований – это самый основной минус. Самый действенный способ тестирования, конечно же, подразумевает под собой настоящие устройства. И теперь представьте себе, как можно работать, когда с каждыми новыми 5 строками CSS-кода, вам нужно будет открывать сайт через iPad и другие устройства, проверять, как сайт масштабируется и ведет себя при смене ориентации устройства.

Правда, сегодня мы хотим рассказать вам о практически волшебном способе разработки адаптивных дизайнов. И способ этот называется Twitter Bootstrap.

Twitter Bootstrap

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

Twitter Bootstrap был создан двумя парнями в Twitter, которые хотели немного ускорить свой код и рабочий процесс. Если вы зайдете на официальный сайт Twitter Bootstrap, то там инструмент описывается как «утонченная, интуитивная и мощная среда разработки внешних интерфейсов для ускоренной и упрощенной веб-разработки». И это, кстати, правда!

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

Twitter Bootstrap предлагает вам множество интересных вещей:

* Глобальные стили для body для типа сброса и фона, стилей ссылок, сеточной системы и двух простых шаблонов.

* Стили для основных HTML-элементов вроде шрифтов, кода, таблиц, форм и кнопок, а также огромный набор иконок.

* Основные стили для общих компонентов интерфейса вроде вкладок, панелей навигации, оповещений, заголовков страницы и многого другого.

* javascript-плагины для таких вещей, как подсказки, всплывающие кона, модальные окна и многого другого.

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

Приступаем к работе с Bootstrap

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

Важно отметить то, что вы можете скачать среду разработки с официального сайта, либо можете скачать настроенную версию (которую предпочитают многие). Преимущество данной версии заключается в том, что она включает всего 1 CSS-файл со всеми необходимыми вам media queries, в то время как обычная версия предлагает отдельный CSS-файл и отдельный CSS-файл для media queries, а также несколько JS-файлов, что создает небольшой бардак.

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

Если вы перейдете на страницу Customize Bootstrap, то увидите, что у вас есть возможность включить/выключить JS-плагины, CSS-стили, UI-компоненты, адаптивные queries, определение шрифтов, цветов и так далее. В рамках нашего сегодняшнего руководства, здесь вы можете оставить все как есть, и кликнуть по большой кнопке Download Customized Version.

После того, как вы скачали и распаковали архив, у вас в распоряжении будет следующее:

- bootstrap/
-- css/
--- bootstrap.css (safe to delete)
--- bootstrap.min.css
-- js/
--- bootstrap.js (safe to delete)
--- bootstrap.min.js
-- img/
--- glyphicons-halflings.png
--- glyphicons-halflings-white.png

Первое что вы можете сделать, это удалить неуменьшенные версии CSS и JS-файлов (bootstrap.css, bootstrap.js), так как мы не думаем, что вам понадобится редактировать или исправлять какой-то bootstrap-код, и к тому же минимизированные версии будут весить гораздо меньше, и будут готовыми к использованию.

Далее нам нужно включить эти файлы в проект. Давайте представим, что у нас есть чистый HTML-файл, который выглядит примерно так:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>No Boostrap in this project</title>
</head>
<body>
<p>Hey, i wanna be responsive too :(</p>
</body>
</html>

Здесь вам нужно просто сослаться на CSS- и JS-файлы, которые были созданы посредством инструмента. Например:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>With Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
<p>Hello Bootstrap!</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Примечание 1: важно помнить, что вам не нужно включать какие-то либо js-файлы в Bootstrap, чтобы они работали. У вас будут все адаптивные свойства, сетка и CSS-стили из одного CSS-файла, но для других элементов среды разработки вроде оповещений, вкладок и так далее, нам будут нужны JS-файлы. Также не забудьте включить jQuery, если вы собираетесь использовать JS-плагины от Bootstrap.

Примечание 2: Мы всегда размещаем все наши js-файлы в самом низу HTML, потому что таким образом они не блокируют рендеринг страницы и не растягивают время загрузки CSS. По крайней мере, об этом написано в правилах ySlow и Google PageSpeed для оптимизации и ускорения загрузки веб-сайтов. Если вы новичок, то не забудьте ознакомиться с материалами по ссылкам выше, и прочитать об этом, потому что вы уже в этом замешаны.

Итак, теперь в наш проект включен Bootstrap, и мы можем воспользоваться его волшебством.

Основа Bootstrap

Посредством Bootstrap вы получаете 12-колоночную сетку с двумя опциями:

* fluid – если вам нужно, чтобы ваше приложение растягивалось на 100% ширины экрана.
* fixed – если вы создаете стандартный веб-сайт, то вам, вероятнее всего, не понадобятся все 100% ширины экрана. Часто используется лишь 940 пикселей.

Примечание: если вы воспользуетесь фиксированным шаблоном, то вам следует помнить о том, что по умолчанию в Bootstrap есть media query для «больших настольных мониторов», так что если ваш экран будет более 1200 пикселей в разрешении, 940-пиксельная сетка расширится до 1170 пикселей. Вы можете выключить эту функцию в разделе customization, о которой мы уже упоминали ранее, и тогда у вас будет простая 940-пиксельная сетка. Многие предпочитают оставить эту функцию включенной, так как на 27-дюймовом iMac все выглядит довольно маленьким.

Давайте предположим, что мы используем фиксированный шаблон для создания 3 блоков на главной странице, и нам хочется, чтобы они шли друг за другом. Если бы вы не использовали Bootstrap, вам бы пришлось писать CSS для вашего контейнера контента, каждого блока, добавлять выравнивание, убирать выравнивание, указывать отступы, поля… давайте же просто взглянем на волшебство Bootstrap:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started with Bootstrap</title>
<link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css">
</head>
<body>

<div class="container">

<div class="hero-unit">
<h1>Awesome responsive layout</h1>
<p>Hello guys i am a ".hero-unit" and you can use me if you wanna say something important.</p>
<p><a class="btn btn-primary btn-large">Super important &raquo;</a></p>
</div><!-- .hero-unit -->

<div class="row">
<div class="span4">
<h2>Box Number 1</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">Click meeee &raquo;</a></p>
</div><!-- .span4 -->

<div class="span4">
<h2>Box Number 2</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">Click meeee &raquo;</a></p>
</div><!-- .span4 -->

<div class="span4">
<h2>Box Number 3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">Click meeee &raquo;</a></p>
</div><!-- .span4 -->

</div><!-- .row -->
</div><!-- .container -->

</body>
</html>

И на этом все! У нас есть 3 блока с красивым стандартным оформлением, а также мы в качестве бонуса добавили некоторый контент перед блоками, чтобы все выглядело более привлекательно. А самое главное – здесь все полностью адаптивно (вы можете просто попробовать изменить в размере ваш браузер).

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

Давайте немного разберем написанное:

<div class="container"></div>
- это необходимый элемент, так как он служит оболочкой для всего контента страницы. Самое интересное здесь в том, что если вам захочется использовать гибкую разметку, вам нужно будет просто добавить container-fluid вместо container.

<div class="row"></div>
- еще один необходимый элемент для создания рядов, оболочка для колонок, которая отвечает за поля, отступы и очистку свободных элементов. Опять же, если вы заинтересованы в использовании гибкой разметки, просто замените row на row-fluid, и все готово!

<div class="span4"></div>
- div-элемент с классом span* представляет собой колонку, и в данном случае, нам понадобятся 3 блока в один ряд. Так что, если провести простое математическое вычисление 12/3=4, то мы получим span4.

<div class="hero-unit"></div>
- это просто еще один компонент Bootstrap, который мы добавили для того, чтобы сделать пример более привлекательным.

Как видно, при помощи всего 3 CSS-классов вы можете уже сказать, что понимаете основу. Единственное, что вы будете изменять, это классы .span, и они могут изменяться от 1 до 12, в зависимости от того, насколько широким должен быть ваш блок. Так что, div с классом span12 должен быть шириной в 1170 пикселей для широких рабочих столов, 940 пикселей для ноутбуков, а также меньших размеров для планшетов и телефонов.

Чтобы узнать о более комплексных примерах, проверьте примеры, приведенные в Bootstrap.

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

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

Расширяем Bootstrap

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

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

* jQuery UI Bootstrap Theme
Это нечто, чем пользуется множество разработчиков внешних интерфейсов при разработке современных и интерактивных дизайнов. Мы самостоятельно протестировали этот инструмент, и можем с уверенностью сказать, что он работает отлично.

* Bootstrap Colorpicker
Еще один хороший плагин для Bootstrap, который позволяет очень удобно выбирать цвет.

* Fbootstrapp
Fbootstrapp представляет собой набор инструментов, предназначенный для того, чтобы упростить процесс разработки iframe-приложений для Facebook. Он включает основной CSS и HTML для типографики, форм, кнопок, таблиц, сеток, навигации и так далее, разработанных специально для сочетания с внешним видом социальной сети Facebook.

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

* Font Awesome
Если вам нравится использовать иконки при создании элементов пользовательского интерфейса, то данный пользовательский шрифт был создан из иконок, которые точно удивят вас. Более 70 иконок, созданных специально для bootstrap, в одном CSS-файле.

* BootBox
Bootbox.js – это небольшая javascript-библиотека, которая позволяет вам создавать программируемые диалоговые окна при помощи модальных окон Twitter Bootstrap.

Сходим с ума вместе с Bootstrap

Возможно, вы сейчас сидите и думаете: «Все это классно, но Bootstrap предлагает нам довольно обычный дизайн, который не подойдет к моему суперскому уникальному дизайну». Остановитесь на секунду, и позвольте нам объяснить, что вы немного не правы. Вы можете использовать Bootstrap с любыми дизайнами в любых условиях. У нас были клиенты, которые предлагали нам уже имеющийся код и CSS, но не предоставляли нам адаптивных шаблонов, и буквально за пару дней мы превращали их веб-сайт в адаптивный веб-сайт.

Вы можете увидеть отличный пример в портфолио компании flip.hr.

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

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

Еще один факт по поводу Bootstrap, который следует отметить, заключается в том, что платформа очень гибкая. К примеру, в некоторые сайты включают больше параметров: центрирование шаблона, ленивую загрузку изображений, аппаратное ускорение для переходов по страницам и эффектов. Также пишут дополнительные media queries, так некоторым хочется, чтобы все выглядело одинаково на всех устройствах. Чтобы протестировать веб-сайт вроде нашего на всех устройствах и разрешениях, у нас ушло бы до нескольких месяцев, а следовательно, теперь это время мы можем посвятить дизайну, функциональности и, конечно же, SEO-оптимизации.

Секреты профессионалов

* Adobe Edge Inspect

Edge Inspect был выпущен совсем недавно, и позволяет вам осуществлять предварительный просмотр или тестирование дизайнов на iOS и Android-устройствах. Ах да, забыли сказать, что все это происходит удаленно? Это позволит вам сэкономить множество времени, и позволит вам разрабатывать лучшие и более быстрые адаптивные свойства.

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

* Viewport Resizer

Еще один замечательный инструмент для тестирования ваших веб-сайтов на адаптивность. Это браузерный инструмент (букмарклет, если точнее), так что вам не придется ничего скачивать дополнительно. Просто кликните и все.

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

Responsive Images

На самом деле, существует несколько вариантов реализации адаптивных изображений. Большинство людей, которых мы знаем, используют методику адаптивных изображений от Filament Group. Так что, пока в спецификации HTML5 не появится хорошего и родного подхода, вы можете ознакомиться со следующими ссылками:

* Responsive Images
* Adaptive Images
* Retina Images

Разное

Здесь мы хотим предложить вам что-то, что также окажется удобным при работе над адаптивными дизайнами. Плагин Fittext невероятно привлекателен, но надеемся, что вам не придется часто использовать его, потому как есть еще и плагин Responsive Slides.

* Fittext

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

* Responsive Slides

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

Бонусы и больше ресурсов

* HTML5 Boilerplate

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

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

* Платформа Foundation

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

Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap

Мы также предлагаем вам несколько других полезных ресурсов, связанных с Twitter Bootstrap.

* Building Twitter Bootstrap (Разработка при помощи Twitter Bootstrap)
* Twitter Bootstrap 101: Introduction (Twitter Bootstrap 101: Введение)
* 20 Awesome Resources for Twitter Bootstrap Lovers (20 великолепных ресурсов для любителей Twitter Bootstrap)
* 20+ Beautiful Resources That Complement Twitter Bootstrap (Более 20 ресурсов, посвященных Twitter Bootstrap)

В завершение

Мы надеемся, что у нас получилось рассказать вам о том, что такое Bootstrap. Помните, что это не поможет вам сделать веб-сайт, если вы не знаете абсолютно ничего. Но вы можете быть уверенными в том, что этот инструмент очень поможет вам, если вы понимаете, что делаете.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 27690   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 1 февраля 2013 @ 17:24
Написал: Vatrych — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Обязательно попробую, так как эта статья очень мотивирует. Как всегда огромное Вам спасибо. fellow
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930