Это первый урок из небольшой серии, в которой я хотел бы поделиться навыками работы с самым популярным front-end фреймворком а именно Bootstrap.


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

Это один из самых популярных и самых лучших Frot-end фреймворков которые используются для создания сайтов на данный момент. Его разработали в Twitter в середине 2010 года и получил большое распространение в сфере разработки. Его главная особенность, это простота в использовании и настройке, он распространяется с открытым исходным кодом, поэтому вы можете даже сами отредактировать его как нужно вам, но это как правило не требуется. Bootstrap нужен людям которые уже немного посвящены в html и CSS могут сами сверстать какой либо шаблон, а благодаря ему, вы сможете в разы ускорить процесс верстки, писать более красивый и стандартизированный код. Преимущества его использования можно долго перечислять, но лучше перейти сразу к делу.

Где скачать и подключить BootStrap

Для того чтобы получить актуальную версию фреймворка, нужно перейти на его официальный сайт по адресу https://getbootstrap.com/

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

Локальный способ подключения

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

Скачанный архив распаковываете в каталог со своим сайтом, у вас получится две папки CSS и JS. В каждой папке вы найдете набор файлов, нас интересуют bootstrap.min.css и bootstrap.min.js это сжатые css и JavaScript файлы с фреймворком, если хотите редактировать то лучше подключайте полную версию, то есть, bootstrap.js и bootstrap.css, там уже не сжатый, а вполне читабельный код. И в итоге мы получаем следующее:

<!DOCTYPE html> <html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Как видите всего две строчки кода и фреймворк подключен.

Подключение bootstrap по средствам CDN

Этот способ подключения попроще, но без интернета работать фреймворк не будет, в этом случае я рассуждаю так, во первых сайт я делаю не для локального использования, а для того чтобы разместить в интернете, соответственно переживать не о чем, во вторых, когда я верстаю сам сайт на всех моих компьютерах интернет всегда есть, даже если я летом уеду на дачу взяв ноутбук, я все равно подключу интернет на него даже через смартфон… В общем этот вариант абсолютно жизнеспособен. Для подключения жмем на главной старице Get Started перейдя по ссылке копируем код:

Как вы могли заметить здесь мы подключаем не только сам фреймворк но и библиотеки JQuery. В итоге получаем следующий код:

<!DOCTYPE html> <html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Как и в прошлом примере ни чего сложного.

Подключение BootStrap с помощью стартового шаблона

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

Вам просто нужно скопировать шаблон и все, базовая html разметка уже есть, фреймворк и все библиотеки сразу подключены. Я думаю проще уже точно некуда. Как видите начиная с самого подключения этот фреймворк не заставит вас ломать себе голову и все делается довольно просто и легко. Как и обещал адрес сайта с русскоязычной документацией: https://bootstrap-4.ru/ На этом все удачи в создании сайтов.

Дата: 2020-04-07
Автор: Алексей Мезенцев
Создание Интернет-магазина на OpenCart 2.0

Видеокурс по OpenCart 2.0

Научись создавать Интернет-магазины всего за сутки!

Получить курс