Grid tizimi

Misol

Bootstrap grid tizimi tarkibni joylashtirish va tekislash uchun bir qator konteynerlar, qatorlar va ustunlardan foydalanadi. U flexbox bilan qurilgan va to'liq javob beradi. Quyida grid tizimining birlashishiga misol va chuqur tushuntirish berilgan.

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

Yuqoridagi misol barcha qurilmalar va ko'rish oynalari bo'ylab oldindan belgilangan panjara sinflarimizdan foydalangan holda uchta teng kenglikdagi ustunlarni yaratadi. Ushbu ustunlar ota-ona bilan sahifaning markazida joylashgan .container.

U qanday ishlaydi

Buni ajratib ko'rsatadigan bo'lsak, grid tizimi qanday birlashadi:

• Bizning tarmoq oltita sezgir to'xtash nuqtasini qo'llab-quvvatlaydi . To'xtash nuqtalari media so'rovlariga asoslanadi min-width, ya'ni ular to'xtash nuqtasiga va undan yuqori bo'lgan barchaga ta'sir qiladi (masalan, , , , va .col-sm-4uchun amal qiladi ). Bu har bir to'xtash nuqtasi bo'yicha konteyner va ustun o'lchamlarini va xatti-harakatlarini boshqarishingiz mumkinligini anglatadi.smmdlgxlxxl

• Konteynerlarni markazga qo'ying va tarkibingizni gorizontal ravishda to'ldiring. Barcha ko‘rish maydonlari va qurilmalari uchun sezgir piksel kengligi yoki suyuqlik va piksel kengliklarining kombinatsiyasi uchun sezgir konteynerdan (masalan , .container) foydalaning .container-fluid.width: 100%.container-md

• Qatorlar ustunlar uchun o'ramlardir. Har bir ustunda paddingular orasidagi bo'shliqni boshqarish uchun gorizontal (oluk deb ataladi) mavjud. Keyin paddingustunlaringizdagi kontentning chap tomonda vizual ravishda tekislanishini ta'minlash uchun manfiy chetlari bo'lgan qatorlarda bunga qarshi turadi. Tarkibingiz oralig'ini o'zgartirish uchun satrlar ustun o'lchamlarini va oluk sinflarini bir xilda qo'llash uchun modifikator sinflarini ham qo'llab-quvvatlaydi .

• Ustunlar nihoyatda moslashuvchan. Har bir satrda 12 ta shablon ustunlari mavjud bo'lib, ular istalgan sonli ustunlarni qamrab oladigan elementlarning turli kombinatsiyalarini yaratishga imkon beradi. Ustun sinflari qo'yiladigan shablon ustunlari sonini ko'rsatadi (masalan, col-4to'rtta oraliq). widths foizlarda o'rnatiladi, shuning uchun siz doimo bir xil nisbiy o'lchamga ega bo'lasiz.

• Oluklar ham sezgir va sozlanishi. Gutter sinflari barcha to'xtash nuqtalarida mavjud bo'lib, ularning o'lchamlari bizning chekka va to'ldirish oralig'imiz bilan bir xil . Gorizontal oluklarni .gx-*sinflar bilan, vertikal oluklarni bilan .gy-*yoki barcha oluklarni .g-*sinflar bilan almashtiring. .g-0oluklarni olib tashlash uchun ham mavjud.

• Sass o'zgaruvchilari, xaritalar va miksinlar tarmoqni quvvatlantiradi. Agar siz Bootstrap-da oldindan belgilangan grid sinflaridan foydalanishni xohlamasangiz, ko'proq semantik belgilar bilan o'zingizni yaratish uchun bizning tarmoq manbamiz Sassdan foydalanishingiz mumkin. Biz, shuningdek, siz uchun yanada ko'proq moslashuvchanlik uchun ushbu Sass o'zgaruvchilarini ishlatish uchun ba'zi CSS maxsus xususiyatlarini o'z ichiga olamiz.

Ba'zi HTML elementlarini moslashuvchan konteyner sifatida ishlata olmaslik kabi flexbox atrofidagi cheklovlar va xatolardan xabardor bo'ling .

