Быстрая разработка Web-сайтов и Web-приложений с помощью Bootstrap

Положите начало созданию своего Web-сайта с помощью Twitter Bootstrap

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

Уче Огбуйи (Uche Ogbuji), главный консультант, Fourthought

Photo: Уче ОгбуйиУче Огбуйи (Uche Ogbuji) является консультантом и соучредителем корпорации Fourthought, которая занимается поставкой и консультационными услугами в области XML-решений для корпоративного управления знаниями. Корпорация Fourthought разрабатывает 4Suite, платформу с открытым исходным кодом для XML, RDF и приложений управления знаниями. Огбуйи также является ведущим разработчиком Versa - языка запросов RDF. Специалист по компьютерной технике и писатель, Огбуйи родился в Нигерии, в данной время проживает и работает в г. Боулдер, Колорадо, США. Связаться с ним можно по электронной почте uche@ogbuji.net.



29.11.2013

Когда простое не так просто

Идея World Wide Web очень проста. Стандартный транспортный протокол (HTTP) берет информацию с сервера и передает ее клиенту, а стандартный непроцедурный язык (HTML) представляет содержимое так, чтобы его могли отобразить браузеры. Однако в реальности успех Интернета убил эту простоту, и разработка сайтов стала не такой простой, какой должна быть. Конкуренция за функциональность среди браузеров привела к усложнению стандартов и появлению вариаций в поведении браузеров. Чтобы страница выглядела и работала одинаково в разных браузерах и на разных платформах, разработчик должен обладать исключительным мастерством и богатым опытом. Есть и менее сложные проблемы, такие как обеспечение доступности для людей с ослабленным зрением и поддержка нескольких языков и сценариев для разных стран. В наши дни Web-разработчики и дизайнеры научились справляться с этими задачами, но основные проблемы кросс-браузерной совместимости HTML по-прежнему существуют.

Разработчики браузеров наконец-то сосредоточили свои усилия на таких стандартах, как HTML5, каскадные таблицы стилей уровня 2 (CSS2) и CSS3. Эти стандарты ограничивают неоправданные отклонения в поведении браузеров, которые преследуют разработчиков с момента появления Интернета. Чтобы сгладить оставшиеся проблемы и обеспечить поддержку старых версий браузеров, некоторые разработчики создают интегрированные среды для разработки Web-страниц. Такие инструменты позволяют простым смертным разрабатывать сайты, которые будут работать для большинства пользователей.

Одна из самых популярных современных интегрированных сред разработки Web-страниц берет свое начало из совершенно неожиданного источника. Разработчики Twitter устали от борьбы с множеством разнородных компонентов, которые они использовали для создания Web-страниц. Они создали единую интегрированную среду, которая предоставляет самые востребованные элементы страниц, одновременно обеспечивая приемлемую гибкость. Они поделились этим набором инструментов со всем миром в виде проекта с открытым исходным кодом Bootstrap.

Bootstrap опирается на проект LESS, который является усовершенствованием языка CSS. Кроме того, Bootstrap включает базовые элементы CSS, такие как шрифты, формы, кнопки, таблицы, сетки, элементы навигации, предупреждения и многое другое. Основным назначением Bootstrap является оказание помощи Web-разработчикам в ускорении создания своих проектов. Сегодня Bootstrap — это самый популярный проект в хранилище программ GitHub. В наши дни Bootstrap используют индивидуальные разработчики, небольшие группы и даже крупные организации.

Эта статья показывает, как использовать Bootstrap для создания Web-сайтов и приложений, в том числе и для мобильных устройств. Статья скорее отражает точку зрения разработчика, а не дизайнера. Чтобы получить пользу от прочтения этой статьи, вы должны обладать практическими навыками работы с HTML и CSS. Базовые сведения о проекте LESS, которые я привел в статье Do more in CSS with LESS(Расширение возможностей CSS с помощью LESS), помогут вам разобраться в основном примере кода этой статьи.

Введение

