ბადის სისტემა
გამოიყენეთ ჩვენი ძლიერი მობილური პირველი flexbox ბადე ყველა ფორმისა და ზომის განლაგების შესაქმნელად თორმეტი სვეტის სისტემის, ხუთი ნაგულისხმევი პასუხისმგებელი დონის, Sass ცვლადების და მიქსინების და ათობით წინასწარ განსაზღვრული კლასის წყალობით.
Bootstrap-ის ბადის სისტემა იყენებს კონტეინერების, სტრიქონების და სვეტების სერიას შინაარსის განლაგებისა და გასწორების მიზნით. იგი აგებულია flexbox-ით და სრულად რეაგირებს. ქვემოთ მოცემულია მაგალითი და სიღრმისეული ნახვა, თუ როგორ აერთიანებს ბადე.
ახალი თუ არ იცნობთ flexbox-ს? წაიკითხეთ ეს CSS Tricks flexbox სახელმძღვანელო ფონის, ტერმინოლოგიის, სახელმძღვანელო მითითებებისა და კოდის ფრაგმენტებისთვის.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
ზემოთ მოყვანილი მაგალითი ქმნის სამ თანაბარი სიგანის სვეტს მცირე, საშუალო, დიდ და დამატებით დიდ მოწყობილობებზე ჩვენი წინასწარ განსაზღვრული ბადის კლასების გამოყენებით. ეს სვეტები ცენტრირებულია გვერდზე მშობელთან ერთად .container
.
მისი დაშლისას, აი, როგორ მუშაობს:
- კონტეინერები უზრუნველყოფს თქვენი საიტის შიგთავსის ცენტრისა და ჰორიზონტალურად დამაგრების საშუალებას. გამოიყენეთ
.container
საპასუხო პიქსელის სიგანისთვის ან ყველა.container-fluid
ხედვისwidth: 100%
პორტისა და მოწყობილობის ზომისთვის. - რიგები არის შეფუთვა სვეტებისთვის. თითოეულ სვეტს აქვს ჰორიზონტალური
padding
(ე.წ. ღარი) მათ შორის სივრცის გასაკონტროლებლად. ამისpadding
შემდეგ ეს ეწინააღმდეგება რიგებს უარყოფითი მინდვრებით. ამ გზით, თქვენი სვეტების მთელი შინაარსი ვიზუალურად არის გასწორებული მარცხენა მხარეს. - ბადის განლაგებაში შინაარსი უნდა განთავსდეს სვეტებში და მხოლოდ სვეტები შეიძლება იყოს მწკრივების უშუალო შვილი.
- flexbox-ის წყალობით, ბადის სვეტები მითითებულის გარეშე
width
ავტომატურად განლაგდება, როგორც თანაბარი სიგანის სვეტები. მაგალითად,.col-sm
ნების ოთხი ინსტანცია ავტომატურად იქნება 25% სიგანის მცირე წყვეტის წერტილიდან და ზემოთ. დამატებითი მაგალითებისთვის იხილეთ სვეტების ავტომატური განლაგების განყოფილება. - სვეტების კლასები მიუთითებს სვეტების რაოდენობაზე, რომელთა გამოყენებაც გსურთ მწკრივში შესაძლო 12-დან. ასე რომ, თუ გსურთ სამი თანაბარი სიგანის სვეტი, შეგიძლიათ გამოიყენოთ
.col-4
. - სვეტები
width
s დაყენებულია პროცენტებში, ამიტომ ისინი ყოველთვის თხევადი და ზომითაა მათი მთავარი ელემენტის მიმართ. - სვეტებს აქვთ ჰორიზონტალური ღარები ცალკეულ სვეტებს შორის ,
padding
თუმცა, შეგიძლიათ ამოიღოთmargin
სტრიქონებიდან დაpadding
სვეტებიდან.no-gutters
..row
- იმისათვის, რომ ბადე რეაგირებადი იყოს, არის ხუთი ქსელის წყვეტის წერტილი, ერთი თითოეული პასუხისმგებელი წყვეტის წერტილისთვის : ყველა წყვეტის წერტილი (ზედმეტად პატარა), პატარა, საშუალო, დიდი და ძალიან დიდი.
- ქსელის წყვეტის წერტილები დაფუძნებულია მინიმალური სიგანის მედიის მოთხოვნებზე, რაც ნიშნავს, რომ ისინი ვრცელდება ამ ერთ წყვეტის წერტილზე და ყველა მის ზემოთ (მაგ.,
.col-sm-4
ეხება მცირე, საშუალო, დიდ და ზედმეტად დიდ მოწყობილობებს, მაგრამ არა პირველxs
წყვეტის წერტილს). - თქვენ შეგიძლიათ გამოიყენოთ წინასწარ განსაზღვრული ბადის კლასები (როგორიცაა
.col-4
) ან Sass მიქსები მეტი სემანტიკური მარკირებისთვის.
გაითვალისწინეთ შეზღუდვები და შეცდომები flexbox-ის ირგვლივ , როგორიცაა HTML ელემენტების გამოყენების შეუძლებლობა, როგორც flex კონტეინერები .
მიუხედავად იმისა, რომ Bootstrap იყენებს em
s ან rem
s-ს უმეტესი ზომის დასადგენად, px
s გამოიყენება ბადის გაწყვეტის წერტილებისა და კონტეინერის სიგანეებისთვის. ეს იმიტომ ხდება, რომ ხედის სიგანე არის პიქსელებში და არ იცვლება შრიფტის ზომასთან ერთად .
ნახეთ, როგორ მუშაობს Bootstrap ქსელის სისტემის ასპექტები მრავალ მოწყობილობაზე მოსახერხებელი ცხრილით.
ძალიან პატარა <576 პიქსელი |
მცირე ≥576 პიქსელი |
საშუალო ≥768 პიქსელი |
დიდი ≥992 პიქსელი |
ძალიან დიდი ≥1200 პიქსელი |
|
---|---|---|---|---|---|
კონტეინერის მაქსიმალური სიგანე | არცერთი (ავტო) | 540 პიქსელი | 720 პიქსელი | 960 პიქსელი | 1140 პიქსელი |
კლასის პრეფიქსი | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
სვეტების # | 12 | ||||
ღუმელის სიგანე | 30 პიქსელი (15 პიქსელი სვეტის თითოეულ მხარეს) | ||||
ბუდე | დიახ | ||||
სვეტების შეკვეთა | დიახ |
გამოიყენეთ წყვეტის წერტილის სპეციფიკური სვეტების კლასები სვეტების მარტივი ზომის გასაზომად ისეთი აშკარა დანომრილი კლასის გარეშე, როგორიცაა .col-sm-6
.
მაგალითად, აქ არის ორი ბადის განლაგება, რომელიც ვრცელდება ყველა მოწყობილობასა და ხედვის პორტზე, xs
დაწყებული xl
. დაამატეთ ნებისმიერი რაოდენობის ერთეულების გარეშე კლასები თითოეული საჭირო წყვეტის წერტილისთვის და ყველა სვეტი იქნება იგივე სიგანე.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
თანაბარი სიგანის სვეტები შეიძლება დაიყოს რამდენიმე ხაზად, მაგრამ იყო Safari flexbox-ის ხარვეზი , რომელიც ხელს უშლიდა მის მუშაობას აშკარა flex-basis
ან border
. არსებობს ბრაუზერის ძველი ვერსიებისთვის გამოსავალი, მაგრამ ისინი არ უნდა იყოს საჭირო, თუ განახლებული ხართ.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
flexbox-ის ბადის სვეტების ავტომატური განლაგება ასევე ნიშნავს, რომ თქვენ შეგიძლიათ დააყენოთ ერთი სვეტის სიგანე და ძმების სვეტების ავტომატურად შეცვლა მის გარშემო. თქვენ შეგიძლიათ გამოიყენოთ წინასწარ განსაზღვრული ბადის კლასები (როგორც ნაჩვენებია ქვემოთ), ბადის მიქსები ან ინლაინ სიგანეები. გაითვალისწინეთ, რომ სხვა სვეტების ზომა შეიცვლება ცენტრალური სვეტის სიგანეზე.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
გამოიყენეთ col-{breakpoint}-auto
კლასები სვეტების გასაზომად მათი შინაარსის ბუნებრივი სიგანის მიხედვით.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
შექმენით თანაბარი სიგანის სვეტები, რომლებიც მოიცავს მრავალ რიგს, ჩასვით, .w-100
სადაც გსურთ, რომ სვეტები გაწყდეს ახალ ხაზში. გახადეთ შესვენებები საპასუხო, შერევით .w-100
ზოგიერთ საპასუხო ეკრანის კომუნალურ პროგრამასთან .
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Bootstrap-ის ბადე მოიცავს წინასწარ განსაზღვრულ კლასების ხუთ იარუსს რთული საპასუხო განლაგების შესაქმნელად. შეცვალეთ თქვენი სვეტების ზომა დამატებით პატარა, პატარა, საშუალო, დიდ ან ზედმეტად დიდ მოწყობილობებზე, როგორც თქვენთვის შესაფერისი.
ბადეებისთვის, რომლებიც ერთნაირია უმცირესი მოწყობილობებიდან უდიდესამდე, გამოიყენეთ .col
და .col-*
კლასები. მიუთითეთ დანომრილი კლასი, როდესაც გჭირდებათ განსაკუთრებით ზომის სვეტი; წინააღმდეგ შემთხვევაში, თავისუფლად დაიცავით .col
.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
კლასების ერთი ნაკრების გამოყენებით .col-sm-*
, შეგიძლიათ შექმნათ ძირითადი ბადის სისტემა, რომელიც იწყება დაწყობილი, სანამ ჰორიზონტალური გახდება მცირე წყვეტის წერტილში ( sm
).
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
არ გსურთ თქვენი სვეტები უბრალოდ დაწყობილი იყოს ქსელის ზოგიერთ ფენაში? საჭიროებისამებრ გამოიყენეთ სხვადასხვა კლასის კომბინაცია თითოეული დონისთვის. იხილეთ მაგალითი ქვემოთ, რომ უკეთ გაიგოთ, თუ როგორ მუშაობს ეს ყველაფერი.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
გამოიყენეთ flexbox alignment utilities სვეტების ვერტიკალურად და ჰორიზონტალურად გასწორებისთვის.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
ჩვენს წინასწარ განსაზღვრულ ბადის კლასებში სვეტებს შორის ღარები შეიძლება მოიხსნას .no-gutters
. ეს ხსნის უარყოფით margin
s-ს .row
და ჰორიზონტალურს padding
ყველა უშუალო ბავშვების სვეტიდან.
აქ მოცემულია ამ სტილის შექმნის საწყისი კოდი. გაითვალისწინეთ, რომ სვეტის გადაფარვა ვრცელდება მხოლოდ პირველ შვილობილი სვეტებისთვის და გამიზნულია ატრიბუტის ამომრჩეველის მეშვეობით . მიუხედავად იმისა, რომ ეს ქმნის უფრო სპეციფიკურ ამომრჩეველს, სვეტის შიგთავსი მაინც შეიძლება მორგებული იყოს ინტერვალის კომუნალური საშუალებებით .
გჭირდებათ დიზაინი კიდემდე? ჩამოაგდეს მშობელი .container
ან .container-fluid
.
პრაქტიკაში, აი, როგორ გამოიყურება. გაითვალისწინეთ, რომ შეგიძლიათ გააგრძელოთ მისი გამოყენება ყველა სხვა წინასწარ განსაზღვრული ბადის კლასებთან (მათ შორის სვეტების სიგანეები, საპასუხო დონეები, ხელახალი შეკვეთები და სხვა).
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
თუ 12-ზე მეტი სვეტი მოთავსებულია ერთ მწკრივში, დამატებითი სვეტების თითოეული ჯგუფი, როგორც ერთი ერთეული, გადაიჭრება ახალ ხაზში.
მას შემდეგ, რაც 9 + 4 = 13 > 12, ეს 4-სვეტიანი დივი ხვდება ახალ ხაზზე, როგორც ერთი მომიჯნავე ერთეული.
სვეტები გრძელდება ახალი ხაზის გასწვრივ.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
Flexbox-ში სვეტების ახალ ხაზში გატეხვა მოითხოვს მცირე გატეხვას: დაამატეთ ელემენტი width: 100%
სადაც გსურთ, თქვენი სვეტების ახალ ხაზში გადატანა. ჩვეულებრივ, ეს მიიღწევა მრავალი .row
s-ით, მაგრამ განხორციელების ყველა მეთოდს არ შეუძლია ამის გათვალისწინება.
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
თქვენ ასევე შეგიძლიათ გამოიყენოთ ეს შესვენება კონკრეტულ შესვენების წერტილებზე ჩვენი საპასუხო ეკრანის საშუალებებით .
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
გამოიყენეთ .order-
კლასები თქვენი შინაარსის ვიზუალური წესრიგის გასაკონტროლებლად. ეს კლასები რეაგირებს, ასე რომ თქვენ შეგიძლიათ დააყენოთ order
წყვეტის წერტილი (მაგ., .order-1.order-md-2
). მოიცავს მხარდაჭერას 1
ქსელის 12
ხუთივე საფეხურზე.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
ასევე არის საპასუხო .order-first
და .order-last
კლასები, რომლებიც ცვლის order
ელემენტის მნიშვნელობებს შესაბამისად order: -1
და order: 13
( order: $columns + 1
) გამოყენებით. ეს კლასები ასევე შეიძლება შერეული იყოს დანომრილ .order-*
კლასებთან საჭიროებისამებრ.
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
ქსელის სვეტების კომპენსირება შეგიძლიათ ორი გზით: ჩვენი საპასუხო .offset-
ბადის კლასები და ჩვენი მარჟის უტილიტები . ბადის კლასები ზომით შეესაბამება სვეტებს, ხოლო მინდვრები უფრო სასარგებლოა სწრაფი განლაგებისთვის, სადაც ოფსეტის სიგანე ცვალებადია.
გადაიტანეთ სვეტები მარჯვნივ .offset-md-*
კლასების გამოყენებით. ეს კლასები ზრდის სვეტის მარცხენა ზღვარს *
სვეტების მიხედვით. მაგალითად, .offset-md-4
მოძრაობს .col-md-4
ოთხ სვეტზე.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
გარდა სვეტის გასუფთავებისა საპასუხო წყვეტების წერტილებზე, შეიძლება დაგჭირდეთ ოფსეტების გადატვირთვა. იხილეთ ეს მოქმედებაში ბადის მაგალითში .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
v4-ში flexbox-ზე გადასვლისას შეგიძლიათ გამოიყენოთ ზღვრული უტილიტები, როგორიცაა ძმების .mr-auto
სვეტების დაშორება ერთმანეთისგან.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
თქვენი შინაარსის ნაგულისხმევ ბადეში ჩასართავად დაამატეთ ახალი .row
და .col-sm-*
სვეტების ნაკრები არსებულ .col-sm-*
სვეტში. ჩადგმული რიგები უნდა შეიცავდეს სვეტების ერთობლიობას, რომლებიც ემატება 12-მდე ან ნაკლებს (არ არის საჭირო, რომ გამოიყენოთ 12-ვე ხელმისაწვდომი სვეტი).
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
Bootstrap-ის წყარო Sass ფაილების გამოყენებისას, თქვენ გაქვთ შესაძლებლობა გამოიყენოთ Sass ცვლადები და მიქსინები პერსონალური, სემანტიკური და საპასუხო გვერდის განლაგების შესაქმნელად. ჩვენი წინასწარ განსაზღვრული ბადის კლასები იყენებენ იმავე ცვლადებს და მიქსებს, რათა უზრუნველყონ მზა კლასების მთელი ნაკრები სწრაფი რეაგირებადი განლაგებისთვის.
ცვლადები და რუქები განსაზღვრავენ სვეტების რაოდენობას, ნაკადის სიგანეს და მედია მოთხოვნის წერტილს, საიდანაც იწყება მცურავი სვეტები. ჩვენ ვიყენებთ მათ ზემოთ დოკუმენტირებული წინასწარ განსაზღვრული ბადის კლასების გენერირებისთვის, ასევე ქვემოთ ჩამოთვლილი მორგებული მიქსებისთვის.
მიქსინები გამოიყენება ბადის ცვლადებთან ერთად სემანტიკური CSS-ის გენერირებისთვის ცალკეული ბადის სვეტებისთვის.
თქვენ შეგიძლიათ შეცვალოთ ცვლადები თქვენი საკუთარი მნიშვნელობებით, ან უბრალოდ გამოიყენოთ მიქსები მათი ნაგულისხმევი მნიშვნელობებით. აქ მოცემულია ნაგულისხმევი პარამეტრების გამოყენების მაგალითი ორსვეტიანი განლაგების შესაქმნელად, შორის უფსკრულით.
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
ჩვენი ჩაშენებული ქსელის Sass ცვლადების და რუქების გამოყენებით, შესაძლებელია წინასწარ განსაზღვრული ბადის კლასების სრულად მორგება. შეცვალეთ იარუსების რაოდენობა, მედია მოთხოვნის ზომები და კონტეინერის სიგანე — შემდეგ ხელახლა კომპილაცია.
ბადის სვეტების რაოდენობა შეიძლება შეიცვალოს Sass ცვლადების მეშვეობით. $grid-columns
გამოიყენება თითოეული ცალკეული სვეტის სიგანეების (პროცენტებში) გენერირებისთვის, ხოლო $grid-gutter-width
ნებადართულია წყვეტის წერტილის სპეციფიკური სიგანეები, რომლებიც თანაბრად იყოფა padding-left
და padding-right
სვეტის ღარებისთვის.
თავად სვეტების მიღმა, თქვენ ასევე შეგიძლიათ დააკონფიგურიროთ ბადის დონეების რაოდენობა. თუ გინდოდათ მხოლოდ ოთხი ბადის დონე, განაახლეთ $grid-breakpoints
და $container-max-widths
შემდეგნაირად:
Sass ცვლადებში ან რუკებში ცვლილებების შეტანისას, თქვენ უნდა შეინახოთ ცვლილებები და ხელახლა შეადგინოთ. ამით გამოვა წინასწარ განსაზღვრული ბადის კლასების სრულიად ახალი ნაკრები სვეტების სიგანეებისთვის, ოფსეტებისთვის და შეკვეთებისთვის. საპასუხო ხილვადობის საშუალებები ასევე განახლდება, რათა გამოიყენოს მორგებული წყვეტის წერტილები. დარწმუნდით, რომ დააყენეთ ბადის მნიშვნელობები px
(არა rem
, em
ან %
).