Bootstrap5 Руководство

Bootstrap 教程

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

Bootstrap5 в настоящее время является последней версией Bootstrap — открытого набора инструментов для разработки на HTML, CSS и JS. Он поддерживает переменные и миксины Sass, адаптивную сеточную систему, множество готовых компонентов и мощные плагины JavaScript, помогая вам быстро проектировать и настраивать адаптивные сайты, ориентированные на мобильные устройства.

Для кого этот урок?

Если у вас есть базовые знания HTML и CSS, вы можете прочитать этот учебник и разработать собственный веб-сайт. После завершения этого учебника вы достигнете среднего уровня использования Bootstrap для разработки веб-проектов.

Знания, которые вам нужны перед чтением этого руководства:

Прежде чем начать читать этот учебник, вы должны обладать базовыми знаниями HTML, CSS и JavaScript. Если вы ещё не знакомы с этими концепциями, мы рекомендуем сначала прочитать следующие учебники:

Почему стоит использовать Bootstrap

  • Легко начать:Любой, кто имеет базовое понимание HTML и CSS, может очень быстро начать использовать Bootstrap.

  • Адаптивный дизайн:Bootstrap может подстраиваться под разные платформы (мобильные телефоны, планшеты и настольные компьютеры).

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

  • Совместимость с браузерами:Bootstrap5 совместим со всеми основными браузерами (Chrome, Firefox, Edge, Safari и Opera). Если вам нужна поддержка IE11 и более ранних версий, используйте Bootstrap4 или Bootstrap3.

Примеры Bootstrap5

Ниже приведён простой пример Bootstrap5:

Примеры Bootstrap5

<div class="container-fluid p-5 bg-primary text-white text-center"> <h1>Моя первая страница Bootstrap</h1> <p>Это адаптивная страница. Измените размер браузера, чтобы увидеть эффект!</p> </div> <div class="container mt-5"> <div class="row"> <div class="col-sm-4"> <h3>Первый столбец</h3> <p>Пример</p> <p>То, что мы изучаем, — не только технологии, но и мечты!!!</p> </div> <div class="col-sm-4"> <h3>Вторая колонка</h3> <p>Пример</p> <p>То, что мы изучаем, — не только технологии, но и мечты!!!</p> </div> <div class="col-sm-4"> <h3>Третий столбец</h3> <p>Пример</p> <p>То, что мы изучаем, — не только технологии, но и мечты!!!</p> </div> </div> </div>

Попробуйте сами »

Bootstrap5 против Bootstrap 3 & 4

Bootstrap5 — это последняя версия Bootstrap, в которой используются новые компоненты, более быстрые таблицы стилей и более быстрая адаптивность.

Bootstrap5 поддерживает все основные последние стабильные версии браузеров, но не поддерживает Internet Explorer 11 и ниже.

Основное различие между Bootstrap5 и Bootstrap 3 & 4 заключается в том, что Bootstrap5 больше не зависит от jQuery и использует нативныйJavaScript. Конечно, если мы хотим его использовать, мы также можем его подключить.jQuery。

Bootstrap5 не поддерживает браузеры ниже IE11; Bootstrap4 отказался от поддержки IE8 и iOS 6. Если вам нужна совместимость со старыми браузерами, используйтеBootstrap3。

Примечание:Официальная команда всё ещё поддерживает Bootstrap 3 и Bootstrap 4, поэтому мы можем продолжать их использовать; однако в Bootstrap 3 & 4 не будут добавлены новые функции.

Другие расширения