Веб-разработка - Создание адаптивных веб-сайтов с помощью Bootstrap

Кит Пижиновски

Продукты и технологии:

Bootstrap, Visual Studio 2013, CSS, JavaScript

В статье рассматриваются:

• Bootstrap и адаптивный веб-дизайн;
• эксперименты с сетчатой системой Bootstrap;
• компоненты Bootstrap и плагины JQuery;
• принятие решение о том, подходит ли Bootstrap для вашего сайта.

Это лишь вопрос времени, когда какой-нибудь пользователь наберет URL вашего сайте на своем мобильном устройстве. Обнаружит ли этот пользователь, что пользоваться вашим сайтом со смартфона невозможно из-за того, что он рассчитан только на настольные системы? Если да, он скорее всего отправится на более дружественный к мобильным устройствам сайт.

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

В этой статье дан обзор одной из таких инфраструктур, Bootstrap, включенной во многие шаблоны проектов Web Application в Visual Studio 2013. Bootstrap — это инфраструктура, поддерживающая адаптивный веб-дизайн (responsive Web design, RWD) — такой подход к проектированию веб-сайтов, который обеспечивает приемлемое зрительное восприятие на устройствах всех форм-факторов с помощью единой кодовой базы. После обзора я рассмотрю некоторые факторы, которые могут помочь решить, подходит ли для вашего сайта инфраструктура вроде Bootstrap.

Начало всех начал

Потребовался определенный виток эволюции, чтобы индустрия программного обеспечения вышла в ту точку, где появляются решения вроде Bootstrap. После фальстарта в 1998 году, когда сначала появлялись, а потом исчезали Wireless Markup Language (WML), Compact HTML и XHTML Mobile Profile, в 2009 году HTML5 наконец стал стандартом HTML нового поколения для всех устройств. Но одних стандартов не достаточно. Пока шло развитие стандарта для веб-разметки на мобильных устройствах, были достигнуты значительные успехи в аппаратном обеспечении, мобильных браузерах и пропускной способности сетей. Процессоры стали быстрее, мобильные браузеры продвинулись до такого состояния, что могли отображать любую веб-страницу (даже если страница не была рассчитана на мобильное устройство). Это создало новую среду для разработчиков.

Разработчики любят создавать инструменты для других разработчиков, и мобильная Web не является исключением. Сегодня на рынке предлагается более десятка разных инфраструктур UI. Было бы нечестно отметить одну из этих инфраструктур как лучшую, потому что существуют разные подходы, а разные веб-сайты предъявляют разные требования. Я выбрал Bootstrap для этой статьи, поскольку она достаточно распространена, полностью документирована и включается в шаблоны ASP.NET Web Application.

Что такое Bootstrap?

Bootstrap — инфраструктура адаптивных UI для веб-сайтов. Она, как и многие другие инфраструктуры UI для веб-разработки, является набором CSS-классов, UI-компонентов и JQuery-плагинов. Bootstrap считается облегченной инфраструктурой. Иначе говоря, для выполнения своей работы она использует CSS больше, чем JavaScript. Хотя Bootstrap считается облегченной, веб-страница, использующая инструментарий Bootstrap, все равно требует больше обработки для рендеринга по сравнению со страницей, написанной специально для данного форм-фактора. По этой причине производительность должна быть важным фактором при проектировании, разработке и тестировании страниц, использующих любую часть инфраструктуры Bootstrap.

Если вы предпочитаете использовать новейшие версии Bootstrap и JQuery, обновляйте свой проект с помощью NuGet.

Bootstrap многое делает за вас автоматически. Она также позволяет легко адаптировать поведение по умолчанию для конкретного форм-фактора, в то же время сохраняя хороший вид вашей страницы на других форм-факторах. Bootstrap версии 3 поставляется с CSS-классами, специально ориентированными на те размеры экранов, с которыми имеют дело мобильные, планшетные, настольные браузеры и даже браузеры на ПК с очень большими экранами. Вы можете использовать CSS-классы Bootstrap для аннотирования HTML5-элементов. К числу наиболее часто применяемых CSS-классов относится сетчатая система (grid system) в Bootstrap — набор классов, организующих разметку страницы с использованием строк и столбцов. Я опишу эту систему подробнее далее в этой статье.

