HTML, CSS, Javascript фреймворк Bootstrap

В курсе идет работа со старой версией фреймворка 2.3.2. Есть более свежая версия 3.0, которую можете скачать с сайта http://getbootstrap.com или http://bootstrap-ru.com/300/ Продолжение серии уроков, возможно будет уже на версии 3.0, посмотрим, так что сначала потренируйтесь на этой, чтобы понять принцип работы.

Официальная страница http://getbootstrap.com/2.3.2/

Урок 1 – Знакомство и установка фреймворка

Скачать исходники 1 урока


Урок 2 – Общий принцип работы

Скачать исходники 2 урока


Урок 3 – Создание макета

Скачать исходники 3 урока


Урок 4 – Раздел CSS

Скачать исходники 4 урока

Следующая часть

Если понравилось и Вам это интересно, тогда будет продолжение. Записывать вторую часть? Всем спасибо!


Обсуждение. Оставлено 41 коммент.

Вот это то, что нужно! Спасибо…Искренне благодарен..

Все кланые уроки но все равно для работы с данным фреймворком нужно знать css, причем на уровне хорошего верстальщика, что бы знать что где и как изменить, а если насчет видеокурса то лучше создать как минимум видеокурс где нужно сверстать 3 или 4 шаблона, которые раскрывают потенциал движка, к примеру городской портал, сайт недвижимости, доску обявлений итд

Сравните пожалуйста с php.
Спасибо !!!

Огромное спасибо за видеоуроки! Жду продолжения…

Очень интересные уроки. Все очень понятно. Не могли бы Вы сделать урок о том, как делать плавающую разметку с bootstrap’ом?

Давно хотел увидеть уроки по этому фреймворку. Спасибо Дмитрий – полезные уроки.

Спасибо Меценату информатики. Все понравилось. Прошу вторую часть. С ув. gena

Дмитрий, большое спасибо! С интересом прослушал Ваши уроки, погружаясь в среду технологии профессионала-сайтотворца. Очень полезно!

Дмитрий очень стало интересно. Жду с нетерпением продолжения.

Здравствуйте, Дмитрий!
Только что скачал Ваши видеоуроки – буду изучать.
Зная Вас, скажу сразу – продолжение обязательно!
Буду с нетерпением ждать!

С Уважением, Григорий.

Bootstrap сейчас пожалуй самый распространенный фреймворк, на нем сделана огромная часть шаблонов для сайтов, часто сталкиваюсь с ним, так что даже не если верстать самому – то для правки шаблонов под себя понимание базовых очснов бутстрапа очень и очень пригодится. Респект, ждем продолжения.

Огромное спасибо,Дмитрий!Вы вдохновляете к сайтостроению всё больше,особенно после Bootstrap,ждём продолжения.Просьба-экран фона сделать светлее,как в предыдущих уроках,как phpDisigner.

Дмитрий, здравствуйте!

Продолжение просто обязательно. Вы подняли такой пласт …. – оно просто ну оооочень восстребовано. Благодарю за профессиональный материал. Жду продолжения. С ув. Андрей

=)да нужно продолжение

Спасибо за ценный материал.С нетерпением ждем продолжения.

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

Вот этого мне и не хватало огромная благодарность за эти материалы

Здравствуйте, Дмитрий! Вы встраиваете Bootstrap в свой сайт, а на каком фрейворке он сделан? Вопрос задан потому, что CMS или Фреймворки часто сами задают жестко стили, которые не известно как можно изменить.

Здравствуйте, Лата. Мой сайт сделан на WordPress’e, если Вы об этом.

У меня есть опыт с Джумлой. Там не только сторонние расширения не дают возможности вставить свои стили, зашиты свои. В этом есть проблема, хотя в целом движок удобный.

Еще хочу!!!! и спасибо! :)

Крайне интересно! Жду продолжения.

очень кстати, только начал его изучать… огромное спасибо

Очень понравилось!!! Жду продолжения.

Спасибо огромное за такие прекрасные уроки! Вот чего мне не хватает для сайта!

Спасибо! Полезные уроки. Ждем продолжения….

Super!!!

Спасибо, Дима! Впечатление от комментариев:- птичка с червяком прилетела в гнездо – а там куча птенцов с раскрытыми клювами и все кричат: – Ждем продолжения….

Спасибо! Ждем продолжения…

Дмитрий! А как можно вставить маленькую кнопочку проигрывания звукового фрагмента? Делаю сайт изучения английского языка. Подскажите, пожалуйста!

Очень понравилось!!! Жду продолжения.

Lata, для воспроизведения аудио файлов я бы использовал готовые плеера.

Спасибо за уроки, Дмитрий! Конечно, выпустите продолжение:)

Спасибо, хорошо изложен интересный материал. Жду продолжения.

Здравствуйте Дмитрий! Огромное спасибо за уроки! Какой хороший фреймворк! Когда только и начинаешь и верстаешь с нуля, это интересно, но со временем это становится рутиной и хочется быстрее сделать шаблон и заниматься программной частью. С удовольствием посмотрел Ваши уроки и жду продолжения, единственная просьба – со зрением не у всех хорошо, поэтому просьба сменить фон редактора на светлый.

Большое спасибо за уроки! Это то, о чем давно хотелось узнать, ждем продолжения!

Подумал разбавить положительные комменты :)
Я верстаю всегда сам, с нуля.
Я немного не понял назначение данного ФВ. Мне кажется, что его можно использовать для копирования стилей к себе, но все же их придется перерабатывать, объединять и т.п.
А сделать дизайн с нуля, мне кажется, неправильно, т.к. первично дизайн в программе, а затем верстка. И подбирать готовые стили под свой дизайн проблематично. Проще заново написать.
ИМХО: годиться только для мелочей, типа кнопочек, форм, да и на такие сайты, где это не критично. Для дизайнерских и СДЛ не подойдет. Или для каркаса CSS с последующей доработкой.

Здравствуйте Дмитрий ! Спасибо за уроки.
Полезные уроки. Жду продолжени.

Дмитрий, добротно всё как всегда все твои творения! Молодец!
Я тоже недавно начал изучать этот фреймворк и наткнулся на эти твои уроки. Они мне очень серьёзно помогли продвинуться дальше, очень.
Благодарю тебя!
И дальнейших успехов тебе и всем в Новом Году!

П.С.:
Предлагаю во всех иконках на кнопках дописать “icon white” чтобы цвет иконок
изменить на белый, иначе чёрный не очень читабельный на таких фонах.

Спасибо! то что нужно
Продолжай в том же духе

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

Lata, если по какой-то причине нет возможности вставлять свои классы через пробел к бутстраповским, попробуйте к имеющемуся классу добавить !important, например:
.class { width:300px!important;}


Оставить комментарий