Руководство для новичков в 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 и кликните на большую синюю кнопку Скачать, чтобы загрузить весь файл. Если Вам все не нужно, Вы можете выбрать отдельные компоненты для установки, чтобы у Вас были только те функции, которые Вы планируете использовать. Этот сайт так же позволяет выбирать показатели для Вашей существующей схемы, которые будут подходить лучше всего.


05:02 02.11.2017



Отзывы и комментарии
Ваше имя (псевдоним):
Проверка на спам:

Введите символы с картинки:



Популярное

Инженерно-технические средства охраны: 5 методов д

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

Почему востребован саксофонист на праздник

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

Вкусные рецепты: Свекольный суп с фрикадельками по

Свекольный суп с фрикадельками по мотивам латышского супаДля этого супа нам понадобится уже отваренн...

Вкусные рецепты: Кофейный кекс с сушеной вишней.,

Кофейный кекс с сушеной вишней.Молоко нагреть, расстворить в нём кофе. Остудить. Масло растереть с с...

Возведение лестницы в доме

Процесс постройки лестницы в помещении довольно сложный. Это требует проектировки, а также возведени...

Как стоит подбирать спальный гарнитур

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

Как изготовить куклу-оберег?

С давних времён наши предки изготавливали обереги из дерева, кости, глины, ткани и прочих материалов...

При неисправностях дверного замка

Важность дверных замков переоценить очень сложно. Ведь не секрет, что без этих металлических "страже...

Как сделать макияж при плохом зрении?

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

Качественная и красива фурнитура для штор в вашем

Каждому человеку важно, чтобы в его доме была приятная, уютная и комфортная для проживания атмосфера...



Новости развития информационнного портала:

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

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