Руководство по обработке комплексных дизайнов c Twitter Bootstrap

Введение

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

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

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

Начинаем

Чтобы приступить к использованию Twitter Bootstrap, Вам нужно скачать bootstrap.zip с официального сайта. Он содержит в себе набор файлов, а именно css, js и img, которые Вам понадобятся, чтобы начать создание веб-сайтов с Twitter Bootstrap. Папка “css” имеет таблицу стилей для адаптивного и неадаптивного дизайна. Она понадобиться для того, чтобы быстрее сделать сайт. Папка “js” имеет bootstrap.js. JavaScript файлы, которые содержат различные компоненты. В последней папке “img” содержится два набора одинаковых иконок, за исключением их фонового цвета. Изображения halflings были предоставлены glyphicons, и предоставляются бесплатно в проекте Twitter Bootstrap.

До того, как приступить к работе, откройте Ваш текстовый редактор и создайте первый файл с именем “index.html”. Сохраните его в корневой папке Вашего проекта.

Основной HTML шаблон для работы с Bootstrap

Для активации Bootstrap фреймворк необходимо включить все нужные файлы и создать HTML-структуру. Сначала Вам необходимо построить структуру, а затем определить, какие файлы потребуются. Сперва, на что нужно обратить внимание, это то что HTML5 требует doctype:

Устанавливаем meta кодировку в utf-8, потому что в проекте потребуется использовать специальные символы, для того чтобы браузер правильно их отображал. Twitter Bootstrap также указывает на использование utf-8 в их документации для лучшей совместимости.

Когда Вы установите стандартные HTML-теги, такие как

, и

Теперь Вам нужно перейти к подключению необходимых таблиц стилей bootstrap.css.

Теперь CSS готов, далее Вам необходимо включить все необходимые JavaScript файлы. Во-первых, необходимо включить файл jQuery, для этого подключим jQuery CDN.

Затем подключаем Bootstrap файл.

Все эти скрипты должны лежать чуть выше в конце тега .

Наконец, закончили с процессом подключения всех необходимых файлов. Ваш index.html выглядит так. 

Понимание того как это работает

Во-первых, Вам нужно помнить, что Twitter Bootstrap во многом зависит от 12 сеток. Итак, о каких сетках идет речь?

Предположим, Вы хотите две большие равные части внутри body в вашей странице index.html. Вы должны передать класс “span6” для каждого элемента div. Это говорит о том, что Bootstrap сделает две равные части, которые должны охватывать шесть сеток по бокам. Он имеет набор предопределенных классов для каждого элемента. Вы должны передавать соответствующие классы для каждого в случае необходимости.

Работа с Bootstrap

Разделим демо-страницу на пять основных частей:

1. The header
2. The marketing area
3. The leftside bar
4. The contents area
5. The footer

Чтобы обернуть все содержавшееся в наш веб-сайт, Вам нужно создать контейнерный класс, который должен быть с центра до середины экрана, а также имеет отступы со всех сторон. Для этого Bootstrap имеет класс “container”, который Вы будете использовать в качестве родительской оболочки. Итак, идем дальше и пишем следующий кусок кода:

Теперь поместим во внутрь контейнера div заголовок сайта. Для этого Вам нужно использовать тег h1.

Страница index.html будет размещена по центру. Время для панели навигации. Twitter Bootstrap предлагает следующую разметку для панели навигации:

“navbar” должен быть задан классом в основной панели навигации. Вам нужно следовать за вышеупомянутой разметкой, чтобы выглядело согласно стилю Twitter Bootstrap. Поместите код чуть ниже тега . Удостоверьтесь, что Вы помещаете все в родительском классе оболочки, т.е. “container”.  Перейдите к браузеру и проверьте страницу, увидите красивую панель навигации, чуть ниже заголовка сайта.

Конечно же, хочется, чтобы заголовок, выглядел немного иначе. В конце статьи будет рассмотрено, как Вы можете добавить свои стили, в существующие стили Bootstrap и добавить немного больше CSS для оформления заголовка. Давайте двигаться дальше, чтобы сделать вторую часть, которая называется “The marketing area”.

Есть предопределенный класс, предоставленный Twitter Bootstrap для области “The marketing area”. Ему дали название класс “hero-unit”. Далее копируем приведенный ниже код и вставляем его ниже навигации div.

Не написав ни одной части CSS, у Вас есть такая красивая “The marketing area”.

Приступим к самой интересной части - создание ссылок и кнопок. Вы можете создать любую ссылку, при этом она будет выглядеть так, как кнопка, добавив класс “btn”, и затем можно изменять ее размер, добавив несколько дополнительных классов, таких как btn-large/btn-small/btn-mini. Для изменения цвета кнопок добавим классы, такие как btn-success (зеленый), btn-info (светло-голубой), btn-warning (желтый) и btn-danger (красный). Подробнее о кнопках и украшениях ссылок можно найти в Twitter Bootstrap Base CSS section. Эти классы применяются к HTML элементу button.

Теперь перейдем дальше, к панели левой стороны и содержанию. Как говорилось ранее, Twitter Bootstrap - это система из 12 сеток. Это означает, что Вы можете создать самое большое количество: это 12 сеток по вертикали, в любом родительском элементе.

