Все Bootstrap 5, сколько вы еще используете?

Bootstrap

Наконец-то вышла долгожданная альфа-версия Bootstrap 5! Самое большое изменение этоBootstrap больше не использует jQuery и больше не поддерживает IE.. Примечание. Дело не в том, что jQuery не поддерживается, он больше не зависит! v5 будет больше ориентирован на будущее, хотя будущее есть будущее. В Bootstrap 5 появятся долгожданные переменные CSS, более быстрый JavaScript, меньше зависимостей и улучшенные API.

Улучшения логотипа

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

jQuery и JavaScript

Великолепный jQuery упрощает использование сложного и постоянно меняющегося JavaScript, позволяет большему количеству людей участвовать в программировании внешнего интерфейса и предоставляет множество плагинов для экосистемы Bootstrap. Но с быстрым развитием средств разработки интерфейса и браузеров v5 может отказаться от зависимости от jQuery. Это самое большое изменение в Bootstrap за многие годы, и это означает, что проекты, созданные на Bootstrap 5, имеют меньшие размеры файлов и более быструю загрузку страниц.Все изменения в JS можно найти здесь.

Пользовательские свойства CSS

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

.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};
}

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

Улучшения пользовательской документации

v5 проделал большую работу над документацией: больше пояснений, устранение неясностей, больше поддержки расширений.Все начинается с этого совершенно нового раздела. С точки зрения пользовательских тем, v5 еще больше конкретизирует и даже предоставляетПервоначальный проект для npmТак быстрее и проще начать работу, а также удобно разветвить это как репозиторий шаблонов на GitHub.

v5 также расширяет цветовую палитру, а встроенная расширенная цветовая система упрощает определение внешнего вида вашего приложения, особенно улучшение контрастных цветов, и даже предоставляет метрики для контрастных цветов на странице документации по цветам.

Улучшения формы

v5 всесторонне сортирует документы формы и компоненты формы, интегрирует все стили формы и создает новый раздел формы (включая компоненты группы ввода). Все элементы управления формой были переработаны с введением набора элементов управления формы в v4 - чеки, радио, переключатели, файлы и другие - но это просто расширение для элементов управления формы браузера по умолчанию. Теперь элементы управления формой были полностью переопределены в v5,Унифицировать внешний вид элемента управления формой по умолчанию в различных браузерах..

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

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

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

Utilities API

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

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);

Усовершенствованная система сетки

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

  • Введите новую иерархию Grid:xxl
  • .gutterзаменить.g*, для получения дополнительной информации о желобе см.Версия 5. Индивидуальный bootstrap.com/docs/5.0/pull…
  • Макет формы использует новую систему сетки.
  • Добавлен интервал по вертикалиclass
  • Столбцы больше не используются по умолчаниюposition: relative

Какие еще детали макета были переработаны и построены, см.Версия 5. Индивидуальный bootstrap.com/docs/5.0/pull…

Документация

Инструмент генерации документации для v5 был заменен на Jekyll с Hugo.gohugo.io/

TODO: RTL, offcanvas и многое другое

  • Макет RTL будет полностью решен официальным
  • заявлениеoffcanvasменюGitHub.com/TaiwanNot/boots T…
  • Оценка: модульная система Sass, добавление пользовательских свойств CSS, встраивание SVG в HTML (вместо CSS)...

Начать сейчас!

окунуться вv5.getbootstrap.com/Иди исследовать! Или, если вам всегда любопытно и нравится «сражаться как тигр», вы можете сделать:npm i bootstrap@next

Что, не могу научиться?

Категории