Как создать сайт на Bootstrap с нуля: пошаговое руководство

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

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

С помощью нашего руководства вы научитесь создавать сайты с нуля, используя Bootstrap, и улучшите свои навыки в веб-разработке и дизайне. Интересно? Тогда давайте начинать!

Что такое Bootstrap

Bootstrap – это фреймворк для создания веб-сайтов и приложений, который базируется на языках HTML, CSS и JavaScript. Он предлагает набор инструментов для упрощения верстки, кастомизации и создания адаптивных сайтов.

Основными преимуществами Bootstrap являются:

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

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

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

Шаг 1. Подготовка к работе

Для создания сайта на Bootstrap необходимо иметь базовые знания HTML и CSS. Также рекомендуется ознакомиться с основами JavaScript, чтобы было проще работать с JavaScript-компонентами фреймворка.

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

Одним из главных преимуществ Bootstrap является мобильность и адаптивность. Для корректного отображения контента на разных устройствах используются сетки (grids) и резиновость (fluid grids). Это позволяет обеспечить качественную верстку и типографику на любых экранах.

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

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

Установка необходимых программ

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

• Bootstrap Framework – сам фреймворк, который включает в себя основу для мобильных устройств и настольных компьютеров;
• Код-редактор – приложение для написания кода, такое как Atom, Sublime Text, или Visual Studio Code;
• Браузер – для проверки верстки на разных устройствах и экранах;

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

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

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

Создание папок и файлов проекта

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

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

В эту папку необходимо создать следующие подпапки:

• css — папка, в которую будут сохраняться все файлы стилей, отвечающие за оформление страницы, шрифты и темы.
• js — папка, где будут храниться файлы скриптов, отвечающие за мобильность и адаптивность сайта.
• img — папка, в которой будут сохраняться все изображения, используемые на сайте.
• fonts — папка, в которой будут сохраняться все шрифты, используемые на сайте.
• templates — папка, в которую будут сохраняться файлы HTML-шаблонов сайта.
• docs — папка, где хранятся документы, связанные с проектом, например, техническое задание и т.д.

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

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

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

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

Шаг 2. Работа с HTML структурой

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

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

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

Шаблонизация и создание адаптивной структуры HTML кода позволяет создавать проекты любой сложности и мобильности, а кастомизация – сделать сайт более выразительным и уникальным.

Используя правильную структуру HTML с использованием bootstrap классов и элементов, создание уникального и адаптивного дизайна сайта станет легким и увлекательным процессом.

Добавление контейнера

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

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

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

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

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

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

Создание шапки сайта

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

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

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

Типографика — еще один важный элемент шапки сайта. Bootstrap предоставляет классы для установки размера и стиля шрифта, а также цвета фона и текста.

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

Создание основных блоков сайта

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

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

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

С помощью тегов ul, ol и li можно создавать списки и навигационные панели. Также можно изображать таблицы с помощью тега table, применяя прописанные в Bootstrap стили для них.

Шаг 3. Работа со стилями

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

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

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

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

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

Важно не забывать о принципе «Mobile first», чтобы контент корректно отображался на мобильных устройствах и на более крупных экранах не было проблем с масштабированием.

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

• Определите сетку и настройте размеры контента
• Настраивайте типографику и цвета в соответствии с вашим дизайном
• Настройте адаптивность для мобильных устройств и следуйте принципу «Mobile first»
• Добавьте анимации и эффекты, чтобы сделать ваш сайт более интерактивным

Добавление стилей Bootstrap

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

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

При добавлении стилей Bootstrap необходимо ознакомиться с документацией фреймворка. Например, для добавления классов сетки используются соответствующие классы .col-* и/или .row.

• .col-* — определяют количество колонок, занимаемых элементом в зависимости от размера экрана
• .row — определяет строку, содержащую колонки-элементы

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

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

Работа со стилями основных блоков сайта

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

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

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

Стоит отметить, что свойства CSS, связанные с размерами и внешним видом элементов, имеют различные значения для разных устройств. Так, классы col-* определяют ширину элементов для различных размеров экранов, а классы text-* используются для выбора соответствующих размеров шрифта.

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

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

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

Создание адаптивного дизайна

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

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

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

Шаблонизация также помогает в создании адаптивного дизайна. Использование одного HTML-шаблона для всех устройств может сократить время верстки и уменьшить объем CSS-кода. С помощью медиа-запросов, можно изменять отображение элементов на странице для разных устройств.

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

Шаг 4. Работа с контентом

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

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

Важно учитывать типографику и подбирать соответствующие шрифты, размеры, цвета и промежутки в тексте. Также полезно использовать списки, чтобы облегчить чтение контента. Используй список с точками — <ul>, если пункты имеют неупорядоченный характер. А если нужен порядок — используй <ol>.

Не забывай про графические элементы: картинки, таблицы и другие объекты, которые могут сделать контент более понятным и привлекательным. Скорее всего, придется использовать различные приемы для их адаптивности и резиновости на разных устройствах, но с bootstrap это реализуется довольно просто.

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

Добавление текста и изображений

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

Типографика

Bootstrap предоставляет широкие возможности для кастомизации шрифтов и размеров текста. Для этого используются классы font-weight, font-italic и многие другие. Важно при этом следить за соответствием шрифтов всем структурным элементам страницы.

Добавление изображений

Bootstrap также предоставляет универсальные способы для добавления изображений на сайт. Для этого используются классы img-responsive и img-rounded, которые позволяют добавлять адаптивность и скругление углов изображений.

Шаблонизация

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

Кастомизация дизайна

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

Списки

Для удобства пользователей Bootstrap предлагает использовать различные типы списков — нумерованный (ol) и маркированный (ul). Списки можно настраивать в соответствии с нуждами сайта.

Таблицы

Bootstrap позволяет создавать красивые и удобные таблицы на сайте. Для этого используются классы table, table-striped и др. Строки и столбцы таблиц могут быть адаптивными, а также иметь заголовки.

Добавление формы обратной связи

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

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

Типографика контактной формы также имеет значение: текст должен быть читаемым и привлекательным. Bootstrap позволяет настраивать стили текста и добавлять значки.

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

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

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

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

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

Шаг 5. Размещение сайта на хостинге

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

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

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

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

Подготовка файлов для размещения на сервере

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

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

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

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

Размещение сайта на сервере

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

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

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

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

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

FAQ

Какие основные принципы нужно знать для создания сайта на bootstrap?

Перед началом работы с bootstrap необходимо знать основы HTML, CSS и JavaScript. Также необходимо изучить основные компоненты bootstrap, такие как контейнеры, сетка, формы, кнопки, иконки и другие. Также необходимо понимать принципы адаптивного дизайна и уметь использовать медиа-запросы.

Как создать меню на bootstrap?

Для создания меню на bootstrap необходимо использовать компонент Navbar. Пример кода: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav>

Как создать сетку на bootstrap?

Для создания сетки на bootstrap используется классы row и col. Пример кода: <div class="container"> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row"> <div class="col">1 of 3</div> <div class="col">2 of 3</div> <div class="col">3 of 3</div> </div> </div>

Как создать модальное окно на bootstrap?

Для создания модального окна на bootstrap необходимо использовать компонент Modal. Пример кода: <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

Как добавить иконки на bootstrap?

Для добавления иконок на bootstrap необходимо использовать компонент Icon. Пример кода: <!-- Include icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Add icon --> <i class="fa fa-car"></i>