Grid tizimi

O'n ikki ustunli tizim, beshta standart javob beruvchi sathlar, Sass o'zgaruvchilari va miksinlari va o'nlab oldindan belgilangan sinflar tufayli barcha shakl va o'lchamdagi maketlarni yaratish uchun kuchli mobil-birinchi flexbox tarmog'imizdan foydalaning.

U qanday ishlaydi

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 misol va panjara qanday birlashishini chuqur ko'rib chiqamiz.

Flexbox bilan yangi yoki tanish emasmisiz? Fon, terminologiya, ko'rsatmalar va kod parchalari uchun ushbu CSS Tricks flexbox qo'llanmasini o'qing .

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

Yuqoridagi misol bizning oldindan belgilangan panjara sinflarimizdan foydalangan holda kichik, o'rta, katta va qo'shimcha katta qurilmalarda uchta teng kenglikdagi ustunlarni yaratadi. Ushbu ustunlar ota-ona bilan sahifaning markazida joylashgan .container.

Uni qismlarga ajratib, u qanday ishlaydi:

• Konteynerlar saytingiz tarkibini markazlashtirish va gorizontal ravishda joylashtirish uchun vositani taqdim etadi. .containerTa'sirchan piksel kengligi yoki barcha ko'rish oynasi va qurilma o'lchamlari .container-fluiduchun foydalaning .width: 100%
• Qatorlar ustunlar uchun o'ramlardir. Har bir ustunda paddingular orasidagi bo'shliqni boshqarish uchun gorizontal (oluk deb ataladi) mavjud. Keyin paddingsalbiy chekkalari bo'lgan qatorlarda bunga qarshi turadi. Shunday qilib, ustunlaringizdagi barcha kontent chap tomonda vizual ravishda tekislanadi.
• To'r tartibida kontent ustunlar ichiga joylashtirilishi kerak va faqat ustunlar satrlarning bevosita bolalari bo'lishi mumkin.
• Flexbox tufayli, ko'rsatilmagan panjara ustunlari widthavtomatik ravishda teng kenglikdagi ustunlar sifatida joylashadi. Misol uchun, .col-smirodaning to'rtta nusxasi avtomatik ravishda kichik to'xtash nuqtasidan 25% va undan yuqori bo'ladi. Qo'shimcha misollar uchun avtomatik tartib ustunlari bo'limiga qarang.
• Ustun sinflari har bir satrda mumkin bo'lgan 12 tadan foydalanmoqchi bo'lgan ustunlar sonini ko'rsatadi. Shunday qilib, agar siz uchta teng kenglikdagi ustunlarni xohlasangiz, dan foydalanishingiz mumkin .col-4.
• Ustun widths foizlarda o'rnatiladi, shuning uchun ular har doim asosiy elementga nisbatan suyuq va o'lchamli bo'ladi.
• paddingUstunlar alohida ustunlar orasidagi oluklarni yaratish uchun gorizontalga ega, ammo siz marginsatrlardan va paddingustunlardan ustunlarni .no-guttersolib tashlashingiz mumkin .row.
• Tarmoqni sezgir qilish uchun har bir javob beruvchi to'xtash nuqtasi uchun bittadan beshta to'xtash nuqtasi mavjud : barcha to'xtash nuqtalari (qo'shimcha kichik), kichik, o'rta, katta va juda katta.
• Toʻr toʻxtash nuqtalari minimal kenglikdagi media soʻrovlariga asoslanadi, yaʼni ular bitta toʻxtash nuqtasiga va undan yuqori boʻlganlarning barchasiga qoʻllaniladi (masalan, .col-sm-4kichik, oʻrta, katta va oʻta katta qurilmalar uchun amal qiladi, lekin birinchi xstoʻxtash nuqtasi emas).
• Semantik belgilash uchun oldindan belgilangan grid sinflari (masalan, .col-4) yoki Sass miksinlaridan foydalanishingiz mumkin.

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

Grid variantlari

Bootstrap ko'pgina o'lchamlarni aniqlash uchun ems yoki s dan foydalansa, s panjara to'xtash nuqtalari va konteyner kengligi uchun ishlatiladi. Buning sababi, ko'rish maydoni kengligi piksellarda va shrift o'lchamiga qarab o'zgarmaydi .rempx

Bootstrap grid tizimining aspektlari bir nechta qurilmalarda qanday ishlashini qulay jadval bilan ko'ring.

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

Teng kenglikdagi ko'p qatorli

.w-100Ustunlar yangi qatorga uzilishi kerak bo'lgan joyni kiritish orqali bir nechta satrlarni qamrab oluvchi teng kenglikdagi ustunlar yarating . .w-100Ba'zi sezgir displey yordam dasturlari bilan aralashtirib, tanaffuslarni sezgir qiling .

Safari flexbox xatosi bor edi, bu aniq flex-basisyoki holda ishlashiga to'sqinlik qildi border. Brauzerning eski versiyalari uchun vaqtinchalik echimlar mavjud, ammo sizning maqsadli brauzerlaringiz xato versiyalarga kirmasa, ular kerak bo'lmasligi kerak.

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

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 javob beruvchi sxemalarni yaratish uchun oldindan belgilangan besh 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? Agar kerak bo'lsa, 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>

Oluklar

