გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
Check
in English

მიგრაცია v5-ზე

თვალყური ადევნეთ და გადახედეთ ცვლილებებს Bootstrap-ის წყაროს ფაილებში, დოკუმენტაციასა და კომპონენტებში, რათა დაგეხმაროთ გადაიტანოთ v4-დან v5-ზე.

ამ გვერდზე

v5.2.0

განახლებული დიზაინი

Bootstrap v5.2.0 შეიცავს დიზაინის დახვეწილ განახლებას რამდენიმე კომპონენტისა და თვისებისთვის მთელი პროექტისთვის, განსაკუთრებით border-radiusღილაკების დახვეწილი მნიშვნელობებისა და ფორმის კონტროლის მეშვეობით . ჩვენი დოკუმენტაცია ასევე განახლდა ახალი საწყისი გვერდით, დოკუმენტების უფრო მარტივი განლაგებით, რომელიც აღარ არღვევს გვერდითი ზოლის ნაწილებს და Bootstrap ხატულების უფრო თვალსაჩინო მაგალითებს .

მეტი CSS ცვლადი

ჩვენ განვაახლეთ ყველა ჩვენი კომპონენტი CSS ცვლადების გამოსაყენებლად. მიუხედავად იმისა, რომ Sass ჯერ კიდევ ყველაფერს ემყარება, თითოეული კომპონენტი განახლებულია, რათა შეიცავდეს CSS ცვლადებს კომპონენტთა საბაზისო კლასებზე (მაგ., .btn), რაც საშუალებას იძლევა უფრო რეალურ დროში Bootstrap-ის პერსონალიზაცია. მომდევნო გამოშვებებში ჩვენ გავაგრძელებთ CSS ცვლადების გამოყენებას ჩვენს განლაგებაში, ფორმებში, დამხმარეებსა და კომუნალურ პროგრამებში. წაიკითხეთ მეტი CSS ცვლადების შესახებ თითოეულ კომპონენტში მათ შესაბამის დოკუმენტაციის გვერდებზე.

ჩვენი CSS ცვლადის გამოყენება გარკვეულწილად არასრული იქნება Bootstrap 6-მდე. მიუხედავად იმისა, რომ ჩვენ გვსურს სრულად განვახორციელოთ ისინი მთელს დაფაზე, ისინი ემუქრებათ ცვლილებების გამოწვევის რისკს. მაგალითად, $alert-border-width: var(--bs-border-width)ჩვენს საწყის კოდში დაყენება არღვევს პოტენციურ Sass-ს თქვენს კოდში, თუ ამას $alert-border-width * 2რაიმე მიზეზით აკეთებდით.

როგორც ასეთი, სადაც ეს შესაძლებელია, ჩვენ გავაგრძელებთ უფრო მეტი CSS ცვლადისკენ სწრაფვას, მაგრამ გთხოვთ გაითვალისწინოთ, რომ ჩვენი განხორციელება შეიძლება ოდნავ შეზღუდული იყოს v5-ში.

ახალი_maps.scss

Bootstrap v5.2.0-მა გააცნო ახალი Sass ფაილი _maps.scss. ის ამოიღებს Sass-ის რამდენიმე რუქას _variables.scssპრობლემის გადასაჭრელად, როდესაც ორიგინალური რუქის განახლებები არ იყო გამოყენებული მეორად რუქებზე, რომლებიც აფართოებენ მათ. მაგალითად, განახლებები $theme-colorsარ ხდებოდა სხვა თემების რუკებზე, რომლებიც ეყრდნობოდა $theme-colors, რაც არღვევს ძირითადი პერსონალიზაციის სამუშაო პროცესებს. მოკლედ, Sass-ს აქვს შეზღუდვა, როდესაც ნაგულისხმევი ცვლადი ან რუკა გამოყენებული იქნება, მისი განახლება შეუძლებელია. მსგავსი ნაკლოვანებაა CSS ცვლადებთან დაკავშირებით, როდესაც ისინი გამოიყენება სხვა CSS ცვლადების შესაქმნელად.

ამიტომაა, რომ Bootstrap-ში ცვლადის პერსონალიზაცია უნდა მოხდეს შემდეგ @import "functions", მაგრამ მანამდე @import "variables"და ჩვენი იმპორტის დასტაზე დარჩენილი. იგივე ეხება Sass-ის რუკებს - თქვენ უნდა გადალახოთ ნაგულისხმევი პარამეტრები, სანამ ისინი გამოიყენებენ. შემდეგი რუკები გადატანილია ახალში _maps.scss:

  • $theme-colors-rgb
  • $utilities-colors
  • $utilities-text
  • $utilities-text-colors
  • $utilities-bg
  • $utilities-bg-colors
  • $negative-spacers
  • $gutters

თქვენი მორგებული Bootstrap CSS კონსტრუქციები ახლა ასე უნდა გამოიყურებოდეს ცალკე რუკების იმპორტით.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

ახალი კომუნალური

