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

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

Comments

Разработчики браузеров наконец-то сосредоточили свои усилия на таких стандартах, как 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, не вполне адекватно объясняют базовые принципы проектирования.

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

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="//code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Объявление 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
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="//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
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
Browser screenshot

Заключение

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

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


Ресурсы для скачивания


Похожие темы

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

Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

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