Скачайте скомпилированный проект Bootstrap (см. раздел Ресурсы). В этой статье я использовал версию 2.3.2. Загружаемый материал содержит CSS, которая является основой Bootstrap, а также полезные изображения и JavaScript. Вы создадите HTML-код своей страницы в соответствии с описанием, которое я привел в настоящей статье. (Пример кода для статьи можно найти в разделе Загрузка). Документация Bootstrap содержит примеры HTML-кода для многих опций проектирования, поддерживаемых этой средой. Однако страницы документации Bootstrap, хоть и являют собой замечательный пример гибкости Bootstrap, не вполне адекватно объясняют базовые принципы проектирования.

Адаптивный Web-дизайн

Диапазон устройств, используемых для просмотра Web-страниц, простирается от маленьких мобильных телефонов до устройств с огромными дисплеями, превышающими по размеру мониторы обычных настольных компьютеров. В процессе адаптивного проектирования вы с самого начала закладываете в Web-страницы гибкость, позволяющую просматривать их на любых устройствах. Основой адаптивного проектирования являются медиа-запросы CSS3 — стандартный способ применения правил CSS в соответствии с типом и особенно размером дисплея.

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

HTML-код для Bootstrap

В листинге 1 показан полезный скелетный HTML-файл для применения Bootstrap с фиксированной компоновкой и адаптивными функциями:

Листинг 1. Базовый скелетный HTML-файл для проектов Bootstrap (listing1.html)
<!doctype html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello world!</h1>
    <div class="container">
    ... <!-- Сюда будет вставлен основной HTML-код -->
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Сокращенные версии

Обратите внимание, что в загружаемый пакет Bootstrap входят две версии каждого файла CSS и JavaScript (например, bootstrap.js и bootstrap.min.js). Первая версия — это обычный файл, а вторая — сжатый или «сокращенный». Используйте сокращенные версии для ускорения загрузки страниц, как это делаю я в этой статье.

Объявление DOCTYPE в самом начале листинга 1 указывает, что это файл типа HTML5. Тег meta, находящийся внутри элемента head управляет мобильными компоновками для маленьких экранов. (Для удобства я буду называть его тегом meta/viewport). Большинство мобильных устройств по умолчанию уменьшают масштаб Web-страниц так, чтобы они помещались на экране, подобно тому, как это делается в браузере обычного компьютера. Вот почему текст и изображения на многих Web-сайтах выглядят в браузере вашего мобильного телефона такими маленькими. Часть initial-scale=1.0 объявления meta/viewport запрещает такое поведение, вынуждая устройство сохранять исходный масштаб страницы. Такое объявление показывает, что Web-дизайнер (в данном случае Bootstrap) уже позаботился о реализации адаптивного поведения для экранов малого размера, поэтому здесь можно обойтись без использования стандартного метода полного перебора (brute-force).

Далее в листинге 1 приведен тег head, содержащий ссылки на Bootstrap CSS. В конце файла выполняется загрузка jQuery и утилиты Bootstrap JavaScript. Эти сценарии запускаются в конце для оптимизации производительности.

Организация кода

С помощью Bootstrap (или любого набора файлов поддержки Web-проектирования) вы можете выбрать один из подходов к организации HTML-кода или кода другого типа. Я рекомендую создать директорию для собственного проекта и скопировать в нее файлы Bootstrap, сохранив исходную структуру директорий. Поместите свои собственные HTML-файлы на самый верхний уровень, а файлы CSS, JavaScript и файлы изображений в соответствующие поддиректории Bootstrap (с именами css, js и img соответственно). Общая структура при этом будет выглядеть примерно так:

.
|—— index.html
|—— [а также другие HTML-файлы сайта]
|—— css
|   |—— bootstrap.min.css
|   |—— bootstrap-responsive.min.css
|   |—— [а также несжатые файлы Bootstrap и файлы CSS для этого сайта]
|—— js
|   |—— bootstrap.min.js
|   |—— [а также несжатые файлы Bootstrap и файлы JavaScript для этого сайта]
|—— img
    |—— [Файлы PNG, входящие в состав Bootstrap, и файлы изображений для этого сайта]

Адаптация CSS к устройству

Тег meta/viewport представляет собой текущее соглашение об адаптации страницы к области просмотра браузера. Консорциум W3C в настоящее время подготавливает другой механизм в форме нового правила в стиле CSS (см. раздел Ресурсы). Эквивалент CSS объявлению meta/viewport в листинге 1 выглядит так:

@viewport {
  width: extend-to-zoom 100%;
  zoom: 1.0;
}

