Bootstrap. Часть 1

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 урока

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

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

Комменты

  • Спасибо. Читал уроки на других сайтах про бутсрап. Но вы лучший! Все как на тарелочке выложили. Еще раз спасибо!!!

    • Дмитрий Валак: 07-10-2015 в 19:14

      Спасибо, правда, уроки уже старые ) аж по 2 версии, а уже намечается выход 4ой)

  • Классные уроки, много полезного ждем новых выпусков!

  • Здравствуйте, Дмитрий! Спасибо Вам большое за уроки, недавно начала изучать Bootstrap именно с них.

    У меня вопрос. Везде в документации к фреймворку говорится, что элементы input и textarea все по умолчанию имеют ширину 100%. Но вот я создала себе тренировочный макет, и сколько бы я ни пыталась добиться корректной 100%-й ширины от input type=»text», у меня не получается :(
    Он либо небольшой (стандартный) по умолчанию, либо я прописываю ему в своем css width:100% — и тогда он выходит за пределы своего родителя (понятно, что из-за отступов, полей и рамки). Свойство box-sizing не действует на него. Гуглила проблему, иногда подобные вопросы попадаются на иностранных форумах, но, может, мой английский не очень, но исчерпывающего ответа я не нашла. Советы по оборачиванию в различные классы пробовала, без результатов.

  • Добрый день Дмитоий. Я очень благоарен Вам за Ваши уроки. Хотел своему внуку (закончил в этом году школу, и как все гениальные люди-троешник) показать сайт про магазин, сделанный по Вашим бесплатным урокам. Но вот товар почему-то не «вылазит».
    Пожалуйста, подскажите, в чем дело? Спасибо. Виктор.

  • Добрый день! Супер!!! Ждем продолжения! ОБЯЗАТЕЛЬНО!!!

  • Дмитрий,спасибо за уроки!Жду продолжения)))

  • Спасибо большое!! Все отлично разъяснено! Ждем дальнейших уроков.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • Дмитрий Валак: 28-10-2013 в 16:04

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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