დამატებითი ცვლილებები

  • გააცნო ახალი $enable-container-classesვარიანტი. — ახლა ექსპერიმენტული CSS Grid განლაგების მიღებისას, .container-*კლასები კვლავ შედგენილი იქნება, თუ ეს პარამეტრი არ არის დაყენებული false. კონტეინერები ასევე ახლა ინარჩუნებენ წყალსადენის ღირებულებებს.

  • Offcanvas კომპონენტს ახლა აქვს საპასუხო ვარიაციები . ორიგინალური .offcanvasკლასი უცვლელი რჩება - ის მალავს შინაარსს ყველა ხედის პორტში. საპასუხო რომ იყოს, შეცვალეთ ეს .offcanvasკლასი ნებისმიერ .offcanvas-{sm|md|lg|xl|xxl}კლასში.

  • მაგიდის უფრო სქელი გამყოფები ახლა ჩართულია. — ჩვენ ამოვიღეთ უფრო სქელი და ძნელად გადასაფარებელი საზღვრები ცხრილების ჯგუფებს შორის და გადავიტანეთ არასავალდებულო კლასში, რომლის გამოყენებაც შეგიძლიათ, .table-group-divider. იხილეთ ცხრილის დოკუმენტები მაგალითისთვის.

  • Scrollspy ხელახლა დაიწერა Intersection Observer API-ის გამოსაყენებლად , რაც ნიშნავს, რომ აღარ გჭირდებათ მშობლის შედარებითი შეფუთვა,offsetკონფიგურაციის გაუქმება და სხვა. მოძებნეთ თქვენი Scrollspy განხორციელებები, რომ იყოს უფრო ზუსტი და თანმიმდევრული მათი ნავიგაციის ხაზგასმით.

  • Popovers და tooltips ახლა იყენებენ CSS ცვლადებს. ზოგიერთი CSS ცვლადი განახლდა მათი Sass კოლეგებისგან, რათა შემცირდეს ცვლადების რაოდენობა. შედეგად, სამი ცვლადი მოძველდა ამ გამოშვებაში: $popover-arrow-color, $popover-arrow-outer-colorდა $tooltip-arrow-color.

  • დაემატა ახალი .text-bg-{color}დამხმარეები. იმის ნაცვლად, რომ დააყენოთ ინდივიდუალური .text-*და .bg-*კომუნალური, ახლა შეგიძლიათ გამოიყენოთ დამხმარეები.text-bg-*background-color კონტრასტული წინა პლანზე დასაყენებლადcolor .

  • დამატებულია .form-check-reverseმოდიფიკატორი ეტიკეტების და მასთან დაკავშირებული მოსანიშნი ველების/რადიოების თანმიმდევრობის დასაბრუნებლად.

  • დამატებულია ზოლიანი სვეტების მხარდაჭერა ცხრილებისთვის ახალი .table-striped-columnsკლასის საშუალებით.

ცვლილებების სრული სიისთვის იხილეთ v5.2.0 პროექტი GitHub-ზე .

v5.1.0

  • დამატებულია ექსპერიმენტული მხარდაჭერა CSS Grid განლაგებისთვის . — ეს სამუშაო მიმდინარეობს და ჯერ არ არის მზად საწარმოო გამოყენებისთვის, მაგრამ თქვენ შეგიძლიათ აირჩიოთ ახალი ფუნქცია Sass-ის საშუალებით. მის გასააქტიურებლად, გამორთეთ ნაგულისხმევი ბადე დაყენებით $enable-grid-classes: falseდა ჩართეთ CSS Grid დაყენებით $enable-cssgrid: true.

  • განახლებულია ნავი ზოლები offcanvas-ის მხარდასაჭერად. - დაამატეთ offcanvas უჯრები ნებისმიერ navbar- ში, საპასუხო .navbar-expand-*კლასებით და ზოგიერთი offcanvas მარკირებით.

  • დამატებულია ჩანაცვლების ახალი კომპონენტი . — ჩვენი უახლესი კომპონენტი, გზა რეალური კონტენტის ნაცვლად დროებითი ბლოკების უზრუნველსაყოფად, რათა დაგეხმაროთ მიუთითოთ, რომ რაღაც ჯერ კიდევ იტვირთება თქვენს საიტზე ან აპლიკაციაში.

  • Collapse plugin ახლა მხარს უჭერს ჰორიზონტალურ კოლაფსს . — დაამატეთ .collapse-horizontalთქვენს .collapseდასაკეცად widthნაცვლად height. მოერიდეთ ბრაუზერის ხელახლა შეღებვას min-heightან height.

  • დამატებულია ახალი სტეკის და ვერტიკალური წესების დამხმარეები. — სწრაფად გამოიყენეთ flexbox-ის მრავალი თვისება, რათა სწრაფად შექმნათ მორგებული განლაგება სტეკებით . აირჩიეთ ჰორიზონტალური ( .hstack) და ვერტიკალური ( .vstack) სტეკებიდან. დაამატეთ ვერტიკალური გამყოფები <hr>ელემენტების მსგავსი ახალი .vrდამხმარეებით .

  • დამატებულია ახალი გლობალური :rootCSS ცვლადები. — დაემატა რამდენიმე ახალი CSS ცვლადი სტილის :rootსაკონტროლო დონეზე . <body>უფრო მეტი მუშაობს, მათ შორის ჩვენს კომუნალურ და კომპონენტებში, მაგრამ ახლა წაიკითხეთ CSS ცვლადები მორგების განყოფილებაში .

  • CSS ცვლადების გამოსაყენებლად გადაკეთდა ფერების და ფონის უტილიტები და დაემატა ტექსტის გამჭვირვალობისა და ფონის გამჭვირვალობის ახალი პროგრამები. — .text-* და .bg-*კომუნალური პროგრამები ახლა აგებულია CSS ცვლადებითა და rgba()ფერის მნიშვნელობებით, რაც საშუალებას გაძლევთ მარტივად დააკონფიგურიროთ ნებისმიერი პროგრამა ახალი გამჭვირვალე პროგრამებით.

  • დამატებულია ფრაგმენტების ახალი მაგალითები, რომლებიც ეფუძნება იმას, თუ როგორ მოვახდინოთ ჩვენი კომპონენტების მორგება. — მზად იყავით მორგებული კომპონენტებისა და დიზაინის სხვა საერთო შაბლონების გამოსაყენებლად ჩვენი ახალი სნიპეტების მაგალითებით . მოიცავს ქვედა კოლონტიტულებს , ჩამოსაშლელ სიას , სიის ჯგუფებს და მოდალებს .

  • ამოღებულია გამოუყენებელი პოზიციონირების სტილები პოპოვერებიდან და ხელსაწყოებიდან , რადგან მათ მხოლოდ პოპერი ამუშავებს. $tooltip-marginმოძველებულია და დაყენებულია nullპროცესში.

