Начало работы с 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>
Это простой шаблон на бутстрапе. Вы можете его использовать в своих целях , для дальнейшего усовершенствования.
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
Bootstrap bootstrap CSS CSS3 dle DLE fruit farm html html шаблон HTML5 html5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Как задать ширину 100 пикселей в CSS