Grid variantlari

Bootstrap grid tizimi barcha oltita standart to'xtash nuqtalari va siz sozlagan har qanday to'xtash nuqtalari bo'ylab moslasha oladi. Oltita standart panjara sathlari quyidagilardan iborat:

• Juda kichik (xs)
• Kichik (sm)
• O'rta (md)
• Katta (lg)
• Juda katta (xl)
• Juda katta (xxl)

Yuqorida ta'kidlab o'tilganidek, ushbu to'xtash nuqtalarining har biri o'z konteyneriga, noyob sinf prefiksiga va modifikatorlariga ega. Ushbu to'xtash nuqtalari bo'ylab to'r qanday o'zgaradi:

Ustunlarni avtomatik joylashtirish

kabi aniq raqamlangan sinfsiz ustun o'lchamlarini osonlashtirish uchun to'xtash nuqtasiga xos ustun sinflaridan foydalaning .col-sm-6.

Teng kenglik

Misol uchun, bu erda har bir qurilma va ko'rish oynasi uchun qo'llaniladigan ikkita panjara tartibi xsmavjud xxl. Sizga kerak bo'lgan har bir to'xtash nuqtasi uchun istalgan sonli birliksiz sinflarni qo'shing va har bir ustun bir xil kenglikda bo'ladi.

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

Bir ustun kengligini o'rnatish

Flexbox panjara ustunlari uchun avtomatik tartib, shuningdek, siz bitta ustunning kengligini o'rnatishingiz va uning atrofida birodar ustunlar avtomatik ravishda o'lchamlarini o'zgartirishingiz mumkinligini anglatadi. Oldindan belgilangan grid sinflari (quyida ko'rsatilganidek), grid miksinlari yoki inline kengliklaridan foydalanishingiz mumkin. E'tibor bering, markaziy ustunning kengligidan qat'i nazar, boshqa ustunlar o'lchamlarini o'zgartiradi.

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

O'zgaruvchan kenglik tarkibi

col-{breakpoint}-autoUstunlarni mazmunining tabiiy kengligidan kelib chiqqan holda o'lchash uchun sinflardan foydalaning .

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

Javobgar sinflar

Bootstrap tarmog'i murakkab sezgir maketlarni yaratish uchun oldindan belgilangan olti darajali sinflarni o'z ichiga oladi. Ustunlaringiz oʻlchamini oʻzingizga mos keladigan darajada kichik, kichik, oʻrta, katta yoki juda katta qurilmalarda moslashtiring.

Barcha to'xtash nuqtalari

Qurilmalarning eng kichigidan tortib to eng kattasigacha bir xil bo'lgan tarmoqlar uchun .colva .col-*sinflaridan foydalaning. Sizga alohida o'lchamdagi ustun kerak bo'lganda raqamlangan sinfni belgilang; aks holda, ga yopishib olishingiz mumkin .col.

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

Gorizontalga yotqizilgan

Bitta sinflar to'plamidan foydalanib , siz stacked boshlanadigan va kichik to'xtash nuqtasida ( ) .col-sm-*gorizontal holga keladigan asosiy tarmoq tizimini yaratishingiz mumkin .sm

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

Aralashtiring va moslashtiring

Ustunlaringiz shunchaki bir nechta panjara sathlarida to'planishini xohlamaysizmi? Zarur bo'lganda, har bir daraja uchun turli sinflar kombinatsiyasidan foydalaning. Bularning barchasi qanday ishlashini yaxshiroq tushunish uchun quyidagi misolga qarang.

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

Qator ustunlari

.row-cols-*Tarkibingiz va tartibingizni eng yaxshi ko'rsatadigan ustunlar sonini tezda sozlash uchun sezgir sinflardan foydalaning. Oddiy .col-*sinflar alohida ustunlar uchun amal qilsa (masalan, .col-md-4), satr ustunlari sinflari .rowmavjud ustunlar uchun sukut bo'yicha ota-onaga o'rnatiladi. Siz bilan .row-cols-autoustunlarga ularning tabiiy kengligini berishingiz mumkin.