გსურთ მეტი ინფორმაცია? წაიკითხეთ v5.1.0 ბლოგის პოსტი.

Ჰეი მანდ! Bootstrap 5, v5.0.0-ის ჩვენი პირველი ძირითადი გამოშვების ცვლილებები დოკუმენტირებულია ქვემოთ. ისინი არ ასახავს ზემოთ ნაჩვენები დამატებით ცვლილებებს.

დამოკიდებულებები

  • ჩამოაგდეს jQuery.
  • განახლებულია Popper v1.x-დან Popper v2.x-მდე.
  • ჩაანაცვლა Libsass Dart Sass-ით, რადგან ჩვენი Sass შემდგენელი მოცემული Libsas მოძველდა.
  • გადავიდა ჯეკილიდან ჰიუგოში ჩვენი დოკუმენტაციის შესაქმნელად

ბრაუზერის მხარდაჭერა

  • ჩამოიშალა Internet Explorer 10 და 11
  • ჩამოვარდა Microsoft Edge < 16 (Legacy Edge)
  • დაეცა Firefox < 60
  • ჩამოგდებული Safari < 12
  • ჩამოვარდა iOS Safari < 12
  • დაეცა Chrome < 60

დოკუმენტაცია იცვლება

  • გადაკეთებული საწყისი გვერდი, დოკუმენტების განლაგება და ქვედა კოლონტიტული.
  • დამატებულია ახალი ამანათის სახელმძღვანელო .
  • დამატებულია ახალი Customize განყოფილება , ჩაანაცვლა v4-ის Theming გვერდი , ახალი დეტალებით Sass-ზე, გლობალური კონფიგურაციის ვარიანტებით, ფერის სქემებით, CSS ცვლადებით და სხვა.
  • ყველა ფორმის დოკუმენტაციის რეორგანიზაცია ფორმების ახალ განყოფილებაში , შინაარსის დაყოფა უფრო ფოკუსირებულ გვერდებად.
  • ანალოგიურად, განახლებულია განლაგების განყოფილება , რათა უფრო მკაფიოდ ჩამოყალიბდეს ბადის შინაარსი.
  • "Navs" კომპონენტის გვერდი გადაერქვა "Navs & Tabs".
  • გადაერქვა „ჩეკების“ გვერდი „შემოწმებები და რადიოები“.
  • შეცვალა ნავი ზოლი და დაამატა ახალი ქვენავი, რათა გაადვილდეს ჩვენი საიტებისა და დოკუმენტების ვერსიების შემოვლა.
  • დამატებულია კლავიატურის ახალი მალსახმობი საძიებო ველისთვის: Ctrl + /.

სას

  • ჩვენ გავაუქმეთ ნაგულისხმევი Sass რუქის შერწყმა, რათა გაადვილდეს ზედმეტი მნიშვნელობების ამოღება. გაითვალისწინეთ, რომ ახლა თქვენ უნდა განსაზღვროთ ყველა მნიშვნელობა Sass რუკებში, როგორიცაა $theme-colors. შეამოწმეთ როგორ გაუმკლავდეთ Sass რუკებს .

  • არღვევსგადაერქვა color-yiq()ფუნქცია და მასთან დაკავშირებული ცვლადები, color-contrast()რადგან ის აღარ არის დაკავშირებული YIQ ფერთა სივრცესთან. იხილეთ #30168.

    • $yiq-contrasted-thresholdეწოდა სახელი $min-contrast-ratio.
    • $yiq-text-darkდა $yiq-text-lightშესაბამისად ეწოდა $color-contrast-darkდა $color-contrast-light.

  • არღვევსმედია შეკითხვის mixins-ის პარამეტრები შეიცვალა უფრო ლოგიკური მიდგომისთვის.

    • media-breakpoint-down()იყენებს თავად წყვეტის წერტილს შემდეგი წყვეტის წერტილის ნაცვლად (მაგ., სამიზნეების media-breakpoint-down(lg)ნაცვლად ნაკლები ხედვის პორტები ).media-breakpoint-down(md)lg
    • ანალოგიურად, მეორე პარამეტრი media-breakpoint-between()ასევე იყენებს წყვეტის წერტილს შემდეგი წყვეტის წერტილის ნაცვლად (მაგ., სამიზნეების ხედების media-between(sm, lg)ნაცვლად და შორის ).media-breakpoint-between(sm, md)smlg

  • არღვევსამოღებულია ბეჭდვის სტილი და $enable-print-stylesცვლადი. ბეჭდვის ჩვენების კლასები ჯერ კიდევ არსებობს. იხილეთ #28339 .

  • არღვევსამოღებული color(), theme-color()და gray()ფუნქციონირებს ცვლადების სასარგებლოდ. იხილეთ #29083 .

  • არღვევსგადაერქვა theme-color-level()ფუნქცია და ახლა იღებს თქვენთვის სასურველ ფერს მხოლოდ ფერების color-level()ნაცვლად . იხილეთ #29083 ფრთხილად: მოგვიანებით იყო ჩაშვებული .$theme-color color-level()v5.0.0-alpha3

  • არღვევსგადარქმეული $enable-prefers-reduced-motion-media-queryდა მოკლედ . $enable-pointer-cursor-for-buttons_$enable-reduced-motion$enable-button-pointers

  • არღვევსამოიღეს მიქსინი bg-gradient-variant(). გამოიყენეთ .bg-gradientკლასი ელემენტების გრადიენტების დასამატებლად გენერირებული .bg-gradient-*კლასების ნაცვლად.

  • არღვევს წაშლილია ადრე მოძველებული მიქსები:

    • hover, hover-focus, plain-hover-focus, დაhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(ასევე ჩამოაგდეს ასოცირებული კომუნალური კლასი, .text-hide)
    • visibility()
    • form-control-focus()

  • არღვევსscale-color()ფუნქცია გადაერქვა , shift-color()რათა თავიდან აიცილოს შეჯახება Sass-ის ფერთა სკალირების ფუნქციასთან.

  • box-shadowmixins ახლა საშუალებას აძლევს nullმნიშვნელობებს და ჩამოაგდეს noneმრავალი არგუმენტიდან. იხილეთ #30394 .

  • მიქსინს border-radius()ახლა აქვს ნაგულისხმევი მნიშვნელობა.