В Bootstrap есть ряд UI-компонентов для создания UI сайта, включая раскрывающееся меню кнопки (Button dropdown), группу Button, раскрывающийся список (Dropdown), Navbar, Breadcrumb, объект Media, панели Pagination и Progress и многие другие. Большинство этих компонентов сами являются адаптивными, т. е. они по-разному визуализируются в зависимости от ширины экрана, поддерживаемой браузером. Например, Navbar — мощный компонент, который автоматически переходит от строки меню на всю ширину экрана на настольных компьютерах, в которой показываются пункты меню, к симпатично выглядящей компактной версии, которая предоставляет пункты меню через раскрывающуюся полоску меню, активируемую касанием Navbar.

Для поддержки более продвинутых UI-средств в Bootstrap также имеется набор пользовательских плагинов JQuery, в том числе Carousel, сворачиваемая панель (Collapsible panel), модальные диалоговые запросы (Modal dialog prompts) и всплывающие сообщения (Popover messages).

Приступаем

Bootstrap CSS- и JavaScript-файлы автоматически включаются в ваш проект при использовании шаблона ASP.NET Web Application в Visual Studio 2013. Диалог New Project для шаблонов Web Application показан на рис. 1. Bootstrap также требует JQuery. Получая Bootstrap из шаблона Web Application в Visual Studio 2013, вы на самом деле получаете Bootstrap v3.0.0 с JQuery v1.10.2. Если вы применяете шаблоны для Visual Studio 2012, эти файлы не включаются в ваш проект. Кроме того, Bootstrap не включается автоматически, если вы создаете новый веб-сайт через File | New Web Site.

Рис. 1. Диалог New Project в Visual Studio 2013 для шаблона ASP.NET Web Application

Если вы предпочитаете использовать новейшие версии Bootstrap и JQuery, обновляйте свой проект с помощью NuGet. Более того, NuGet позволяет получить Bootstrap, если вы располагаете версией Visual Studio до Visual Studio 2013. На сайте Bootstrap (getbootstrap.com) показывается, как подключиться к версии Bootstrap, размещенной в CDN, что может существенно повысить производительность.

Эксперименты с сетчатой системой Bootstrap

Bootstrap предоставляет так называемую 12-столбчатую адаптивную разметку. Вы можете размечать свои страницы, используя любое количество строк, но должны использовать 12 столбцов. Эти 12 столбцов получают одинаковый размер по всей ширине окна браузера, и с помощью CSS-классов Bootstrap вы указываете, сколько столбцов должен занимать тот или иной HTML-элемент. Этот тип сетчатой системы отличается от той, к которой привыкли XAML-разработчики в Windows Phone и Windows 8. Сетчатая система XAML разрешает создавать в разметке страницы любое количество строк и столбцов. Разработчики помещают каждый элемент управления в ячейку, указывая номера строки и столбца. Что делает сеточную систему Bootstrap особенно мощной, так это возможность указывать разные объединения колонок (column span) для больших и обычных настольных ПК, планшетов и смартфонов. Например, распространенный шаблон разметки заключается в создании серии div, причем для каждого div указывается, что тот должен занимать два столбца на большом настольном ПК (т. е. на каждой строке умещается по шесть div), три столбца на обычном настольном ПК, четыре — на планшете и шесть — на смартфоне (с двумя div на строку). Этот сценарий кодируется на рис. 2, используя классы col*, которые составляют сеточную систему Bootstrap. Классы цветов (gray, orange и т. д.) просто окрашивают фон div. На рис. 3 и 4 показано, как эта страница будет визуализироваться на настольном ПК и смартфоне соответственно.

{Для верстки: этот листинг придется дать с наездом на соседнюю колонку}

Рис. 2. Распространенный шаблон разметки с использованием сеточной системы Bootstrap

<body>
  <div class="container">
    <hr />

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">12</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">13</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">14</div>

  </div> <!-- /container -->

</body>

Рис. 3. Пример визуализации разметки с рис. 2 на настольном ПК, используя класс col-md-3

Рис. 4. Пример визуализации разметки с рис. 2 на смартфоне, используя класс col-xs-6

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

