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

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

ამ გვერდზე

მაგალითი

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

ახალი თუ არ იცნობთ flexbox-ს? წაიკითხეთ ეს CSS Tricks flexbox სახელმძღვანელო ფონის, ტერმინოლოგიის, სახელმძღვანელო მითითებებისა და კოდის ფრაგმენტებისთვის.

სვეტი

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

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

მისი დაშლისას, აი, როგორ აერთიანებს ქსელის სისტემა:

ჩვენი ბადე მხარს უჭერს ექვს საპასუხო წყვეტის წერტილს . წყვეტების წერტილები დაფუძნებულია min-widthმედიის მოთხოვნებზე, რაც ნიშნავს, რომ ისინი გავლენას ახდენენ ამ წყვეტის წერტილზე და ყველა მის ზემოთ (მაგ., .col-sm-4ეხება sm, md, lg, xlდა xxl). ეს ნიშნავს, რომ თქვენ შეგიძლიათ აკონტროლოთ კონტეინერის და სვეტის ზომა და ქცევა თითოეული წყვეტის წერტილით.
კონტეინერები ცენტრში და ჰორიზონტალურად ავსებენ თქვენს კონტენტს. გამოიყენეთ .containerრეაგირებადი პიქსელის სიგანისთვის, .container-fluidყველა width: 100%ხედვის პორტისთვის და მოწყობილობისთვის, ან რეაგირებადი კონტეინერი (მაგ., .container-md) სითხისა და პიქსელის სიგანეების კომბინაციისთვის.
რიგები არის შეფუთვა სვეტებისთვის. თითოეულ სვეტს აქვს ჰორიზონტალური padding(ე.წ. ღარი) მათ შორის სივრცის გასაკონტროლებლად. ამის paddingშემდეგ ეს ეწინააღმდეგება რიგებს უარყოფითი მინდვრებით, რათა უზრუნველყოს თქვენი სვეტების შინაარსი ვიზუალურად გასწორებული მარცხენა მხარეს. სტრიქონები ასევე მხარს უჭერენ მოდიფიკატორ კლასებს, რათა ერთნაირად გამოიყენონ სვეტების ზომა და ღრძილების კლასები თქვენი შინაარსის ინტერვალის შესაცვლელად.
სვეტები წარმოუდგენლად მოქნილია. თითოეულ მწკრივზე არის 12 შაბლონის სვეტი, რაც საშუალებას გაძლევთ შექმნათ ელემენტების სხვადასხვა კომბინაციები, რომლებიც მოიცავს სვეტების ნებისმიერ რაოდენობას. სვეტების კლასები მიუთითებენ შაბლონის სვეტების რაოდენობაზე, რომლებიც უნდა დაიფაროს (მაგ., col-4მოიცავს ოთხს). widths მითითებულია პროცენტებში, ასე რომ თქვენ ყოველთვის გაქვთ იგივე ფარდობითი ზომა.
ღარები ასევე რეაგირებს და რეგულირებადია. ღრძილების კლასები ხელმისაწვდომია ყველა წყვეტის წერტილში, ყველა იგივე ზომით, როგორც ჩვენი ზღვარი და ბალიშის მანძილი . შეცვალეთ ჰორიზონტალური ღარები .gx-*კლასებით, ვერტიკალური ღარები კლასებით .gy-*ან ყველა ღარები .g-*კლასებით. .g-0ასევე ხელმისაწვდომია ღარების მოსაშორებლად.
Sass ცვლადები, რუკები და მიქსები აძლიერებენ ქსელს. თუ არ გსურთ გამოიყენოთ წინასწარ განსაზღვრული ბადის კლასები Bootstrap-ში, შეგიძლიათ გამოიყენოთ ჩვენი ქსელის წყარო Sass , რათა შექმნათ თქვენი საკუთარი უფრო სემანტიკური მარკირებით. ჩვენ ასევე მოიცავს რამდენიმე CSS პერსონალურ თვისებას ამ Sass ცვლადების გამოსაყენებლად, თქვენთვის კიდევ უფრო დიდი მოქნილობისთვის.

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

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

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

ზედმეტი პატარა (xs)
პატარა (სმ)
საშუალო (მდ)
დიდი (Lg)
ძალიან დიდი (xl)
ზედმეტად დიდი (xxl)

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

	xs <576px	სმ ≥576 პიქსელი	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
კონტეინერი`max-width`	არცერთი (ავტო)	540 პიქსელი	720 პიქსელი	960 პიქსელი	1140 პიქსელი	1320 პიქსელი
კლასის პრეფიქსი	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
სვეტების #	12
ღუმელის სიგანე	1.5rem (.75rem მარცხნივ და მარჯვნივ)
საბაჟო ღარები	დიახ
ბუდე	დიახ
სვეტების შეკვეთა	დიახ

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

გამოიყენეთ წყვეტის წერტილის სპეციფიკური სვეტების კლასები სვეტების მარტივი ზომის გასაზომად ისეთი აშკარა დანომრილი კლასის გარეშე, როგორიცაა .col-sm-6.

თანაბარი სიგანე

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

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>

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

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-*კლასები, რათა სწრაფად დააყენოთ სვეტების რაოდენობა, რომლებიც საუკეთესოდ ასახავს თქვენს შინაარსს და განლაგებას. მაშინ როდესაც ნორმალური .col-*კლასები ვრცელდება ცალკეულ სვეტებზე (მაგ., .col-md-4), მწკრივის სვეტების კლასები დაყენებულია მშობელზე .row, როგორც მალსახმობი. .row-cols-autoთქვენ შეგიძლიათ მიანიჭოთ სვეტებს მათი ბუნებრივი სიგანე .

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

სვეტი

<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-auto">
    <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);
  }
}

ბუდე

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

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

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

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

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

მიქსინები

მიქსინები გამოიყენება ბადის ცვლადებთან ერთად სემანტიკური 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@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: 1.5rem !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ან %).