ფერის სისტემა

  • ფერის სისტემა, რომელიც მუშაობდა color-level()და $theme-color-intervalამოღებულია ახალი ფერის სისტემის სასარგებლოდ. ყველა lighten()და darken()ფუნქცია ჩვენს კოდების ბაზაში ჩანაცვლებულია tint-color()და shade-color(). ეს ფუნქციები შეურევს ფერს თეთრს ან შავს იმის ნაცვლად, რომ შეცვალოს მისი სიმსუბუქე ფიქსირებული რაოდენობით. ფერს ან შეფერავს shift-color()ან დაჩრდილავს იმისდა მიხედვით, მისი წონის პარამეტრი დადებითია თუ უარყოფითი. იხილეთ #30622 დამატებითი დეტალებისთვის.

  • დამატებულია ახალი ელფერი და ჩრდილები ყველა ფერისთვის, რაც უზრუნველყოფს ცხრა ცალკეულ ფერს თითოეული ძირითადი ფერისთვის, როგორც ახალი Sass ცვლადები.

  • გაუმჯობესებული ფერის კონტრასტი. შემცირდა ფერის კონტრასტის თანაფარდობა 3:1-დან 4.5:1-მდე და განახლებული ლურჯი, მწვანე, ცისფერი და ვარდისფერი ფერები WCAG 2.1 AA კონტრასტის უზრუნველსაყოფად. ასევე შეიცვალა ჩვენი ფერის კონტრასტის ფერი $gray-900.$black

  • ჩვენი ფერების სისტემის მხარდასაჭერად, ჩვენ დავამატეთ ახალი ჩვეულება tint-color()და shade-color()ფუნქციები, რათა სათანადოდ შეურიოთ ჩვენი ფერები.

ქსელის განახლებები

  • ახალი შესვენების წერტილი! დამატებულია ახალი xxlწყვეტის წერტილი 1400pxდა ზემოთ. ყველა სხვა წყვეტის წერტილში ცვლილებები არ არის.

  • გაუმჯობესებული ღარები. ღარები ახლა დაყენებულია რემებში და უფრო ვიწროა ვიდრე v4 ( 1.5rem, ან დაახლოებით 24px, ქვემოთ 30px). ეს ასწორებს ჩვენი ქსელის სისტემის ღარები ჩვენს დისტანციურ პროგრამებს.

    • დამატებულია ახალი ღარების კლასი ( .g-*, .gx-*, და .gy-*) ჰორიზონტალური/ვერტიკალური ღარები, ჰორიზონტალური ღარები და ვერტიკალური ღარები.
    • არღვევსგადაერქვა ახალი ღუმელის კომუნალური საშუალებების შესატყვისად .no-gutters..g-0

  • სვეტები აღარ არის position: relativeგამოყენებული, ამიტომ შეიძლება დაგჭირდეთ .position-relativeზოგიერთი ელემენტის დამატება ამ ქცევის აღსადგენად.

  • არღვევსჩამოაგდეს რამდენიმე .order-*კლასი, რომლებიც ხშირად გამოუყენებელი რჩებოდა. ჩვენ ახლა მხოლოდ .order-1ვაძლევთ .order-5ყუთს.

  • არღვევსკომპონენტი ჩამოაგდეს, .mediaრადგან მისი მარტივად გამეორება შესაძლებელია კომუნალური საშუალებებით. მაგალითისთვის იხილეთ #28265 და flex utilities გვერდი .

  • არღვევს bootstrap-grid.cssახლა ვრცელდება box-sizing: border-boxმხოლოდ სვეტზე, გლობალური ყუთის ზომის გადატვირთვის ნაცვლად. ამ გზით, ჩვენი ბადის სტილები შეიძლება გამოყენებულ იქნას მეტ ადგილას ჩარევის გარეშე.

  • $enable-grid-classesაღარ გამორთავს კონტეინერის კლასების გენერირებას. იხილეთ #29146.

  • მიქსინი განახლდა make-colნაგულისხმევად თანაბარ სვეტებად მითითებული ზომის გარეშე.

