В этом руководстве вы узнаете, как создать веб-страницу с помощью платформы Bootstrap.
Начало работы с Bootstrap
В этом руководстве вы узнаете, как легко создать веб-страницу с помощью Bootstrap. Но прежде чем начать, убедитесь, что у вас есть редактор кода и некоторые практические знания HTML и CSS.
Что ж, давайте приступим к созданию нашей первой веб-страницы на основе Bootstrap.
Создание вашей первой веб-страницы с помощью Bootstrap
Теперь мы собираемся создать базовый шаблон Bootstrap, включив файлы Bootstrap CSS и JS через CDN. Для некоторых компонентов Bootstrap, таких как всплывающие окна и всплывающие подсказки, требуется сторонняя библиотека Popper.js. Вы можете включить его отдельно или просто включить Bootstrap JS в комплекте с Popper.
Мы рекомендуем добавить Bootstrap в ваш проект через CDN (сеть доставки контента), поскольку CDN обеспечивает повышение производительности за счет сокращения времени загрузки, поскольку они размещают файлы на нескольких серверах, разбросанных по всему миру, поэтому, когда пользователь запрашивает файл, он будут обслуживаться с ближайшего к ним сервера. Мы также используем ссылки CDN в наших примерах:
Давайте пройдемся по следующим шагам. В конце этого руководства вы создадите простую веб-страницу на основе Bootstrap, которая отображает сообщение «Hello world» в веб-браузере.
Шаг 1. Создание простого HTML-файла
Откройте свой любимый редактор кода и создайте новый HTML-файл. Начните с пустого окна, введите следующий код и сохраните его как «basic.html» на рабочем столе.
Пример
Шаг 2. Создание HTML-файла в качестве шаблона начальной загрузки
Чтобы сделать этот простой HTML-файл шаблоном Bootstrap, просто включите файлы Bootstrap CSS и JS, используя их ссылки CDN. Кроме того, вы должны включить файлы JavaScript в нижнюю часть страницы, прямо перед закрывающим тегом, чтобы повысить производительность ваших веб-страниц.
Пример
И все готово! После добавления файлов CSS и JS Bootstrap на нашу HTML-страницу мы можем приступить к разработке любого адаптивного сайта или приложения с помощью платформы Bootstrap.
Атрибуты целостности и перекрестного происхождения были добавлены к ссылкам CDN для реализации целостности подресурсов (SRI). Это функция безопасности, которая позволяет вам снизить риск атак, исходящих из скомпрометированных CDN, гарантируя, что файлы, извлекаемые вашим веб-сайтом (из CDN или откуда угодно), были доставлены без неожиданных или злонамеренных изменений. Он работает, позволяя вам предоставить криптографический хэш, которому должен соответствовать извлеченный файл.
Примечание. Самым большим изменением в Bootstrap 5 является то, что он больше не требует jQuery. Однако вы по-прежнему можете использовать jQuery для быстрой реализации методов и параметров компонента Bootstrap. Если Bootstrap обнаружит jQuery в объекте окна, он добавит все его компоненты в систему плагинов jQuery. Вы узнаете о них в расширенном разделе этой серии руководств.
Совет. Если посетитель вашего веб-сайта уже загрузил CSS- и JS-файлы Bootstrap из той же CDN при посещении других сайтов, они будут загружены из кеша браузера, а не повторно загружены, что приводит к ускорению загрузки. .
Шаг 3. Сохранение и просмотр файла
Теперь сохраните файл на рабочем столе как "bootstrap-template.html".
Чтобы открыть этот файл в веб-браузере, перейдите к нему, затем щелкните его правой кнопкой мыши и выберите свой любимый веб-браузер. Кроме того, вы можете открыть браузер и перетащить в него этот файл.
Примечание. Важно указать расширение .html, иначе некоторые текстовые редакторы, такие как Блокнот в Windows, автоматически сохранят его как .txt.
Скачивание файлов начальной загрузки
Кроме того, вы также можете загрузить CSS- и JS-файлы Bootstrap с их официального веб-сайта и включить в свой проект. Для загрузки доступны две версии: скомпилированные исходные файлы Bootstrap и Bootstrap. Вы можете скачать файлы Bootstrap 5 отсюда.
Скомпилированная загрузка содержит скомпилированную и уменьшенную версию файлов CSS и JavaScript для более быстрой и простой веб-разработки. Скомпилированная версия также включает необязательные зависимости JavaScript, такие как Popper в комплекте с Bootstrap JS ( bootstrap.bundle.* ). Принимая во внимание, что исходная загрузка содержит оригинальные исходные файлы для всех CSS и JavaScript, а также локальную копию документации.
Загрузите и разархивируйте скомпилированный файл Bootstrap. Теперь, если вы заглянете в папки, вы обнаружите, что они содержат скомпилированные файлы CSS и JS ( bootstrap.* ), а также скомпилированные и минимизированные файлы CSS и JS ( bootstrap.min.* ). Используйте файлы bootstrap.min.css и bootstrap.bundle.min.js.
Совет. Нет необходимости включать требуемый файл Popper.js (чтобы заставить работать всплывающую подсказку и всплывающие окна Bootstrap) отдельно, так как он уже включен в "bootstrap.bundle.js" и минимизированный "bootstrap.bundle". .min.js".
Начните работу с Bootstrap, самой популярной в мире платформы для создания адаптивных мобильных сайтов, с jsDelivr и стартовой страницей шаблона.
Быстрый старт
Хотите быстро добавить Bootstrap в свой проект? Используйте jsDelivr, бесплатно предоставляемый ребятами из jsDelivr. Используете менеджер пакетов или вам нужно загрузить исходные файлы? Перейдите на страницу загрузок.
Скопируйте и вставьте таблицу стилей в свою перед всеми остальными таблицами стилей, чтобы загрузить наш CSS.
Для работы многих наших компонентов требуется использование JavaScript. В частности, для них требуются jQuery, Popper.js и наши собственные плагины JavaScript. Поместите следующие s в конце ваших страниц, прямо перед закрывающим тегом
, чтобы включить их. Первым должен быть jQuery, затем Popper.js, а затем наши подключаемые модули JavaScript.
Мы используем тонкую сборку jQuery, но также поддерживается и полная версия.
Интересно, для каких компонентов явно требуется jQuery, наш JS и Popper.js? Щелкните ссылку «Показать компоненты» ниже. Если вы совсем не уверены в общей структуре страницы, продолжайте читать пример шаблона страницы.
Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают Popper, но не jQuery. Дополнительную информацию о том, что входит в Bootstrap, см. в разделе «Содержание».
Оповещения об отклонении
Кнопки для переключения состояний и функций флажков/переключателей.
Карусель для всех вариантов поведения слайдов, элементов управления и индикаторов.
Свернуть для переключения видимости контента
Раскрывающиеся списки для отображения и позиционирования (также требуется Popper.js)
Модали для отображения, позиционирования и прокрутки
Панель навигации для расширения нашего плагина Collapse для реализации адаптивного поведения.
Подсказки и всплывающие окна для отображения и позиционирования (также требуется Popper.js)
Scrollspy для отслеживания поведения прокрутки и обновлений навигации
Стартовый шаблон
Убедитесь, что ваши страницы настроены в соответствии с последними стандартами дизайна и разработки. Это означает использование типа документа HTML5 и включение метатега области просмотра для правильного реагирования. Соберите все вместе, и ваши страницы должны выглядеть так:
Это все, что вам нужно для общих требований к странице. Ознакомьтесь с документацией по макету или нашими официальными примерами, чтобы приступить к размещению содержимого и компонентов вашего сайта.
Важные глобальные параметры
Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам необходимо знать при его использовании. Все они почти исключительно направлены на нормализацию кроссбраузерных стилей. Давайте углубимся.
Тип документа HTML5
Bootstrap требует использования типа документа HTML5. Без него вы увидите странный незавершенный стиль, но его включение не должно вызвать значительных сбоев.
Адаптивный метатег
Bootstrap разрабатывается сначала для мобильных устройств. Это стратегия, согласно которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиазапросов CSS. Чтобы обеспечить правильную визуализацию и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра в свой .
Вы можете увидеть пример этого в действии в начальном шаблоне.
Размер коробки
Для более простого изменения размера в CSS мы переключаем глобальное значение box-sizing с content-box на border-box . Это гарантирует, что заполнение не повлияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторыми сторонними программами, такими как Google Maps и Google Custom Search Engine.
В тех редких случаях, когда вам нужно переопределить его, используйте что-то вроде следующего:
В приведенном выше фрагменте вложенные элементы, включая содержимое, сгенерированное с помощью ::before и ::after, наследуют указанный box-sizing для этого .selector-for-some-widget .
Перезагрузить
Для улучшения рендеринга в разных браузерах мы используем перезагрузку, чтобы исправить несоответствия между браузерами и устройствами, а также предоставить несколько более точные сбросы для общих элементов HTML.
Сообщество
Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.
Вы также можете подписаться на @getbootstrap в Твиттере, чтобы быть в курсе последних сплетен и замечательных музыкальных клипов.
Адаптивный веб-дизайн заключается в создании веб-сайтов, которые автоматически настраиваются так, чтобы хорошо выглядеть на всех устройствах, от маленьких телефонов до больших настольных компьютеров.
Пример начальной загрузки
Столбец 1
Lorem ipsum dolor..
< div >
Столбец 2
Lorem ipsum dolor..
Столбец 3
Lorem ipsum dolor..
История загрузки
Bootstrap был разработан Марком Отто и Джейкобом Торнтоном в Twitter и выпущен как продукт с открытым исходным кодом в августе 2011 года на GitHub.
В июне 2014 года Bootstrap был проектом №1 на GitHub!
Зачем использовать Bootstrap?
Преимущества Bootstrap:
Простота в использовании: любой, у кого есть только базовые знания HTML и CSS, может начать использовать Bootstrap.
Адаптивные функции: адаптивный CSS Bootstrap адаптируется к телефонам, планшетам и настольным компьютерам.
Подход, ориентированный на мобильные устройства. В Bootstrap 3 стили, ориентированные на мобильные устройства, являются частью базовой структуры.
Совместимость с браузерами. Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Edge, Safari и Opera).
Версии начальной загрузки
Это руководство следует за Bootstrap 3, выпущенным в 2013 году. Однако мы также охватываем более новые версии; Bootstrap 4 (выпущен в 2018 г.) и Bootstrap 5 (выпущен в 2021 г.).
Bootstrap 5 – новейшая версия Bootstrap. с новыми компонентами, более быстрыми таблицами стилей, большей отзывчивостью и т. д. Он поддерживает последние стабильные версии всех основных браузеров и платформ. Однако Internet Explorer 11 и более ранние версии не поддерживаются.
Основное различие между Bootstrap 5 и Bootstrap 3 и 4 заключается в том, что Bootstrap 5 переключился на JavaScript вместо jQuery.
Примечание. Bootstrap 3 и Bootstrap 4 по-прежнему поддерживаются командой для исправления критических ошибок и изменений в документации, и продолжать их использовать совершенно безопасно. Однако к ним НЕ будут добавлены новые функции.
Где взять Bootstrap?
Есть два способа начать использовать Bootstrap на собственном веб-сайте.
Загрузка Bootstrap
Загрузочная CDN
Если вы не хотите загружать и размещать Bootstrap самостоятельно, вы можете подключить его из CDN (сети доставки контента).
MaxCDN обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить jQuery:
Макс. CDN:
Одно из преимуществ использования Bootstrap CDN: Многие пользователи уже скачали Bootstrap с MaxCDN при посещении другого сайта. В результате он будет загружаться из кеша при посещении вашего сайта, что приводит к ускорению загрузки. Кроме того, большинство CDN гарантируют, что после того, как пользователь запросит у них файл, он будет предоставлен с ближайшего к ним сервера, что также приводит к ускорению загрузки.
jQuery Bootstrap использует подключаемые модули jQuery для JavaScript (такие как модальные окна, всплывающие подсказки и т. д.). Однако, если вы используете только CSS-часть Bootstrap, вам не нужен jQuery.
Создать первую веб-страницу с помощью Bootstrap
<р>1. Добавьте тип документа HTML5
Bootstrap использует элементы HTML и свойства CSS, для которых требуется тип документа HTML5.
Всегда указывайте тип документа HTML5 в начале страницы вместе с атрибутом lang и правильным набором символов:
<р>2. Bootstrap 3 – в первую очередь для мобильных устройств
Bootstrap 3 адаптирован для мобильных устройств. Стили, ориентированные на мобильные устройства, являются частью базовой структуры.
Чтобы обеспечить правильную визуализацию и сенсорное масштабирование, добавьте внутрь элемента следующий тег:
Часть width=device-width задает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).
Часть initial-scale=1 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
(Обновлено 11 марта 2021 г.) Bootstrap – это платформа HTML, CSS и Javascript с открытым исходным кодом, которая упрощает разработку пользовательского интерфейса с помощью готовых адаптивных классов и других утилит. Эта платформа с открытым исходным кодом в настоящее время поддерживает более 18 миллионов веб-сайтов, и ожидается, что в будущем их число будет расти.
Дополнительное чтение: ознакомьтесь со всем набором шаблонов панели инструментов Bootstrap здесь.
Переиспользуемые JavaScript-коды JS и CSS, доступные в Bootstrap, помогут вам достичь желаемых результатов. Использование Bootstrap с HTML может сбить с толку новичков. Вот подробное пошаговое руководство о том, как это сделать.
Предпосылки
Вам потребуются базовые знания HTML/CSS и JS.
Начало работы
Чтобы включить Bootstrap в HTML, вы можете использовать один из трех следующих способов:
1. Использование Bootstrap CDN
Просто скопируйте ссылку на эту таблицу стилей в свой HTML-файл
JS
Функции JavaScript некоторых компонентов, таких как раскрывающиеся списки, вкладки и т. д., зависят от jQuery и popper.js.
Итак, включите jQuery и popper.js в следующем порядке прямо перед загрузкой файла начальной загрузки JavaScript для правильной работы.
2. Загрузка файлов локально
После загрузки файла вы можете включить файл bootstrap.min.css в . Даже если вы используете загруженный файл начальной загрузки, вы должны включить jquery.min.js и popper.min.js перед загрузкой bootstrap.min.js
3. Использование менеджеров пакетов
Bootstrap можно легко подключить к любому проекту с помощью менеджеров пакетов, таких как npm, yarn и т. д. бутстрап.Введите следующую команду в папку вашего проекта (при условии, что вы инициализировали npm в проекте)
Эта команда загрузит локальную копию файлов начальной загрузки в папку node_modules вашего проекта. Затем вы можете включить файл bootstrap.min.css в файл и bootstrap.min.js в файл . Как упоминалось в методе № 2, вы должны включить jquery.min.js и popper.min.js перед загрузкой bootstrap.min.js.
Использование
Пример HTML-файла после включения bootstrap CSS и js будет выглядеть следующим образом (мы использовали метод CDN в приведенном ниже примере. Вы можете отредактировать атрибут HREF для таблицы стилей и src для javascript, указав правильный путь, если вы выберете любой другой метод ):
После того как вы включили Bootstrap в свой проект любым из вышеперечисленных способов, вы можете легко использовать все компоненты, доступные в bootstrap.
Например, чтобы создать кнопку Bootstrap в основном цвете, вам нужно просто использовать разметку
Используя только эти два класса, вы получите кнопку со всеми подходящими стилями, что сэкономит время на стилизацию HTML-кнопки по умолчанию.
Как и кнопки, Bootstrap имеет множество полезных компонентов, таких как панель навигации, оповещения, значки, раскрывающиеся списки и т. д. Вот как вы можете создать панель навигации с помощью Bootstrap.
Как создать панель навигации с помощью Bootstrap
Хорошо организованную панель навигации можно легко создать с помощью начальной загрузки, добавив следующую разметку HTML:
Этот код создает навигационную панель в следующем стиле, и это также не требует самостоятельного написания кода CSS или JS!
Заключение
Подводя итог, можно сказать, что использование Bootstrap с HTML предлагает бесконечные возможности и варианты при работе над сложным веб-дизайном или проектом разработки. Bootstrap предоставляет вам доступ к широкому спектру основных компонентов пользовательского интерфейса, а также может быть интегрирован в различные проекты.
Посмотрите наш бесплатный учебник по Bootstrap 4, чтобы узнать обо всех возможностях Bootstrap 4! Вы также можете посетить наш веб-сайт, если хотите получить шаблон администратора Bootstrap.
Также ознакомьтесь с нашей коллекцией бесплатных шаблонов начальной загрузки и бесплатных целевых страниц, созданных командой BootstrapDash!
Bootstrap – это популярная CSS-инфраструктура, состоящая из предварительно написанных таблиц стилей и предназначенная для ускорения создания веб-страниц.
Bootstrap – это популярная CSS-инфраструктура, состоящая из предварительно написанных таблиц стилей и предназначенная для ускорения создания веб-страниц.
Зачем это использовать?
Bootstrap предлагает решения распространенных проблем, с которыми сталкиваются веб-разработчики интерфейса. С помощью Bootstrap веб-разработчики могут:
Быстро создавайте сложные макеты веб-сайтов.
Создавайте макеты с помощью сетки из 12 столбцов.
Используйте предварительно написанный JavaScript для динамических функций сайта.
Создавайте макеты для конкретных устройств (настольных компьютеров, планшетов или мобильных устройств).
Создавайте макеты, которые работают в различных веб-браузерах.
Начало работы с Bootstrap
Вот несколько различных способов использования Bootstrap:
Ссылка на CDN
CDN или сети доставки контента — это файлы кода, размещенные в Интернете, которые вы можете включить в свой проект. Использование CDN — это самый быстрый способ настроить Bootstrap.
Найдите CDN для Bootstrap. MaxCDN размещает последнюю версию:
Просто вставьте приведенный выше код в элемент заголовка HTML, и все готово!
Использовать локальную копию Bootstrap
Еще один вариант — загрузить собственную копию Bootstrap и интегрировать ее в структуру вашего проекта.
Шаг 1. Загрузите Bootstrap
Загрузите Bootstrap в виде Zip-файла здесь. Затем откройте файловый менеджер вашего компьютера и найдите bootstrap-3.3.7-dist.zip в папке «Загрузки». Дважды щелкните файл, чтобы разархивировать его.
Шаг 2. Выберите проект
Наш пример проекта — домашняя страница Codebrainery.io. Адаптируйте следующие инструкции для использования в своем собственном проекте или загрузите codebrainery здесь, чтобы следовать им.
codebrainery содержит три файла: index.html, main.css:
Шаг 3. Переместите Bootstrap в папку вашего проекта
Шаг 4. Ссылка на вашу копию Bootstrap
В вашем любимом текстовом редакторе откройте index.html и найдите элемент head. Домашняя страница Codebrainery.io уже ведет на Bootstrap CDN:
Замените атрибут href ссылки, чтобы вместо этого можно было загрузить локально установленный минимизированный Bootstrap CSS:
Позже мы реализуем функции Bootstrap, которые зависят от Bootstrap JavaScript, а также от jQuery, поэтому добавьте их в элемент head прямо сейчас. Добавьте два тега скрипта под тегом ссылки:
Когда использовать Bootstrap
Свяжитесь с Bootstrap, если вам нужна помощь в реализации любого из следующих действий:
