Здравствуйте друзья!
Цикл статей "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-end3. CSS
Здесь находиться описание всех стилей для типографики, кода, таблиц, форм, кнопок, картинок и плюс огромный набор иконок, который конечно же же пригодится.
4. Компоненты - это реально удобно!
Чего здесь только нет! Да и выглядит все на отличном уровне, хоть многие и скажут что кастомные компоненты конечно же выиграют.
Что нам предлагают: панели-дропдауны, блоки кнопок , выпадающие кнопки, навигация, нав-бары, "хлебные крошки",
пэджинация страничная разбивка, лэйблы, типографика, алерты, прогресс-бары, медиа-объекты и прочие удобные "фичи".
5. Java - это реально полезно!
Как и любой полноценный фреймворк, Bootstrap содержит JavaScript библиотеку.
Вы можете использовать все плагины Bootstrap пользуясь только API, не написав ни единой строчки JavaScript. Но обратного не запрещают )
Описаны особенности программируемого API, бесконфликтности при использовании других фреймворков, событий и др.
Здесь же показаны примеры создания модальных окон, выпадающих списков, скроллов, табов, тултипов, карусели, поповеры, алерты, кнопки и др.
6. Ну и в заключение - кастомизация библиотеки.
Выбираем лишь то что нам пригодиться с нужными для нас значениями и в перед!
Итог и короткое резюме:
Вот такой небольшой обзор замечательного фреймворка друзья. Новичкам - это просто счастье! Когда-то во времена "динозавров" такой набор собирался по кусочкам как святой грааль и с трепетом хранился. Сейчас же грамотно пользуясь этим инструментарием, ты можешь пройти эту дорожку в стократ быстрее.
Профессионалам - еще один инструмент для типового проекта, я бы даже сказал функционального нежели дизайнерского.
Всегда готов обсудить и ответить на вопросы.
С вами ваш - Александр М.