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

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

	ძალიან პატარა <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. დაამატეთ ნებისმიერი რაოდენობის ერთეულების გარეშე კლასები თითოეული საჭირო წყვეტის წერტილისთვის და ყველა სვეტი იქნება იგივე სიგანე.

1 2-დან

2 2-დან

1 3-დან

2 3-დან

3 3-დან

<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>

თანაბარი სიგანის მრავალხაზოვანი

შექმენით თანაბარი სიგანის სვეტები, რომლებიც მოიცავს მრავალ ხაზს, ჩასვით, .w-100სადაც გსურთ, რომ სვეტები გადაიზარდოს ახალ ხაზში. გახადეთ შესვენებები საპასუხო დისპლეის.w-100 ზოგიერთ საპასუხო პროგრამასთან შერევით .

იყო Safari flexbox-ის შეცდომა , რომელიც ხელს უშლიდა მის მუშაობას აშკარა flex-basisან border. არსებობს ბრაუზერის ძველი ვერსიებისთვის გამოსავლის გზები, მაგრამ ისინი არ უნდა იყოს საჭირო, თუ თქვენი სამიზნე ბრაუზერები არ მოხვდება მცდარი ვერსიებში.

პოლკოვნიკი

<div class="container">
  <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>
</div>

ერთი სვეტის სიგანის დაყენება

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

1 3-დან

2 3-დან (უფრო ფართო)

3 3-დან

1 3-დან

2 3-დან (უფრო ფართო)

3 3-დან

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

1 3-დან

ცვლადი სიგანის შინაარსი

3 3-დან

1 3-დან

ცვლადი სიგანის შინაარსი

3 3-დან

<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>

საპასუხო კლასები

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

ყველა წყვეტის წერტილი

ბადეებისთვის, რომლებიც ერთნაირია უმცირესი მოწყობილობებიდან უდიდესამდე, გამოიყენეთ .colდა .col-*კლასები. მიუთითეთ დანომრილი კლასი, როდესაც გჭირდებათ განსაკუთრებით ზომის სვეტი; წინააღმდეგ შემთხვევაში, თავისუფლად დაიცავით .col.

პოლკოვნიკი

col-8

კოლ-4

<div class="container">
  <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>
</div>

დაწყობილია ჰორიზონტალურად

კლასების ერთი ნაკრების გამოყენებით .col-sm-*, შეგიძლიათ შექმნათ ძირითადი ბადის სისტემა, რომელიც იწყება დაწყობილი და ხდება ჰორიზონტალური მცირე წყვეტის წერტილში ( sm).

col-sm-8

col-sm-4

კოლ-სმ

<div class="container">
  <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>
</div>

Არევა და გატოლება

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

.col-md-8

.col-6 .col-md-4

.კოლ-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>
</div>

ღარები

ღარები შეიძლება მორგებული იყოს საპასუხოდ, წყვეტის წერტილის სპეციფიკური ბალიშების და უარყოფითი ზღვრის სასარგებლო კლასებით. მოცემულ მწკრივში ღრძილების შესაცვლელად, დააწყვილეთ უარყოფითი ზღვრული უტილიტა .rowდა შესაბამისი ბალიშის უტილიტები .cols-ზე. .containerშეიძლება .container-fluidდაგჭირდეთ მშობლის კორექტირებაც, რათა თავიდან იქნას აცილებული არასასურველი გადინება, ხელახლა შესატყვისი დამტენის პროგრამის გამოყენებით.

აქ მოცემულია Bootstrap ბადის მორგების მაგალითი დიდ ( lg) წყვეტის წერტილზე და ზემოთ. ჩვენ გავზარდეთ .colბალიშები .px-lg-5, დავუპირისპირდით .mx-lg-n5მას მშობელს .rowდა შემდეგ მოვარგეთ .containerშეფუთვა .px-lg-5.

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

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

მწკრივის სვეტები

გამოიყენეთ საპასუხო .row-cols-*კლასები, რათა სწრაფად დააყენოთ სვეტების რაოდენობა, რომლებიც საუკეთესოდ ასახავს თქვენს შინაარსს და განლაგებას. მაშინ როდესაც ნორმალური .col-*კლასები ვრცელდება ცალკეულ სვეტებზე (მაგ., .col-md-4), მწკრივის სვეტების კლასები დაყენებულია მშობელზე .row, როგორც მალსახმობი.

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

სვეტი

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

სვეტი

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

სვეტი

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

სვეტი

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

სვეტი

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

თქვენ ასევე შეგიძლიათ გამოიყენოთ თანმხლები Sass mixin, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

გასწორება