კონტენტი, გადატვირთვა და ა.შ

  • RFS ახლა ჩართულია ნაგულისხმევად. მიქსინის გამოყენებით სათაურებიfont-size()ავტომატურად არეგულირებს მათfont-sizeმასშტაბებს ხედვის პორტთან. ეს ფუნქცია ადრე იყო ჩართული v4-ით.

  • არღვევსგადავაკეთეთ ჩვენი ეკრანის ტიპოგრაფია, რათა შეცვალოს ჩვენი $display-*ცვლადები და $display-font-sizesSass რუკა. ასევე ამოღებულია ცალკეული $display-*-weightცვლადები ერთი $display-font-weightდა მორგებული font-sizes.

  • დაამატა ორი ახალი .display-*სათაურის ზომა .display-5და .display-6.

  • ბმულები ხაზგასმულია ნაგულისხმევად (არა მხოლოდ მაუსის დროს), თუ ისინი არ არიან კონკრეტული კომპონენტების ნაწილი.

  • განახლებული ცხრილები მათი სტილის განახლებისა და CSS ცვლადებით აღდგენის მიზნით, სტილის მეტი კონტროლისთვის.

  • არღვევსჩადგმული ცხრილები აღარ იღებენ სტილებს.

  • არღვევს .thead-lightდა .thead-darkამოღებულნი არიან .table-*ვარიანტული კლასების სასარგებლოდ, რომლებიც შეიძლება გამოყენებულ იქნას ცხრილის ყველა ელემენტისთვის ( thead, tbody, tfoot, trდა th) td.

  • არღვევსმიქსინს table-row-variant()ეწოდა სახელი table-variant()და იღებს მხოლოდ 2 პარამეტრს: $color(ფერის სახელი) და $value(ფერის კოდი). საზღვრის ფერი და აქცენტის ფერები ავტომატურად გამოითვლება ცხრილის ფაქტორის ცვლადების საფუძველზე.

  • ცხრილის უჯრედების შიგთავსის ცვლადების დაყოფა -yდა -x.

  • არღვევს.pre-scrollableკლასი დაეცა . იხილეთ #29135

  • არღვევს .text-*კომუნალური პროგრამები აღარ ამატებენ ბმულებს ჰოვერის და ფოკუსირების მდგომარეობებს. .link-*ამის ნაცვლად შესაძლებელია დამხმარე კლასების გამოყენება. იხილეთ #29267

  • არღვევს.text-justifyკლასი დაეცა . იხილეთ #29793

  • არღვევს <hr>ელემენტები ახლა გამოიყენება heightატრიბუტის borderუკეთ მხარდასაჭერად size. ეს ასევე საშუალებას იძლევა გამოიყენოს padding utilities უფრო სქელი გამყოფების შესაქმნელად (მაგ., <hr class="py-1">).

  • გადააყენეთ ნაგულისხმევი ჰორიზონტალური padding-leftჩართული <ul>და <ol>ელემენტები ბრაუზერის ნაგულისხმევიდან 40px.2rem

  • დამატებულია $enable-smooth-scroll, რომელიც ვრცელდება scroll-behavior: smoothგლობალურად - გარდა მომხმარებლებისა, რომლებიც ითხოვენ შემცირებულ მოძრაობას prefers-reduced-motionმედია მოთხოვნის საშუალებით. იხილეთ #31877

RTL

  • ჰორიზონტალური მიმართულების სპეციფიკურ ცვლადებს, უტილიტებსა და მიქსებს დაარქვეს სახელი, რათა გამოიყენონ ისეთი ლოგიკური თვისებები, როგორიცაა flexbox-ის განლაგებებში — მაგ., startდა endნაცვლად leftდა right.

ფორმები

  • დამატებულია ახალი მცურავი ფორმები! ჩვენ დავაწინაურეთ მცურავი ეტიკეტების მაგალითი სრულად მხარდაჭერილი ფორმის კომპონენტებში. იხილეთ ახალი მცურავი ეტიკეტების გვერდი.

  • არღვევს კონსოლიდირებული მშობლიური და მორგებული ფორმის ელემენტები. მოსანიშნი ველები, რადიოები, სელექციები და სხვა შეყვანები, რომლებსაც ჰქონდათ მშობლიური და მორგებული კლასები v4-ში, კონსოლიდირებულია. ახლა ჩვენი ფორმის თითქმის ყველა ელემენტი მთლიანად მორგებულია, უმეტესობა პერსონალური HTML-ის საჭიროების გარეშე.

    • .custom-control.custom-checkboxარის ახლა .form-check.
    • .custom-control.custom-custom-radioარის ახლა .form-check.
    • .custom-control.custom-switchარის ახლა .form-check.form-switch.
    • .custom-selectარის ახლა .form-select.
    • .custom-fileდა .form-fileშეიცვალა მორგებული სტილებით თავზე .form-control.
    • .custom-rangeარის ახლა .form-range.
    • ჩამოვარდა მშობლიური .form-control-fileდა .form-control-range.

  • არღვევსდაეცა .input-group-appendდა .input-group-prepend. ახლა შეგიძლიათ უბრალოდ დაამატოთ ღილაკები და .input-group-textშეყვანის ჯგუფების პირდაპირი ბავშვები.

  • დიდი ხნის მანძილზე დაკარგული საზღვრის რადიუსი შეყვანის ჯგუფზე ვალიდაციის გამოხმაურების ხარვეზით საბოლოოდ გამოსწორებულია დამატებითი .has-validationკლასის დამატებით შეყვანის ჯგუფებში დადასტურებით.

  • არღვევს ჩამოიშალა ფორმის სპეციფიკური განლაგების კლასები ჩვენი ბადის სისტემისთვის. გამოიყენეთ ჩვენი ბადე და კომუნალური პროგრამები .form-group, .form-row, ან .form-inline.

  • არღვევსფორმის ეტიკეტები ახლა მოითხოვს .form-label.

  • არღვევს .form-textაღარ არის მითითებული display, რაც საშუალებას გაძლევთ შექმნათ ინლაინ ან დაბლოკოთ დახმარების ტექსტი, როგორც გსურთ, მხოლოდ HTML ელემენტის შეცვლით.

  • ფორმის კონტროლი აღარ გამოიყენება დაფიქსირდა height, როდესაც ეს შესაძლებელია, ამის ნაცვლად, გადადება min-heightპერსონალიზაციისა და სხვა კომპონენტებთან თავსებადობის გასაუმჯობესებლად.

  • ვალიდაციის ხატები აღარ გამოიყენება <select>s-ზე multiple.

  • წყაროს Sass ფაილების გადაწყობა ქვეშ scss/forms/, შეყვანის ჯგუფის სტილების ჩათვლით.

