В 2011 году Twitter представил фреймворк Bootstrap. С тех пор эта CSS-инфраструктура претерпела две основные переделки, последняя из которых (Bootstrap 3) была выпущена в 2013 году. Bootstrap 3 преобразовал библиотеку CSS, реализовав подход, ориентированный на мобильные устройства, который сделал фреймворк полностью адаптивным.
По состоянию на 2022 год Bootstrap имеет пятую версию и является одним из самых популярных интерфейсных фреймворков. Он имеет обширный список готовых компонентов и впечатляющую коллекцию плагинов JavaScript. В этой статье вы узнаете, как использовать Bootstrap и максимально использовать его возможности.
Установка Bootstrap в ваш проект
Есть три способа используйте Bootstrap в своем проекте. Вы можете загрузить и разместить файлы CSS и JavaScript, установить их в свой проект с помощью npm или скопировать и вставить соответствующие ссылки cdn в свой проект.
При подходе cdn вам нужно не забыть разместить ссылку Bootstrap перед любой другой ссылкой CSS в теге заголовка вашего HTML-файла.
Некоторые компоненты Bootstrap имеют функциональные действия, такие как переключение и позиционирование кнопок, для которых требуется импорт JavaScript и скрипта Popper. Итак, если вы собираетесь использовать какие-либо функциональные компоненты, вам также необходимо добавить тег скрипта в свой HTML-файл.
Последнее, что вам нужно, чтобы начать использовать Bootstrap, — это окно просмотра ярлык.
Поскольку Bootstrap является мобильной технологией, окно просмотра ярлык поможет в адаптивном дизайне. Простой способ использовать bootstrap в вашем проекте — просто скопировать Стартовый шаблон Bootstrap.
Создание веб-сайта с помощью Bootstrap
Когда вы создаете новый веб-сайт, первое, что вам нужно учитывать, — это макет. После этого вы можете перейти к другим компонентам, таким как кнопки и типографика.
Bootstrap имеет набор структурных компонентов, которые можно использовать для организации элементов на веб-странице. Эти структуры макета включают в себя:
- Контейнеры
- Сетка
- Столбцы
- Желоба
- Контрольные точки
Используя слегка измененную версию начального шаблона Bootstrap, вы можете начать обрисовывать структуру своей веб-страницы и добавлять новые компоненты.
Файл index.html
Обязательные метатегиНачальный CSS
Начальная загрузка
Отдельный Popper и Bootstrap JS
Класс контейнера Bootstrap
Начальная загрузка контейнер class pads, содержит и выравнивает элементы на вашей веб-странице. Если вы планируете использовать Bootstrap сетка по умолчанию, то вам также нужно будет использовать Bootstrap контейнер сорт. Есть три типа контейнер классы; контейнер, емкость-жидкость, а также контейнер-{точка останова}. Класс контейнера является контейнером по умолчанию; он отзывчив и имеет фиксированную ширину в каждой из шести контрольных точек Bootstrap.
Шесть контрольных точек Bootstrap по умолчанию включают в себя:
- Очень маленький: Менее 576 пикселей.
- Небольшой: Больше или равно 576px.
- Середина: Больше или равно 768px.
- Большой: Больше или равно 992px.
- X-большой: Больше или равно 1200px.
- ХХ-большой: Больше или равно 1400px.
Чтобы использовать Bootstrap контейнер в своем проекте можно просто добавить нужный класс контейнера во внешний див на вашей веб-странице.
Использование контейнера Bootstrap
разместить здесь элементы сайта Вставка приведенного выше кода в тело вашего существующего HTML-файла сделает вашу веб-страницу отзывчивой, а также создаст отступы с каждой стороны вашей веб-страницы.
Сеточная система Bootstrap
В сетке Bootstrap используется система из двенадцати столбцов, основанная на ряд а также колонка классы сетки, а также класс контейнера. Каждая строка состоит из двенадцати столбцов, и любой элемент может охватывать один или несколько из этих столбцов. Класс столбца будет указывать, сколько столбцов должен занимать элемент. Например, элемент, использующий столбец-2 класс будет охватывать два столбца, элемент, использующий столбец-3 класс будет охватывать три столбца и так далее.
Система сетки Bootstrap основана на модуле flexbox. Если только две колонки занимают строку, они будут делить пространство поровну между собой. То желоб class является одним из структурных элементов Bootstrap и управляет расстоянием между каждым столбцом в система сетки. Каждый сетка столбец имеет 12 пикселей отступа с обеих сторон.
Использование сетки Bootstrap
основной контент на веб-странице
Статья
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo Laboriosam a, voluptate molestias eum velit, Differentio Impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Вставка приведенного выше кода в контейнер div создаст сетку Bootstrap из трех строк и двух столбцов. Первая строка вверху будет содержать панель навигации, третья строка внизу будет содержать нижний колонтитул веб-сайта, а вторая строка посередине будет содержать содержимое веб-страницы. Во второй строке есть две колонки — основная статья и отступления.
Создание локального файла CSS и добавление границы к каждому разделу сетки позволит вам увидеть его более четко.
Файл style.css
.ряд{
граница: 2px синяя сплошная;
}
.col, .col-sm-4{
граница: 2px красная сплошная;
}
Ссылка на файл CSS выше создаст следующий вывод в вашем браузере:
Очевидным отличием изображения выше является размер столбцов. Обычно два (или более) столбца в строке занимают одинаковое пространство, если вы явно не указали иное. То кол-см-4 class в приведенном выше HTML-коде гарантирует, что второй столбец охватывает только четыре из двенадцати столбцов в строке. То см в кол-см-4 class представляет маленькую точку останова, поэтому раздел aside будет занимать только четыре столбца от маленькой точки останова и выше.
Компоненты начальной загрузки
После того, как вы определились с макетом своей веб-страницы, следующим шагом будет добавление элементов построения веб-сайта, которые Bootstrap называет компонентами. В список компонентов Bootstrap входят:
- Навбар
- Кнопки
- Группа кнопок
- Группа списка
- Карты
- Крах
- Выпадающие списки
Класс Bootstrap Navbar
Для каждой панели навигации Bootstrap требуется панель навигации сорт. Они также требуют использования или назначение ключевого слова «навигация» в Bootstrap роль атрибут в родительском элементе навигации див. Чтобы сделать панель навигации отзывчивой, вам нужно использовать свернуть плагин JavaScript.
Начальная загрузка панель навигации класс использует ария-ток атрибут, который принимает значение «page», чтобы указать текущую страницу, или «true», чтобы указать текущий раздел веб-страницы. Назначаемое вами значение будет зависеть от структуры вашего веб-сайта (одна страница или несколько страниц). Вы также должны использовать активный класс для указания текущей страницы или раздела.
Использование панели навигации Bootstrap
Замена навигации ряд бутстрапа сетка с приведенным выше кодом создаст следующий вывод в вашем браузере:
В приведенном выше коде есть несколько других важных классов и атрибутов Bootstrap, таких как navbar-бренд класс, который нацелен на раздел логотипа вашего панель навигации. То панель навигации также полностью отзывчив благодаря свернуть плагин JavaScript.
Адаптивная навигация
Возможно, вы помните, что в Bootstrap по умолчанию есть шесть контрольные точки и одна из этих точек останова большая (lg). То navbar-развернуть-lg класс в выше расширяется в горизонтальный список элементов навигации в большой точке останова и выше, и этот список возвращается к кнопке в любой точке останова ниже большой.
Если вы хотите узнать больше о создании адаптивных веб-сайтов, мы подготовили статью с описанием как это сделать с помощью медиа-запросов в HTML и CSS.
Компонент кнопки начальной загрузки
Начальная загрузка кнопка компонент использует и требует, чтобы вы установили тип атрибут «кнопка».
Bootstrap имеет несколько типов кнопок. Чтобы создать более обычную кнопку, вы должны использовать бтн класс, но для создания кнопки-гамбургера, как в приведенном выше коде, вы должны использовать навигационная панель-переключить сорт.
Когда следует использовать Bootstrap?
Bootstrap известен как один из самых популярных фреймворков CSS, потому что он является первопроходцем. Задолго до того, как адаптивный дизайн стал настолько обычным явлением в разработке программного обеспечения, Bootstrap превратился в полностью адаптивный фреймворк.
На протяжении многих лет Bootstrap продолжал развиваться и совершенствоваться, что сделало его выбором номер один для ведущих компаний, таких как Twitter и Spotify. Однако это не всегда будет лучшим вариантом для ваших потребностей в разработке программного обеспечения. Например, если вы создаете приложение React, существует система дизайна под названием MUI, настроенная для приложений React.
Material-UI имеет новое название и направлен на создание новой системы дизайна, альтернативной Material Design. Вот как вы можете использовать MUI в проектах ReactJS.
Читать далее
- Программирование
- Твиттер
- Советы по кодированию
- Программирование
- Инструменты программирования
Кадейша Кин (Kadeisha Kean) — разработчик программного обеспечения полного стека и технический/технологический писатель. У нее есть явная способность упрощать некоторые из самых сложных технологических концепций; производство материала, который может быть легко понят любым новичком в технологии. Она увлечена писательством, разработкой интересного программного обеспечения и путешествиями по миру (с помощью документальных фильмов).
Подписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
Нажмите здесь, чтобы подписаться
