CSS ბადე

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

Როგორ მუშაობს

Bootstrap 5-ით, ჩვენ დავამატეთ ვარიანტი, რომ ჩართოთ ცალკე ქსელის სისტემა, რომელიც აგებულია CSS Grid-ზე, მაგრამ Bootstrap-ის გადახვევით. თქვენ მაინც იღებთ კლასებს, რომელთა გამოყენება შეგიძლიათ სურვილისამებრ, რათა შექმნათ საპასუხო განლაგება, მაგრამ განსხვავებული მიდგომით.

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

• შეცვალეთ .rowშემთხვევები .grid. .gridკლასი ადგენს display: gridდა ქმნის , grid-templateრომელზედაც თქვენ აშენებთ თქვენი HTML-ით.

• შეცვალეთ .col-*კლასები .g-col-*კლასებით. ეს იმიტომ ხდება, რომ ჩვენი CSS Grid სვეტები grid-columnსაკუთრებას იყენებენ ნაცვლად width.

• სვეტები და ღრძილების ზომები დაყენებულია CSS ცვლადების მეშვეობით. დააყენეთ ისინი მშობელზე .gridდა დააკონფიგურირეთ, როგორც გსურთ, ჩასმული ან სტილის ფურცელში, --bs-columnsდა --bs-gap.

მომავალში, Bootstrap სავარაუდოდ გადაინაცვლებს ჰიბრიდულ გადაწყვეტაზე, რადგან gapქონებამ მიაღწია ბრაუზერის თითქმის სრულ მხარდაჭერას flexbox-ისთვის.

ძირითადი განსხვავებები

ნაგულისხმევი ქსელის სისტემასთან შედარებით:

• Flex Utilities არ მოქმედებს CSS Grid სვეტებზე იმავე გზით.

• ხარვეზები ცვლის ღარები. საკუთრება gapცვლის ჰორიზონტს paddingჩვენი ნაგულისხმევი ბადის სისტემისგან და ფუნქციონირებს უფრო ჰგავს margin.

• როგორც ასეთი, s-სგან განსხვავებით .row, .grids-ს არ აქვს უარყოფითი მინდვრები და ზღვრული უტილიტები არ შეიძლება გამოყენებულ იქნას ქსელის ღარების შესაცვლელად. ბადის ხარვეზები გამოიყენება ჰორიზონტალურად და ვერტიკალურად ნაგულისხმევად. დამატებითი ინფორმაციისთვის იხილეთ მორგების განყოფილება .

• Inline და Custom სტილები უნდა განიხილებოდეს, როგორც შემცვლელი მოდიფიკატორის კლასებისთვის (მაგ., style="--bs-columns: 3;"vs class="row-cols-3").

• Nesting მუშაობს ანალოგიურად, მაგრამ შეიძლება მოითხოვოს თქვენი სვეტების რაოდენობის გადატვირთვა შიგთავსის თითოეულ ეგზემპლარზე .grid. დეტალებისთვის იხილეთ ბუდეების განყოფილება .

მაგალითები

სამი სვეტი

სამი თანაბარი სიგანის სვეტი ყველა ხედსა და მოწყობილობაზე შეიძლება შეიქმნას .g-col-4კლასების გამოყენებით. დაამატეთ საპასუხო კლასები განლაგების შესაცვლელად ხედის ზომის მიხედვით.

<div class="grid">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

საპასუხო

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

<div class="grid">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

შეადარეთ ეს ორი სვეტის განლაგებას ყველა ხედის პორტში.

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

შეფუთვა

ბადის ელემენტები ავტომატურად ხვდება შემდეგ ხაზში, როდესაც ჰორიზონტალურად ადგილი აღარ იქნება. გაითვალისწინეთ, რომ ეს gapეხება ჰორიზონტალურ და ვერტიკალურ ხარვეზებს ქსელის ელემენტებს შორის.

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

იწყება

დაწყების კლასები მიზნად ისახავს შეცვალოს ჩვენი ნაგულისხმევი ქსელის ოფსეტური კლასები, მაგრამ ისინი მთლად იგივე არ არიან. CSS Grid ქმნის ბადის შაბლონს სტილების საშუალებით, რომლებიც ბრაუზერებს ეუბნებიან „დაიწყონ ამ სვეტიდან“ და „დასრულდეს ამ სვეტით“. ეს თვისებები არის grid-column-startდა grid-column-end. საწყისი კლასები არის სტენოგრაფიული პირველი. დააწყვილეთ ისინი სვეტების კლასებთან ზომით და გაასწორეთ თქვენი სვეტები, როგორც გჭირდებათ. დაწყების კლასები იწყება 1ამ 0თვისებების არასწორი მნიშვნელობით.

