Бутстрап что это такое: Что такое Bootstrap и зачем он нужен?

C чего начать · Bootstrap на русском

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

Bootstrap

Компилированый и минимизированный CSS, JavaScript, и шрифты. Нет документов или оригинальные исходные файлы не включены.

Скачать Bootstrap

Bootstrap CDN

Сотрудники MaxCDN любезно предоставили поддержку CDN для Bootstrap CSS и JavaScript. Просто используйте эти ссылки Bootstrap CDN.

<!-- Последняя компиляция и сжатый CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">

<!-- Дополнение к теме -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Последняя компиляция и сжатый JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

Установка с помощью Bower

Вы также можете установить и управлять Bootstrap’ы Less, CSS, JavaScript, и шрифты, используя Bower:

$ bower install bootstrap

Установить с помощью npm

Вы также можете установить Bootstrap используя npm:

$ npm install bootstrap@3

require('bootstrap') загрузит все Bootstrap’ы jQuery плагины на объект jQuery. На bootstrap сам модуль ничего не экспортирует. Вы можете вручную загрузить Bootstrap’ы jQuery плагины индивидуально загрузки /js/*.js файлы верхнего уровня пакета каталог.

Bootstrap’ы package.json содержит некоторые дополнительные метаданные в следующих разделах:

• less — путь к Bootstrap’ы основным источником Less файл
• style
  — путь к Bootstrap’ы не сжатый CSS, который был предварительно скомпилированные с использованием стандартных настроек (нет настройки)

Установить с помощью Composer

Вы также можете установить и управлять Bootstrap Less, CSS, JavaScript, и шрифты, используя Composer:

$ composer require twbs/bootstrap

Autoprefixer необходимых для Less/Sass

Bootstrap использует Autoprefixer заниматься CSS вендорных префиксов. Если вы компилируете Bootstrap от Less/Sass источник а не через наш Gruntfile, Вам необходимо интегрировать Autoprefixer в процессе построения себя. Если вы используете предварительно скомпилированные Bootstrap или через наш Gruntfile, вам не нужно беспокоиться об этом, потому что Autoprefixer уже интегрированы в Gruntfile.

Bootstrap доступен в двух формах, в которых вы найдете логично сгруппированные каталоги и файлы, представленные в собранном и минимизированном варианте.

Сборник кода Bootstrap 3

После загрузки, разархивируйте сжатые каталоги. Вы должны увидеть нечто похожее на это:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Это является наиболее базовая форма Bootstrap: собранные файлы, для их быстрой вставки в любой веб-проект. Мы предоставляем сборник CSS и JS (bootstrap.*), а также ее минимизированный вариант (bootstrap.min.*). CSS карты источника (bootstrap.*.map) are available for use with certain browsers’ developer tools. Как дополнительные опции тем Bootstrap — также предоставляются шрифты с Glyphicons.

Исходный код Bootstrap

Исходный код Bootstrap включает прекомпелированный CSS, JavaScript, и средства шрифтов, вместе с исходным Less, JavaScript, и документацией. Более конкретно, оно включает в себя следующее и более:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/, js/, и fonts/ вашего исходного CSS, JS, и иконки (соответственно). Папкаdist/ включает в себя все перечисленные предкомпилированные загрузки, что в разделе выше. Папка docs/ включает в себя исходный код для нашей документации, и examples/ использования Bootstrap. Кроме того, любой другой включенный файл обеспечивает поддержку для пакетов, информацию о лицензиях и развитии.

Bootstrap использует Grunt для сборки его системы, с удобными методами работы в рамках. Так мы собираем наш код, запускаем тесты, и многое другое.

Установка Grunt

Чтобы установить Grunt, необходимо сначала загрузить и установить node.js (которая включает в себя npm). npm расшифровывается для узлов упакованных модулей и это способ управления зависимостями развития посредством node.js.

1. Установите grunt-cli в глобальном масштабе npm install -g grunt-cli.
2. Передите в главный /bootstrap/ каталог, а затем запустите npm install. npm посмотрите на package.json файл и автоматически установите необходимые местные зависимости, перечисленные в нем.

После завершения, у вас будет возможность запускать различные Grunt команды, предлагаемые из командной строки.

Доступные команды Grunt

grunt dist (Просто собрать CSS и JavaScript)

Регенерирует каталог /dist/ с скомпилированными и уменьшенными CSS и файлами JavaScript. Обычно для пользователя Bootstrap , это команда необходима.

grunt watch (Счетчик)

Часы уменьшают исходные файлы и автоматически перекомпилирует их в CSS при каждом сохранении изменений.

grunt test (Выполнить тесты)

Запуск У jshint и the Помощью qunit тестов (автоматически) в Помощи phantomjs.

grunt docs (сборка и проверка документов активов)

Сборка и тестирование CSS, JavaScript, и прочих активов, которые используются при локальном использовании документации через bundle exec jekyll serve.

grunt (Построить абсолютно все и запустить тесты)

Компиляции and минифайлы CSS and JavaScript, строит сайт документаций, запускает HTML5 валидатор против документов, восстанавливает активы настройщика, и многое другое. Требует Jekyll. Обычно это необходимо, только если вы взломали сам загрузчик Bootstrap.

Поиск и устранение неисправностей

Если у вас возникли проблемы с установкой зависимостей или запуска команд Grunt, сначала удалить /node_modules/ каталог сгенерированный npm. Затем, повторите npm install.

Начните с базовым HTML шаблоном, или измените эти примеры. Мы надеемся, что вы настроите наши шаблоны и примеры, адаптируя их для своих нужд.

Ниже приведен HTML-код, который использует минимизированную версию Bootstrap-документа.

<!DOCTYPE html>
<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">
    <!-- Верхние 3 мета-тега *должны* быть указаны в первую очередь в head; любой другой контент в head должен быть указан *после* этих тегов -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- Предупреждение: Respond.js не работает при просмотре страницы через файл:// -->
    <!--[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>
    <h2>Hello, world!</h2>

    <!-- на jQuery (необходим для Bootstrap - х JavaScript плагины) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Включают все скомпилированные плагины (ниже), или включать отдельные файлы по мере необходимости -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

На шаблоне, что представлен выше, Bootstrap создает множество компонентов. Мы рекомендуем Вам настроить и адаптировать Bootstrap в соответствии с потребностями Вашего индивидуального проекта.

Получить исходный код для каждого примера ниже загрузив Bootstrap хранилище. Примеры можно найти в docs/examples/ каталога.

Использование фреймворка

Стартовый шаблон

Ничего кроме базового: сборник CSS, JavaScript, и использован контейнер.

Темы Bootstrap

Настройте темы Bootstrap чтобы разнообразить вид страниц.

Разметки

Несколько примеров макетов разметки со всеми четырьмя уровнями вложенности и прочее.

Jumbotron

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

Узкий Jumbotron

Создание более персонализированных страниц через сужение контейнера по умолчанию и большого экрана.

Navbars в действии

Навигационное меню

Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.

Статическое навигационное меню

Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.

Фиксированное навигационное меню

Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.

Пользовательские компоненты

Крышка

Одностраничный шаблон для построения простых и красивых домашних страниц.

Карусель

Сочетание в шаблоне нав. меню и карусели, с добавлением некоторых новых компонентов.

Блог

Простой блог в две колонки с пользовательской навигацией, заголовком, и видом.

Панель приборов

Базовая структура для администратора приборная панель с фиксированным боковым меню и панели навигации.

Страница входа

Шаблон пользовательской формы настроен для простого входа на сайт.

Выровненное нав. меню

Создание компонованого нав. меню с выровненными ссылками. Внимание! Не очень дружит с Safari.

Фиксированный Нижний колонтитул

Закрепление колонтитула в нижней части браузера для случая, когда высота контента сама собой не делает этого.

Липкий Нижний колонтитул навигации

Прикреплено колонтитул в нижнюю часть браузера, с нав. меню в верхней части.

Эксперименты

Off-холст

Создание навигационного off-canvas меню с возможностью переключения для Bootstrap.

Bootlint — это официальный Bootstrap на 1 инструмент. Он автоматически проверяет для нескольких распространенных ошибок HTML на веб-страницах, использующих Bootstrap в достаточно «ванильным» образом. Ванильный Bootstrap — х компонентов/виджетов требуют от своих частей DOM соответствуют определенные структуры. Bootlint проверяет экземпляры Bootstrap компоненты правильно структурированный HTML. Попробуйте добавить Bootlint на Bootstrap веб-разработки компиляторов, так что ни одна из распространенных ошибок, замедлить развитие проекта.

Оставайтесь в курсе развития Bootstrap и обратитесь к сообществу за полезными ресурсами.

• Прочитайте и подпишитесь на Официальный Bootstrap Блог.
• Общайтесь с другими Bootstrapperами с помощью IRC в irc.freenode.net сервер, на ##bootstrap канала.
• Для получения справки по использованию Bootstrap, спросите на Сайте stackoverflow, используя тег twitter-bootstrap-3.
• Разработчики должны использовать ключевое слово bootstrap на пакеты, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичных механизмов доставки для максимального обнаружения.
• Найти вдохновляющие примеры людей, строящих с Bootstrap на Bootstrap Экспо.

Вы также можете перейти на @getbootstrap на Twitter к последним сплетням и удивительным музыкальным клипам.

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

Шаги для блокировки адаптивного просмотра

1. Опустите просмотр <meta> как об этом сказано в документах CSS
2. Переопределить width на .container Для каждого грид уровня, с одной ширины, например width: 970px !important; быть уверены, что это происходит после умолчанию Bootstrap CSS. Можно избежать !important с медиа запросы или какой-селектор-фу.
3. Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.
4. Для макета разметки используйте классы .col-xs-* как дополнение или вместо классов medium/large. Не волнуйтесь, для extra-small устройств разметка масштабируется для всех размеров экранов.

Вам еще нужно Respond.js для IE8 (так как наш медиа запросы еще есть и должны быть обработаны). Это отключает «мобильный сайт» аспекта Bootstrap.

Шаблон Bootstrap с заблокированной адаптивностью

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

Просмотреть пример неадаптивного шаблона

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

Поддержка браузерами

В частности, мы поддерживаем последние версии из следующих браузеров и платформ.

Альтернативные браузеры, которые используют последнюю версию WebKit, blink, или Гекко, будь то напрямую или через веб-платформы просмотреть API, явно не поддерживается. Однако, Bootstrap должна (в большинстве случаев) дисплей и работает в этих браузерах, а также. Более конкретные сведения приводятся ниже.

Мобильных устройств

Вообще говоря, Bootstrap поддерживает последние версии браузеров каждой крупной платформы по умолчанию. Обратите внимание, что прокси-браузеры (такие как Опера Мини, Турбо-режим в Opera мобильный, браузер, Амазонки шелк) не поддерживаются.

Браузеры для ПК

Аналогично, последние версии самых десктопные браузеры поддерживаются.

В Windows мы поддерживаем Internet Explorer 8-11.

Для Firefox, в дополнение к последней нормальной стабильной версии, мы также поддерживаем последний Выпуск с расширенной поддержкой (СОЭ) версия браузера Firefox.

Неофициально, Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux, а также интернет Эксплорер 7, а также Microsoft края, хотя они официально не поддерживаются.

Список некоторых ошибок в брузере, с чем Bootstrap может столкнуться, смотрите наш Баги в браузере.

Internet Explorer 8 и 9

Internet Explorer 8 и 9 также поддерживается, однако помните, что некоторые свойства CSS3 и элементы HTML5 не в полной мере поддерживаются данным браузерами. Кроме того, Интернет Эксплорер 8 требует использования Respond.js для включения медиа поддержки запросов.

Посетите Могу ли я использовать… для более детального ознакомления, какие свойства CSS3 и HTML5 поддерживаются различными браузерами.

Internet Explorer 8 и Respond.js

Примите во внимание следующие оговорки, при использовании Respond.js в вашей среде разработки, в рабочей среде Internet Explorer 8.

Respond.js и кросс-доменный CSS

Если вы храните Respond.js и CSS на разных (суб)доменах (например, на CDN) — это требует некоторых дополнительных установок. Ознакомьтесь с документацией Respond.js для уточнений.

Respond.js и file://

Через правила безопасности браузера, Respond.js не работает при просмотре через протокол file:// (например, когда вы открываете HTML файл локально). Чтобы протестировать настройки чувствительности в IE8, просматривайте ваши страницы через HTTP(S). Ознакомьтесь с документацией Respond.js для уточнений.

Respond.js и @import

Respond.js не работает с CSS, на которые ссылаются как @import. В частности, некоторые конфигурации Drupal, как известно, используют @import. Ознакомьтесь с документацией Respond.js для уточнений.

Internet Explorer 8 и box-sizing

IE8 не в полной мере поддерживает box-sizing: border-box; при комбинировании с min-width, max-width, min-height или max-height. По этой причине, начиная с v3.0.1, мы больше не поддерживаем max-width, .container.

Internet Explorer 8 и @font-face

IE8 имеет некоторые проблемы с @font-face в сочетании с :before. Bootstrap использует эту комбинацию с его символичной иконкой. Если страница кэшируется, и загружается без мыши по окну (т.е. нажать кнопку обновления или загрузки в встроенном кадре), то страница вынесена до загрузки шрифтов. При наведении курсора на страницу (тело) покажет некоторые значки и зависший над остальными иконами покажет также. Смотреть выпуск #13863 для деталей.

Режим совместимости с IE

Bootstrap не поддерживает режим совместимости в старых версиях Internet Explorer. Чтобы быть уверенным, что вы используете последнюю версию такого режима для IE, просмотрите включен соответствующий тег <meta> на вашей странице:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Подтвердите режим документа, открыв средства отладки: нажмите F12 и проверьте «Document Mode».

Этот тег входит в состав всех Bootstrap документациий и примеров для обеспечения лучшей визуализации возможных в каждой поддерживаемой версии Internet Explorer.

Просмотрите эти вопросы на StackOverflow для уточнений.

Internet Explorer 10 на Windows 8 и Windows Phone 8

Интернет Эксплорер 10 не отличает ширину устройства с шириной окна просмотра, и, следовательно, неправильно применяет медиа запросы в CSS Bootstrap. Как правило, вы могли бы просто добавить быстрый фрагмент CSS чтобы исправить это:

@-ms-viewport       { width: device-width; }

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Обновления 3 (а.к.а. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Авторских 2014-2015 Twitter, Вкл.
// Лицензированных в соответствии с MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

Один за одним, мы включаем это в документацию и примеры Bootstrap в качестве демонстрации.

Процентное округления в Safari

Движок для отображения версий Safari до версии v7.1 для OS X и Safari для iOS В8.0 были некоторые проблемы с количеством десятичных знаков, используемых в нашем .col-*-1 грид классов. Так что если у вас 12 индивидуальный грид столбцы, Вы заметите, что они придумали короткие по сравнению с другими рядами колонн. Помимо обновления сафари на iOS, у вас есть несколько вариантов решений:

• Добавить .pull-right в вашей последней колонки в разметке, чтобы получить жесткое выравнивание по правому краю.
• Изменить проценты вручную, чтобы получить идеальное округления для Safari (более сложно, чем в первом варианте)

Модули, navbars, и виртуальные клавиатуры

Переполнение и прокрутка

Поддержка overflow: hidden на <body> элемент весьма ограничен в iOS и Android. С этой целью, когда вы прокрутите мимо верхней или нижней части модального в любом из браузеров этих устройств, в <body> контент начнет прокручиваться. Смотрите Хром ошибка № 175502 (исправлено в Chrome и V40) и В WebKit ошибка #153852.

текстовых полей iOS и прокрутки

Начиная с iOS 9.3, в то время как модальные открыт, если начальное касание прокрутки жест в пределах границы текста <input> или <textarea> В <body> содержание под модальным будет прокручиваться вместо модальных себя. Смотрите В WebKit ошибка № 153856.

Виртуальная клавиатура

Обратите внимание — если вы используете форму ввода в модальном окне или навигации, iOS имеет ошибку отображения, через которую не обновляется позиция фиксированных элементов при вызова виртуальной клавиатуры. Существуют некоторые обходные пути для этого, в том числе — трансформирующие элементы position: absolute, или при выявлении фокуса на элементе вызывают таймер и пробуют исправить это вручную. Bootstrap не обрабатывает такие ошибки, так что вам нужно самим это решить.

Меню Навигации

Элемент .dropdown-backdrop не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или любой другой элемент, который будет генерировать событие нажатия в iOS).

Браузерное масштабирование

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

Липкий :hover/:focus на мобильном

Хотя реальное зависание не возможно на большинстве сенсорных экранов, мобильные браузеры эмулируют поддержку зависания и делают :hover «Липким». Другими словами, :hover стили начинают применяться после нажатия элемента и прекращают применение только после того, как пользователь нажимает какие-либо другие элементы. Поэтому :hover из Bootstrap’а может привести к нежелательному «залипанию» на таких браузерах. Некоторые мобильные браузеры также делают :focus липкий. Пока что нет простого решения таких вопросов, помимо полного удаления таких стилей.

Печать

Даже в некоторых современных браузерах, для обеспечения печати приходится изловчиться.

В частности, в Chrome версии 32 независимо от параметров отступов и размеров полей, Chrome при печати использует значительно более узкую область просмотра, чем физический размер бумаги при отображении медиа запросов. Это может привести к тому, при печати Bootstrap неожиданно активирует очень мелкую сетку. Смотри подробности в Ошибке #12078 и Ошибке Chrome #273306. Рекомендуемые обходные пути:

• Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
• Настройка значения @screen-* Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small.
• Добавить Пользовательское медиа запросы изменение грид Размер точки останова для печати медиа только.

Также, как Сафари и v8.0, фиксированной ширины .container может вызвать Сафари использовать необычайно маленький размер шрифта при печати. См. #14868 и В WebKit ошибка #138192 Для более подробной информации. Одним из возможных обойти это, добавив следующие CSS:

@media print {
  .container {
    width: auto;
  }
}

Заводские Android браузеры

Из коробки, Android 4.1 (и даже некоторые новые версии) ставят приложение Браузера в качестве веб-браузера по умолчанию(в отличие от Chrome). К сожалению, стандартные браузеры имеют множество ошибок и несоответствий с CSS в целом.

Меню выбора

На <select> элементе, в Android браузере не будет отображаться элементы управления если есть border-radius и/или border. (Смотри этот вопросы на StackOverflow более детально.) Используйте фрагмент кода ниже, чтобы удалить этот CSS и сделать <select> элемент без стиля на Android браузере. Избегать недовольство юзера помогает использование браузеров: Chrome, Safari и Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Хотите увидеть пример? Проверьте это JS Bin demo.

Валидаторы

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

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

Наш HTML-документы также имеют некоторые тривиальным и несущественным HTML проверка предупреждения, в связи с наличие решения ошибок в Firefox.

Введение. Начало работы · Bootstrap. Версия v4.4

Начните работу с Bootstrap, самым популярным в мире фреймворком для создания быстродействующих мобильных сайтов с BootstrapCDN и шаблонами стартовой страницы.

Быстрый старт

Хотите использовать Бутстрап в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.

CSS

Скопируйте и вставьте часть кода <link> в свой <head> перед всеми другими таблицами стилей, чтобы загрузить наш CSS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

JS

Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода <script> в конце страниц, прямо перед закрывающим </body>. Сперва jQuery , потом Popper.js, потом наши.

Мы используем мини-сборку jQuery, но и полную можно использовать.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.

Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают в себя Popper, но не jQuery. Для получения дополнительной информации о том, что входит в Bootstrap, пожалуйста, смотрите наш раздел содержание.

• Уведомления отмены
• Кнопки изменения состояний и чекбоксов/»радио»
• Карусель для поведения «слайд», элементы контроля и индикаторы
• Коллапс для изменения видимости содержимого
• Выпадающие элементы для отображения и расположения (также требует Popper.js)
• Модальные окна для отображения, расположения и создания поведения прокрутки
• Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
• Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
• Отслеживание прокрутки и обновления навигации

Начальный шаблон страницы

Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

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

Важные глобальные атрибуты

Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.

HTML5 doctype

Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.

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

«Отзывчивый» мета-тэг

Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в <head>:

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

Вы можете посмотреть пример этого в действии на странице starter template.

Размер ширины и высоты элемента

Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box. Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.

В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:

.selector-for-some-widget {
  box-sizing: content-box;
}

С использованием фрагмента кода, приведенного выше, вложенные элементы – включая сгенерированный через :before и :after контент – будут все наследовать заданный box-sizing для класса .selector-for-some-widget.

Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.

«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.

Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:

• @getbootstrap on Twitter.
• The Official Bootstrap Blog.
• the official Slack room.
• Чат с камрадами по Bootstrap. Канал ##bootstrap на сервере irc.freenode.net.
• Помощь в реализации Bootstrap 4 на Stackoverflow bootstrap-4).
• При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово bootstrap в своих пакетах и библиотеках для максимальной видимости.

Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.

Делаем сами: адаптивный сайт

Вре­мя для ново­го про­ек­та! Сего­дня мы сде­ла­ем осно­ву для адап­тив­но­го сай­та. В резуль­та­те полу­чит­ся веб-страница с коти­ка­ми, а в сле­ду­ю­щий раз сде­ла­ем вашу адап­тив­ную лич­ную стра­ни­цу на HTML. Но пока — коти­ки. 

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

В нача­ле двух­ты­сяч­ных сай­ты были неадап­тив­ны­ми: они были свёр­ста­ны под боль­шие экра­ны, и если бы вы сей­час попро­бо­ва­ли их открыть на мобиль­ни­ке, вы бы уди­ви­лись, как там всё неудоб­но. Текст мел­кий, стро­ки широ­кие, в интер­фейс нуж­но «зумить­ся». Это не адап­тив­ность.

Вме­сте с появ­ле­ни­ем Айфо­нов появи­лась идея адап­ти­ро­вать сай­ты под узкие экра­ны мобиль­ни­ков. Текст дол­жен читать­ся, кар­тин­ки долж­ны поме­щать­ся, а что­бы поль­зо­вать­ся сай­том, не нуж­но нику­да зумить­ся.

Адап­тив­ность реа­ли­зу­ет­ся с помо­щью CSS: это набор команд, кото­рые гово­рят бра­у­зе­ру, как оформ­лять содер­жи­мое стра­ни­цы. В том чис­ле с помо­щью CSS мож­но опи­сать, как стра­ни­ца долж­на выгля­деть на раз­ных раз­ме­рах экра­на. 

Вы може­те вруч­ную про­пи­сать пра­ви­ла адап­тив­но­сти для сво­е­го сай­та. Поищи­те в Яндек­се css media-queries, там нет ниче­го слож­но­го, про­сто мутор­но: таких пра­вил нуж­ны десят­ки.

Дру­гой спо­соб — вос­поль­зо­вать­ся гото­вым набо­ром инстру­мен­тов для созда­ния адап­тив­ных сай­тов. Их мно­го раз­ных, но мы в этой ста­тье вос­поль­зу­ем­ся фрейм­вор­ком Bootstrap. О фрейм­вор­ках мы недав­но писа­ли: в нашем слу­чае это будет как бы фун­да­мент наше­го сай­та.

Цель это­го тек­ста — дать началь­ные зна­ния о том, как мож­но про­сто свер­стать любой адап­тив­ный сайт. Мы пони­ма­ем, что полу­чит­ся про­стой сайт, но все­му осталь­но­му мож­но научить­ся, если вы пони­ма­е­те осно­вы. Поз­же вы смо­же­те свер­стать более слож­ные сай­ты, если эти осно­вы вам понят­ны. 

Что такое Bootstrap

Бут­страп — это фрейм­ворк для созда­ния сай­тов. У него мно­го полез­ных воз­мож­но­стей: пока­зы­вать всплы­ва­ю­щие окна, выво­дить кноп­ки и ошиб­ки, рисо­вать выпа­да­ю­щие меню и мно­гое дру­гое. В обыч­ной жиз­ни на про­грам­ми­ро­ва­ние всей этой кра­со­ты мог­ли бы уйти часы, в Бут­стра­пе это уже реа­ли­зо­ва­но. 

Самое полез­ное для нас сей­час — адап­тив­ная мно­го­ко­ло­ноч­ная вёрст­ка Бут­стра­па. Что она нам даёт: 

• Мож­но кра­си­во свер­стать сайт, что­бы сле­ва было меню, по цен­тру основ­ная колон­ка, спра­ва ещё поле для рекла­мы. Или сде­лать сайт из трёх, четы­рёх, шести коло­нок — как Pinterest. 
• Мож­но научить колон­ки сай­та скры­вать­ся или менять раз­мер в зави­си­мо­сти от раз­ме­ра экра­на. Напри­мер, на боль­шом экране выво­дить боко­вые колон­ки, а на малень­ком — нет. 
• Мож­но не осо­бо думать о шриф­тах, раз­ме­рах и отсту­пах: даже стан­дарт­ная настрой­ка Бут­стра­па уже рабо­та­ет доволь­но непло­хо. 
• Не нуж­но думать, как всё это будет вести себя на мобиль­ных устрой­ствах, — всё адап­ти­ру­ет­ся само.

Как его подключить к сайту

Что­бы исполь­зо­вать Бут­страп на стра­ни­це, нуж­но напи­сать такую коман­ду, её реко­мен­ду­ет исполь­зо­вать офи­ци­аль­ный сайт движ­ка:

<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css» integrity=»sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T» crossorigin=»anonymous»>

Эта коман­да загру­жа­ет базо­вую вер­сию Бут­стра­па со внеш­не­го сер­ве­ра, где этот код офи­ци­аль­но хра­нит­ся. Мож­но, конеч­но, ска­чать соб­ствен­ную вер­сию Бут­стра­па и посе­лить на свой сайт, но поль­зо­вать­ся внеш­ним сай­том в нашем слу­чае удоб­нее. Коман­ду нуж­но вста­вить в раз­де­ле <head>, напри­мер, после мета-свойств. Общий код шаб­ло­на стра­ни­цы будет выгля­деть так:

    
language: HTML
      <!DOCTYPE html>
<html>
<!-- служебная часть -->
<head>
  <!-- заголовок страницы -->
  <title>Адаптивная вёрстка на Бутстрапе</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- загружаем Бутстрап -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style type="text/css">
  </style>
<!-- закрываем служебную часть страницы -->
</head>
<body>
  <!-- тут будет наша страница -->
</body>
<!-- конец всей страницы -->
</html>

  

Сетка и колонки

Бут­страп для себя делит экран на 12 коло­нок, неза­ви­си­мо от раз­ме­ра экра­на. Даже малень­кий экран ста­ро­го теле­фо­на Бут­страп разо­бьёт на 12 коло­нок и будет ими управ­лять. На этом хол­сте вы може­те созда­вать бло­ки шири­ной с какое-то коли­че­ство коло­нок. Напри­мер, что­бы напи­сать текст на поло­ви­ну шири­ны экра­на, нуж­но создать блок шири­ной 6 коло­нок.

Бло­ки живут не сами по себе, а как бы в таб­ли­цах. Вы гово­ри­те Бут­стра­пу: «Создай мне кон­тей­нер для бло­ка, в кон­тей­не­ре — стро­ку, внут­ри стро­ки — колон­ку, а внутрь колон­ки — поло­жи этот текст». Сей­час это выгля­дит стран­но, но поз­же вы при­вык­не­те.

Стро­ка запол­ня­ет­ся ячей­ка­ми сле­ва напра­во. Когда кон­ча­ет­ся стро­ка, мож­но создать новую стро­ку и сно­ва запол­нить её ячей­ка­ми раз­ной шири­ны. Шири­на яче­ек выра­жа­ет­ся в колон­ках. Ячей­ка шири­ной на весь экран будет иметь шири­ну 12 коло­нок, на пол-экрана — 6 коло­нок. Что­бы раз­бить экран на три части по гори­зон­та­ли, нуж­но 3 ячей­ки шири­ной по 4 колон­ки. Что­бы сде­лать сет­ку, как у обыч­но­го трёх­ко­ло­ноч­но­го сай­та, попро­буй­те три ячей­ки: 2 колон­ки, 8 коло­нок, 2 колон­ки. 

Мож­но ска­зать Бут­стра­пу: «Когда экран малень­кий, эту колон­ку выво­ди на всю шири­ну, а ту вооб­ще прячь». Напри­мер, у нас в левой колон­ке было меню сай­та, в цен­траль­ной — основ­ной текст, а в пра­вой — вся­кие вспо­мо­га­тель­ные ссыл­ки. Тогда гово­рим левой колон­ке на мобил­ке выве­стись на всю шири­ну, основ­ной колон­ке — тоже на всю шири­ну, а пра­вой — скрыть­ся. Полу­чит­ся мобиль­ная вер­сия сай­та.

И так мож­но дол­го кура­жить­ся. Если инте­рес­но, про­чи­тай­те доку­мен­та­цию по сет­кам Бут­стра­па — там всё понят­но по кар­тин­кам. 

Заголовок

Нач­нём с про­сто­го. Пер­вое, что нам нуж­но, — заго­ло­вок всей стра­ни­цы. Мы его сде­ла­ем отдель­ным бло­ком, что­бы ниче­го ему не меша­ло. Весь код раз­ме­стим внут­ри раз­де­ла <body>:

<div >
  <div>
    <div>
      <h3>Адаптивная вёрстка</h3>
    </div>
  </div>
</div>

Помни­те, выше мы писа­ли про вло­жен­ность? Вот она пошла, роди­мая: 

Пер­вый блок — «container» — гово­рит Бут­стра­пу, что здесь сей­час будет про­ис­хо­дить вёрст­ка сай­та. Кон­тей­не­ров на сай­те может быть сколь­ко угод­но, они будут сто­ять один под дру­гим. 

Вто­рой блок — «row» — озна­ча­ет, что нача­лась стро­ка из 12 коло­нок. В кон­тей­нер нуж­но обя­за­тель­но вло­жить такой row, мож­но несколь­ко. Пред­ставь­те, что это стро­ка таб­ли­цы. 

Тре­тий блок отве­ча­ет за ячей­ки в стро­ке. Сей­час мы ска­за­ли бра­у­зе­ру, что неза­ви­си­мо от раз­ме­ра экра­на заго­лов­ку нуж­но выде­лить 12 яче­ек. При этом заго­ло­вок не рас­тя­нет­ся на всю шири­ну — он зай­мёт столь­ко места, сколь­ко бы занял при обыч­ной вёрст­ке.

Добавляем котиков

Мы доба­вим в ста­тью изоб­ра­же­ния коти­ков и посмот­рим, как дви­жок сам будет ими управ­лять в зави­си­мо­сти от раз­ме­ра экра­на.

Сна­ча­ла код, кото­рый мы поме­стим тоже в новый кон­тей­нер:

    
language: HTML
       <div >
<div>
  <div>
    <img src="https://thecode.media/wp-content/uploads/2019/06/cat1.jpg" >
  </div>
 
  <div>
    <img src="https://thecode.media/wp-content/uploads/2019/06/cat2.jpg" >
  </div>
 
  <div>
    <img src="https://thecode.media/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg" >
  </div>
</div>
  </div>

  

Если мы вста­вим это в наш шаб­лон стра­ни­цы, вме­сте с пер­вой частью кода, то уви­дим, что кар­тин­ки рас­полз­лись и зани­ма­ют слиш­ком мно­го места. Дело в том, что для бра­у­зе­ра раз­мер кар­ти­нок сей­час важ­нее, чем раз­ме­ры сет­ки Бут­стра­па — коти­ки как бы раз­ры­ва­ют нашу стра­ни­цу. Нуж­но это испра­вить:

Что­бы коти­ки ува­жа­ли шири­ну яче­ек, в кото­рые их засо­вы­ва­ют, про­пи­шем в CSS-стилях спе­ци­аль­ную коман­ду для тега <img>. Коман­да долж­на ска­зать, что­бы шири­на кар­тин­ки была не боль­ше, чем мак­си­маль­ный раз­мер бло­ка, кото­рый под неё выде­ли­ли:

img{
      max-width: 100%;
   } 

Этот код нуж­но вста­вить в нача­ло стра­ни­цы меж­ду тега­ми <style> и </style>.

Теперь всё нор­маль­но: кар­тин­ка зани­ма­ет мак­си­маль­ную шири­ну, кото­рую ей даёт занять сет­ка Бут­стра­па. Давай­те посмот­рим, что про­изой­дёт при изме­не­нии раз­ме­ров бра­у­зе­ра:

Настраиваем размеры картинок

Что­бы на раз­ных экра­нах кар­тин­ки выгля­де­ли хоро­шо, давай­те сде­ла­ем так, что­бы на сред­них экра­нах все коты были одно­го раз­ме­ра, а на малень­ких — выстра­и­ва­лись одни под дру­ги­ми. Для это­го изме­ним наш про­шлый блок таким обра­зом:

    
language: HTML
      </div>
 
<div>
  
  <div>
    <img src="https://thecode.media/wp-content/uploads/2019/06/cat1.jpg" >
  </div>
 
  <div>
    <img src="https://thecode.media/wp-content/uploads/2019/06/cat2.jpg" >
  </div>
 
  <div>
    <img src="https://thecode.media/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg" >
  </div>
 
</div>

  

Мы для каж­дой кар­тин­ки доба­ви­ли опи­са­ние раз­ме­ров бло­ка для каж­до­го раз­ме­ра экра­на и раз­бе­рём его на при­ме­ре пер­вой кар­тин­ки. Теперь, если экран очень малень­кий (col) или про­сто малень­кий (col-sm), то пер­вый блок с коти­ком зай­мёт все 12 яче­ек, то есть всю шири­ну. Если экран сред­не­го раз­ме­ра (col-md) — то 4 ячей­ки, а если боль­шой (col-lg) или очень боль­шой (col-xl) — то пусть кот зани­ма­ет по 2 ячей­ки.

Для вто­рой кар­тин­ки дей­ству­ют те же самые пра­ви­ла, но раз­мер кота на боль­ших и очень боль­ших экра­нах дру­гой — 8 яче­ек. Тре­тья кар­тин­ка настра­и­ва­ет­ся точ­но так же, как и пер­вая. Обра­ти­те вни­ма­ние: что­бы на сред­них экра­нах полу­чить оди­на­ко­вый раз­мер кар­ти­нок, мы в опи­са­ние каж­дой из них доба­ви­ли одну и ту же коман­ду col-md-4, кото­рая каж­до­му коту даёт 4 колон­ки, что­бы все были одно­го раз­ме­ра. 

Вот что полу­чи­лось в ито­ге — мы никак не про­грам­ми­ро­ва­ли все вычис­ле­ния раз­ме­ра экра­на, под­гон­ку под них изоб­ра­же­ний, не запра­ши­ва­ли посто­ян­но, поме­нял­ся ли раз­мер — за нас всё делал Бут­страп. Мы про­сто ска­за­ли ему, како­го раз­ме­ра хотим видеть каж­дый блок, и всё — даль­ше рабо­та­ла магия фрейм­вор­ка!

Полный код страницы

    
language: HTML
      <!DOCTYPE html>
<html>
<!-- служебная часть -->
<head>
  <!-- заголовок страницы -->
  <title>Адаптивная вёрстка на Бутстрапе</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    img{
          max-width: 100%;
        } 
  </style>
<!-- закрываем служебную часть страницы -->
</head>
<body>
  <div >
    <div>
 
      <div>
        <h2>Адаптивная вёрстка</h2>
      </div>
 
    </div>
  </div>
 
  <div >
    <div>
      
      <div>
        <img src="https://thecode.media/wp-content/uploads/2019/06/cat1.jpg" >
      </div>
 
      <div>
        <img src="https://thecode.media/wp-content/uploads/2019/06/cat2.jpg" >
      </div>
 
      <div>
        <img src="https://thecode.media/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg" >
      </div>
 
    </div>
  </div>
 
</body>
<!-- конец всей страницы -->
</html> 

  

Что дальше

Это лишь самые про­стые вещи, кото­рые мож­но делать на Бут­стра­пе. Если вам понра­ви­лось, как стра­ни­ца реа­ги­ру­ет на изме­не­ния экра­на, — зай­ди­те на getbootstrap.ru и почи­тай­те осталь­ные воз­мож­но­сти фрейм­вор­ка. В дру­гих ста­тьях мы ещё вер­нём­ся к это­му движ­ку и рас­ска­жем о его дру­гих воз­мож­но­стях.

Подключение фреймворка Bootstrap к сайту

• Статьи
• Видеоуроки
• Таймлайн
• Вопросы
• Поиск

• • Войти
  • Регистрация

• HTML & CSS
• JavaScript
• Bootstrap

Что такое Bootstrap

Bootstrap — самый популярный CSS Framework для разработки адаптивных веб-сайтов, ориентированных на мобильные устройства.

Bootstrap 4 — новейшая версия Bootstrap

Пример

Щелкните кнопку «Попробуйте сами», чтобы увидеть, как это работает.

Поддержка браузера

Bootstrap 4 — новейшая версия Bootstrap.

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

Если вам требуется поддержка IE9 или IE8, вы должны использовать Bootstrap 3.

Контейнеры начальной загрузки

Класс контейнера — один из наиболее важных классов Bootstrap.

Предоставляет поля, отступы, выравнивание и многое другое для элементов HTML.

Пример

Это абзац

Это абзац

Это абзац

Это абзац

Это абзац

Попробуй сам »

---

Цвета начальной загрузки

Лондон — самый густонаселенный город Соединенного Королевства, в котором проживает более 9 миллионов жителей.

Лондон — самый густонаселенный город Соединенного Королевства, в котором проживает более 9 миллионов жителей.

Лондон — самый густонаселенный город Соединенного Королевства, в котором проживает более 9 миллионов жителей.

Лондон — самый густонаселенный город Соединенного Королевства, в котором проживает более 9 миллионов жителей.

Лондон — самый густонаселенный город Соединенного Королевства, в котором проживает более 9 миллионов жителей.

Лондон — самый густонаселенный город Соединенного Королевства, в котором проживает более 9 миллионов жителей.

Лондон — самый густонаселенный город Соединенного Королевства, в котором проживает более 9 миллионов жителей.

Пример

Лондон — это самый густонаселенный город Соединенного Королевства, с пригородами более 9 миллион жителей.

Лондон — самый густонаселенный город США. Королевство, с пригородами более 9 миллионов жителей.

Попробуй сам »

---

Цвета текста начальной загрузки

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.

Пример

Этот текст без звука.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.

Попробуй сам »

---

Колонки начальной загрузки

Три столбца одинаковой ширины на всех устройства и ширина экрана:

Пример

.col

.col

.col

Попробуй сам »

---

Адаптивные столбцы

Три столбца одинаковой ширины масштабируются для наложения друг на друга на небольших экраны:

Пример

.col-sm-4

.col-sm-4

.col-sm-4

Попробуй сам »

---

Таблицы начальной загрузки

Полосатый стол с зеброй:

Имя	Фамилия	Электронная почта
Иоанна	Самка	john @ example.com
Мэри	МО	[email protected]
июль	Дули	[email protected]

Пример

<таблица>


Имя
Фамилия
Электронная почта




Джон
Доу
john @ example.com


Мэри
Мо
[email protected]


июль
Дули
[email protected]

Попробуй сам »

---

Оповещения Bootstrap

Bootstrap предоставляет простой способ создания предопределенных предупреждающих сообщений:

Успех! Это окно предупреждения указывает на успешное или положительное действие.

Предупреждение! Это окно предупреждения указывает на предупреждение, которое может потребовать внимания.

Опасно! Это окно предупреждения указывает на опасное или потенциально негативное действие.

Первичный! Это окно предупреждения указывает на важное действие.

Пример

Успешно! Указывает на успешное или положительное действие.

Попробуй сам »

---

Кнопки начальной загрузки

Bootstrap предоставляет разные стили кнопок:

Базовый Первичный Вторичный успех Информация Предупреждение Опасность Тьма

Пример

Базовый
Основной
Вторичный
Успех
Информация
Предупреждение
Опасно
Темный

Попробуй сам »

---

Загрузочные карты

Джон Доу

Пример текста какой-то пример текста.Джон Доу — архитектор и инженер.

Посмотреть профиль

Пример

Джон Доу

Пример текста.

См. Профиль

Попробуй сам »

---

Учебное пособие по полной загрузке

Это было краткое описание Bootstrap.

Чтобы получить полное руководство по загрузке, перейдите в учебное пособие по W3Schools Bootstrap.

Для получения полной справки по загрузке перейдите в Справочник по загрузке W3Schools.

.

Bootstrap Tutorial: Использование CSS Framework

Если вас интересует веб-разработка, вы наверняка слышали о Bootstrap. Согласно официальному сайту, Bootstrap — это самая популярная среда HTML, CSS и JS для разработки адаптивных мобильных проектов в Интернете. Отлично звучит! Как мне его использовать?

Было бы легко отправить вас на их страницу «Начало работы» и закончить. Их руководство по установке действительно содержит массу полезной информации — ссылки на CDN, объяснения того, как установить с Bower, npm и Composer, информацию об интеграции с Autoprefixer и LESS, множество шаблонов, лицензий и переводов — но это, безусловно, не пошаговое руководство по началу работы (что вполне может быть в духе самодидактизма).

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

Это руководство предназначено для первого знакомства с Bootstrap для начинающих, поэтому мы не будем углубляться в интеграцию LESS и Sass, которые являются более промежуточными / продвинутыми концепциями.Хотя он написан для текущей стабильной версии Bootstrap 3, концепции останутся такими же для будущих версий.

Голы

• Узнайте, что такое интерфейсный фреймворк и чем он может быть полезен
• Понять, как правильно включить CSS и JavaScript Bootstrap, и приступить к настройке

Предварительные требования

• Базовые знания и понимание HTML и CSS

Что такое Bootstrap?

Bootstrap можно свести к трем основным файлам:

Кроме того, для работы Bootstrap требуется jQuery.jQuery — чрезвычайно популярная и широко используемая библиотека JavaScript, которая одновременно упрощает и добавляет кроссбраузерность в JavaScript.

Все остальное, с чем вы можете столкнуться при изучении документации Bootstrap — Grunt, Gulp, Sass, LESS, bower, npm и т. Д. — не обязательно для начала работы с Bootstrap. Это средства запуска задач, препроцессоры, средства установки и диспетчеры пакетов, поэтому не расстраивайтесь, если вы еще не знаете, как их использовать.

Почему важна структура? Мне нужно его использовать?

Вам абсолютно не нужен для использования фреймворка — недавно я написал статью под названием «Вам не нужна фреймворк: понимание основ адаптивного дизайна», которую я бы рекомендовал прочитать, если вы хотите узнать больше об адаптивном дизайне.Однако фреймворки очень популярны и имеют много преимуществ, поэтому важно научиться с ними работать.

Некоторые способы, которыми фреймворки могут вам помочь:

• Предотвращение повторов между проектами
• Используйте адаптивный дизайн, чтобы позволить вашему веб-сайту адаптироваться к экранам различных размеров — мобильным, настольным и т. Д.
• Обеспечьте согласованность дизайна и кода между проектами и между разработчиками
• Быстро и легко создавать прототипы новых конструкций
• Обеспечить кроссбраузерность

Как правило, каждый веб-проект, над которым вы работаете, должен быть отзывчивым и должным образом работать во всех основных браузерах и, вероятно, иметь некоторые резервные варианты для старых браузеров.У Bootstrap есть огромное сообщество с открытым исходным кодом, которое работает над этим, так что вам не нужно. Кроме того, когда несколько разработчиков знают одну и ту же систему, они могут работать в большей гармонии — и это также помогает новичкам в проекте быстрее освоиться.

Сетка, вероятно, один из самых важных аспектов фреймворка. Это основа, на которой создается весь макет. Помимо этого, основной CSS Bootstrap также добавит полезный стиль к формам, таблицам, кнопкам, спискам и изображениям, а также полностью функционирующим панелям навигации, а основной JavaScript добавит полезный код для создания модальных окон, каруселей, предупреждений, всплывающих окон, раскрывающихся списков. , и аккордеоны.

Начнем!

Создание базового шаблона с помощью Bootstrap

Bootstrap поставляется с несколькими очень простыми примерами, с которых можно начать, но так же легко начать с «нуля», так что мы этим и займемся. Сначала я буду использовать только Bootstrap, чтобы заложить основу, а затем мы добавим наш собственный стиль поверх, чтобы сделать что-то забавное и модное.

Шаг первый — загрузить Bootstrap. В zip-файле будут каталоги css , fonts и js .Разархивируйте это и сохраните файлы в каком-нибудь каталоге. Bootstrap не поставляется с HTML, но у них есть «Hello, World!» Чтобы начать работу с документацией, мы будем использовать ее как index.html .

Привет, мир!

  

  <Голова>
    
    
    
    
    <ссылка href = "css / bootstrap.min.css "rel =" таблица стилей "/>
    
  
  
     
 Привет, мир! 
 

    
    
  
  

Достаточно просто начать. У нас есть базовые теги doctype , html , head и body . Мета-тег name = "viewport" особенно важен для адаптивного дизайна — он гарантирует, что ваш веб-сайт имеет соотношение 1: 1 с окном просмотра (размером экрана).

Кроме того, мы просто добавляем базовый CSS Bootstrap в …

jQuery через Google CDN перед закрывающим тегом …

и базовый JavaScript Bootstrap.

  <скрипт src = "js / bootstrap.min.js ">   

Bootstrap JavaScript и пользовательский JavaScript должны быть ниже jQuery для работы! Кроме того, мы можем ссылаться на jQuery через URL-адрес Google, потому что это снижает нагрузку на наш действующий сервер, но вы можете загрузить его, если хотите работать локально.

Что ж, это все, что вам нужно для начала работы с Bootstrap! Давайте посмотрим на наш замечательный новый сайт.

… отлично!

Панель навигации

Хотя у нас ничего нет, в кратчайшие сроки мы можем копировать и вставлять документы и иметь хороший, работающий веб-сайт.Прежде всего, мы добавляем типичную верхнюю панель навигации Bootstrap. Я сделал упрощенную версию их примера с навигационной панелью. Поместите этот код прямо под открывающим тегом .

Вроде запутанный беспорядок, но не все так сложно.В первой строке я определяю всю панель как navbar , выбираю темную цветовую схему с navbar-inverse и выбираю использование navbar-static-top вместо фиксированной (липкой) заголовок.

Контейнер устанавливает максимальную ширину для содержимого в вашей полноширинной панели навигации.

Класс navbar-header содержит информацию о «бренде», куда вы можете поместить свой логотип или название компании.Мы делаем сайт для вымышленной технической компании Balance Web Development (ну, это лучше, чем их старый сайт!).

Кнопка скрыта на рабочем столе и превращается в раскрывающееся гамбургер-меню на мобильном устройстве (каждое — это строка в гамбургере).

  

  кнопка <
    тип = «кнопка»
   
    data-toggle = "свернуть"
    data-target = "# bs-example-navbar-collapse-1"
    ария-расширенный = "ложь"
  >
     Переключить навигацию 
     
     
     
  Кнопка 
   Баланс веб-разработки 
  

Остальная часть кода представляет собой выровненный по правому краю неупорядоченный список, который обслуживает как наше настольное, так и мобильное меню.

Я решил, что мне нужен один из тех больших, занимающих много места и привлекающих внимание заголовков, который в терминах Bootstrap называется jumbotron . Здесь особо не на что смотреть, только jumbotron с контейнером и немного копии.

  

  

     
 Готово. Устанавливать. Код. 
 
    

      Готовы ли вы создать свое модное кросс-совместимое словечко? Мы нахальные, плоские и
      семантический, так чего же вы ждете?
    
    

    

       Загрузить бесплатную пробную версию »
       Подробнее »
    
  
  

Есть лишнее пространство, которое нам не нужно, но я хочу увидеть, как далеко может зайти Bootstrap без переопределения стилей.Как видите, у нас уже есть довольно красивый адаптируемый макет, не написав ни единой строчки CSS.

Сетка

Последнее, что я сделаю, это добавлю некоторый основной контент, который будет в виде сетки. Сетки рядные …

, содержащие столбцы.

Bootstrap работает в системе с 12 столбцами, поэтому, пока вы добавляете до 12, вы золотой.В приведенном выше примере будут два столбца шириной 50% (6/12), которые будут складываться на мобильном устройстве и станут шириной 100%.

  

  

    

       
       
 Облачные вычисления 
 
      

        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
        Commodo, Tortor Mauris condimentum nibh.
      
    
    

       
       
 Обратная совместимость 
 
      

        Etiam porta sem malesuada magna mollis euismod.Donec sed odio dui. Lorem ipsum
        Dolor.
      
    
    

       
       
 Без графического интерфейса 
 
      

        Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus
        Commodo, Tortor Mauris condimentum nibh.
      
    
  
  

Здесь вы можете видеть, что у меня есть три столбца четыре из двенадцати, и, поскольку 3 x 4 = 12, все работает.

Иконки

Я также добавил несколько глификонов для украшения. Glyphicons — это встроенный набор значков, который поставляется с Bootstrap. Если вы не загрузите шрифты или переместите их в другой каталог, эти значки не будут работать.

Использование глификона всегда будет одним и тем же кодом, и изменится только класс glyphicon-floppy-disk .

Теперь я доволен основой моего макета.

Добавление пользовательских стилей в Bootstrap

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

Если вы знаете LESS или Sass, вы можете поиграть в обширной области настройки Bootstrap и загрузить свою собственную версию Bootstrap. Мы используем «ванильный CSS», то есть CSS без препроцессора.К счастью, вы можете просто добавить дополнительную таблицу стилей под ядром Bootstrap

.

Не изменяйте ядро ​​Bootstrap — гораздо лучше переопределить существующие стили.

  

<ссылка
  href = "https://fonts.googleapis.com/css?family=Montserrat:400,700"
  отн = «таблица стилей»
  type = "текст / css"
/>  

Я добавил ссылку на шрифт Google под названием Montserrat.Если вы никогда раньше не использовали шрифт Google Font, все, что вам нужно сделать, это добавить таблицу стилей шрифта в заголовок и изменить семейство шрифтов желаемого элемента.

Наконец-то приступаем к укладке. Всего за несколько минут я смогу превратить свой скучный общий макет Bootstrap в забавный плоский макет. Во-первых, я собираюсь избавиться от надоедливого пространства между навигационной панелью и джамботроном.

  .navbar {
  нижнее поле: 0;
}  

Несколько простых стилей к основным тегам.Я загружаю шрифт Montserrat на всю страницу, заголовки выделены жирным шрифтом, фон темным, а текст светлым.

  кузов {
  фон: # 3e4649;
  цвет: # f7f7f7;
  семейство шрифтов: 'Montserrat', без засечек;
}
h2,
h3 {
  font-weight: жирный;
}
п {
  размер шрифта: 16 пикселей;
  цвет: #cdcdcd;
}  

Я сделаю жумботрон зеленым и по центру.

  .jumbotron {
  фон: # 27a967;
  цвет белый;
  выравнивание текста: центр;
}
.jumbotron p {
  цвет белый;
  размер шрифта: 26 пикселей;
}  

Я собираюсь превратить кнопки в «кнопки-призраки», то есть кнопки, прозрачные с рамкой.Я также добавляю запас, чтобы они правильно складывались на мобильных устройствах.

  .btn-primary {
  цвет: #fff;
  цвет фона: прозрачный;
  цвет границы: белый;
  нижнее поле: 5 пикселей;
}
.btn-primary: hover {
  цвет: # 27a967;
  цвет фона: белый;
  цвет границы: белый;
}  

Я собираюсь сделать панель навигации другого темного оттенка, сделать ссылки светлее и изменить цвет фона при наведении.

  .navbar-inverse {
  фон: # 2e2f31;
  граница: 0;
}
.navbar-inverse .navbar-nav li a {
  цвет: # f7f7f7;
  размер шрифта: 16 пикселей;
}
.navbar-inverse .navbar-nav li a: hover {
  фон: # 27a967;
}  

В выпадающем меню есть свои классы, поэтому я также собираюсь изменить цвет фона для них и добавить небольшой отступ.

  .dropdown-menu {
  фон: # 2e2f31;
  граничный радиус: 0;
  граница: 0;
}
.dropdown-menu li a {
  отступ: 10 пикселей;
}
.navbar-inverse .navbar-nav .dropdown-menu li a: hover {
  фон: # 2c463c;
}  

Вернувшись в свой HTML, я собираюсь обернуть тег раздела вокруг своей сетки и называть его призыв к действию .Я также собираюсь создать класс glyphicon-large и добавить его к каждому значку span .

  <раздел>