მიგრაცია 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)
sm
lg
-
არღვევსამოღებულია ბეჭდვის სტილი და
$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-shadow
mixins ახლა საშუალებას აძლევს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-sizes
Sass რუკა. ასევე ამოღებულია ცალკეული$display-*-weight
ცვლადები ერთი$display-font-weight
და მორგებულიfont-size
s. -
დაამატა ორი ახალი
.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 -
გადააყენეთ ნაგულისხმევი ჰორიზონტალური
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
დაფუძნებული აკორდეონი ახალი აკორდეონის კომპონენტით .
კარუსელი
-
დამატებულია ახალი
.carousel-dark
ვარიანტი მუქი ტექსტისთვის, კონტროლისთვის და ინდიკატორებისთვის (შესანიშნავია მსუბუქი ფონისთვის). -
შეცვალა შევრონის ხატები კარუსელის მართვისთვის ახალი SVG-ებით Bootstrap Icons-იდან .
დახურვის ღილაკი
-
არღვევსგადაერქვა
.close
ნაკლებად.btn-close
ზოგადი სახელით. -
დახურვის ღილაკები ახლა იყენებენ
background-image
(ჩაშენებულ SVG-ს) HTML-ში a-ის ნაცვლად,×
რაც საშუალებას იძლევა უფრო ადვილად დაკონფიგურიროთ თქვენი მარკირების შეხების გარეშე. -
დამატებულია ახალი
.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-item
s-ში გახვეულს<li>
.
ჯუმბოტრონი
- არღვევსჩამოაგდეს ჯუმბოტრონის კომპონენტი, რადგან მისი გამეორება შესაძლებელია კომუნალური საშუალებებით. იხილეთ ჩვენი ახალი Jumbotron მაგალითი დემოსთვის.
სიის ჯგუფი
- სიის ჯგუფებს დაემატა ახალი
.list-group-numbered
მოდიფიკატორი .
ნავიგაცია და ჩანართები
- დამატებულია ახალი
null
ცვლადებიfont-size
,font-weight
, ,color
და კლასში.:hover
color
.nav-link
ნავიბარები
- არღვევსNavbars ახლა მოითხოვს კონტეინერს შიგნით (რადიკალურად გაამარტივებს ინტერვალის მოთხოვნები და საჭიროა CSS).
ტილო
- დამატებულია ახალი offcanvas კომპონენტი .
პაგირება
-
პაგინაციის ბმულებს ახლა აქვს კონფიგურირებადი
margin-left
, რომლებიც დინამიურად მრგვალდება ყველა კუთხეში ერთმანეთისგან განცალკევებისას. -
დამატებულია
transition
s-ები პაგინაციის ბმულებზე.
პოპოვერები
-
არღვევსგადაერქვა ჩვენს ნაგულისხმევ პოპოვერ შაბლონში
.arrow
..popover-arrow
-
გადაერქვა
whiteList
ვარიანტიallowList
.
სპინერები
-
სპინერები ახლა პატივს
prefers-reduced-motion: reduce
სცემენ ანიმაციების შენელებით. იხილეთ #31882 . -
გაუმჯობესებული სპინერის ვერტიკალური განლაგება.
სადღეგრძელოები
-
სადღეგრძელოები ახლა შეიძლება განთავსდეს a-
.toast-container
ში პოზიციონირების კომუნალური საშუალებების დახმარებით . -
სადღეგრძელოს ნაგულისხმევი ხანგრძლივობა შეიცვალა 5 წამით.
-
ამოღებულია სადღეგრძელოებიდან და ჩანაცვლებულია
overflow: hidden
შესაბამისი ფუნქციებით.border-radius
calc()
ინსტრუმენტების რჩევები
-
არღვევსსახელი გადაერქვა
.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-ratios
Sass რუკას დაარქვეს სახელი და$aspect-ratios
მისი მნიშვნელობები გამარტივდა, რათა შეიცავდეს კლასის სახელს და პროცენტს, როგორცkey: value
წყვილს.- CSS ცვლადები ახლა გენერირებულია და შედის Sass რუკაში თითოეული მნიშვნელობისთვის. შეცვალეთ
--bs-aspect-ratio
ცვლადი,.ratio
რომ შექმნათ ნებისმიერი მორგებული ასპექტის თანაფარდობა .
- კლასებს დაარქვეს სახელი, რათა შეიცვალოს
-
არღვევს „ეკრანის წამკითხველის“ კლასები ახლა „ვიზუალურად დამალული“ კლასებია .
scss/helpers/_screenreaders.scss
Sass ფაილი შეიცვალა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()
.