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

Загрузка

Загрузите Bootstrap, чтобы получить скомпилированный CSS и JavaScript исходный код или включите его с вашими любимыми менеджерами пакетов, такими как npm, Bower, RubyGems и другие.

Компилированные CSS и JS

Загружайте компилированный, готовый к использованию код Bootstrap v4.0.0 (для легкого внедрения в ваш проект), включающие:

Сюда не входит документация, исходники или сторонние JS-«зависимости» Зависимости передаются (внедряются) сервису в момент его создания (jQuery или Popper.js). Зависимости передаются (внедряются) сервису в момент его создания.

Исходные файлы

Компилируйте Bootstrap со своим «файлопроводом», загружая наши исходники Sass, JS и файлы документации. Это потребует некоторого дополнительного инструментария:

Инструменты сборки также могут понадобиться при работе с Bootstrap, но все-таки они не совсем подходят для ваших целей.

Bootstrap CDN

Пользуйтесь кэшированной версией Bootstrap для «облегчения» страницы и ускорения загрузки.

Если вы пользуетесь нашим компилированным JS, не забудьте подключить наши CDN версии jQuery и Popper.js перед вашими JS-файлами.

Системы управления пакетами (Хождение по сайтам библиотек, скачивание и распаковка архивов, копирование файлов в проект — всё это заменяется парой команд в терминале)

Используйте исходники Bootstrap в любом проекте с помощью популярных систем управления пакетами. С любой системой управления пакетами Bootstrap потребует компилятор Sass (препроцессор) и постпроцессор для правильной установки наших компилированных версий.

Устанавливайте Bootstrap в вашем приложении на движке Node с помощью пакета npm:

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

пакет.json Bootstrap содержит некоторые дополнительные метаданные со следующими ключами:

RubyGems

Устанавливайте Bootstrap в ваши приложения на Ruby с помощью Bundler (рекомендовано) и системы управления пакетами «RubyGems», просто добавив следующую строку в ваш Gemfile :

Еще один способ – если вы не используете Bundler, вы можете установить gem-файл такой командой:

Composer

Вы также можете устанавливать и управлять Sass и JS в Bootstrap c помощью пакетного менеджера уровня приложений для языка программирования PHP:

NuGet

Источник

Начинающему веб-мастеру: делаем одностраничник на Bootstrap 4 за полчаса

Фреймворк Bootstrap — это свободный набор инструментов для создания интерфейсов сайтов и веб-приложений. Его возможности ориентированы исключительно на фронтенд-разработку. Bootstrap — проект весьма популярный, о чём, например, говорит то, что он занимает (по состоянию на начало марта 2018-го года) второе место по количеству звёзд на GitHub.

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

Эта материал ориентирован на начинающих веб-разработчиков, владеющих основами HTML, CSS и jQuery.

Вот одностраничный веб-сайт, о создании которого средствами Bootstrap мы будем говорить.

Готовый проект, созданный средствами Bootstrap

Загрузка и установка Bootstrap

Bootstrap можно подключить к странице с использованием сети доставки контента. Для этого надо добавить следующую ссылку в тег :

Свежую версию Bootstrap можно загрузить отсюда и использовать локально.

Структура проекта должна выглядеть так, как показано на следующем рисунке.

О возможностях Bootstrap 4

Первая стабильная версия Bootstrap 4 вышла в конце января сего года. Теперь Bootstrap включает в себя некоторые интересные возможности, которых не было в его предыдущей версии. А именно, если говорить об улучшениях и изменениях, можно отметить следующее:

Система сеток Bootstrap

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

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

Навигационная панель

Теперь создадим файл main.css и подключим его к странице, поместив в тег файла index.html следующее:

Это позволит настраивать стили элементов страницы, размещая в этом файле CSS-правила. Добавим в этот CSS-файл правила, задающие цветовое оформление навигационной панели:

Новая сетка Bootstrap построена на основе flexbox, поэтому для выравнивания содержимого нужно пользоваться соответствующими свойствами. Например, для того, чтобы поместить меню навигационной панели справа, нужно использовать свойство justify-content и установить его значение во flex-end :

Шапка страницы

Для описания шапки страницы применяется тег :

Подготовим макет для шапки страницы. Мы хотим, чтобы она занимала всю высоту окна, поэтому тут нам пригодятся возможности jQuery. Создадим файл main.js и подключим его к index.html перед закрывающим тегом :

В файл main.js добавим следующее:

Нелишним будет поместить в шапку страницы какую-нибудь приятную фоновую картинку. Сделаем это следующим образом:

Вот что у нас в итоге получилось.

Шапка страницы с фоновым изображением

Пока шапка сайта выглядит пустовато, поэтому добавим в неё элемент

Теперь добавим в шапку описание проекта. Его мы поместим в новый элемент

Теперь добавим сюда ещё один элемент

Кнопки

Вот как будет выглядеть шапка страницы после выполнения вышеописанных действий:

Шапка страницы, содержащая описание проекта

Раздел About

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

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

Первая часть макета будет расположена слева, она будет содержать фотографию. Вторая часть, расположенная справа, вместит описание.

Вот как выглядит разметка левой части этого раздела:

А вот что получится после того, как сюда будет добавлено описание правой части макета:

Вот стили для всего этого:

Раздел Portfolio

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

При формировании макета этого раздела применяются те же принципы работы с сеткой, которые мы рассматривали выше:

Каждый элемент в нашей галерее, на средних и больших экранах, занимает 4 колонки (напомним — класс col-sm-12 используется для устройств с маленькими экранами, класс col-md-4 используется для средних экранов, col-lg-4 — для устройств с большими экранами). Как результат, на больших и средних экранах на один элемент придётся примерно 33.3% элемента-контейнера, на маленьких устройствах каждый элемент будет занимать весь экран (12 колонок).

Стилизуем галерею работ:

Раздел Blog и работа с карточками

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

Для создания этого раздела нам понадобятся так называемые карточки (cards в терминологии Bootstrap).

Для того чтобы создать карточку, нужно включить в макет элемент

Вот стили для карточек:

Вот как будет выглядеть наш одностраничник после создания раздела Blog:

Страница после добавления раздела Blog

Раздел Team

В этом разделе будут размещены сведения о команде проекта.

Для формирования этого раздела мы воспользуемся сеткой, поровну разделив имеющееся пространство между изображениями. Каждое изображение (на больших и средних экранах) будет занимать 3 колонки сетки, что составляет 25% общего пространства.

Вот HTML-разметка этого раздела:

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

Анимация при наведении указателя мыши на изображение

Для того чтобы достичь такого эффекта, добавим в main.css следующие стили:

Форма обратной связи

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

Форма обратной связи

Добавим в файл index.html следующее:

Вот стили для раздела с формой обратной связи, которые надо поместить в файл main.css :

Шрифты

Стандартные шрифты подходят далеко не всем. Мы, воспользовавшись возможностями Google Font API, применим в нашем проекте шрифт Raleway. Он будет смотреться здесь очень хорошо. Для импорта шрифта добавим в файл main.css следующую директиву:

Затем зададим глобальные стили для различных HTML-тегов:

Эффекты прокрутки

На рисунке ниже показано поведение страницы, которого мы хотим добиться.

Прокрутка страницы при нажатии на ссылки в навигационной панели

Для того, чтобы страница, при щелчках по ссылкам навигационной панели, плавно прокручивалась к нужному разделу, нам понадобится прибегнуть к возможностям jQuery. Если вы не очень хорошо знакомы с этой библиотекой, знайте, что ничего сложного тут нет — просто добавьте нижеприведённый код в файл main.js :

После этого добавьте атрибут data-value к каждой из ссылок в навигационной панели и приведите разметку к следующему виду:

Для того чтобы всё это, наконец, заработало, осталось лишь добавить атрибут id к основному элементу

каждого из разделов страницы. При этом нужно проследить, чтобы его значение было идентично тому, которое задано в атрибуте data-value соответствующей ссылки. Например, вот соответствующий атрибут для раздела About:

На этом наш пример завершён. Вот код этого проекта на GitHub.

Итоги

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

Уважаемые читатели! Если сегодня состоялось ваше первое практическое знакомство с Bootstrap, скажите, планируете ли вы использовать этот фреймворк в своих проектах?

Источник

Как подключить бутстрап?

Дата публикации: 2016-09-22

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

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

Скачиваем фреймворк

В главном меню кликните по пункту Getting Started. На русский язык он переводится: “C чего начать”. Действительно, на этой странице вы найдете все необходимое для работы. В первую очередь вы увидите вот что:

Bootstrap предлагает нам скачать себя в нескольких вариантах. Первый – это просто стандартная последняя версия фреймворка, в которой есть все компоненты. Два следующих варианта – это less и sass исходники. Пока я не рекомендую вам их трогать, если вы не знаете, как работать с этими технологиями.

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Это исходники, с их помощью вы можете переделать boostrap под себя. Опять же, если знаете, как работать с ними.

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

Содержимое фреймворка

Отлично, после скачивайте разархивируйте архив и перейдите в папку. В конечной папке вы увидите три каталога – css, js и fonts. Эти три директории и нужно будет скопировать в папку вашего проекта.

Перед этим вы можете просмотреть все эти папки. В первую очередь, папку css. В ней лежит 2 css-файла и их минифицированные версии. Это bootstrap.css и bootstrap-theme.css. Соответственно, первый с кодом самого фреймворка. А второй предназначен для темизации. У обоих файлов есть, как я уже сказал, минифицированные версии. Они весят на 10-15% меньше за счет того, что код в них размещен в одну строку.

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

Далее у нас папка fonts. В ней содержится иконочный шрифт bootstrap, благодаря которому вы абсолютно без проблем сможете вставлять на веб-странице более 200 иконок, менять их размеры и цвет. По сути, это картинки, которыми можно очень шибко управлять. При увеличении размеров качество иконок не становится хуже, так как они векторные, то есть svg-формата.

В папке js содержится файл, необходимый для работы всех javascript-компонентов, которые заложены в фреймворк. Например, это модальные окна, табы и подсказки. Хорошо, немного с содержимым мы разобрались, время переходить непосредственно к подключению.

Подключение Bootstrap

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

Отлично, тем нужно создать файл index.html. Я сделаю это с помощью редактора Notepad++. Стоп-стоп, может вы уже по привычке начали писать начальную html-разметку, не нужно этого делать, сейчас мы вставим все готовое. Прокрутите страницу Getting Started ниже, там вы увидите Basic Template, то есть базовый шаблон html-страницы.

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

Сразу видим, что используется доктайп, характерный для html5. В теге html видим параметр lang, можете сменить его с en на ru.

Далее начинается секция head, в ней задается кодировка страницы. Следующие строчки достаточно важны, ни в коем случае их не удаляйте. Там, где видите IE-edge – это строка кода, которая обеспечивает корректную работу фреймворка вместе с браузером IE.

Следующая строка – это всем известный мета тег viewport, который позволяет выставить базовые настройки для корректного отображения сайта на мобильных устройствах.

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Ну а далее у нас начинается непосредственно подключение файлов фреймворка. К слову, все комментарии, которые есть на скриншоте выше (они выделены серым цветом), вы можете удалить, кроме четырех строчек, которые начинаются со слов if it IE 9 и заканчиваются endif. Эти строки нужны нам для того, чтобы для браузера IE подгружались дополнительные файлы из внешнего хранилища, которые обеспечат поддержку адаптивности и элементов html5.

Javascript-файлы же подключаются перед закрывающим тегом body. Как видите, тут подключается не только сам фреймворк bootstrap, но и библиотека jquery. Дело в том, что для корректной работы фреймворка эта библиотека нужна и подключается она из внешнего хранилища.

Как мне проверить, подключился ли фреймворк?

Все очень просто. Откройте наш index.html в любом браузере, если вы увидите там такое, то все работает:

Если бы вы допустили какие-то ошибки при подключении фреймворка, то внешний вид заголовка был бы таким:

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

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

Источник

Вступление

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

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

Хотите использовать Бутстрап в своем проекте? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Нужна система управления пакетами или исходники Bootstrap? Перейдите на страницу загрузки.

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

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

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

Тип текущего документа

Bootstrap требует использования doctype HTML5. Без него у вас возникнут некоторые проблемы со стилями, но его включение не должно вызывать каких-либо серьезных сбоев.

Мета-теги для адаптивной вёрстки

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

Вы можете увидеть пример этого в действии в стартовом шаблоне.

Размер ширины и высоты элемента (Box-sizing)

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

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

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

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

Сообщество

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

Вы также можете присоединиться к @getbootstrap on Twitter, чтобы следить за последними слухами и потрясающими музыкальными клипами.

Источник

Начало работы

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

Скачать

Bootstrap (в настоящее время v3.4.1) имеет несколько простых способов быстро начать работу, каждый из которых подходит для разных уровней навыков и вариантов использования. Прочтите, чтобы узнать, что подходит именно вам.

Bootstrap

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

Исходный код

Исходный код Less, JavaScript и файлы шрифтов вместе с нашей документацией. Требуется Less компилятор и некоторая настройка.

Bootstrap перенесен с Less на Sass для легкого включения в проекты Rails, Compass или только Sass.

BootstrapCDN

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

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

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

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

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

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

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

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

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

Для Less/Sass требуется автопрефиксер

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

Что включено

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

jQuery обязателен

Предварительно скомпилированный Bootstrap

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

Это самая простая форма Bootstrap: предварительно скомпилированные файлы для быстрого использования практически в любом веб-проекте. Мы предоставляем скомпилированные CSS и JS ( bootstrap.* ), а также скомпилированные и минимизированные CSS и JS ( bootstrap.min.* ). CSS исходные карты ( bootstrap.*.map ) доступны для использования с инструментами разработчика некоторых браузеров. Шрифты из Glyphicons включены, как и дополнительная тема Bootstrap.

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

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

Компиляция CSS и JavaScript

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

Установка Grunt

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

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

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

grunt dist (просто скомпилируйте CSS и JavaScript)

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

grunt watch (Наблюдать)

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

grunt test (Запуск тестов)

Запускает JSHint и выполняет тесты QUnit в реальном браузеры благодаря Karma.

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

grunt (Сборка абсолютно всего и запуск тестов)

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

Исправление проблем

Простой шаблон

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

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

Примеры

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

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

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

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

Bootstrap тема

Загрузите дополнительную тему Bootstrap для улучшения визуального восприятия.

Grids

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

Джамботрон

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

Узкий джамботрон

Создайте более настраиваемую страницу, сузив контейнер по умолчанию и джамботрон.

Навбары в действии

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

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

Статическая верхняя панель навигации

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

Фиксированная панель навигации

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

Кастомные компоненты

Обложка

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

Карусель

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

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

Панель администратор

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

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

Индивидуальный макет и дизайн формы для простой формы входа.

Выровненная навигация

Создайте настраиваемую навигационную панель с выровненными ссылками. Берегись! Не слишком дружелюбен к Safari.

Липкий нижний колонтитул

Прикрепите нижний колонтитул к нижней части области просмотра, если контент короче его.

Липкий нижний колонтитул с навигационной панелью

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

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

не адаптивный Bootstrap

Легко отключить отзывчивость Bootstrap в соответствии с нашей документацией.

Off-canvas

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

Инструменты

Bootlint

Сообщество

Будьте в курсе разработки Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.

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

Отключение отзывчивости

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

Действия по отключению отзывчивости страницы

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

Шаблон начальной загрузки с отключенной отзывчивостью

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

Переход с v2.x на v3.x

Хотите перейти со старой версии Bootstrap на v3.x? Ознакомьтесь с нашим руководством по миграции.

Браузер и поддержка устройств

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

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

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

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

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

Вообще говоря, Bootstrap поддерживает последние версии браузеров по умолчанию для каждой основной платформы. Обратите внимание, что прокси-браузеры (такие как Opera Mini, режим Opera Mobile Turbo, UC Browser Mini, Amazon Silk) не поддерживаются.

Настольные браузеры

Точно так же поддерживаются последние версии большинства настольных браузеров.

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

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

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

Список некоторых ошибок браузера, с которыми приходится бороться Bootstrap, можно найти на нашей стене ошибок браузера.

Internet Explorer 8 и 9

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

Посетите Can I use. для получения подробной информации о поддержке браузером функций 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

Internet Explorer 8 и box-sizing

Internet Explorer 8 и @font-face

IE Compatibility modes

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

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

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

Смотрите этот вопрос StackOverflow для большей информации.

Internet Explorer 10 в Windows 8 и Windows Phone 8

Internet Explorer 10 не различает ширину устройства для ширины области просмотра, и, следовательно, неправильно применяет медиа-запросы в CSS Bootstrap. Обычно вы просто добавляете небольшой фрагмент CSS, чтобы исправить это:

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

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

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

Округление процентов в Safari

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

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

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

Текстовые поля iOS и прокрутка

Начиная с iOS 9.3, пока модальное окно открыто, если первое касание жеста прокрутки находится в пределах текстового или

, содержимое под модальным окном будет прокручиваться вместо самого модального окна. Смотрите ошибку WebKit #153856.

Виртуальные клавиатуры

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

Выпадающие списки навигационной панели

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

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

Прикрепленный :hover / :focus на мобильных устройствах

Печать

Даже в некоторых современных браузерах печать может быть необычной.

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

Стандартный Android-браузер

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

Меню выбора

Валидаторы

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

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

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

Сторонняя поддержка

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

Box-sizing

Некоторое стороннее программное обеспечение, включая Карты Google и Систему пользовательского поиска Google, конфликтует с Bootstrap из-за * < box-sizing: border-box; >, правило, согласно которому padding не влияет на окончательную вычисленную ширину элемента. Узнайте больше о блочной модели и ее размерах на сайте CSS Tricks.

В зависимости от контекста вы можете изменить размер блока по мере необходимости (вариант 1) или сбросить размер блока для целых регионов (вариант 2).

Доступность

Пропустить навигацию

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

Вложенные заголовки

При вложении заголовков (

), ваш основной заголовок документа должен быть

. В последующих заголовках следует логически использовать

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

Дополнительные сведения смотрите на сайтах HTML CodeSniffer and Доступность штата Пенсильвания.

Цветовой контраст

Дополнительные ресурсы

Часто задаваемые вопросы о лицензиях

Bootstrap выпущен под лицензией MIT и защищен авторским правом 2021 Twitter. Сводя к более мелким кускам, его можно описать следующими условиями.

Это требует от вас:

Это позволяет вам:

Он запрещает вам:

Это не требует от вас:

Полная лицензия Bootstrap находится в репозитории проекта для получения дополнительной информации.

Переводы

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

Мы не помогаем организовывать или размещать переводы, мы просто даем ссылки на них.

Вы выполнили новый или лучший перевод? Откройте pull request, чтобы добавить его в наш список.

Разработан и построен с любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших участников.

Код под лицензией MIT, документация CC BY 3.0.

Источник