გამოიყენეთ flexbox alignment utilities სვეტების ვერტიკალურად და ჰორიზონტალურად გასწორებისთვის. Internet Explorer 10-11-ს არ აქვს მოქნილი ელემენტების ვერტიკალური გასწორების მხარდაჭერა, როდესაც მოქნილი კონტეინერი აქვს, min-heightროგორც ეს ნაჩვენებია ქვემოთ. დამატებითი ინფორმაციისთვის იხილეთ Flexbugs #3.

ვერტიკალური განლაგება

სამი სვეტიდან ერთი

<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;
  }
}

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

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

სვეტის შეფუთვა

თუ 12-ზე მეტი სვეტი მოთავსებულია ერთ მწკრივში, დამატებითი სვეტების თითოეული ჯგუფი, როგორც ერთი ერთეული, გადაიჭრება ახალ ხაზში.

.კოლ-9

.col-4
მას შემდეგ, რაც 9 + 4 = 13 > 12, ეს 4-სვეტიანი დივი ხვდება ახალ ხაზზე, როგორც ერთი მომიჯნავე ერთეული.

.col-6 შემდეგი
სვეტები გრძელდება ახალი ხაზის გასწვრივ.

<div class="container">
  <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>
</div>

სვეტი იშლება

Flexbox-ში სვეტების ახალ ხაზში გატეხვა მოითხოვს მცირე გატეხვას: დაამატეთ ელემენტი width: 100%სადაც გსურთ, თქვენი სვეტების ახალ ხაზში გადატანა. ჩვეულებრივ, ეს მიიღწევა მრავალი .rows-ით, მაგრამ განხორციელების ყველა მეთოდს არ შეუძლია ამის გათვალისწინება.

.col-6 .col-sm-3

<div class="container">
  <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>

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

.col-6 .col-sm-4

<div class="container">
  <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>
</div>

ხელახლა შეკვეთა

შეუკვეთეთ კლასები

გამოიყენეთ .order-კლასები თქვენი შინაარსის ვიზუალური წესრიგის გასაკონტროლებლად. ეს კლასები რეაგირებს, ასე რომ თქვენ შეგიძლიათ დააყენოთ orderწყვეტის წერტილი (მაგ., .order-1.order-md-2). მოიცავს მხარდაჭერას 1ქსელის 12ხუთივე საფეხურზე.

ჯერ DOM-ში, შეკვეთა არ გამოქვეყნებულა

მეორე DOM-ში, უფრო დიდი შეკვეთით

მესამე DOM-ში, 1-ის შეკვეთით

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

ასევე არის საპასუხო .order-firstდა .order-lastკლასები, რომლებიც ცვლის orderელემენტის მნიშვნელობებს შესაბამისად order: -1და order: 13( order: $columns + 1) გამოყენებით. ეს კლასები ასევე შეიძლება შერეული იყოს დანომრილ .order-*კლასებთან საჭიროებისამებრ.

პირველი DOM-ში, შეკვეთილი ბოლოს

მეორე DOM-ში, შეუკვეთავი

მესამე DOM-ში, შეკვეთილი პირველი

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

ოფსეტური სვეტები

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

ოფსეტური კლასები

გადაიტანეთ სვეტები მარჯვნივ .offset-md-*კლასების გამოყენებით. ეს კლასები ზრდის სვეტის მარცხენა ზღვარს *სვეტების მიხედვით. მაგალითად, .offset-md-4მოძრაობს .col-md-4ოთხ სვეტზე.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <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>

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

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <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>
</div>

მარჟის კომუნალური საშუალებები

v4-ში flexbox-ზე გადასვლისას შეგიძლიათ გამოიყენოთ ზღვრული უტილიტები, როგორიცაა ძმების .mr-autoსვეტების დაშორება ერთმანეთისგან.

.col-md-4

.col-md-4 .ml-ავტო

.კოლ-მდ-3 .მლ-მდ-ავტო

.კოლ-ავტო .მრ-ავტო

.კოლ-ავტო

<div class="container">
  <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>
</div>

ბუდე

თქვენი შინაარსის ნაგულისხმევ ბადეში ჩასართავად დაამატეთ ახალი .rowდა .col-sm-*სვეტების ნაკრები არსებულ .col-sm-*სვეტში. ჩადგმული რიგები უნდა შეიცავდეს სვეტების ერთობლიობას, რომლებიც ემატება 12-მდე ან ნაკლებს (არ არის საჭირო, რომ გამოიყენოთ 12-ვე ხელმისაწვდომი სვეტი).

დონე 1: .col-sm-9

დონე 2: .col-8 .col-sm-6

დონე 2: .col-4 .col-sm-6

<div class="container">
  <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>
</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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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ან %).