Как подключить бутстрап?

Как подключить бутстрап?

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

Итак, чтобы начать подключение, нужно перейти на официальный сайт. В нашем случае это getbootstrap.com, именно на нем содержится вся необходимая информация.

Скачиваем фреймворк

В главном меню кликните по пункту Getting Started. На русский язык он переводится: “C чего начать”. Действительно, на этой странице вы найдете все необходимое для работы. В первую очередь вы увидите вот что:

Bootstrap предлагает нам скачать себя в нескольких вариантах. Первый – это просто стандартная последняя версия фреймворка, в которой есть все компоненты. Два следующих варианта – это less и sass исходники. Пока я не рекомендую вам их трогать, если вы не знаете, как работать с этими технологиями.

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

Пока нас устраивает первый вариант, жмите на кнопку скачивания и сохраняйте себе на компьютер архив с самой актиуальной версией фреймворка.

Содержимое фреймворка

Отлично, после скачивайте разархивируйте архив и перейдите в папку. В конечной папке вы увидите три каталога – css, js и fonts. Эти три директории и нужно будет скопировать в папку вашего проекта.

Перед этим вы можете просмотреть все эти папки. В первую очередь, папку css. В ней лежит 2 css-файла и их минифицированные версии. Это bootstrap.css и bootstrap-theme.css. Соответственно, первый с кодом самого фреймворка. А второй предназначен для темизации. У обоих файлов есть, как я уже сказал, минифицированные версии. Они весят на 10-15% меньше за счет того, что код в них размещен в одну строку.

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

Далее у нас папка fonts. В ней содержится иконочный шрифт bootstrap, благодаря которому вы абсолютно без проблем сможете вставлять на веб-странице более 200 иконок, менять их размеры и цвет. По сути, это картинки, которыми можно очень шибко управлять. При увеличении размеров качество иконок не становится хуже, так как они векторные, то есть svg-формата.

В папке js содержится файл, необходимый для работы всех javascript-компонентов, которые заложены в фреймворк. Например, это модальные окна, табы и подсказки. Хорошо, немного с содержимым мы разобрались, время переходить непосредственно к подключению.

Подключение Bootstrap

Вообще я вам рекомендую сейчас просто потренироваться. То есть не подключать сразу фреймворк к своему реальному сайту, а создать на рабочем столе новую папку, скинуть туда эти три папки. Короче, создать новый проект с нуля. Это вам поможет понять, все работает.

Отлично, тем нужно создать файл index.html. Я сделаю это с помощью редактора Notepad++. Стоп-стоп, может вы уже по привычке начали писать начальную html-разметку, не нужно этого делать, сейчас мы вставим все готовое. Прокрутите страницу Getting Started ниже, там вы увидите Basic Template, то есть базовый шаблон html-страницы.

Смело копируйте этот код к себе в файл. Сейчас мы его немного разберем.

Сразу видим, что используется доктайп, характерный для html5. В теге html видим параметр lang, можете сменить его с en на ru.

Далее начинается секция head, в ней задается кодировка страницы. Следующие строчки достаточно важны, ни в коем случае их не удаляйте. Там, где видите IE-edge – это строка кода, которая обеспечивает корректную работу фреймворка вместе с браузером IE.

Следующая строка – это всем известный мета тег viewport, который позволяет выставить базовые настройки для корректного отображения сайта на мобильных устройствах.

Ну а далее у нас начинается непосредственно подключение файлов фреймворка. К слову, все комментарии, которые есть на скриншоте выше (они выделены серым цветом), вы можете удалить, кроме четырех строчек, которые начинаются со слов if it IE 9 и заканчиваются endif. Эти строки нужны нам для того, чтобы для браузера IE подгружались дополнительные файлы из внешнего хранилища, которые обеспечат поддержку адаптивности и элементов html5.

Первым делом, в коде подключается css-файл фреймворка. Как видите, на примере выше подключается сжатая версия, вы же можете подключить несжатую, просто удалив из адреса .min.

Javascript-файлы же подключаются перед закрывающим тегом body. Как видите, тут подключается не только сам фреймворк bootstrap, но и библиотека jquery. Дело в том, что для корректной работы фреймворка эта библиотека нужна и подключается она из внешнего хранилища.

Как мне проверить, подключился ли фреймворк?

Все очень просто. Откройте наш index.html в любом браузере, если вы увидите там такое, то все работает:

Если бы вы допустили какие-то ошибки при подключении фреймворка, то внешний вид заголовка был бы таким:

То есть Boostrap уже применил свои стили к заголовку и если вы можете их наблюдать, то все уже подключилось и корректно работает.

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

<button class = "btn btn-success">Ура, я подключил Bootstrap!</button>

Это уже точно доказало, что фреймворк работает и использует свои стили. Как видите, даже по умолчанию у bootstrap достаточно хорошее оформление для элементов, хотя и очень простое.

Но давайте мы пока вернемся на страницу Getting Started, ведь это был не единственный способ подключения фреймворка. Еще один вариант – подключить с внешнего хранилища, то есть из cdn. Он годится тогда, когда вы не планируете ничего редактировать в коде фреймворка, а просто хотите максимально быстро подключить его. Тогда удобнее всего вам будет использовать его именно из cdn.

Ниже на этой же странице написано еще очень много всего. Например, как установить фреймворк в Bower, Grunt, еще ниже даются ссылки на примеры использования абсолютно всех компонентов фреймворка.

В самом низу страницы есть ссылка на сайты, где вы можете читать все то же самое, но на других языках, так что если с английским у вас совсем плохо, можете переходить на русскоязычный сайт. Проблема только в том, что там переведено далеко не все, а также может отображаться далеко не вся информация, что есть на англоязычном официальном сайте.

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

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

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree