Содержание

Как подключить bootstrap к сайту?

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

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

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

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

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

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

Это исходники, с их помощью вы можете переделать 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, который позволяет выставить базовые настройки для корректного отображения сайта на мобильных устройствах.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Смотреть

Подключение Bootstrap 4 на сайт


Для того, чтобы быстро подключить bootstrap 4 на сайт, достаточно использовать CDN

Ниже приведен пример подключения bootstrap 4 на страницу

<!DOCTYPE html>

<html lang="ru"> <head> <!-- Кодировка веб-страницы --> <meta charset="utf-8"> <!-- Настройка viewport --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Подключаем Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> </head> <body> <!-- Контент страницы --> ... <!-- Подключаем jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Подключаем плагин Popper --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <!-- Подключаем Bootstrap JS --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html>

 

Просмотров: 2319

Please enable JavaScript to view the comments powered by Disqus.

Установка Bootstrap — Bootstrap: Основы

Bootstrap: Основы

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

Подключение с помощью CDN

Перед тем, как изучить подключение через CDN стоит разобраться с тем, что такое CDN.

CDN является сокращением от Content Delivery Network. Чаще всего система CDN представляет собой несколько серверов в разных странах мира. Они хранят в себе файлы, которые можно подключить к проекту. В зависимости от того, где находится пользователь, отдаётся файл с того сервера, который обеспечит минимальную задержку.

Для подключения Bootstrap с помощью CDN достаточно просто подключить необходимые файлы в HTML. Свежие ссылки для подключения находятся на странице документации Bootstrap. В настоящее время это выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Подключение Bootstrap</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh5AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
 <!-- Основная разметка страницы -->
</body>
</html>

Порядок подключения Javascript очень важен. Так как подключения происходят последовательно, а Bootstrap зависит от Jquery и Popper, то они должны подключаться раньше основного файла JS.

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

Локальное подключение CSS

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

Bootstrap: что это такое и как его установить

Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.

Что нужно знать о Bootstrap перед началом работы

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

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

Какую версию Bootstrap выбрать?

Последняя стабильная версия — 4.5.0. Ее и стоит использовать. Сетка в ней построена на Flexbox, это достаточно распространенная технология. Сервис Can I Use показывает, что верстка на флексах поддерживается всеми современными версиями браузеров. Частичная поддержка есть в Internet Explorer 10 и 11. 

В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3.4.1.

В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.

  • В пятой версии не будет поддержки Internet Explorer. 
  • Из Bootstrap пропадет библиотека jQuery, с помощью которой в предыдущих версиях реализовывалось большинство возможностей JavaScript.

Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4.5.1.

Как установить Bootstrap

Установить Bootstrap можно несколькими способами:

  • Подключить компилированные файлы c помощью BootstrapCDN.
  • Скачать скомпилированные файлы CSS и JS, подключить их к проекту через ссылки и верстать. Это отличный вариант для того, чтобы познакомиться с фреймворком.
  • Скачать исходные файлы. Эта сборка удобнее для верстки, потому что позволяет гибко кастомизировать компоненты. Однако она требует использования дополнительных инструментов: компилятора Sass и постпроцессоров. 
  • Установить исходники через npm, yarn, RubyGems, Composer, NuGet.

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

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

Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.

Код может быть таким:

<!DOCTYPE html>

<html lang="ru">

<head>

     <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Эта ссылка загружает с CDN все необходимые файлы Bootstrap -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>

    <h2>Привет, мир!</h2>

    <!-- Перед закрывающим тегом <body> подключаем jQuery, Popper и Bootstrap JS, чтобы работали интерактивные компоненты  -->     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script>

</body>

</html>

Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js. 

В папке css — файлы стилей. 

  • bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.
  • bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.
  • bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot.min.css — минифицированная версия.

В папке js — файлы для работы JavaScript.

  • bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.
  • bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.

В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS. 

Файл проекта index.html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.

Код шаблона может быть таким:

<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/bootstrap.css" >

</head>

<body>

    <h2>Привет, мир!</h2>

    <!-- Сначала подключаем библиотеку JQuery, затем — Bootstrap JS -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

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

</body>

</html>

Обратите внимание — я подключил не минифицированные файлы (с суффиксом min), а обычные. Так удобнее работать со стилями и скриптами. Однако на рабочем проекте нужно использовать минифицированные версии — они меньше весят и обеспечивают более быструю загрузку страницы. После редактирования стилей вам нужно самостоятельно минифицировать файл, заменив шаблонную версию.

Начинаем верстать с помощью Bootstrap

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

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

Допустим, я хочу быстро собрать слайдер. В примерах есть карусель. Внутри папки — два файла: index.html и carousel.css. Я открываю их в редакторе и исправляю так, как мне нужно. 

Например, в моей карусели будет не три карточки, а пять. Для этого достаточно в файле index.html добавить еще два компонента. 

Изначально карусель выглядит вот так.

Открываем файл index.html через любой текстовый редактор (я предпочитаю Visual Studio Code) и начинаем его править. 

Находим в коде карусель. Вот она:

<div data-ride="carousel">

Добавляем в список с классом carousel-indicators два элемента с номерами 3 и 4. Они нужны для того, чтобы в карусели отображалось пять кнопок переключения между слайдами. 

Далее находим блок слайда с классом carousel-item. Копируем все, что находится внутри, и вставляем в конце.

Дальше мы можем редактировать слайды так, как нравится: переписать заголовки и описания, добавить фоновое изображение или изменить цвет, настроить шрифт и отступы, изменить высоту контейнера. Все стили доступны в файле carousel.css.

Вся работа заняла пару минут. При этом компоненты имеют адаптивный дизайн. Вам не нужно настраивать даже медиа-запросы — они уже прописаны в исходных файлах Bootstrap. Такой подход позволяет значительно сэкономить время на верстку.

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

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

Не подключается bootstrap 3. что не так?

1. Откройте страницу index.html в браузере Google Chrome

2. Откройте исходный код страницы (ctr + u или правой кнопкой мыши Показать исходный код)

3. Нажмите на файл в исходном коде в браузере «assets/css/bootstrap.min.css» и на «assets/js/bootstrap.min.js». Если файлы не найдены, убедитесь, что файлы созданы в папке assets/css/ и assets/js соответственно. 

4. Если ничего не получается, можно подключить Bootstrap 3 через CDN. Просто удалите весь ваш код из страницы index.html и вставьте этот код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Сергей Никонов

teacher

Установка Bootstrap 4 на сервер (на сайт)

Разобравшись с тем, где и как взять исходники Bootstrap 4, (подробно показано и описано в статье → по этой ссылке), можно переходить к вопросу о том, как установить Bootstrap 4 на сайт. Для этого нужно иметь возможность закачивать файлы на сервер или хотя бы создавать новые файлы на нём (тогда можно не копировать файлы, а создавать файлы и вставлять в них содержимое с локального компьютера). Но всё-таки удобнее, если есть доступ к серверу хотя бы по ftp.

Куда устанавливать Bootstrap 4 для того, чтобы потом подключить его на сайте

Итак, у нас есть две папки с файлами css и js. Для того, чтобы Bootstrap можно было использовать на сайте, нужно чтобы файлы с css-стилями и js-скриптами были доступны. Для того, чтобы легко ориентироваться, где что лежит, лучше на сервере в папке сайта создать две директории css и js. В зависимости от того, используется ли шаблон или сайт создаётся на чистом HTML или на какой-то экзотической / самописной CMS, эти две папки нужно поместить либо в папку шаблона, либо туда, где будут лежать файлы с css-стилями и js-скриптами сайта. Эти папки можно скопировать из архива полученного так, как описано по ссылке во вступлении к этой статье, либо скопировать файлы из этих папок на сервер.

Как подключить Bootstrap 4 в HTML-документы сайта

После того, как папки с css-стилями и js-скриптами успешно помещены на сервер, остаётся только правильно прописать метатеги для подключения этих библиотек Bootstrap. В заголовках страниц в контейнере <head> нужно прописать следующие строки:

Для подключения css-стилей Bootstrap:

<link href="/путь_до_папки_от_корня_сайта/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

Для подключения js-скриптов Bootstrap:

<script src="/путь_до_папки_от_корня_сайта/js/bootstrap.js type="text/javascript"></script>

Этого будет достаточно для того, чтобы библиотека Bootstrap начала работать на сайте.

Где должны быть прописаны HTML мета-теги подключения библиотеки Bootstrap

CSS Bootstrap нужно подключать так, чтобы:

  1. CSS-стили Bootstrap переопределили возможные стили, которые могут присутствовать на сайте.
    • это значит, что HTML мета-тег подключения библиотеки Bootstrap должен быть как можно ниже в контейнере <head> HTML-документа.
  2. Собственные CSS-стили, которыми переопределяются CSS-свойства Bootstrap, должны срабатывать.
    • это значит, что для того, чтобы была возможность переопределить CSS-свойства Bootstrap, стили шаблона (документа) должны находиться ниже HTML мета-тега подключения библиотеки Bootstrap.

Если простым языком, то HTML мета-тег подключения библиотеки Bootstrap должен быть предпоследним до закрывающего HTML-тега </head>, а последним должен быть мета-тег подключения css-свойств, которые перепрописывают свойства Bootstrap.

JS-библиотеку Bootstrap разработчики рекомендуют помещать в самый конец HTML документа перед закрывающим тегом </body>.

Подключение библиотеки Bootstrap из репозитория разработчика

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

Для подключения css-стилей Bootstrap из репозитория разработчика:

<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">

Для подключения js-скриптов Bootstrap из репозитория разработчика:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Выводы

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

