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

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

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

ამ გვერდზე

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

  • ჩამოაგდეს 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-checkარის ახლა .form-check.
    • .custom-check.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 ელემენტის შეცვლით.

  • ვალიდაციის ხატები აღარ გამოიყენება <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"ატრიბუტების ნაკრები, როდესაც ჩამოსაშლელი მენიუს პოზიციონირება სტატიკურია და data-bs-popper="none"როდესაც ჩამოსაშლელი მენიუ ნავიგბარშია. ეს დამატებულია ჩვენი JavaScript-ით და გვეხმარება გამოვიყენოთ მორგებული პოზიციის სტილი პოპერის პოზიციონირებაში ჩარევის გარეშე.

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

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

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

ჯუმბოტრონი

სიის ჯგუფი

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

ტილო

პაგირება

  • პაგინაციის ბმულებს ახლა აქვს კონფიგურირებადი 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 ამომრჩევი მოდულის ახალი ინსტანციის შესაქმნელად:

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

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

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

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