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

გამოიყენეთ ჩვენი ძლიერი მობილური პირველი 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.
• სვეტები widths დაყენებულია პროცენტებში, ამიტომ ისინი ყოველთვის თხევადი და ზომითაა მათი მთავარი ელემენტის მიმართ.
• სვეტებს აქვთ ჰორიზონტალური ღარები ცალკეულ სვეტებს შორის , paddingთუმცა, შეგიძლიათ ამოიღოთ marginსტრიქონებიდან და paddingსვეტებიდან .no-gutters..row
• იმისათვის, რომ ბადე რეაგირებადი იყოს, არის ხუთი ქსელის წყვეტის წერტილი, ერთი თითოეული პასუხისმგებელი წყვეტის წერტილისთვის : ყველა წყვეტის წერტილი (ზედმეტად პატარა), პატარა, საშუალო, დიდი და ძალიან დიდი.
• ქსელის წყვეტის წერტილები დაფუძნებულია მინიმალური სიგანის მედიის მოთხოვნებზე, რაც ნიშნავს, რომ ისინი ვრცელდება ამ ერთ წყვეტის წერტილზე და ყველა მის ზემოთ (მაგ., .col-sm-4ეხება მცირე, საშუალო, დიდ და ზედმეტად დიდ მოწყობილობებს, მაგრამ არა პირველ xsწყვეტის წერტილს).
• თქვენ შეგიძლიათ გამოიყენოთ წინასწარ განსაზღვრული ბადის კლასები (როგორიცაა .col-4) ან Sass მიქსები მეტი სემანტიკური მარკირებისთვის.

გაითვალისწინეთ შეზღუდვები და შეცდომები flexbox-ის ირგვლივ , როგორიცაა HTML ელემენტების გამოყენების შეუძლებლობა, როგორც flex კონტეინერები .

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

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

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

სვეტების ავტომატური განლაგება

გამოიყენეთ წყვეტის წერტილის სპეციფიკური სვეტების კლასები სვეტების მარტივი ზომის გასაზომად ისეთი აშკარა დანომრილი კლასის გარეშე, როგორიცაა .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. ეს ხსნის უარყოფით margins-ს .rowდა ჰორიზონტალურს paddingყველა უშუალო ბავშვების სვეტიდან.

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

გჭირდებათ დიზაინი კიდემდე? ჩამოაგდეს მშობელი .containerან .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

<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-ზე მეტი სვეტი მოთავსებულია ერთ მწკრივში, დამატებითი სვეტების თითოეული ჯგუფი, როგორც ერთი ერთეული, გადაიჭრება ახალ ხაზში.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 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%სადაც გსურთ, თქვენი სვეტების ახალ ხაზში გადატანა. ჩვეულებრივ, ეს მიიღწევა მრავალი .rows-ით, მაგრამ განხორციელების ყველა მეთოდს არ შეუძლია ამის გათვალისწინება.

<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 ცვლადები და მიქსინები პერსონალური, სემანტიკური და საპასუხო გვერდის განლაგების შესაქმნელად. ჩვენი წინასწარ განსაზღვრული ბადის კლასები იყენებენ იმავე ცვლადებს და მიქსებს, რათა უზრუნველყონ მზა კლასების მთელი ნაკრები სწრაფი რეაგირებადი განლაგებისთვის.

ცვლადები

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

მიქსინები

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

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

გამოყენების მაგალითი

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

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<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სვეტის ღარების სიგანეს ადგენს.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

ბადის იარუსები

თავად სვეტების მიღმა, თქვენ ასევე შეგიძლიათ დააკონფიგურიროთ ბადის დონეების რაოდენობა. თუ გინდოდათ მხოლოდ ოთხი ბადის დონე, განაახლეთ $grid-breakpointsდა $container-max-widthsშემდეგნაირად:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass ცვლადებში ან რუკებში ცვლილებების შეტანისას, თქვენ უნდა შეინახოთ ცვლილებები და ხელახლა შეადგინოთ. ამით გამოვა წინასწარ განსაზღვრული ბადის კლასების სრულიად ახალი ნაკრები სვეტების სიგანეებისთვის, ოფსეტებისთვის და შეკვეთებისთვის. საპასუხო ხილვადობის საშუალებები ასევე განახლდება, რათა გამოიყენოს მორგებული წყვეტის წერტილები. დარწმუნდით, რომ დააყენეთ ბადის მნიშვნელობები px(არა rem, emან %).