ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
Уроки по Bootstrap для начинающих. W3Schools на русском

Bootstrap 4 СТАРТ

❮ Prev Next ❯

Что такое Bootstrap?

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

Что такое адаптивный веб-дизайн?

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

Bootstrap 4 Пример

<div class="jumbotron text-center">
  <h1>Моя первая Bootstrap страница</h1>
  <p>Измените размер этой адаптивной страницы, чтобы увидеть эффект!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Столбец 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Столбец 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Столбец 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>
Попробуйте сами »

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 - новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью (адаптивностью).

Bootstrap 4 поддерживает последние стабильные выпуски всех основных браузеров и платформ. Тем не менее, Internet Explorer 9 и ниже не поддерживается.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самая стабильная версия Bootstrap, и она все еще поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

Поддержка удаленных иконок: Bootstrap 4 не поддерживает BS3 Glyphicons. Используйте Font-Awesome или другие библиотеки иконок вместо этого.

Зачем использовать Bootstrap?

Преимущества Bootstrap:

  • Простота в использовании: любой, кто имеет базовые знания HTML и CSS, может начать использовать Bootstrap.
  • Адаптивные функции: адаптивный CSS Bootstrap подстраивается под телефоны, планшеты и настольные компьютеры
  • Mobile-first подход (первые - мобильные устройства): В Bootstrap стили для мобильных устройств являются частью базовой структуры
  • Браузерная совместимость: Bootstrap 4 совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer 10+, Edge, Safari и Opera).

Где взять Bootstrap 4?

Есть два способа начать использовать Bootstrap 4 на вашем собственном веб-сайте.

Вы можете:

  • Включить Bootstrap 4 из CDN
  • Загрузить Bootstrap 4 из сайта getbootstrap.com

Bootstrap 4 CDN

Если вы не хотите загружать и размещать Bootstrap 4 самостоятельно, вы можете включить его из CDN (Content Delivery Network).

MaxCDN обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить JQuery:

MaxCDN:

<!-- Последние скомпилированные и минимизированные CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery библиотека -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.2/umd/popper.min.js"></script>

<!-- Последний скомпилированный JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

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

Одно из преимуществ использования Bootstrap 4 CDN:
Многие пользователи уже загрузили Bootstrap 4 с MaxCDN при посещении другого сайта. В результате он будет загружен из кэша при посещении вашего сайта, что приводит к ускорению загрузки. Кроме того, большинство CDN гарантируют, что, как только пользователь запросит у него файл, он будет обслуживаться с ближайшего к ним сервера, что также приводит к ускорению загрузки.

jQuery and Popper?
Bootstrap 4 использует jQuery и Popper.js для компонентов JavaScript (таких как модалы, всплывающие подсказки, всплывающие окна и т.д.). Однако, если вы просто используете CSS-часть Bootstrap, они вам не нужны.

  • Закрываемые оповещения
  • Кнопки и флажки/переключатели для переключения состояний
  • Карусель для слайдов, элементов управления и индикаторов
  • Сворочивание для переключения контента
  • Dropdowns (также требуется Popper.js для идеального позиционирования)
  • Модалы (открывать и закрывать)
  • Navbar (для сворачивающихся меню)
  • Всплывающие подсказки и всплывающие окна (также требуется Popper.js для идеального позиционирования)
  • Scrollspy для поведения прокрутки и обновлений навигации

Скачать Bootstrap 4

Если вы хотите скачать и разместить Bootstrap 4 самостоятельно, перейдите на официальный сайт Bootstrap https://getbootstrap.com/, и следуйте указанным там инструкциям.

Создать первую веб-страницу с Bootstrap 4

1. Добавьте тип документа HTML5

Bootstrap 4 использует элементы HTML и свойства CSS, для которых требуется тип документа HTML5.

Всегда включайте тип документа HTML5 в начале страницы вместе с атрибутом lang и правильным набором символов (стандартно - utf-8):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 4 является mobile-first

Bootstrap 4 разработан, чтобы реагировать на мобильные устройства. Mobile-first стили являются частью основной структуры.

Чтобы обеспечить правильный рендеринг и масштабирование касанием, добавьте следующий тег <meta> внутри элемента <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).

Часть initial-scale=1 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

3. Контейнеры

Bootstrap 4 также требует содержащего элемента для переноса содержимого сайта.

Есть два контейнерных класса на выбор:

  1. Класс .container обеспечивает адаптивный контейнер фиксированной ширины
  2. Класс .container-fluid обеспечивает контейнер на всю ширину, охватывающий всю ширину области просмотра
.container
.container-fluid

Две основных страницы Bootstrap 4

В следующем примере показан код для базовой страницы Bootstrap 4 (с адаптивным контейнером фиксированной ширины):

Пример контейнера

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Пример</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.2/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Моя первая Bootstrap страница</h1>
  <p>Здесь какой-то текст.</p>
</div>

</body>
</html>
Попробуйте сами »

В следующем примере показан код для базовой страницы Bootstrap 4 (с контейнером полной ширины):

Пример жидкого контейнера

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Пример</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.2/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Моя первая Bootstrap страница</h1>
  <p>Здесь какой-то текст.</p>
</div>

</body>
</html>
Попробуйте сами »

Примечание. Также вы можете скачать с официального сайта более новую версию Bootstrap 5.

❮ Prev Next ❯