Есть ещё более навороченные способы подключения библиотеки Bootstrap на сайт, используя средства серверных загрузчиков типа Composer, но это совсем другая история для которой требуется другой уровень знаний.

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Bootstrap 4. Начало работы. Шаблон

Фреймворк Bootstrap получил очень широкое распространение благодаря массе факторов, главным из которых являлось использование классов для быстрого построения адаптивной сетки, основанной на 12 столбцах. Также Bootstrap предоставляет в своем составе набор плагинов jQuery, позволяющий простым добавлением кода вставить такие интерактивные элементы, как карусель (или слайдер), вплывающие подсказки, модальные окна и др.

Огромное количество сайтов было сделано на основе версии 3, последней из которых является Bootstrap 3.3.7 (перейти на официальный сайт). Более года разрабатывался Bootstrap 4, который был доступен для скачивания в alpha-версии. На данный момент  можно использовать версию 4.1.1 Bootstrap-4. Лучше всего скачивать его с официального сайта, хотя вы можете это сделать и на русскоязычном сайте, если с английским пока беда.

Загрузка и подключение файлов Bootstrap 4

Bootstrap 4 доступен для скачивания в скомпилированном виде, т.е. файлы, которые вы получите после распаковки архива будут в формате css и js, причем они будут размещены в соответствующих папках css и js.

Можно также скачать исходные файлы, которые подойдут для разработчиков, знакомых с SASS (SCSS). Этот вариант лучше подходит для тех, кто будет менять значение переменных для создания собственных параметров сетки, цветов, отступов или шрифтов. Если вы пока не разбираетесь в принципах SASS, имеет смысл подключать стандартную версию Bootstrap 4 и переопределять некоторые правила в собственном стилевом файле. Также можно будет подключать различные темы Bootstrap.

Если вы не хотите или не можете скачать архив с основными файлами Bootstrap, тогда ваш вариант — подключение файлов через Bootstrap CDN. В этом случае вам необходимо стабильное соединение с Интернетом.

<!— подключение css-файла —> <link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css» integrity=»sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB» crossorigin=»anonymous»> <!— подключение нужной версии jQuery —> <script src=»https://code.jquery.com/jquery-3.3.1.slim.min.js» integrity=»sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo» crossorigin=»anonymous»> </script> <!— подключение popper.js, необходимого для корректной работы некоторых плагинов Bootstrap 4 —> <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js» integrity=»sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=»anonymous»> </script> <!— подключение js-файла —> <script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js» integrity=»sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T» crossorigin=»anonymous»> </script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!— подключение css-файла —>

<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css»

integrity=»sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB» crossorigin=»anonymous»>

 

 

<!— подключение нужной версии jQuery —>

<script src=»https://code.jquery.com/jquery-3.3.1.slim.min.js»

integrity=»sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo» crossorigin=»anonymous»>

</script>

 

<!— подключение popper.js, необходимого для корректной работы некоторых плагинов Bootstrap 4 —>

<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js»

integrity=»sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=»anonymous»>

</script>

  

<!— подключение js-файла —>

<script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js»

integrity=»sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T» crossorigin=»anonymous»>

</script>

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

Для тех, кто использует npm или  другие системы управления пакетами (например, Composer), существует ряд вариантов загрузок через пакетные менеджеры, представленные на официальном сайте или его русскоязычной версии.

Содержимое архива с Bootstrap 4

Внутри папки css вы найдете ряд файлов, внутреннее содержимое которых состоит из разных составляющих. Точнее — в папках css и js будут представлены следующие файлы:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ └── bootstrap-reboot.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.min.js
├── bootstrap.js
└── bootstrap.min.js

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

Если вам нужна только сетка Bootstrap 4, имеет смысл подключать только файл bootstrap-grid.min.css.

Карты исходного кода CSS (bootstrap.*.map) доступны для использования лишь с определенными инструментами разработчика в браузере. Для их использования необходимо знание работы препроцессоров.

Файлы в папке js имеют также разное содержимое. Для использования файла bootstrap.min.js необходимо подключить jQuery и Popper, а файлы bootstrap.bundle.js и минимизированный bootstrap.bundle.min.js уже включают Popper, но не jQuery.

В таблице ниже представлен список включенных в различные css-файлы компонентов:

CSS файлыРазметкаСодержаниеКомпонентыУтилиты

bootstrap.css

bootstrap.min.css

ВключеныВключеныВключеныВключены

bootstrap-grid.css

bootstrap-grid.min.css

Только Система сетокНе включеныНе включеныТолько flex утилиты

bootstrap-reboot.css

bootstrap-reboot.min.css

Не включеныТолько RebootНе включеныНе включены

Следующая таблица содержит список включенных js-компонентов:

JS-файлыPopperjQuery

bootstrap.bundle.js

bootstrap.bundle.min.js

ВключеныНе включены

bootstrap.js

bootstrap.min.js

Не включеныНе включены

Поддержка Bootstrap 4

4-ая версия Bootstrap построена, в основном, на использовании технологии Flexbox, которая на данный момент поддерживается большинством современных браузеров, в том числе и Internet Explorer версий 10-11 / Microsoft Edge. Для поддержки младших версий IE необходимо использовать Botstrap 3. Существует ряд нюансов, связанный с нормальным отображением ряда элементов в мобильных браузерах на платформах iOS и Android, которые необходимо рассмотреть в документации BS4.

Шаблон страницы Bootstrap 4

При верстке страницы на основе Bootstrap 4 следует указывать Doctype стандарта HTML5 и meta-тег veiwport, чтобы страницы адаптировались к разрешениям экрана на различных устройствах. Также в нижней части страницы необходимо подключить jQuery и Popper, и уже после них bootstrap.js. Сделать это можно 2-мя основными способами: указав относительный путь к файлам, скачанным на ваш компьютер или используя файлы Bootstrap CDN.

Шаблон на основе Bootstrap CDN

<!doctype html> <html lang=»en»> <head> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1, shrink-to-fit=no»> <!— Bootstrap CSS —> <link href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css» integrity=»sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB» crossorigin=»anonymous»> <title>Hello, world!</title> </head> <body> <h2>Hello, world!</h2> <!— Подключение JavaScript —> <!— Сначала jQuery, затем Popper.js, затем Bootstrap JS —> <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.3/umd/popper.min.js» integrity=»sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=»anonymous»> </script <script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js» integrity=»sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T» crossorigin=»anonymous»> </script> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!doctype html>

<html lang=»en»>

  <head>

    <meta charset=»utf-8″>

    <meta name=»viewport» content=»width=device-width, initial-scale=1, shrink-to-fit=no»>

 

    <!— Bootstrap CSS —>

    <link href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css»

integrity=»sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB» crossorigin=»anonymous»>

 

    <title>Hello, world!</title>

  </head>

  <body>

    <h2>Hello, world!</h2>

 

    <!— Подключение JavaScript —>

    <!— Сначала jQuery, затем Popper.js, затем Bootstrap JS —>

    <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.3/umd/popper.min.js»

    integrity=»sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″

    crossorigin=»anonymous»> </script

    <script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js»

    integrity=»sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T»

    crossorigin=»anonymous»> </script>

  </body>

</html>

Шаблон на основе файлов из папки скомпилированных файлов Bootstrap 4

<!doctype html> <html lang=»en»> <head> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1, shrink-to-fit=no»> <!— Bootstrap CSS —> <link rel=»stylesheet» href=»css/bootstrap.min.css»> <title>Hello, world!</title> </head> <body> <h2>Hello, world!</h2> <!— Подключение JavaScript —> <!— Сначала jQuery, затем Popper.js, затем Bootstrap JS —> <script src=»js/jquery-3.3.1.slim.min.js»></script> <script src=»js/popper.min.js» ></script> <script src=»js/bootstrap.min.js»></script> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!doctype html>

<html lang=»en»>

  <head>

    <meta charset=»utf-8″>

    <meta name=»viewport» content=»width=device-width, initial-scale=1, shrink-to-fit=no»>

 

    <!— Bootstrap CSS —>

    <link rel=»stylesheet» href=»css/bootstrap.min.css»>

 

    <title>Hello, world!</title>

  </head>

  <body>

    <h2>Hello, world!</h2>

 

    <!— Подключение JavaScript —>

    <!— Сначала jQuery, затем Popper.js, затем Bootstrap JS —>

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

    <script src=»js/popper.min.js» ></script>

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

  </body>

</html>

Скачать оба варианта можно по ссылке.

Использование Reboot

Reboot — это комплекс css-стилей, не использующий классов, а основанный на стилизации элементов для единого их отображения в различных браузерах. Он основан на  normalize.css,  который уже давно используется для унификации стилей основных элементов. Reboot также переводит все единицы измерения в remвместо em, устанавливает значение свойства box-sizing как border-box для всех элементов, а также псевдоэлементов  :*::before и *::after.

Эти css-стили входят в bootstrap.css и минифицированный bootstrap.min.css, поэтому подключать его отдельно не нужно.

Полезные ссылки:

Просмотров: 3 144

Базовая сетка начальной загрузки


Сеточная система начальной загрузки

Сетка

Bootstrap позволяет размещать на странице до 12 столбцов.

Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе для создания более широких столбцов:

пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1
пролет 4 пролет 4 пролет 4
пролет 4 пролет 8
пролет 6 пролет 6
пролет 12
Система сеток

Bootstrap адаптивна, и столбцы автоматически меняют расположение в зависимости от размера экрана.


Классы сетки

Система сеток Bootstrap имеет четыре класса:

  • xs (для телефонов — экраны шириной менее 768 пикселей)
  • см (для планшетов — экраны шириной не менее 768 пикселей)
  • md (для небольших ноутбуков — экраны шириной не менее 992 пикселей)
  • LG (для ноутбуков и настольных компьютеров — экраны шириной не менее 1200 пикселей)

Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.


Базовая структура сетки начальной загрузки

Ниже представлена ​​базовая структура сетки Bootstrap:












Первый; создать строку (

).Затем добавьте желаемое количество столбцов (теги с соответствующими .col - * - * классы). Обратите внимание, что числа в .col - * - * всегда должны составлять 12 для каждой строки.

Ниже мы собрали несколько примеров базовых макетов сетки Bootstrap.



Три равные колонны

.col-sm-4

.col-sm-4

.col-sm-4

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

Пример


.col-sm-4

.col-sm-4

.col-sm-4

Попробуй сам »

Две неравные колонны

В следующем примере показано, как получить два столбца разной ширины, начиная с планшеты и масштабирование до больших компьютеров:

Пример


.col-sm-4

.col-sm-8

Попробуй сам »

Совет: Вы узнаете больше о сетках Bootstrap позже в этом руководстве.



Введение · Bootstrap

Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных, ориентированных на мобильные устройства сайтов, с BootstrapCDN и начальной страницей шаблона.

Быстрый старт

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

CSS

Скопируйте и вставьте таблицу стилей в свой перед всеми другими таблицами стилей, чтобы загрузить наш CSS.

    

JS

Многие из наших компонентов требуют использования JavaScript для работы.В частности, для них требуются jQuery, Popper.js и наши собственные плагины JavaScript. Поместите следующие

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

Важные глобалы

Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам нужно знать при его использовании. Все они почти исключительно ориентированы на нормализацию кроссбраузерных стилей.Давайте нырнем.

HTML5 doctype

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

  

  ...
  

Адаптивный метатег

Разработан

Bootstrap. mobile first , стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS.Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра к вашему .

    

Вы можете увидеть пример этого в действии в начальном шаблоне.

Размер коробки

Для более простого изменения размеров в CSS мы переключаем глобальное значение box-sizing с content-box на border-box .Это гарантирует, что заполнение не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps и Google Custom Search Engine.

В редких случаях, когда вам нужно отменить его, используйте что-то вроде следующего:

  .selector-for-some-widget {
  размер коробки: коробка содержимого;
}  

В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент с помощью :: before и :: after , унаследуют заданный размер блока для этого .Селектор для какого-то виджета .

Узнайте больше о блочной модели и ее размерах на сайте CSS Tricks.

Перезагрузка

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

Будьте в курсе разработки Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.

  • Подпишитесь на @getbootstrap в Twitter.
  • Прочтите официальный блог Bootstrap и подпишитесь на него.
  • Присоединяйтесь к официальной комнате Slack.
  • Общайтесь с другими Bootstrappers в IRC. На сервере irc.freenode.net в канале загрузки ## .
  • Справку по реализации можно найти на сайте Stack Overflow (помечено как bootstrap-4 ).
  • Разработчикам следует использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

Вы также можете подписаться на @getbootstrap в Twitter, чтобы следить за последними сплетнями и потрясающими музыкальными клипами.

Как использовать Bootstrap с HTML

Функции JavaScript некоторых компонентов, таких как раскрывающиеся списки, вкладки и т. Д., Зависят от jQuery и popper.js.

Итак, для правильной работы включите jQuery и popper.js в следующем порядке прямо перед загрузкой файла JavaScript начальной загрузки.

 

 

Просто включите приведенный выше код в заголовок HTML элемент, и вам будет хорошо!

Используйте локальную копию Bootstrap

Другой вариант - загрузить вашу собственную копию Bootstrap и интегрировать ее в структуру вашего проекта.

Шаг 1. Загрузите Bootstrap
.

Загрузите Bootstrap в виде Zip-файла здесь. Затем откройте файловый менеджер своего компьютера и найдите bootstrap-3.3.7-dist.zip в папке Downloads . Дважды щелкните файл, чтобы распаковать его.

Шаг 2. Выберите проект

Наш пример проекта - это домашняя страница Codebrainery.io. Адаптируйте следующие инструкции для использования в своем собственном проекте или загрузите здесь программу Codebrain, чтобы следить за ними.

codebrainery содержит три файла, индекс .html , main.css :

 
  

codebrainery | - index.html | - main.css

Шаг 3. Переместите Bootstrap в папку вашего проекта

С помощью командной строки или файлового менеджера переместите недавно распакованную папку bootstrap-3.3.7-dist в папку проекта. Это создаст следующую структуру папок:

 
  

код | - index.html | - main.css | - бутстрап-3.3.7-расст. | - css | - js | - fonts

Шаг 4. Ссылка на вашу копию Bootstrap

Используя свой любимый текстовый редактор, откройте index.html и найдите элемент head . Домашняя страница Codebrainery.io уже ссылается на Bootstrap CDN:

.
 
  

Заменить ссылку атрибут href , чтобы вы могли вместо этого загрузить локально установленный миниатюрный CSS-код Bootstrap:

 
  

Позже мы реализуем функции Bootstrap, которые зависят от JavaScript Bootstrap, а также jQuery, поэтому добавьте их сейчас в элемент head . Добавьте два скрипт тегов под ссылкой тег :

 
  

Когда использовать Bootstrap

Обратитесь к Bootstrap, если вам нужна помощь в реализации любого из следующих действий:

  • верхние и нижние колонтитулы
  • отзывчивые панели навигации
  • глификоны и шрифты
  • баннеров (в Bootstrap они называются jumbotron)
  • поддерживает макеты функций с использованием нескольких столбцов
  • галерей, слайд-шоу и других динамических компонентов

Полное руководство по Bootstrap CSS

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

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

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

Чтобы понять, почему более 21 миллиона веб-сайтов в Интернете используют Bootstrap, давайте подробнее рассмотрим, что это такое.

Что такое Bootstrap CSS?

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

Хотя Bootstrap - это набор инструментов с открытым исходным кодом для разработки с использованием HTML, CSS и JavaScript, его часто называют фреймворком CSS.

Чтобы понять, почему, вы должны сначала понять, что CSS, как правило, легче изучить людям с любым уровнем технического опыта и он быстрее в браузерах, чем JavaScript. По этим причинам разработчики Bootstrap по возможности писали на CSS (и HTML) вместо JavaScript. Библиотека CSS, включенная в Bootstrap, поэтому намного больше, чем библиотека JavaScript.

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

Почему Bootstrap?

Bootstrap - это набор инструментов для многих разработчиков интерфейса. По данным W3Techs, его используют 22,1% всех веб-сайтов в Интернете.

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

Что отличает Bootstrap от других наборов инструментов разработки, так это то, что он был разработан в первую очередь для мобильных устройств. Это означает, что код сначала был оптимизирован для мобильных устройств (т.е. для экрана наименьшего размера), а затем увеличен для отображения на больших экранах. В результате создание с использованием Bootstrap CSS гарантирует, что ваш сайт поддерживает правильный рендеринг и сенсорное масштабирование для всех устройств.

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

Когда использовать Bootstrap

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

1. Вам нужен адаптивный веб-сайт.

Создать адаптивный сайт с помощью Bootstrap намного проще, чем с нуля. Bootstrap поставляется с адаптивными стилями, такими как контейнеры и медиа-запросы, чтобы гарантировать, что ваш сайт адаптируется к области просмотра. Это означает, что вам не нужно беспокоиться о том, используют ли ваши посетители настольные компьютеры, планшеты или мобильные устройства.

2. Вы хотите сэкономить время.

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

Рассмотрим, например, кнопки Bootstrap. Базовый класс .btn используется для всех общих стилей, которые вы хотите использовать для своих кнопок, таких как display, padding, border-width. С помощью этого класса вам не нужно постоянно повторять эти свойства CSS в таблице стилей для форматирования каждой добавляемой кнопки.

Классы модификаторов, такие как .btn-primary, с другой стороны, используются для добавления более конкретных стилей, которые вы хотите использовать для своих кнопок, таких как цвет, цвет фона и цвет границы ваших кнопок. Это всего лишь один пример того, как использование компонентов Bootstrap намного быстрее, чем их кодирование с нуля.

3. Вы знакомы с HTML и CSS.

Хотя Bootstrap действительно упрощает процесс создания сайта, вы должны быть знакомы с HTML и CSS, чтобы использовать фреймворк.Например, понимание блочной модели CSS будет важно при использовании класса контейнера и создании вашей первой сетки Bootstrap.

Хорошая новость в том, что для начала вам понадобятся только базовые знания программирования.

4. Ваш сайт создают несколько человек.

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

5. Вы хотите быть частью сообщества.

Поскольку Bootstrap имеет открытый исходный код, он имеет глобальное сообщество разработчиков и дизайнеров, посвятивших себя поддержке фреймворка. Эти разработчики и дизайнеры изменяют и улучшают кодовую базу Bootstrap на GitHub. Они также отвечают на вопросы в Twitter, Stack Overflow и в специальной комнате Slack.Используя Bootstrap, вы можете использовать это активное сообщество, чтобы стать лучшим пользователем Bootstrap.

Когда не использовать Bootstrap

Несмотря на то, что использование этого CSS-фреймворка дает множество преимуществ, есть несколько причин, по которым , а не , также может использовать Bootstrap. Давайте подробнее рассмотрим эти причины ниже.

1. Вам нужен уникальный веб-сайт.

Поскольку Bootstrap поставляется с предварительно стилизованным контентом, компонентами и шаблонами, сайты Bootstrap обычно выглядят одинаково из коробки.Фактически, Bootstrap был обвинен в том, почему все веб-сайты сегодня выглядят одинаково.

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

2. Вам нужна тема.

Фреймворк Bootstrap не является темой, хотя есть доступные темы Bootstrap. Например, сравним фреймворк с темой WordPress.

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

3. Вам нужен сайт с быстрой загрузкой.

Bootstrap может негативно повлиять на скорость вашего сайта. Почему? Потому что он тяжелый - не с точки зрения КБ, а с точки зрения того, сколько средний пользователь не использует .

Bootstrap меньше 500 КБ.Вы также можете предпринять несколько шагов, чтобы уменьшить этот вес и уменьшить его влияние на время загрузки. Например, вы можете использовать уменьшенные файлы CSS и JavaScript. Или вы загружаете только файлы CSS, а не файлы JavaScript.

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

4. У вас нет времени изучать и читать документацию Bootstrap.

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

5. Вы хотите освоить HTML и CSS.

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

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

Как загрузить Bootstrap CSS

Прежде чем мы рассмотрим процесс загрузки Bootstrap, важно отметить, что вы можете загружать Bootstrap удаленно через BootstrapCDN или jsDelivr вместо его загрузки. Это потребует от посетителей подключения к Интернету для посещения вашего сайта и, однако, потребует, чтобы вы разместили дополнительный код. В результате загрузка Bootstrap является более популярным выбором.

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

Предварительно скомпилированный загрузочный файл

Предварительно скомпилированная версия - это самая основная форма Bootstrap. Вы загрузите предварительно скомпилированные файлы CSS и JS, а также уменьшенные файлы CSS и JS, которые легко добавить практически в любой веб-проект.

После загрузки вы разархивируете сжатую папку и увидите следующую структуру.

бутстрап /

├── css /

│ ├── bootstrap-grid.css

│ ├── bootstrap-grid.css.map

│ ├── bootstrap-grid.min.css

│ ├── bootstrap-grid.min.css.map

│ ├── bootstrap-reboot.css

│ ├── bootstrap-reboot.css.map

│ ├── bootstrap-reboot.min.css

│ ├── bootstrap-reboot.min.css.map

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── бутстрап.мин.css

│ └── bootstrap.min.css.map

└── js /

├── bootstrap.bundle.js

├── bootstrap.bundle.js.map

├── bootstrap.bundle.min.js

├── bootstrap.bundle.min.js.map

├── bootstrap.js

├── bootstrap.js.map

├── bootstrap.min.js

└── bootstrap.min.js.map

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

Если вы хотите настроить файлы CSS и JS, включенные в Bootstrap, по своему усмотрению, вам лучше загрузить версию с исходным кодом.

Исходный код начальной загрузки

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

Если вы выберете загрузку исходного кода Bootstrap, вы разархивируете папку и увидите следующую структуру.

бутстрап /

├── расст /

│ ├── css /

│ └── js /

├── сайт /

│ └──docs /

│ └── 4.6 /

│ └── примеры /

├── js /

└── scss /

Папка dist / содержит все, что указано в предварительно скомпилированном разделе выше. Папка docs / включает исходный код документации Bootstrap и примеры использования Bootstrap. Папка js / содержит исходный код для Bootstrap JS и папку scss / для Bootstrap CSS.

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

Каждая версия Bootstrap идеально подходит для разных случаев использования, но поскольку предварительно скомпилированный Bootstrap проще и быстрее в использовании, мы сосредоточимся на этой версии до конца статьи.

Ниже давайте посмотрим, как можно использовать предварительно скомпилированный Bootstrap для создания веб-сайта.

Как использовать Bootstrap CSS

Чтобы использовать Bootstrap CSS, вам необходимо интегрировать его в вашу среду разработки. Для этого вам просто нужно создать папку на вашем компьютере. В этой папке сохраните скомпилированные файлы CSS и JS, а также новый файл HTML, в который вы загрузите Bootstrap. Затем вы можете использовать шаблоны Bootstrap для добавления элементов интерфейса на страницу.

Давайте разберем этот процесс пошагово.

Загрузка Bootstrap CSS и JS

Сначала создайте на вашем компьютере папку под названием «bootstrap.”Переместите скомпилированные файлы CSS из загрузки Bootstrap в эту папку. Если вы также используете JS-часть Bootstrap, переместите также скомпилированные JS-файлы в папку.

В той же папке создайте другой файл и назовите его index.html. Откройте этот файл в любом текстовом редакторе, например Notepad ++. Вы можете скопировать и вставить базовый HTML-шаблон с официального сайта Bootstrap в файл или написать код с нуля.

Ниже приведен пример HTML-страницы, созданной с нуля.

 
 

Образец страницы учебного пособия по начальной загрузке

Теперь вы готовы загрузить Bootstrap CSS в свой проект.Просто добавьте следующую строку кода в заголовок файла index.html прямо перед тегом .

 
 

Если вы планируете использовать только CSS-часть Bootstrap, то все готово.

Если вы планируете использовать также JS-часть, вам нужно добавить еще две строки кода. Компоненты, включая предупреждения, кнопки переключения, карусели и раскрывающиеся списки, требуют использования JavaScript для работы, поэтому продолжайте эти шаги, если хотите добавить какой-либо из этих элементов на свой сайт.

Сначала вам нужно загрузить библиотеку jQuery. Для этого загрузите jQuery на свой компьютер. Разархивируйте файл и сохраните его в папке «bootstrap» вместе со скомпилированными файлами CSS и JS и файлом index.html.

Затем вы добавите следующую строку кода в файл index.html. На этот раз вы добавите его в нижний колонтитул, а не в заголовок, сразу после тега .

 
 

После выполнения этих шагов ваш файл index.html должен выглядеть следующим образом:

 
 

Образец страницы учебного пособия по начальной загрузке

<ссылка rel = "stylesheet" href = "bootstrap / css / bootstrap.min.css ">

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

Поскольку многие пользователи не знают SASS, давайте рассмотрим пример редактирования предварительно скомпилированного Bootstrap.

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

Источник изображения

Страница чистая, отзывчивая и кроссбраузерная, но довольно строгая. Чтобы персонализировать дизайн, Rascia добавила собственный CSS в файл custom.css. Используя селекторы CSS, она смогла применить уникальные свойства стиля к элементам HTML на своей странице.

Во-первых, она хотела удалить пустое пространство между панелью навигации и заголовком jumbotron. Поэтому она добавила в файл следующий код, используя селектор классов "navbar".«

 
 

.navbar {

край-низ: 0;

}

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

 
 

.джумботрон {

фон: # 27a967;

цвет: белый;

выравнивание текста: по центру;

}

.jumbotron p {

цвет: белый;

размер шрифта: 26 пикселей;

}

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

 
 

кузов {

фон: # 3E4649;

цвет: # f7f7f7;

семейство шрифтов: 'Montserrat', без засечек;

}

х2,

h3 {

font-weight: жирный;

}

п {

размер шрифта: 16 пикселей;

цвет: #cdcdcd;

}

.навигационная панель {

край-низ: 0;

}

.джумботрон {

фон: # 27A967;

цвет: белый;

выравнивание текста: по центру;

}

.джумботрон п {

цвет: белый;

размер шрифта: 26 пикселей;

}

.navbar-inverse {

фон: # 2E2F31;

граница: 0;

}

. Раскрывающееся меню {

фон: # 2E2F31;

border-radius: 0;

граница: 0;

}

.navbar-inverse .navbar-nav li a {

цвет: # f7f7f7;

размер шрифта: 16 пикселей;

}

.navbar-inverse .navbar-nav li a: hover {

фон: # 27A967;

}

.navbar-inverse .navbar-nav .dropdown-menu li a: hover {

фон: # 2C463C;

}

. Раскрывающееся меню li a {

отступ: 10 пикселей;

}

.btn-primary {

цвет: #fff;

цвет фона: прозрачный;

цвет бордюра: белый;

нижнее поле: 5 пикселей;

}

.btn-primary: hover {

цвет: # 27A967;

цвет фона: белый;

цвет бордюра: белый;

}

.glyphicon-large {

)

размер шрифта: 100 пикселей;

}

. Призыв к действию {

выравнивание текста: по центру;

}

. Призыв к действию п {

нижнее поле: 30 пикселей;

семейство шрифтов: без засечек;

}

С этими изменениями она полностью изменила свой сайт Bootstrap.Взгляните ниже.

Источник изображения

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

Создание адаптивного сайта

Bootstrap - это мощный интерфейсный фреймворк для создания и настройки мобильного сайта. С Bootstrap вам не нужно начинать с нуля или , отказываясь от контроля над внешним видом вашего сайта.Начните изучать этот фреймворк прямо сейчас, чтобы увидеть, на что он способен.

javascript - Как правильно локально связать JQuery / Bootstrap и скрипты?

javascript - Как правильно локально связать JQuery / Bootstrap и скрипты? - Переполнение стека

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 4к раз

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

  



    
   
   

   
   
   
   





  

Это мой заголовочный файл.Это то же самое место, где я разместил ссылки CDN. Извините, если это глупый вопрос, но, так долго осмотревшись, я решил спросить.

Салек

19344 серебряных знака1414 бронзовых знаков

Создан 10 авг.

who885who885

3311 серебряный знак66 бронзовых знаков

1

Ваш заказ на связывание и тегирование файлов должен быть

.
  
   <ссылка href = "css / bootstrap.css "rel =" таблица стилей "/>
   

   
   
   
   


  

Вы пропустили .js текст в bootstrap.min.js

С учетом структуры папок , как показано ниже

  • index.html
  • css папка

    • bootstrap.css
    • bootstrap-theme.css
  • js папка

    • jquery-3.2.1.min.js
    • bootstrap.min.js
    • script.js

Обновление ответа как обновляемый вопрос

Bootstrap v3

Вот решение https: // jsfiddle.net / 9zgddjjf /

  


  

Загрузочный файл версии 4

Вот и решение https: // jsfiddle.net / 9zgddjjf / 2/