Начало работы с Bootstrap 4

Bootstrap использует свои собственные CSS и jаvascript файлы, на которые нужно ссылаться. Вы также должны убедиться, что ваша html страница содержит несколько стандартных элементов, необходимы для работы бутстрап.

Файлы CSS и jаvascript

Вы можете напрямую ссылаться на файлы через Bootstrap CDN (Content Delivery Network, Сеть доставки контента). Все плагины Bootstrap используют jQuery, поэтому нужно убедиться, что он тоже включён в Ваш шаблон.

Вставьте следующий код внутрь <head> документа.

<!-- Последний скомпилированный и минимизированный Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"   crossorigin="anonymous">

Вставьте следующие jаvascript-файлы вниз документа (перед закрывающим тегом <body>).
Для ускорения загрузки HTML.

<!-- Библиотека jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  
<!-- Popper.js для всплывающих подсказок -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<!-- Последний скомпилированный и минимизированный Bootstrap jаvascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"   crossorigin="anonymous"></script>

{banner_google}

Стандарты дизайна и разработки

Чтобы получить максимальную отдачу от Bootstrap 4, убедитесь, что ваши HTML-документы начинаются с объявления
<!DOCTYPE> HTML5.

<!DOCTYPE html>
<html lang="ru">
...
</html>

Метатег viewport

Чтобы обеспечить правильное отображение и масштабирование на мобильных устройствах, добавьте метатег viewport.

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

Вы можете (не обязательно) отключить возможность масштабирования на мобильных устройствах, добавив user-scalable=no в список значений content. Однако это не рекомендуется делать.

Быстрый старт: шаблон Bootstrap 4

Вы можете использовать следующий шаблон в качестве основы для своих веб-страниц Bootstrap 4. Этот шаблон содержит необходимый <!DOCTYPE>, ссылки на файлы CSS и JS, а также метатег viewport.

<!-- Доктайп -->
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Пример шаблона Bootstrap</title>
    <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>

  <!-- Ваше содержимое начинается здесь -->

  <!-- Ваше содержимое заканчивается здесь -->

  <!-- jаvascript: размещается в конце документа, чтобы страницы загружались быстрее -->
    <!-- Библиотека jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <!-- Popper.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <!-- Последний скомпилированный и минимизированный Bootstrap jаvascript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

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

Информация

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

Пожалуйста зарегистрируйтесь или авторизируйтесь для доступа к файлу.

У данной публикации нет комментариев.

Ublogi

Автор

1-09-2020, 23:26

Дата пуликации

Пособие Bootstrap

Категория

Комментариев: 0
Просмотров: 386

DLE-Модули

Owl Carousel Адаптивная карусель для сайта DLE

Пособие Bootstrap

Руководство Bootstrap ProgressBar

DLE-Модули

Модуль статистики для DLE LightStat v3.0

HTML

Таблица HTML элементов

HTML

Расшифровка html тегов

Статистика

1 посетитель на сайте. Из них:

Гости1

Комментарии

Ссылка ведет на реферальную ссылку. Мне бы достать ориг этого скрипта т.к у меня есть копия, но надо откатить некоторые правки... да в 2k25 я использую подобные скрипты значит в этом есть смысл другое вам знать не нужно..

24 августа 2025 20:35

kouttepe

Ссылка на скачку не работает

22 июля 2025 21:37

Ilya5412

Ссылка на скачивание не рабочая

31 августа 2023 18:55

smoky

Ссылка нерабочая

28 августа 2023 16:17

Mandarin4ik2007

Ublogi,
дайте ссылку на скачивание

7 августа 2023 11:24

mandarin4ik

Бесплатный хостинг с поддержкой PHP, MySQL, Python. Это отличная возможность проверить работу своего сайта на настоящем хостинге без рекламы. Заказать хостинг

Файлы CSS и jаvascript

Стандарты дизайна и разработки

Метатег viewport

Быстрый старт: шаблон Bootstrap 4

Скачать файл бесплатно

Ublogi

1-09-2020, 23:26

Пособие Bootstrap

Авторизация