bootstrap 5

Von wmfact, 27 August, 2021

Die Version 5.x ist die neueste von Bootstrap, dem HTML-, CSS- und JavaScript-Framework zum Erstellen reaktionsschneller, mobiler Websites.
Die Erstveröffentlichung v5.0.0 erschien am 5. Mai 2021; die aktuelle Version: 5.1.3 (9. Oktober 2021)

Der Hauptunterschied zu Bootstrap 3 & 4 dürfte sein, dass die Version 5 die Abhängigkeit von jQuery zugunsten von Vanilla-JavaScript entfernt hat.
Weitere Änderungen in Stichworten:
ältere Browser werden nicht mehr unterstützt - benutzerdefinierte CSS-Eigenschaften möglich - erweiterte Farbpalette - benutzerdefinierte Formularsteuerelemente - neue Dienstprogramm-API - verbessertes Gittersystem - neue Offcanvas-Komponente und Navbar Offcanvas - neues Akkordeon - Floating Labels in Formulareingaben - Platzhalterkomponente.

Details:

  • nicht mehr unterstützte Browser:
    • Internet Explorer 10 und 11
    • veraltete Microsoft Edge-Legacy
    • Firefox < 60
    • Safari < 10
    • iOS Safari < 10
    • Chrome < 60
    • Android < 6
  • jQuery
    • wird nicht mehr benötigt
      (Entwickler müssen nicht mehr die gesamte riesige Bibliothek herunterladen, um Dinge in JS zu tun.)
  • breakpoints
    • neu: extra extra large (xxl)
      Haltepunkte   class-infix dimensions
      x-small   none 0-576px
      smal   sm ≥576px
      medium   md ≥768px
      large   lg ≥992px
      extra large   xl ≥1200px
      extra extra large   xxl ≥1400px
  • notes / klassenänderungen B4 -> B5
    • ml-* => ms-*
    • pl-* => ps-*
    • mr-* => me-*
    • pr-* => pe-*
    • no-gutters => g-0
    • text-left => text-start
    • text-right => text-end
    • float-left => float-start
    • float-right => float-end
    • border-left => border-start
    • border-right => border-end
    • rounded-left => rounded-start
    • rounded-right => rounded-end
    • dropleft => dropstart
    • dropright => dropend
    • dropdown-menu-*-left => dropdown-menu-*-start
    • dropdown-menu-*-right => dropdown-menu-*-end
    • carousel-item-left => carousel-item-start
    • carousel-item-right => carousel-item-end
    • font-weight-* => fw-*
  • news
    • neue Offcanvas-Komponente
    • neue Akkordeon-Komponente