Что такое Bootstrap и как его подключить

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

Библиотеки Bootstrap использует ресурсы библиотеки jQuery. Обе они работают на Java Script. Что же нам даёт эта библиотека:

  • ускорение вёрстки
  • сокращение css-кода

Задачи

Задачи

Что нам понадобится:

  • jQuery
  • Bootstrap

Как и куда подключать Bootstrap и jQuery

Подключение

Подключаются библиотека в файле index.html. Для начала нужно скачать эти самые библиотеки. Сделать это можно вот по этим ссылкам:

Если при скачивании бибилотеки jQuery у вас открлась страница с исходным кодом, то просто кликните правой кнопкой мыши и сохраните файл в корень проекта. Обычно он автоматически сохраняется с расширение js.

Далее, скачайте библиотеку Bootstrap, разархивируйте, переименуйте папку в bootstrap и поместите её также в корень проекта.

Подключаем библиотеки

Библиотеки

Теперь между тегами head подключаем стиль Bootstrap:

<link rel="stylesheet" type="text/css" media="screen" href="bootstrap/css/bootstrap.min.css" />

Подключаем именно bootstrap.min.css.

Далее, в head подключаем библиотеку jQuery. Для этого прописываем следующее:

<script src="jquery-3.3.1.min.js"></script>

Название вашего файла, а именно версия, может быть другой.

Далее, подключаем скрипт Bootstrap:

<script src="bootstrap/js/bootstrap.min.js"></script>

Подключаем именно bootstrap.min.js.

Важно! Скрипт jQuery должен быть выше скрипта Bootstrap.

Если в будущем мы захотим внести изменения в стили, то необходимо создать свой файл стилей, например, main.css.

Отдельный файл можно создать и для Java Script, например, main.js.

Свои стили подключаем самыми последними, чтобы они имели приоритет.

В итоге у вас должно получится примерно такой код:

<head>

<meta charset="utf-8"/>

<title></title>

<link rel="stylesheet" type="text/css" media="screen" href="bootstrap/css/bootstrap.min.css" />

<link rel="stylesheet" type="text/css" media="screen" href="main.css" />

<script src="jquery-3.3.1.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

<script src="main.js"></script>

</head>

Рекомендую ознакомиться с перечнем стилей Bootstrap вот на этом сайте. Если вы кликните по зелёной кнопке «Try It»? Возле нужного стиля, то перейдёте на страницу наглядной демонстрации. Также рекомендую прочесть статью «Учимся использовать тег nav«.

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

Делитесь полезной информацией с друзьями:

Сергей

Привет! Моё имя Сергей, и я — автор этого блога. Рад, что вас заинтересовал мой проект. Не забывайте оставлять комментарии к статьям. По всем другим вопросам обращайтесь через контактную форму на странице "Контакты".

Читайте также:

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

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

Вверх