Краткая история, описание и руководство по интеграции среды проектирования Bootstrap в ваше приложение.

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

История Bootstrap

Bootstrap впервые появился в мире как «Twitter Blueprint», разработанный Марком Отто и Джейкобом Торнтоном в (как вы уже догадались) в Twitter, в надежде, что этот фреймворк поможет стандартизировать практики фронтенд-разработки приложений среди разработчиков приложений. До того, как он появился, существовало множество различных библиотек с несовместимыми стандартами использования, что, в свою очередь, приводило к несоответствиям во взаимодействии и совместимости приложений.

После того, как многие разработчики в Твиттере начали сотрудничать и вносить свой вклад в проект, в 2011 году они оба выпустили его как бесплатную программу с открытым исходным кодом. Она по-прежнему поддерживается двумя ее создателями, и многие вносят свой вклад через GitHub с Bootstraps 2, 3 и 4 выйдут в ближайшие три года соответственно, а Bootstrap 5 - в 2021 году.

Что он делает для вашего приложения

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

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

Фрагменты

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

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

Реализация

  1. Загрузите Bootstrap здесь и нажмите кнопку Загрузить Bootstrap. Затем извлеките содержимое из zip-файла.
  2. Установите Bootstrap с помощью одной из следующих команд, подходящих для вашего приложения:
  • Node.js с пакетом npm
npm install bootstrap
  • Node.js с пряжей
yarn add bootstrap
  • Приложения Ruby с установкой Bundler или gem
gem 'bootstrap', '~> 5.0.1' 
//OR
gem install bootstrap -v 5.0.1

3. Создайте файл HTML в файле проекта, назовите его «index.html» и скопируйте содержимое ранее заархивированного файла в файл index.html.

4. Загрузите Bootstrap в свой проект, используя следующий код:

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

В конечном итоге ваш html-файл должен выглядеть примерно так:

<!DOCTYPE html>
  <html lang="en">
  <head>
     
    <title>Bootstrap Tutorial Sample Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-         scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  </head>
  <body>
    <script src="jquery-3.5.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
  </html>

Теперь вы можете начать возиться с различными фрагментами и элементами и создать свой веб-проект с помощью Bootstrap!

Дальнейшее чтение



Учебник по Bootstrap - Как настроить и использовать Bootstrap (для начинающих)
Bootstrap, который является темой этого руководства, представляет собой интерфейсный фреймворк, который помогает создавать адаптивные мобильные устройства. … websitesetup.org





Bootstrap
Быстро создавайте и настраивайте адаптивные сайты, ориентированные на мобильные устройства, с помощью Bootstrap, самого популярного в мире открытого внешнего интерфейса… getbootstrap.com





Bootstrap 3 или Bootstrap 4
Хорошо организованные и простые для понимания руководства по созданию веб-сайтов с множеством примеров использования HTML, CSS, JavaScript… www.w3schools .com





Что такое Bootstrap? Краткое руководство по Bootstrap: что, почему и как?
К настоящему времени Bootstrap является постоянным элементом в мире интерфейсной разработки и дизайна. Это простой и мощный… www.toptal.com