კომპონენტები

  • ერთიანი paddingმნიშვნელობები გაფრთხილებებისთვის, პურის ფრაგმენტებისთვის, ბარათებისთვის, ჩამოსაშლელი ფაილებისთვის, სიის ჯგუფებისთვის, მოდალებისთვის, პოპოვერებისთვის და ინსტრუმენტების მინიშნებებისთვის, რომლებიც დაფუძნებულია ჩვენს $spacerცვლადზე. იხილეთ #30564 .

აკორდეონი

გაფრთხილებები

  • გაფრთხილებებს ახლა აქვთ მაგალითები ხატებით .

  • წაშლილია მორგებული სტილები <hr>s-ისთვის თითოეულ გაფრთხილებაში, რადგან ისინი უკვე იყენებენ currentColor.

სამკერდე ნიშნები

  • არღვევსჩამოაგდეს ყველა .badge-*ფერის კლასი ფონის უტილიტებისთვის (მაგ., გამოიყენეთ .bg-primaryნაცვლად .badge-primary).

  • არღვევსამოვარდა — ამის ნაცვლად .badge-pillგამოიყენეთ .rounded-pillპროგრამა.

  • არღვევსწაშლილია ჰოვერის და ფოკუსის სტილები <a>და <button>ელემენტები.

  • გაზრდილი ნაგულისხმევი შიგთავსი სამკერდე ნიშნების .25em/ .5em-დან .35em/ -მდე .65em.

  • გაამარტივა პურის ნაგულისხმევი გარეგნობა padding, background-color, და border-radius.

  • დამატებულია ახალი CSS პერსონალური თვისება --bs-breadcrumb-dividerმარტივი პერსონალიზაციისთვის CSS ხელახალი კომპილაციის გარეშე.

ღილაკები

  • არღვევს გადართვის ღილაკები , ჩამრთველი ველებით ან რადიოებით, აღარ საჭიროებს JavaScript-ს და აქვს ახალი მარკირება. ჩვენ აღარ გვჭირდება შეფუთვის ელემენტი, დავამატოთ.btn-checkდა<input>დავაწყვილოთ იგი ნებისმიერ.btnკლასთან<label>. იხილეთ #30650 . ამის დოკუმენტები გადავიდა ჩვენი ღილაკების გვერდიდან ფორმების ახალ განყოფილებაში.

  • არღვევს ჩავარდა .btn-blockკომუნალურებისთვის. იმის ნაცვლად, რომ გამოიყენოთ ღილაკები, შეფუთეთ თქვენი ღილაკები და საჭიროებისამებრ .btn-blockგანათავსეთ ისინი. გადაერთეთ საპასუხო კლასებზე მათზე მეტი კონტროლისთვის. წაიკითხეთ დოკუმენტები რამდენიმე მაგალითისთვის..btn.d-grid.gap-*

  • განახლებულია ჩვენი button-variant()და button-outline-variant()მიქსინები დამატებითი პარამეტრების მხარდასაჭერად.

  • განახლებული ღილაკები უზრუნველვყოფთ გაზრდილი კონტრასტის უზრუნველსაყოფად გადაადგილებისას და აქტიური მდგომარეობების დროს.

  • გამორთული ღილაკები ახლა აქვს pointer-events: none;.

ბარათი

  • არღვევსდაეცა .card-deckჩვენი ბადის სასარგებლოდ. ჩაალაგეთ თქვენი ბარათები სვეტების კლასებში და დაამატეთ მშობელი .row-cols-*კონტეინერი ბარათების გემბანების ხელახლა შესაქმნელად (მაგრამ უფრო მეტი კონტროლით პასუხისმგებელ გასწორებაზე).

  • არღვევსდაეცა მასონობის .card-columnsსასარგებლოდ. იხილეთ #28922 .

  • არღვევსჩაანაცვლა .cardდაფუძნებული აკორდეონი ახალი აკორდეონის კომპონენტით .

დახურვის ღილაკი

  • არღვევსგადაერქვა .closeნაკლებად .btn-closeზოგადი სახელით.

  • დახურვის ღილაკები ახლა იყენებენ background-image(ჩაშენებულ SVG-ს) HTML-ში a-ის ნაცვლად, &times;რაც საშუალებას იძლევა უფრო ადვილად დაკონფიგურიროთ თქვენი მარკირების შეხების გარეშე.

  • დამატებულია ახალი .btn-close-whiteვარიანტი, რომელიც გამოიყენება filter: invert(1)უფრო მაღალი კონტრასტის გასააქტიურებლად, აშორებს ხატებს მუქი ფონზე.

კოლაფსი

  • ამოღებულია გრაგნილი აკორდეონებისთვის.

  • დამატებულია ახალი .dropdown-menu-darkვარიანტი და ასოცირებული ცვლადები მოთხოვნით მუქი ჩამოსაშლელი ჩამოსაშლელებისთვის.

  • დამატებულია ახალი ცვლადი $dropdown-padding-x.

  • ჩაბნელდა ჩამოსაშლელი გამყოფი გაუმჯობესებული კონტრასტისთვის.

  • არღვევსჩამოსაშლელი ჩამოსაშლელი ყველა მოვლენა ახლა ამოქმედდება ჩამოსაშლელი გადართვის ღილაკზე და შემდეგ ბუშტუკებით აწვება მშობელ ელემენტს.

  • ჩამოსაშლელი მენიუს ახლა აქვს data-bs-popper="static"ატრიბუტების ნაკრები, როდესაც ჩამოსაშლელი მენიუს პოზიციონირება სტატიკურია, ან ჩამოსაშლელი მენიუ ნავიბარშია. ეს დამატებულია ჩვენი JavaScript-ით და გვეხმარება გამოვიყენოთ მორგებული პოზიციის სტილი პოპერის პოზიციონირებაში ჩარევის გარეშე.

  • არღვევსჩამოშლილი flipვარიანტი ჩამოსაშლელი დანამატისთვის მშობლიური პოპერის კონფიგურაციის სასარგებლოდ. ახლა თქვენ შეგიძლიათ გამორთოთ ამობრუნების ქცევა გადაბრუნებისfallbackPlacements მოდიფიკატორის ოფციისთვის ცარიელი მასივის გადაცემით .

  • ჩამოსაშლელი მენიუები ახლა შეიძლება დააწკაპუნოთ ახალი autoCloseოფციით ავტომატური დახურვის ქცევის დასამუშავებლად . თქვენ შეგიძლიათ გამოიყენოთ ეს პარამეტრი, რომ მიიღოთ დაწკაპუნება ჩამოსაშლელი მენიუში ან მის გარეთ, რათა ის ინტერაქტიული გახადოთ.

  • ჩამოსაშლელები ახლა მხარს უჭერენ .dropdown-items-ში გახვეულს <li>.

ჯუმბოტრონი

სიის ჯგუფი

  • დამატებულია ახალი nullცვლადები font-size, font-weight, , colorდა კლასში.:hover color.nav-link
  • არღვევსNavbars ახლა მოითხოვს კონტეინერს შიგნით (რადიკალურად გაამარტივებს ინტერვალის მოთხოვნები და საჭიროა CSS).
  • არღვევს.activeკლასი აღარ შეიძლება გამოყენებულ იქნას s- .nav-itemზე, ის უნდა იქნას გამოყენებული პირდაპირ .nav-links-ზე.

ტილო

პაგირება

  • პაგინაციის ბმულებს ახლა აქვს კონფიგურირებადი margin-left, რომლებიც დინამიურად მრგვალდება ყველა კუთხეში ერთმანეთისგან განცალკევებისას.

  • დამატებულია transitions-ები პაგინაციის ბმულებზე.

პოპოვერები

  • არღვევსგადაერქვა ჩვენს ნაგულისხმევ პოპოვერ შაბლონში .arrow..popover-arrow

  • გადაერქვა whiteListვარიანტი allowList.

სპინერები

  • სპინერები ახლა პატივს prefers-reduced-motion: reduceსცემენ ანიმაციების შენელებით. იხილეთ #31882 .

  • გაუმჯობესებული სპინერის ვერტიკალური განლაგება.

სადღეგრძელოები

ინსტრუმენტების რჩევები

  • არღვევსსახელი გადაერქვა .arrowჩვენს .tooltip-arrowნაგულისხმევ მინიშნებაში.

  • არღვევსნაგულისხმევი მნიშვნელობა fallbackPlacementsშეიცვალა ['top', 'right', 'bottom', 'left']პოპერის ელემენტების უკეთესი განთავსებისთვის.

  • არღვევსგადაერქვა whiteListვარიანტი allowList.

კომუნალური მომსახურება

  • არღვევსგადაერქვა რამდენიმე კომუნალური პროგრამა, რათა გამოიყენოს ლოგიკური თვისებების სახელები მიმართულების სახელების ნაცვლად RTL მხარდაჭერის დამატებით:

    • გადაერქვა .left-*და და . .right-*_.start-*.end-*
    • გადაერქვა .float-leftდა და . .float-right_.float-start.float-end
    • გადაერქვა .border-leftდა და . .border-right_.border-start.border-end
    • გადაერქვა .rounded-leftდა და . .rounded-right_.rounded-start.rounded-end
    • გადაერქვა .ml-*და და . .mr-*_.ms-*.me-*
    • გადაერქვა .pl-*და და . .pr-*_.ps-*.pe-*
    • გადაერქვა .text-leftდა და . .text-right_.text-start.text-end

  • არღვევსნაგულისხმევად გამორთულია უარყოფითი მინდვრები.

  • დამატებულია ახალი .bg-bodyკლასი <body>დამატებითი ელემენტების ფონის სწრაფად დასაყენებლად.

  • დამატებულია ახალი პოზიციის კომუნალური პროგრამები top, right, bottomდა left. ღირებულებები მოიცავს 0, 50%და 100%თითოეულ ქონებას.

  • დამატებულია ახალი .translate-middle-xდა .translate-middle-yკომუნალური საშუალებები ჰორიზონტალურად ან ვერტიკალურად ცენტრში აბსოლუტური/ფიქსირებული განლაგებული ელემენტებით.

  • დამატებულია ახალი border-widthკომუნალური საშუალებები .

  • არღვევსგადაერქვა . .text-monospace_.font-monospace

  • არღვევსწაშლილია .text-hide, რადგან ეს ტექსტის დამალვის მოძველებული მეთოდია, რომელიც აღარ უნდა იქნას გამოყენებული.

  • დამატებულია .fs-*კომუნალური font-sizeპროგრამები (RFS ჩართულით). ისინი იყენებენ იმავე მასშტაბს, როგორც HTML-ის ნაგულისხმევი სათაურები (1-6, დიდიდან პატარამდე) და შეიძლება შეიცვალოს Sass რუქის მეშვეობით.

  • არღვევსდაარქვეს .font-weight-*კომუნალური საშუალებები, როგორც .fw-*მოკლედ და თანმიმდევრულობისთვის.

  • არღვევსდაარქვეს .font-style-*კომუნალური საშუალებები, როგორც .fst-*მოკლედ და თანმიმდევრულობისთვის.

  • დამატებულია .d-gridკომუნალური და ახალი gapუტილიტების ჩვენებაზე ( .gap) CSS Grid-ისა და flexbox-ის განლაგებისთვის.

  • არღვევსამოღებულია .rounded-smდა , და შემოიღო კლასების ახალი rounded-lgმასშტაბი . იხილეთ #31687 ..rounded-0.rounded-3

  • დამატებულია ახალი line-heightკომუნალური პროგრამები: .lh-1, .lh-sm, .lh-baseდა .lh-lg. იხილეთ აქ .

  • გადაიტანეს .d-noneპროგრამა ჩვენს CSS-ში, რათა მას მეტი წონა მიეცეს ეკრანის სხვა უტილიტებთან შედარებით.

  • გააფართოვა .visually-hidden-focusableდამხმარე ასევე კონტეინერებზე მუშაობაზე, გამოყენებით :focus-within.

