| <!DOCTYPE html> | |
| <!—Для корректного отражения в последних версиях браузера InternetExplorer—> | |
| <!—[if lt IE 7]><html lang=»ru»><![endif]—> | |
| <!—[if IE 7]><html lang=»ru»><![endif]—> | |
| <!—[if IE 8]><html lang=»ru»><![endif]—> | |
| <!—[if gt IE 8]><!—><!—<![endif]—> | |
| <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 —> | |
| <meta name=»description» content=» «/> <!—краткое описание сайта—> | |
| <meta name=»keywords» content=» «/> <!—ввести ключевые слова—> | |
<!—для отображ иконки во вкладке браузера в папку img положить файл favicon. ico—> | |
| <link rel=»shortcut icon» type=»image/x-icon» href=»img/favicon.ico» /> | |
| <title>Bootstrap 101 Template</title> | |
| <!—!!!Порядок подключения обязательно соблюдать—> | |
| <!— Bootstrap v3.3.7 —> | |
| <!—!!! в этом шаблоне и струтуре папок и файлоq нельзя использовать Bootstrap v4. Он к тому же не на всех устройствач будет нормально работать. Читай документацию на их сайет оп v4—> | |
| <link rel=»stylesheet» href=»css/bootstrap-3.3.7.min.css»> | |
<!—Наши файлы. —> | |
| <link rel=»stylesheet» type=»text/css» href=»css/fonts.css» /> | |
| <link rel=»stylesheet» type=»text/css» href=»css/main.css»> | |
| <link rel=»stylesheet» type=»text/css» href=»css/media.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> | |
| <!—Шпаргалка | |
| xs (0-480px) sm (640px-767px) md (768px-1199px) lg (1200px-1980px) | |
| <div> content </div> всегда будет делить ширину экрана | |
| на 2 равные половинки на всех разрешениях даже если sm, md, lg не указывать —> | |
| <h2>Hello, world!</h2> | |
| <!—Всегда скрипты подключаем внизу кода перед закрывающимся body чтобы страницы быстрее грузилась—> | |
| <!—Всегда jquery подключай 1-ой перед остальными js скриптами—> | |
| <!—Для js сриптов всегда подключение новую jquery (смотри обновления на их сайте)—> | |
| <!— Also jQuery (necessary for Bootstrap’s JavaScript plugins) —> | |
<script type=»text/javascript» src=’libs/jquery-3. 2.1.min.js’></script> | |
| <!—Сразу после jquery нужно подключить bootstrap.min.js—> | |
| <!— Include all compiled plugins (below), or include individual files as needed —> | |
| <script src=»libs/bootstrap.min.js»></script> | |
| <!—Далее могут быть подключены стороние плагины js и в конце свой common.js—> | |
| <!—здесь стороние плагины—> | |
| <script type=»text/javascript» src=’js/common.js’></script> | |
<!— Yandex. Metrika counter —><!— /Yandex.Metrika counter —> | |
| <!— Google Analytics counter —><!— /Google Analytics counter —> | |
| </body> | |
| </html> |
Начало работы с Bootstrap 4
Bootstrap использует свои собственные файлы CSS и JavaScript, на которые нужно ссылаться. Вы также должны убедиться, что ваша страница содержит несколько стандартных элементов, как описано ниже.
Файлы CSS и JavaScript
Вы можете напрямую ссылаться на файлы через 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">
bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">Вставьте следующие JavaScript-файлы вниз документа (перед закрывающим тегом <body>).
<!-- Библиотека 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 JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Стандарты дизайна и разработки
Чтобы получить максимальную отдачу от Bootstrap 4, убедитесь, что ваши страницы включают в себя следующее.
<!DOCTYPE> HTML5
Ваши 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>
<!-- Ваше содержимое начинается здесь -->
<!-- Ваше содержимое заканчивается здесь -->
<!-- JavaScript: размещается в конце документа, чтобы страницы загружались быстрее -->
<!-- Библиотека 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 JavaScript -->
<script src="https://maxcdn. bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<!-- Ваше содержимое начинается здесь -->
<!-- Ваше содержимое заканчивается здесь -->
<!-- JavaScript: размещается в конце документа, чтобы страницы загружались быстрее -->
<!-- Библиотека 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 JavaScript -->
<script src="https://maxcdn.
Автор: Йен Диксон
Последнее изменение: 06.11.2019
Содержание · Bootstrap v5.0
Предварительно скомпилированный Bootstrap
После загрузки разархивируйте сжатую папку, и вы увидите что-то вроде этого:
bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.
rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.esm.js
├── bootstrap.esm.js.map
├── bootstrap.esm.min.js
├── bootstrap.esm.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
Это самая основная форма Bootstrap: предварительно скомпилированные файлы для быстрого использования практически в любом веб-проекте.
Мы предоставляем скомпилированные CSS и JS ( bootstrap.* ), а также скомпилированные и минифицированные CSS и JS ( bootstrap.min.* ). исходные карты ( bootstrap.*.map ) доступны для использования с инструментами разработчика определенных браузеров. Связанные JS-файлы ( bootstrap.bundle.js и уменьшенный bootstrap.bundle.min.js ) включают Popper.
CSS-файлы
Bootstrap включает в себя несколько опций для включения некоторых или всех наших скомпилированных CSS.
| Файлы CSS | Макет | Содержание | Компоненты | Коммунальные услуги |
|---|---|---|---|---|
| В комплекте | В комплекте | В комплекте | В комплекте |
| Только система сетки | — | — | Только гибкие утилиты |
| — | — | — | В комплекте |
| — | Только перезагрузка | — | — |
min.css 
min.css Файлы JS
Точно так же у нас есть варианты включения части или всего нашего скомпилированного JavaScript.
| JS-файлы | Поппер |
|---|---|
| В комплекте |
| — |
bundle.js Исходный код Bootstrap
Загрузка исходного кода Bootstrap включает предварительно скомпилированные ресурсы CSS и JavaScript, а также исходный код Sass, JavaScript и документацию. В частности, он включает в себя следующее и многое другое:
начальная загрузка/ ├── расст/ │ ├── css/ │ └── js/ ├── сайт/ │ └──содержание/ │ └── документы/ │ └── 5,0/ │ └── примеры/ ├── js/ └── сксс/
scss/ и js/ — это исходный код для нашего CSS и JavaScript. Папка dist/ включает в себя все, что указано в предварительно скомпилированном разделе загрузки выше.
Папка site/docs/ содержит исходный код нашей документации и примеров/ использования Bootstrap. Помимо этого, любой другой включенный файл обеспечивает поддержку пакетов, информацию о лицензии и разработку.
Перезагрузка · Начальная загрузка
Reboot, набор изменений CSS для конкретных элементов в одном файле, запускает Bootstrap, чтобы обеспечить элегантную, последовательную и простую основу для дальнейшего развития.
Подход
Reboot основывается на Normalize, предоставляя многим элементам HTML несколько самоуверенные стили, используя только селекторы элементов. Дополнительные стили делаются только с классами. Например, мы перезагружаем некоторые Вот наши рекомендации и причины выбора того, что следует переопределить при перезагрузке: Элементы Веб-шрифты по умолчанию (Helvetica Neue, Helvetica и Arial) удалены в Bootstrap 4 и заменены «нативным стеком шрифтов» для оптимального отображения текста на всех устройствах и ОС. Это семейство шрифтов Все элементы заголовка — например, Все списки — Для более простого стиля, четкой иерархии и лучшего интервала в списках описаний обновлено поле Элемент Таблицы немного подкорректированы под стиль Различные элементы формы были перезагружены для более простых базовых стилей. Вот некоторые из наиболее заметных изменений: стилей для упрощения базовой линии, а позже предоставляем 9 стилей.0009 .table ,
.table-bordered и другие. rem с вместо em с для масштабируемого расстояния между компонентами.
margin-top . Вертикальные поля могут свернуть, что приведет к неожиданным результатам. Что еще более важно, единственное направление поля является более простой ментальной моделью. rem s для margin s. и шрифтом , по возможности используя , наследующий . Страница по умолчанию
и обновлены, чтобы обеспечить лучшие значения по умолчанию для всей страницы. Более конкретно: устанавливается глобально для каждого элемента, включая *::до и *::после , до пограничного блока . Это гарантирует, что объявленная ширина элемента никогда не будет превышена из-за заполнения или границы.
размер шрифта не объявлен для , но предполагается 16px (браузер по умолчанию). Размер шрифта : 1rem применяется к для легкого адаптивного масштабирования типов с помощью медиа-запросов при соблюдении предпочтений пользователя и обеспечении более доступного подхода. также устанавливает глобальное семейство шрифтов , line-height и text-align . Позже это наследуется некоторыми элементами формы для предотвращения несоответствия шрифтов. имеет объявленный background-color , по умолчанию #fff . Стек собственных шрифтов
Узнайте больше о нативных стеках шрифтов в этом Smashing Magazine статья. $font-family-sans-serif:
// Safari для OS X и iOS (Сан-Франциско)
-яблочная система,
// Chrome < 56 для OS X (Сан-Франциско)
BlinkMacSystemFont,
// Окна
"Сего УИ",
// Андроид
"Робот",
// Базовый резервный веб-сайт
"Helvetica Neue", Arial, без засечек,
// Шрифты эмодзи
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
применяется к и автоматически глобально наследуется в Bootstrap. Чтобы переключить глобальный font-family , обновить $font-family-base и перекомпилировать Bootstrap. Заголовки и параграфы
— и margin-top . Заголовки имеют полей внизу: .5rem добавлено, а абзацы полей внизу: 1rem для удобства размещения.
Рубрика Пример х2. Заголовок начальной загрузки х3. Заголовок начальной загрузки х4. Заголовок начальной загрузки h5. Заголовок начальной загрузки h5. Заголовок начальной загрузки h6. Заголовок начальной загрузки Списки
margin-top удалено, а margin-bottom: 1rem .
Вложенные списки не имеют margin-bottom . s.
margin-left на 0 и добавить margin-bottom: .5rem . Предварительно отформатированный текст
margin-top и использовать rem единиц для его margin-bottom .
.example-элемент {
нижняя граница: 1re;
}
Таблицы
выравнивание текста по по всему тексту.
Дополнительные изменения для границ, отступов и т. д. относятся к классу .table . Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Формы
s не имеют границ, отступов или полей, поэтому их можно легко использовать в качестве оболочек для отдельных входных данных или групп входных данных.
<легенда> s, как и наборы полей, также были изменены, чтобы отображаться как своего рода заголовки. s установлены на display: inline-block , чтобы разрешить применение поля . <ввод> с, <выбор> s,