Oluklar to'xtash nuqtasiga xos bo'lgan to'ldirish va salbiy marja yordam sinflari orqali sezgir tarzda sozlanishi mumkin. Berilgan qatordagi oluklarni o‘zgartirish uchun manfiy chekka yordam dasturini .rowva s ga mos keladigan to‘ldirish yordam dasturini ulang .col. Yana mos keladigan toʻldirish yordam dasturidan foydalanib, kiruvchi toʻlib ketishning oldini olish uchun .containeryoki .container-fluidota-onani ham sozlash kerak boʻlishi mumkin.

lgBu yerda katta ( ) to‘xtash nuqtasi va undan yuqori bo‘lgan Bootstrap panjarasini sozlash misoli keltirilgan. Biz .coltoʻldirishni bilan oshirdik , ota-ona .px-lg-5bilan bunga qarshi chiqdik va keyin oʻramni bilan oʻrnatdik ..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>

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 qo'llaniladi (masalan, .col-md-4), satr ustunlari sinflari .rowyorliq sifatida ota-onaga o'rnatiladi.

Ushbu satr ustunlari sinflaridan asosiy tarmoq sxemalarini tezda yaratish yoki karta tartiblarini boshqarish 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-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>

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

Hizalama

Ustunlarni vertikal va gorizontal tekislash uchun flexbox alignment yordamchi dasturlaridan foydalaning. Internet Explorer 10-11 egiluvchan elementlarning vertikal hizalanishini qo'llab-quvvatlamaydi, agar moslashuvchan konteyner min-heightquyida ko'rsatilganidek bo'lsa. Batafsil ma'lumot uchun Flexbugs #3 ga qarang.

Vertikal tekislash

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

Gorizontal tekislash

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

Oluklar yo'q

Oldindan belgilangan panjara sinflarimizdagi ustunlar orasidagi oluklar yordamida olib tashlash mumkin .no-gutters. Bu barcha bevosita bolalar ustunlaridan salbiy margins .rowva gorizontalni olib tashlaydi .padding

Mana bu uslublarni yaratish uchun manba kodi. E'tibor bering, ustunni bekor qilish faqat birinchi kichik ustunlar uchun mo'ljallangan va atribut selektori orqali mo'ljallangan . Bu aniqroq selektorni yaratsa-da, ustunlarni to'ldirish hali ham oraliq yordamchi dasturlar bilan yanada moslashtirilishi mumkin .

Chetdan chekkagacha dizayn kerakmi? Ota-onani tashlang .containeryoki .container-fluid.

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

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

Amalda, bu qanday ko'rinadi. Shuni yodda tutingki, siz bundan boshqa barcha oldindan belgilangan panjara sinflari (jumladan, ustunlar kengligi, sezgir darajalar, qayta tartiblashlar va boshqalar) bilan foydalanishda davom etishingiz mumkin.

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

Ustunlarni o'rash

Agar bitta qatorga 12 dan ortiq ustunlar joylashtirilsa, qo'shimcha ustunlarning har bir guruhi bitta birlik sifatida yangi qatorga o'raladi.

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

Ustun uzilishlari

Flexbox-da ustunlarni yangi qatorga ajratish kichik buzishni talab qiladi: ustunlaringizni yangi qatorga o'rashni width: 100%xohlagan joyingiz bilan element qo'shing. Odatda bu bir nechta .rows bilan amalga oshiriladi, ammo har bir amalga oshirish usuli buni hisobga olmaydi.

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

Bu tanaffusni bizning javob beruvchi displey yordam dasturlarimiz yordamida muayyan to'xtash nuqtalarida ham qo'llashingiz mumkin .

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

Qayta tartiblash

Sinflarga buyurtma bering

Kontentingizning vizual tartibini.order- nazorat qilish uchun sinflardan foydalaning . Ushbu sinflar sezgir, shuning uchun siz to'xtash nuqtasini belgilashingiz mumkin (masalan, ). Barcha beshta grid darajasi bo'ylab qo'llab -quvvatlashni o'z ichiga oladi .order.order-1.order-md-2112

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

Bundan tashqari , mos ravishda va ( ) ni qo'llash orqali elementni o'zgartiradigan sezgir .order-firstva sinflar mavjud. Bu sinflarni kerak bo'lganda raqamlangan sinflar bilan aralashtirish ham mumkin ..order-lastorderorder: -1order: 13order: $columns + 1.order-*

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

O'chirish ustunlari

Siz panjara ustunlarini ikki xil usulda o'zgartirishingiz mumkin: javob .offset-beruvchi grid sinflarimiz va margin yordamchi dasturlarimiz . To'r sinflari ustunlarga mos keladigan darajada o'lchanadi, chetlari esa ofset kengligi o'zgaruvchan bo'lgan tezkor tartiblar uchun foydaliroqdir.

Ofset sinflari

.offset-md-*Sinflar yordamida ustunlarni o'ngga o'tkazing. Ushbu sinflar ustunning chap chetini *ustunlar bo'yicha oshiradi. Masalan, to'rtta ustun ustida .offset-md-4harakatlanadi ..col-md-4

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

Ta'sir qiluvchi to'xtash nuqtalarida ustunlarni tozalashdan tashqari, ofsetlarni tiklashingiz kerak bo'lishi mumkin. Buni grid misolida amalda ko'ring .

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

Margin yordamchi dasturlari

V4-da flexbox-ga o'tish bilan siz .mr-autobirodar ustunlarini bir-biridan uzoqlashtirish kabi margin yordamchi dasturlardan foydalanishingiz mumkin.

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

Yuvalash

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 mavjud 12 ta ustundan foydalanish shart emas)..col-sm-*.col-sm-*

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

Sass aralashmalari

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

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();
@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: 30px !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 %.