დამხმარეები

  • არღვევს პასუხისმგებელი ჩაშენების დამხმარეები დაარქვეს თანაფარდობის დამხმარეებად ახალი კლასის სახელებით და გაუმჯობესებული ქცევით, ასევე სასარგებლო CSS ცვლადით.

    • კლასებს დაარქვეს სახელი, რათა შეიცვალოს byასპექტის xთანაფარდობა. მაგალითად, .ratio-16by9არის ახლა .ratio-16x9.
    • ჩვენ ჩამოვუშვით .embed-responsive-itemდა ელემენტების ჯგუფის ამომრჩეველი უფრო მარტივი .ratio > *სელექტორის სასარგებლოდ. აღარ არის საჭირო კლასი და თანაფარდობის დამხმარე ახლა მუშაობს ნებისმიერ HTML ელემენტთან.
    • $embed-responsive-aspect-ratiosSass რუკას დაარქვეს სახელი და $aspect-ratiosმისი მნიშვნელობები გამარტივდა, რათა შეიცავდეს კლასის სახელს და პროცენტს, როგორც key: valueწყვილს.
    • CSS ცვლადები ახლა გენერირებულია და შედის Sass რუკაში თითოეული მნიშვნელობისთვის. შეცვალეთ --bs-aspect-ratioცვლადი, .ratioრომ შექმნათ ნებისმიერი მორგებული ასპექტის თანაფარდობა .

  • არღვევს „ეკრანის წამკითხველის“ კლასები ახლა „ვიზუალურად დამალული“ კლასებია .

    • scss/helpers/_screenreaders.scssSass ფაილი შეიცვალაscss/helpers/_visually-hidden.scss
    • გადაერქვა .sr-onlyდა და .sr-only-focusable_.visually-hidden.visually-hidden-focusable
    • გადარქმევა sr-only()და sr-only-focusable()მიქსები visually-hidden()და visually-hidden-focusable().

  • bootstrap-utilities.cssახლა ასევე მოიცავს ჩვენს დამხმარეებს. დამხმარეების იმპორტი აღარ არის საჭირო საბაჟო ნაგებობებში.

JavaScript

  • ჩამოაგდეს jQuery-ის დამოკიდებულება და გადაწერილი დანამატები ჩვეულებრივ JavaScript-ში.

  • არღვევსJavaScript-ის ყველა მოდულის მონაცემთა ატრიბუტები ახლა სახელთა სივრცეშია, რათა დაგეხმაროთ Bootstrap-ის ფუნქციონალობის მესამე მხარისგან და თქვენი საკუთარი კოდისგან განასხვავოთ. მაგალითად, ჩვენ ვიყენებთ data-bs-toggleნაცვლად data-toggle.

  • ყველა დანამატს შეუძლია მიიღოს CSS სელექტორი, როგორც პირველი არგუმენტი. თქვენ შეგიძლიათ გადასცეთ DOM ელემენტი ან ნებისმიერი მოქმედი CSS ამომრჩევი მოდულის ახალი ინსტანციის შესაქმნელად:

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfigშეიძლება გადავიდეს ფუნქციად, რომელიც არგუმენტად იღებს Bootstrap-ის ნაგულისხმევ Popper კონფიგურაციას, ასე რომ თქვენ შეგიძლიათ შეაერთოთ ეს ნაგულისხმევი კონფიგურაცია თქვენს გზაზე. ვრცელდება ჩამოსაშლელ ფაილებზე, პოპოვერებსა და ხელსაწყოების რჩევებზე.

  • ნაგულისხმევი მნიშვნელობა fallbackPlacementsშეიცვალა ['top', 'right', 'bottom', 'left']პოპერის ელემენტების უკეთესი განთავსებისთვის. ვრცელდება ჩამოსაშლელ ფაილებზე, პოპოვერებსა და ხელსაწყოების რჩევებზე.

  • ამოღებულია ხაზგასმული საჯარო სტატიკური მეთოდებიდან, როგორიცაა _getInstance()→ getInstance().