Табл. 1. Категории классов в сеточной системе Bootstrap

Префикс категории	Форм-фактор	Ширина в пикселях
col-xs-*	Смартфон	Менее 768
col-sm-*	Планшет	768–991
col-md-*	Обычный настольный ПК	992–1200
col-lg-*	Большой настольный ПК	Более 1200

 

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

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
  {Здесь размещаются другие HTML-элементы.} </div>

Это эквивалентно следующему псевдокоду:

If ширина окна браузера менее 768 пикселей, этот div будет охватывать 6 из 12 доступных столбцов, что займет половину (6/12) экрана

Else if ширина окна браузера находится между 768 и 991 пикселями, этот div будет охватывать 4 из 12 доступных столбцов, что займет треть (4/12) экрана

Else if ширина окна браузера находится между 992 и 1200 пикселями, этот div будет охватывать 3 из 12 доступных столбцов, что займет четверть (3/12) экрана

Else if ширина окна браузера более 1200 пикселей, этот div будет охватывать 2 из 12 доступных столбцов, что займет одну шестую экрана (2/12)

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

<div class="col-xs-6 col-sm-4"> {HTML-элементы здесь.} </div>

Bootstrap содержит более 20 компонентов, которые можно использовать «как есть» или расширить под свои требования.

Bootstrap будет использовать настройку планшета для обоих форм-факторов настольных ПК. Кроме того, класс по умолчанию для смартфонов — col-xs-12, который помещает каждый div в свою строку. Если это приемлемая разметка для смартфона, предыдущую строку кода можно сократить до:

<div class="col-sm-4"> {HTML-элементы здесь.} </div>

Заметьте, что на рис. 2 эти строки не указаны. Сеточная система Bootstrap будет автоматически смещать div в следующую строку, если текущая строка уже используется или если недостаточно места для div. Вы можете принудительно заставить использовать новую строку с помощью класса row:

<div class="row">
  {Сюда поместите столбцы.}
</div>

Почему 12 столбцов? Может показаться, что это число было выбрано случайным образом, но это не так. Число 12 обеспечивает любую кратность деления и открывает широкий простор для сочетаемости. Например, 12 без остатка делится на 1, 2, 3, 4, 6 и 12. Используя эти значения для диапазонов столбцов, можно получать разметку контента на 12 столбцов, 6, 4, 2 и 1 соответственно. Более того, такие комбинации, как 3+9, 9+3, 4+8 и 8+4 являются визуально привлекательными для разметки контента.

Компоненты Bootstrap

Bootstrap содержит более 20 компонентов, которые можно использовать «как есть» или расширить под свои требования. Посмотрите на сайте Bootstrap описание каждого компонента и примеры их использования. В документации по объекту Media для демонстрации используется музыкальный видеоролик REO Speedwagon. Даже если вы не застали 80-е, послушать эту группу стоит.

Компонент Navbar я рассмотрю подробнее — он используется для создания строки меню вверху страницы. На рис. 5 показано, как с помощью этого компонента создать простое меню, содержащее значок сайта и несколько пунктов меню. Если ширина экрана браузера более 768 пикселей, Navbar визуализируется, как на рис. 6, а если она меньше 768 пикселей — как на рис. 7. В данном случае пункты меню отображаются, когда пользователь касается кнопки, содержащей горизонтальные линии.

Рис. 5. Использование Bootstrap-компонента Navbar

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed"
        data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse"
      id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1
          <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Рис. 6. Визуализация Navbar в браузере на экране, ширина которого больше или равна 768 пикселям

Рис. 7. Визуализация Navbar в браузере на экране, ширина которого меньше 768 пикселей

Очевидно, что это очень простой пример. Navbar также может содержать кнопки с раскрывающимися меню и даже включать функциональность поиска. Кроме того, Brand-часть Navbar, которая в примере является текстовой, может быть изображением.

Плагины JQuery

