Начало работы с 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
Просмотров: 331

DLE-Модули

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

Пособие Bootstrap

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

DLE-Модули

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

HTML

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

HTML

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

Статистика

3 посетителя на сайте. Из них:

Гости3

Список пользователей

Vitalash Был(a) в сети 10 часов назад

Комментарии

Где кодировку поменять?

26 апреля 2023 11:24

Bipolyarich

Перезалейте файл.

12 апреля 2023 10:23

jerema

гавно ваш сайт. ничерта не работает. все ссылки битые.

25 февраля 2023 00:21

Raza121

Ublogi, ссылка не активна, и еще вопрос инструкция по установке есть?

20 февраля 2023 19:59

tema2021astra

не работает ссылка на скачивание перезалейте

19 февраля 2023 07:38

aladin

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

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

Файлы CSS и jаvascript

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

Метатег viewport

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

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

Ublogi

1-09-2020, 23:26

Пособие Bootstrap

Авторизация