forthis.ruРуководство для новичков в Bootstrap
Опубликовано: четверг 17.01.2013 16:15Автор: Бо Шубински
Каждый, кто часто бывает в интернете, мог встречать множество веб-сайтов, рекламирующих свою «адаптивность» или использование программы раскрутки «Bootstrap» для их сайта. Это все очень хорошо со стороны, но что если Вы хотите использовать Bootstrap для своего сайта?
Я собираюсь рассказать о Bootstrap все, раздел за разделом, в понятном виде руководства, чтобы понять подходит ли Bootstrap для разработки Вашего существующего (или будущего) сайта.
Что такое Bootstrap?
Bootstrap — это, в основном, набор тщательно подобранных макетов, инструментов JavaScript и элементов UI (пользовательский интерфейс), которые обычно относятся к Framework. Bootstrap используется как платформа для создания веб-сайтов и может быть адаптирована под все виды настроек, от обычных HTML сайтов, до CMS систем, как WordPress или Joomla.
Как это работает?
Bootstrap содержит в своем макете систему сеток 960. Этот макет используется разработчиками сайтов на протяжении нескольких лет и делает разработку интерфейса более удобной. Более подробно система сеток 960 представлена на рисунке:
Как видно на рисунке, система предназначена для совершенно разных размеров и макетов, которые можно совмещать и подбирать, чтобы создать уникальный вид, в соответствии со стандартом, который выгляди достаточно привлекательно.
Bootstrap так же включает в себя стили навигации, формы, командные кнопки, таблицы и множество других вещей, о которых Вы можете подумать. Он включает в себя множество модулей jQuery для облегчения создания и управления такими вещами как вкладки, меню и Modal Boxes.
Чтобы увидеть больше примеров сайтов, Вы можете создавать, используя Bootstrap, а чтобы увидеть как они могут распределяться по стилю и отношению, посетите страничку Built With Booster, чтобы увидеть некоторые из его сайтов.
Это впечатляет, но почему я должен им пользоваться?
Отличный вопрос. Пока платформу Bootstrap можно увидеть во многих других отличных, бесплатных «фреймворках» (таких как Bones), производительность Bootstrap можно наблюдать в двух конкретных областях:
Адаптивный макет
Как уже было раньше сказано, многие веб-сайты и даже некоторые премиум темы, крутятся вокруг термина «адаптивность». Что означает, что сайт будет отвечать и соответствовать изменениям в разрешении и ориентации во время сохранения общего вида и качества Вашего сайта.
Если Вы посмотрите на изображение выше, которое касается системы сеток 960, то Вы увидите, что она основана на 12 столбцах. Эти столбцы будут регулировать и подстраивать размер экрана, на котором будет просматриваться сайт. Дни проведенные зря, это чуть больше, чем дни, которые понадобились разработчику пользовательских интерфейсов для создания и сохранения сайта, для мобильных устройств, и больше времени для создания новых проектов.
Дополнительная CSS (система защиты от копирования)
Пока множество других минимальных версий Framework в интернете предлагают простые адаптивные макеты сетки. Простые, как йогурт без пищевых добавок. Bootstrap имеет дополнительные стили CSS систем, которые включены бесплатно, и в которых есть командные кнопки (некоторые из них, анимационные), значки, навигационная панель и многое другое. Так же существует дополнительная система CSS, интегрированная с JS модулем (JavaScript) для таких вещей как, раскрывающееся меню и интерактивное оповещение, ускоряющие процесс разработки, и после этого Вам уже не надо будет создавать их сначала.
Я не знаю, все это звучит очень сложно, что если мне как новичку будет трудно?
Не бойтесь! И я знаю, что говорю, веб разработки это больше хобби для меня, чем моя обычная работа (IT lackey). Прелесть Bootstrap в том, что он широко используется, и в том, что по нему много информации. Все функции и свойства, о которых я говорил, являются основными для Bootstrap и не требуют дополнительных подключаемых модулей. Посетив страницу Bootstrap JavaScript, Вы увидите живые примеры вместе с генераторами кодов, для разных интересных вещей, как вкладки, всплывающие подсказки и даже режим карусели, для тех, кто хочет отобразить конкретные статьи или изображения в своем портфолио.
На странице компонентов можно посмотреть как создавать индикаторы выполнения, навигации, эскизы страниц и много всего другого, что касается кодирования. Это хорошо тем, что это официальные страницы инструкций. В интернете существует множество сайтов и форумов, которые показывают как управлять нестандартными функциями или дают ответы на вопросы, которые могут возникать во время разработки сайта.
Я собираюсь сделать... Bootstrap справится с этим?
Конечно! Растущая популярность и использование Bootstrap привело к созданию многих модулей, которые могут увеличить или добавить функциональности Bootstrap. Хотите создать WYSIWYG редактор? Для этого существует подключаемый модуль. Хотите добавить функции Bootstrap на Ваш существующий Joomla Framework? Для этого существует подключаемый модуль. Хотите добавить функцию опережения ввода? Модуль есть даже для этого. Это как App Store для интернета.
Ладно, Вы меня уговорили. Где я могу его скачать?
Зайдите на официальный сайт Bootstrap и кликните на большую синюю кнопку Скачать, чтобы загрузить весь файл. Если Вам все не нужно, Вы можете выбрать отдельные компоненты для установки, чтобы у Вас были только те функции, которые Вы планируете использовать. Этот сайт так же позволяет выбирать показатели для Вашей существующей схемы, которые будут подходить лучше всего.
Отзывы и комментарии