Пока что вы можете включить этот код в свой CSS, оставив в HTML-коде тег meta/viewport Когда форма CSS получит широкую поддержку, вы сможете убрать объявление meta/viewport.


Сетка

Главный контейнер div в листинге 1 сигнализирует о применении фиксированной компоновки Bootstrap. Помещаемый в этой контейнер HTML-код интегрируется в сетку Bootstrap.

Если вы внимательно посмотрите на большинство Web-страниц, то поймете, что они разделены на группы блоков. Блок, расположенный в верхней части страницы, может содержать логотип. Вероятно, слева или справа будут расположены элементы навигации, и здесь же будет находиться содержание сайта. Возможно, еще один блок будет содержать нижний колонтитул. Основное содержимое сайта может быть разделено на панели или блоки. Раньше Web-дизайнеры размещали все эти блоки вручную с помощью рамочной модели CSS.

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

На рисунке 1 показан полезный шаблон, изначально созданный Аароном К. Уайтом (Aaron K. White) для визуализации сетки Bootstrap и планирования компоновки контента (см. раздел Ресурсы). Я изменил его лишь для того, чтобы упростить чтение текста в этой статье.

Рисунок 1. Шаблон сетки Bootstrap Аарона К. Уайта
Browser screenshot

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

Заполнение шаблона HTML

В статье Расширение возможностей CSS с помощью LESS я использую пример адаптивного проектирования (основанный на примере) блоггера developerWorks Боба Ли (Bob Leah)), чтобы показать, как инструментарий LESS улучшает синтаксис CSS. Bootstrap отлично справляется с упрощением многих задач кодирования. В листинге 2 показан HTML-код из этой статьи (файл responsive.html в разделе Загрузка), переписанный так (в виде listing2.html), чтобы работать в координатной сетке Bootstrap, и дополненный адаптивными функциями Bootstrap:

Листинг 2. Пример HTML-файла для Bootstrap (listing2.html)
<!doctype html>
<html lang="en-US">
  <head>
    <title>Responsive Bootstrap page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>Hello world!</h1>
      <div class="row">

        <div id="banner" class="span12">
          <!-- Photo by Jake Sutton
          http://www.flickr.com/photos/44124405407@N01/510899838 -->
          <img src="img/sky-slim.jpg">
        </div>  
      </div>
      <div class="row">
        <div id="main-content" class="span8">
          <p>Humpts dumptus in muro sedet
          </p>
          <p>Veni vidi vici
          </p>
          <p>Alea iacta est
          </p>
          <hr>
        </div>
        <div class="span4">
          <div class="widget-title">One</div>
          <div class="widget-text">
            The quick brown fox jumps...
          </div>
          <div class="widget-content">
            <div class="widget-title">Two</div>
            <div class="widget-text">
              Over the lazy dog...
            </div>
          </div>  
          <div class="widget-content">
            <div class="widget-title">Three</div>
            <div class="widget-text">
              To get to the other side
            </div>
          </div>
        </div>  
      </div>
      <div class="row">
        <div id="footer" class="span12">
          &copy; Nobody! This document is placed in the public domain.
        </div>  
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

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

В листинге 2 показано вложение тегов div, которые используют классы сетки Bootstrap. Тег div с классом container является оберткой для всей координатной сетки. Каждый div с классом row определяет строку ячеек сетки. Теги div с классом span4 определяют блок, состоящий из 4 ячеек. Теги div с классом span12 определяют блок, состоящий из 12 ячеек, задавая полную ширину страницы. Bootstrap содержит класс spanN для объединения любого числа ячеек (от 1 до 12).

На рисунке 2 приведено полученное представление страницы в мобильном браузере (Google Chrome на моем Samsung Galaxy S3 с Android 4.1.1):

Рисунок 2. Представление браузера за счет применения кода из листинга 2
Browser screenshot

Специальный CSS

Основные элементы страницы, показанные на рисунке 2, pазмещены корректно. Однако странице не хватает элементов оформления, которые сделали бы ее более привлекательной, поэтому я добавил немного CSS (файл main.css в примере кода). Сам Bootstrap CSS написан на LESS, и в целом я настоятельно рекомендую использовать LESS вместо простого CSS. Но для этого несложного примера подойдет и простой CSS, показанный в листинге 3:

Листинг 3. CSS для добавления несложного оформления в пример HTML-кода (main.css)
.widget-content {
  margin: 10px;
  padding: 1px;
  background-color: #DDDDDD;
}    

.widget-title {
  font-weight: bold;
  padding: 10px;
  background-color: #EEEEEE;
}    

.widget-text {
  padding: 10px;
  background-color: #FCFCFC;
}    


#footer {
  text-align: center;
  font-size: small;
}

Само собой, теперь в HTML-код из листинга 2 необходимо добавить ссылку на специальный CSS из листинга 3. Обновленный HTML, в который добавлена ссылка на файл main.css, содержится в файле main.html в примере кода. На рисунке 3 показана полученная страница, ставшая немного более презентабельной благодаря main.css:

Рисунок 3. Представление браузера за счет применения файла main.html
Browser screenshot

Заключение

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

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


Загрузка

ОписаниеИмяРазмер
Пример кодаwa-bootstrapcode.zip41 КБ

Ресурсы

Научиться

  • Оригинал статьи: Rapid web development with Bootstrap.
  • Адаптация CSS к устройству: познакомьтесь с предлагаемыми W3C стандартами для адаптации CSS к устройству.
  • Do more in CSS with LESS (Расширение возможностей CSS с помощью LESS) (Уче Огбуджи (Uche Ogbuji), developerWorks, июль 2013 г.): узнайте о проекте LESS и познакомьтесь с основами адаптивного Web-дизайна.
  • Prototype web applications with CouchDB and Bootstrap(Создание прототипов Web-приложений с помощью CouchDB и Bootstrap) (Уче Огбуджи (Uche Ogbuji), developerWorks, июнь 2013 г.): узнайте, как объединить Apache CouchDB с Bootstrap и начать разработку Web-приложений способом, четко отделяющим уровень представления от уровня базы данных.
  • Get started with CSS (Введение в CSS) (Дэниел Дж. Льюис (Daniel J. Lewis), developerWorks, май 2011 г.): познакомьтесь со стандартными стилями CSS, включая CSS 2.1 и межбраузерный CSS3.
  • Use CSS media queries to create responsive websites(Использование CSS-медиазапросов для создания динамичных Web-сайтов) (Джефф Бэйл (Jeff Bail), developerWorks, октябрь 2012 г.): узнайте, как использовать медиа-запросы CSS для создания Web-сайтов для настольных компьютеров, мобильных телефонов и планшетов.
  • Responsive Web Design (Адаптивный Web-дизайн) (Этан Маркотт (Ethan Marcotte), A List Apart, май 2010 г.): узнайте больше об адаптивном проектировании.
  • Code example of Responsive web design using CSS3 Media Queries(Примеры кода адаптивного Web-дизайна, использующего медиа-запросы CSS3): взгляните на пример адаптивного кода от Боба Ли (Bob Leah), который был адаптирован для этой статьи.
  • Следите за техническими событиями и Web-трансляциями на портале developerWorks, посвященными разным продуктам IBM и информационным технологиям.
  • Следите за developerWorks в Twitter.
  • Посмотрите демонстрационные ролики на портале developerWorks, диапазон которых простирается от установки и настройки продуктов для начинающих пользователей до демонстрации расширенной функциональности для опытных разработчиков.

Получить продукты и технологии

  • Bootstrap: погрузитесь в Bootstrap и скачайте код с официальной страницы проекта.
  • Шаблон Bootstrap Illustrator Template: создайте сетку для своего проекта Bootstrap с помощью шаблона Аарона К. Уайта (Aaron K. White).
  • Испытайте продукты IBM самым удобным для себя cпособом: скачайте ознакомительную версию продукта, опробуйте продукт в Интернете, поработайте с продуктом в облачной среде или проведите несколько часов в SOA Sandbox, чтобы ознакомить SOA Sandbox, чтобы ознакомиться с эффективной реализацией сервис-ориентированной архитектуры.

Обсудить

  • Get involved in the Сообщество My developerWorks:. Связывайтесь с другими пользователями портала developerWorks и знакомьтесь с блогами, форумами, группами и вики-ресурсами разработчиков.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, Open source
ArticleID=955047
ArticleTitle=Быстрая разработка Web-сайтов и Web-приложений с помощью Bootstrap
publish-date=11292013