Bootstrap 5 Beta 1 | Блог Bootstrap

7 декабря 2020 г.

В нашей первой бета-версии Bootstrap 5 мы называем ее новыми функциями и критическими изменениями. С этого момента мы только дорабатываем функции, ошибки и документацию на пути к стабильной версии 5. Woohoo!

Как и в случае с процессом разработки v4, наши документы для v5 были временно размещены на субдомене для следующего основного выпуска. С сегодняшнего дня эти документы перемещаются в основной домен, а наш старый домен v5.getbootstrap.com будет перенаправлен.

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

RTL

Наше самое большое дополнение к проекту за многие годы, мы наконец добавили поддержку RTL в Bootstrap! Пожалуйста, присоединитесь ко мне и поблагодарите @ ffoodd — одного из наших новейших участников и автора запроса на перенос RTL. Запрос на вытягивание включает около 50 ссылок на существующие проблемы и PR, которые пытались внедрить эту функцию в наше ядро.

На высоком уровне наш подход RTL включает несколько изменений:

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

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

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

Переименованные классы для логических свойств

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

Большинство из вас уже взаимодействовали с логическими свойствами благодаря нашим гибким утилитам — они заменяют свойства направления, такие как left и right на start и ] конец . Такие вещи, как align-items-end приветствуются. Это делает имена классов горизонтального направления подходящими для LTR и RTL без каких-либо дополнительных накладных расходов.

Например, в контексте LTR вместо .ml-3 для левое поле используйте .ms-3 . Обязательно ознакомьтесь с полным списком переименованных классов и переменных в руководстве по миграции RTL.

Popper.js v2

Мы обновили Popper.js с версии v1.x до версии v2.x, внося с собой небольшие критические изменения в наши всплывающие подсказки и всплывающие окна. Эти два изменения являются причиной того, что мы не смогли выполнить обновление до версии 2.x раньше.

• Удалена опция смещения из наших плагинов Tooltip / Popover и Dropdown; это все еще может быть достигнуто с помощью параметра popperConfig .
• Вариант fallbackPlacement стал fallbackPlacements .

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

Атрибуты данных в пространстве имен

Мы переименовали все наши атрибуты данных чтобы включить bs в качестве инфикса, тем самым присвоив всем атрибутам HTML, которые обеспечивают поведение JavaScript из наших плагинов, пространство имен. Подробнее см. # 31827. Это помогает четко идентифицировать триггеры JavaScript, необходимые для Bootstrap, в ваших проектах.

Внесение этого изменения немного утомляет, но достаточно легко исправить, найдя и заменив. Новые атрибуты работают так же, как и старые, только немного конкретнее. Например, вот выпадающая кнопка и меню с недавно переименованным атрибутом data-bs-toggle .

   <div   class =   "выпадающий список"  > 
   <button   class =   «btn btn-secondary dropdown-toggle»   type =   «button»   id =   "dropdownMenuButton"   data-bs-toggle =   "dropdown"   aria-extended =   » false " > 
    Выпадающая кнопка
    
   <ul   class =   "раскрывающееся меню"   aria-labelledby =   "dropdownMenuButton"  > 
     
 <a   class =   "dropdown-item"   href =   "#"   >  Действие   
 
     
 <a   class =   "dropdown-item"   href =   "#"   >  Другое действие   
 
     
 <a   class =   "раскрывающийся список"   href =   "#"   >  Здесь что-то еще