Предыдущий ролик Следующий ролик  

Видео урок: Установка Bootstrap 3

Bootstrap 3: добавь интерактивность на свой сайт

Итак, следующее, что мы должны сделать, - это загрузить версию Bootstrap, с которой мы будем работать в данном проекте. Для этого откройте сайт getbootstrap.com. На нем собрано множество версий Bootstrap, а также вся документация для него. Вы можете больше узнать об этой платформе, прокрутив страницу вниз. Здесь есть примеры сайтов, которые построены на Bootstrap. В самом низу также есть ссылки, которые могут быть вам полезны. Вы можете, например, посетить страницу Bootstrap на GitHub или просмотреть их блог.

Это действительно полезный сайт для всех, кто работает с Bootstrap. Мы загрузим стандартную версию Bootstrap, которая будет включать все расширения CSS и JavaScript. И самый простой способ это сделать - просто нажать большую кнопку здесь, на главной странице. После этого откроется раздел документации, посвященный загрузке. Здесь у нас есть три версии Bootstrap. Версия для языка Sass, которую мы не собираемся использовать. Исходный код для всего, что есть в Bootstrap, который включает документацию, файлы less и так далее.

Он нам тоже не пригодится. Мы будем работать с самой первой и самой полной скомпилированной версией Bootstrap. Итак, давайте нажмем кнопку "Download Bootstrap". Я использую Chrome и внизу страницы могу увидеть значок загрузки. Если вы работаете в Firefox, вы увидите стрелку в верхней части экрана, которая представляет собой ссылку на папку, где хранятся загруженные файлы на вашем компьютере. Нажмите на нее, чтобы открыть, и здесь вы должны увидеть папку под названием "Bootstrap 3-1-1-disc".

Это значит, что вы скачиваете Bootstrap 3.1.1. Если вы загружаете более позднюю версию Bootstrap, то цифры могут немного отличаться. Но до тех пор, пока основной версией Bootstrap будет оставаться третья, вы будете в состоянии работать с ней в соответствии с моими инструкциями без особых затруднений. Если вы откроете эту папку, то увидите, что в ней есть еще три папки. Я рассказывала о них в курсе "Bootstrap 3 для начинающих", который также доступен на lynda.com. Вы можете посмотреть его, если хотите узнать о содержании всех этих папок. Сейчас мы создадим папку на рабочем столе.

Я назову ее "Bootstrap". И я скопирую эти три папки, fonts, css и js, отсюда в папку Bootstrap. Они станут основой сайта, над которым мы будем работать в течение этого курса. Итак, теперь вы можете просто закрыть эту папку, она вам больше не понадобится. Теперь перейдите в папку с тренировочными файлами на рабочем столе, откройте главу 1 и видео номер два. Здесь вы найдете некоторые дополнительные файлы, которые вам понадобятся, чтобы настроить сайт для этого курса.

Это только половина файлов, которые вам понадобятся. Здесь есть исходные файлы HTML, папка с изображениями и папка css, в которой находится файл custom.css, необходимый нам для работы. Итак, я сдвину окно с тренировочными файлами сюда, а здесь открою наш сайт Bootstrap. Я перемещу сюда эти три файла HTML, а также папку с изображениями, где находятся все изображения, которые понадобятся нам для этого сайта.

Здесь есть изображения для карусели, для миниатюр и модальных окон, а также логотип, который используется на нашем сайте. И наконец, из папки css нам нужно скопировать файл custom.css сюда, в папку css сайта Bootstrap. ОК, давайте проверим, все ли работает. Сейчас я открою мой файл index.html в Chrome.

Итак, это index.html - главная страница нашего сайта в начальном состоянии. В конечном счете мы создадим для нее карусель картинок, но сейчас все, что здесь есть, - это серия изображений, которые расположены вертикально, и пара отзывов внизу страницы, а также футер. На странице с информацией о сотрудниках (Executive Team) вы увидите фотографии, оформленные как маркированный список, и на данный момент это все, что вы должны здесь увидеть. На странице обратной связи (Contact) у нас есть форма, но она плохо отформатирована. Итак, это наши три исходных файла HTML.

Теперь у нас есть почти все, что нужно, чтобы начать работать над этим сайтом. Последний необходимый компонент - это jQuery, и я покажу вам, как скачать и добавить ее в наш сайт Bootstrap, в следующем уроке.