В Bootstrap более десятка плагинов JQuery, которые документированы на вкладке JavaScript сайта Bootstrap. На первый взгляд они кажутся функционально похожими на описанные в предыдущем разделе компоненты в том плане, что это CSS-классы, дополняющие HTML5-элементы. Однако эти CSS-классы инициируют операции JQuery при рендеринге HTML-элемента или при различных событиях, генерируемых HTML-элементом. Страницы, интенсивно использующие эти плагины, следует тестировать на производительность, особенно на устройствах с медленными процессорами и ограниченной памятью.

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

На рис. 8 показано, как использовать плагин Carousel, который предоставляет функциональность для слайд-шоу. Если в вашей странице уже есть ссылка на bootstrap.js или bootstrap.min.js, все готово. Или же можно сослаться на carousel.js, если Carousel — единственный плагин, нужный вашей странице.

Рис. 8. Использование плагина Carousel

<div id="carousel-example-generic" class="carousel slide"
  data-ride="carousel">
  <!-- Индикаторы -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic"
      data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic"
      data-slide-to="1"></li>
    <li data-target="#carousel-example-generic"
      data-slide-to="2"></li>
  </ol>
  <!-- Оболочка для содержимого слайда -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...Для краткости представлен только один слайд
  </div>
  <!-- Элементы управления -->
  <a class="left carousel-control"
    href="#carousel-example-generic" role="button"
    data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"
      aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control"
    href="#carousel-example-generic" role="button"
    data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"
      aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

На рис. 9 видно, как визуализируется плагин Carousel в Windows Phone. Плагин Carousel самостоятельно растягивается под форм-факторы планшетов и настольных ПК (обычных и с большими экранами).

Рис. 9. Пример с плагином Carousel, визуализированным в эмуляторе Windows Phone

Некоторые соображения

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

1. Если у вас есть сайт, производительность которого оптимизировалась годами, и он оптимален для ваших пользователей, будьте крайне осторожны. Хорошая идея — создать прототипы сложных, часто используемых страниц. Если страница с поддержкой Bootstrap, на дает адекватной производительности, подумайте о подготовке мобильного сайта (m-site) и кодируйте все самостоятельно. В статье Дино Эспозито (Dino Esposito) «Mobilize an Existing Web Site» (bit.ly/1CaVEWR) оказано, как подготовить мобильный сайт.
2. Если вы создаете новый сайт, сделайте прототипы самых сложных страниц и страниц, которые, по вашему мнению, будут использоваться наиболее часто. Убедитесь, что они хорошо работают на дешевых устройствах и в условиях малой пропускной способности сети. Если эти страницы окажутся проблематичными, попробуйте изменить их так, чтобы они работали с адекватной производительностью. Как вариант можно создать мобильный сайт, но это следует делать, только если переработка не помогла.
3. Убедитесь, что сеточная система и компоненты Bootstrap, используемые для навигации, не являются слишком ограничивающими факторами в отношении дизайна сайта. На мой взгляд, инструмент подобный Bootstrap заставляет вас проектировать в расчете на мобильные устройства, что в свою очередь заставляет избегать загромождения страниц сайта.

Дополнительная информация и инструменты

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

• Bootswatch (bootswatch.com) — содержит бесплатные темы для Bootstrap;
• Wrap Bootstrap (wrapbootstrap.com) — содержит недорогие темы и шаблоны для Bootstrap;
• Font Awesome (fontawesome.io) — сайт, который предоставляет бесплатные масштабируемые векторные значки, легко адаптируемые с помощью CSS;
• статью «Deploy an ASP.NET MVC 5 Mobile Web Application on Azure Websites» (bit.ly/1CMOGwq), в которой показывается, как применить Bootstrap к существующему веб-сайту, чтобы сделать его дружественным к мобильным устройствам. В этой статье также демонстрируется развертывание сайта в Microsoft Azure.

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

Заключение

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

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

---

Кит Пижиновски (Keith Pijanowski) имеет более чем 20-летний опыт работы в индустрии ПО. Работал в начинающих и крупных компаниях на самых разных должностях и занимался всем — от написания кода до развития бизнеса. В настоящее время является инженером и частным предпринимателем. С ним можно связаться по адресу keithpij@msn.com ли через twitter.com/keithpij.

Выражаю благодарность за рецензирование статьи эксперту Microsoft Рику Андерсону (Rick Anderson) и Сифасу Лину (Cephas Lin).