<div class="grid">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

ავტო სვეტები

როდესაც არ არის კლასები ბადის ერთეულებზე (ა-ის უშუალო შვილები .grid), ბადის თითოეული ელემენტი ავტომატურად იქნება ზომის ერთ სვეტად.

<div class="grid">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

ეს ქცევა შეიძლება შერეული იყოს ბადის სვეტების კლასებთან.

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

ბუდე

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

• ჩვენ უგულებელყოფთ სვეტების ნაგულისხმევ რაოდენობას ადგილობრივი CSS ცვლადით: --bs-columns: 3.
• პირველ ავტო-სვეტში, სვეტების რაოდენობა მემკვიდრეობით მიიღება და თითოეული სვეტი არის ხელმისაწვდომი სიგანის მესამედი.
• მეორე ავტო-სვეტში ჩვენ დავაყენეთ სვეტების რაოდენობა .grid12-ზე (ჩვენი ნაგულისხმევი).
• მესამე ავტომატურ სვეტს არ აქვს ჩადგმული შინაარსი.

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

<div class="grid" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

მორგება

შეცვალეთ სვეტების რაოდენობა, რიგების რაოდენობა და ხარვეზების სიგანე ადგილობრივი CSS ცვლადებით.

ამ CSS ცვლადებს არ აქვთ ნაგულისხმევი მნიშვნელობა; ამის ნაცვლად, ისინი იყენებენ სარეზერვო მნიშვნელობებს, რომლებიც გამოიყენება ადგილობრივი ინსტანციის მოწოდებამდე. მაგალითად, ჩვენ ვიყენებთ var(--bs-rows, 1)ჩვენი CSS Grid რიგებისთვის, რომლებიც იგნორირებას უკეთებენ, --bs-rowsრადგან ეს ჯერ არსად არ არის დაყენებული. როგორც კი ეს მოხდება, .gridინსტანცია გამოიყენებს ამ მნიშვნელობას სარეზერვო მნიშვნელობის ნაცვლად 1.

არ არის ბადის კლასები

უშუალო ბავშვების ელემენტები .gridარის ბადის ელემენტი, ამიტომ მათი ზომა იქნება .g-colკლასის აშკარად დამატების გარეშე.

<div class="grid" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

სვეტები და ხარვეზები

დაარეგულირეთ სვეტების რაოდენობა და უფსკრული.

<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

რიგების დამატება

მეტი მწკრივის დამატება და სვეტების განლაგების შეცვლა:

<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

ხარვეზები

შეცვალეთ ვერტიკალური ხარვეზები მხოლოდ შეცვლით row-gap. გაითვალისწინეთ, რომ ჩვენ ვიყენებთ s- gapზე .grid, მაგრამ row-gapდა column-gapშეიძლება შეიცვალოს საჭიროებისამებრ.

<div class="grid" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ამის გამო, თქვენ შეგიძლიათ გქონდეთ სხვადასხვა ვერტიკალური და ჰორიზონტალური gaps, რომელსაც შეუძლია მიიღოს ერთი მნიშვნელობა (ყველა მხარე) ან წყვილი მნიშვნელობა (ვერტიკალური და ჰორიზონტალური). ეს შეიძლება გამოყენებულ იქნას inline style-ით gapან ჩვენი --bs-gapCSS ცვლადით.

<div class="grid" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

სას

CSS Grid-ის ერთი შეზღუდვა არის ის, რომ ჩვენი ნაგულისხმევი კლასები კვლავ გენერირებულია ორი Sass ცვლადით $grid-columnsდა $grid-gutter-width. ეს ეფექტურად განსაზღვრავს ჩვენს შედგენილ CSS-ში გენერირებული კლასების რაოდენობას. აქ თქვენ გაქვთ ორი ვარიანტი:

• შეცვალეთ ნაგულისხმევი Sass ცვლადები და გადააკეთეთ თქვენი CSS.
• გამოიყენეთ inline ან მორგებული სტილები მოწოდებული კლასების გასაძლიერებლად.

მაგალითად, შეგიძლიათ გაზარდოთ სვეტების რაოდენობა და შეცვალოთ ხარვეზის ზომა, შემდეგ კი შეაფასოთ თქვენი „სვეტები“ ჩართული სტილისა და წინასწარ განსაზღვრული CSS Grid სვეტების კლასების ნაზავით (მაგ., .g-col-4).

<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>