Ushbu satr ustunlari sinflaridan asosiy tarmoq sxemalarini tezda yaratish yoki kartangiz tartiblarini boshqarish va kerak bo'lganda ustunlar darajasida bekor qilish uchun foydalaning.

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

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

Siz hamroh bo'lgan Sass aralashmasidan foydalanishingiz mumkin, 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);
  }
}

Uy qurish

Kontentingizni standart tarmoqqa joylashtirish uchun mavjud ustunga yangi .rowva ustunlar to‘plamini qo‘shing . Ichki qatorlar 12 tagacha yoki undan kamroq ustunlar to'plamini o'z ichiga olishi kerak (barcha 12 ta mavjud ustundan foydalanish shart emas)..col-sm-*.col-sm-*

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

Sass

Bootstrap-ning Sass manba fayllaridan foydalanganda sizda maxsus, semantik va sezgir sahifa tartiblarini yaratish uchun Sass o'zgaruvchilari va miksinlaridan foydalanish imkoniyati mavjud. Bizning oldindan belgilangan grid sinflarimiz tez javob beruvchi sxemalar uchun foydalanishga tayyor sinflarning butun to'plamini taqdim etish uchun bir xil o'zgaruvchilar va miksinlardan foydalanadi.

O'zgaruvchilar

O'zgaruvchilar va xaritalar ustunlar sonini, truba kengligini va suzuvchi ustunlarni boshlash uchun media so'rov nuqtasini aniqlaydi. Biz ulardan yuqorida hujjatlashtirilgan oldindan belgilangan grid sinflarini, shuningdek quyida sanab o'tilgan maxsus miksinlarni yaratish uchun foydalanamiz.

$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
);

Aralashmalar

Miksinlar grid o'zgaruvchilari bilan birgalikda alohida panjara ustunlari uchun semantik CSS yaratish uchun ishlatiladi.

// 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);

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

Foydalanish misoli

Siz o'zgaruvchilarni o'zingizning shaxsiy qiymatlaringizga o'zgartirishingiz mumkin yoki shunchaki aralashmalarni standart qiymatlari bilan ishlatishingiz mumkin. Ikki ustunli tartibni yaratish uchun standart sozlamalardan foydalanishga misol.

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

Gridni moslashtirish

O‘rnatilgan Sass o‘zgaruvchilari va xaritalarimizdan foydalanib, oldindan belgilangan grid sinflarini to‘liq moslashtirish mumkin. Qatlamlar sonini, media so'rov o'lchamlarini va konteyner kengligini o'zgartiring - keyin qayta kompilyatsiya qiling.

Ustunlar va oluklar

Grid ustunlari sonini Sass o'zgaruvchilari orqali o'zgartirish mumkin. $grid-columnshar bir alohida ustunning kengligini (foizda) hosil qilish uchun ishlatiladi, shu $grid-gutter-widthbilan birga ustun oluklari uchun kenglikni o'rnatadi.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Grid qatlamlari

Ustunlarning o'zidan tashqariga o'tsangiz, siz panjara sathlari sonini ham sozlashingiz mumkin. Agar siz atigi to'rtta katakchani xohlasangiz, $grid-breakpointsva $container-max-widthsni shunga o'xshash narsaga yangilaysiz:

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

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

Sass o'zgaruvchilari yoki xaritalariga biron bir o'zgartirish kiritayotganda, o'zgarishlarni saqlashingiz va qayta kompilyatsiya qilishingiz kerak bo'ladi. Shunday qilib, ustunlar kengligi, ofsetlari va tartiblari uchun oldindan belgilangan panjara sinflarining yangi to'plami chiqariladi. Moslashtirilgan toʻxtash nuqtalaridan foydalanish uchun sezgir koʻrinish dasturlari ham yangilanadi. pxTo'r qiymatlarini ( rem, em, yoki emas) o'rnatganingizga ishonch hosil qiling %.