В настоящее время работаем в родительском классе “container”. Таким образом, разделим раздел на две неравные части, используя 12 сеток. Для левой стороны панели Вам нужно использовать класс “span4” и для правой стороны будем использовать “span8”. Имена классов показывают, что левая сторона должна охватить четыре сетки, а правая оставшиеся восемь.

Вам нужно создать два отдельных столбца, стоящие рядом. По умолчанию классы span* выравниваются по левому краю. Чтобы разместить столбцы ниже всего содержимого, Вам нужно добавить “row”. Это действует, как традиционная строка таблиц. Теперь заполним левый столбец навигационным списком.

Для создания навигационного списка следуйте следующей разметке.

Видео курсы по схожей тематике:

Создаем игру Need for Speed на Unity

Роман Самчук

C# 5.0 для профессионалов

Олег Кулыгин

Синхронизация данных двух информационных систем с использованием LINQ и Entity FW 6

Филипп Игнатенко

Вам нужно добавить класс “nav-list” в дополнение к классу “nav”, и это будет выглядеть как список. Добавляем класс “nav-header” к любому элементу “li”, “nav” класс будет выглядеть так, как заголовок в разделе ссылки. 

Перемещаясь в “The contents area”, Вы будете просто заполнять его общими тегами

и тегами

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

Как Вы можете видеть, почти закончили создание окончательного дизайна. Далее просто осталась часть “the footer portion”.

Для “the footer portion”, будем снова делить “row” на три части. На этот раз раздел будет находиться в равных частях “span4”. Таким образом, Вы создадите еще одну строку div. Выполните приведенный ниже код:

С помощью класса “span4” разделили строку на три равные части, а затем заполнили каждую из них с помощью тега

, они выглядят как кнопки. Проверьте результат в браузере. Вы увидете маленькие изображения внутри кнопки, Our Clients и Our Employees. Вам нужно использовать тег и добавить соответствующие классы изображений, icon-user, icon-star, icon-glass и т.д. Чтобы изменить значок для белого, используйте icon-white вместе с icon-user и icon-star. Полный список значков классов можно найти в документации Bootstrap. 

Чтобы добавить интервал между областью нижнего колонтитула и над содержанием, Вам нужно добавить тег

между каждой “row”. Вставте тег

и посмотрите на демо-страницу.

Теперь для области авторского права, добавим следующий код:

Итак, наконец, создали простую, но достойную целевую страницу, используя чисто Twitter Bootstrap framework.

Добавление пользовательских стилей к Twitter Bootstrap

Если у Вас есть немного знаний в CSS, и Вы хотите настроить Bootstrap стили по умолчанию, то лучший способ — это создать собственную пользовательскую таблицу стилей, импортировать Bootstrap’s Style в верхней части, а затем переопределить стили в свой CSS-файл. Убедитесь, что ссылка именно на Вашу пользовательскую таблицу стилей, а не для Bootstrap CSS. Если для Вас достаточно таблиц стилей по умолчанию (Twitter Bootstrap), то Вам не нужно создавать пользовательскую таблицу стилей. Многие веб-сайты могут использовать эту структуру, и она станет общем стилем, который можно будет увидеть в каждом другом сайте, созданном с Bootstrap. Поэтому лучше добавить свою собственную таблицу CSS вверху Bootstrap CSS.

Некоторые более важные компоненты из Twitter Bootstrap

Выделенный параграф

Чтобы выделить абзац посреди длинного документа, можете добавить класс “lead” к нему. Это сделает шрифты определенного абзаца немного больше, чем остальная часть документа.

Теги акцентирования

Вы можете также использовать стандартные теги  и внутри html-страницы. Теги  также будут работать.

Выравнивание текста

Внутри абзацев или div-тегов можно выравнивать текст с помощью классов: “text-left”, “text-center” и “text-right”.

Цвет текста

Можете установить цвет для текста абзаца по умолчанию, используя различные цвета текста как “muted” для серого, “text-warning” для красных, “text-error” для глубокого темно-бордового, “text-info” голубого и “text-success” для зеленого.

Бесплатные вебинары по схожей тематике:

Программист или тестировщик? Какую профессию лучше выбрать

Евгений Кушвид

Как обучать команду IT-специалистов

Дмитрий Охрименко

Активный поиск первой работы в IT – советы и частые ошибки

Виктория Пилипенко

Стиль таблицы

Twitter Bootstrap имеет ту же самую конструкцию таблиц по умолчанию. Выполните следующую разметку:

Работа с изображениями

Вы также можете добавлять изображения, используя обычный тег. Чтобы сделать Ваш дизайн более интересным, добавьте такие классы, как “img-rounded” для изображений с закругленными углами, “img-circle” для прокрутки изображений и “img-polaroid”, чтобы дать тень и радиус.

Выпадающее меню

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

Для выпадающего списка нужно обернуть родительский элемент с помощью класса “dropdown”, а затем использовать по умолчанию разметку “a”, и потом вложить еще один элемент

• со списком элементов.

  Источник: http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/