Полезный и удобный Bootstrap!

Здравствуйте друзья!

Цикл статей "front-end" начнем с полезного фреймворка Bootstrap -   http://twitter.github.com/bootstrap/index.html



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

Bootstrap - хорошо упакован: сетка из 12 колонок, десятки компонентов, JavaScript плагины, типография, формы, контролы, и веб-настройщик.

1. Начало:
Все просто - вы можете скачать скомпилированный пакет, это самый быстрый способ, чтобы начать работу, либо скачать исходники - получив оригинальные файлы для всех CSS и JavaScript, а также локальную копию документов, загрузив последнюю версию прямо с GitHub.

Здесь же показан пример внедрения библиотек и css от Bootstrap и пример шаблонных вариантов.
Новичкам на заметку - даже с этими шаблонами вы можете сделать свой первый сайт и почувствовать эту божественную силу создателя ))) Ну да ладно...

2. Особенности:
Здесь нам немного рассказывают о глобальных стилях. Здесь все понятно.
Далее идет описание fluid текучей сетки и вариаций ее применения.
Долгожданный responsive design - Bootstrap поддерживает несколько вариаций, чтобы помочь сделать внешний вид вашего сайта максимально "заточенный"  и более подходящим для различных устройств или разрешений экрана.

Столь актуальную тему responsive design'а мы не раз затронем в цикле статей front-end

3. CSS
Здесь находиться описание всех стилей для типографики, кода, таблиц, форм, кнопок, картинок и плюс огромный набор иконок, который конечно же же пригодится.

4. Компоненты - это реально удобно!
Чего здесь только нет! Да и выглядит все на отличном уровне, хоть многие и скажут что кастомные компоненты конечно же выиграют.

Что нам предлагают: панели-дропдауны, блоки кнопок , выпадающие кнопки, навигация, нав-бары, "хлебные крошки", пэджинация страничная разбивка, лэйблы, типографика, алерты, прогресс-бары,  медиа-объекты и прочие удобные "фичи".

5. Java - это реально полезно!
Как и любой полноценный фреймворк, Bootstrap содержит JavaScript библиотеку.

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

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

6. Ну и в заключение - кастомизация библиотеки.
Выбираем лишь то что нам пригодиться  с нужными для нас значениями и в перед!

Итог и короткое резюме:
Вот такой небольшой обзор замечательного фреймворка друзья. Новичкам - это просто счастье! Когда-то во времена "динозавров" такой набор собирался по кусочкам как святой грааль и с трепетом хранился. Сейчас же грамотно пользуясь этим инструментарием, ты можешь пройти эту дорожку в стократ быстрее.
Профессионалам - еще один инструмент для типового проекта, я бы даже сказал функционального нежели дизайнерского.

Всегда готов обсудить и ответить на вопросы.
С вами ваш - Александр М.

Тэги: front-end