Системаи шабакавӣ

Шабакаи пурқудрати мобилии аввалини флексбоксро барои сохтани тарҳҳои ҳама шакл ва андозаҳо ба шарофати системаи дувоздаҳ сутун, панҷ сатҳи пешфарз, тағирёбандаҳо ва омехтаҳои 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 ҳамчун контейнерҳои флекс .

Имконоти шабака

Дар ҳоле ки Bootstrap барои муайян кардани аксари андозаҳо ems ё s -ро истифода мебарад, s барои нуқтаҳои шикастани шабака ва паҳнои контейнер истифода мешавад. Сабаб дар он аст, ки паҳнои намоиш бо пикселҳост ва бо андозаи ҳарф тағир намеёбад .rempx

Бубинед, ки ҷанбаҳои системаи шабакаи 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>

Баробар паҳнои бисёрсатр

Сутунҳои паҳнои баробар эҷод кунед, ки сатрҳои сершуморро дарбар мегиранд, тавассути ворид кардани .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 инчунин маънои онро дорад, ки шумо метавонед паҳнои як сутунро таъин кунед ва сутунҳои бародариро дар атрофи он ба таври худкор тағир диҳед. Шумо метавонед синфҳои қаблан муайяншудаи шабака (тавре ки дар зер нишон дода шудааст), омехтаҳои шабакавӣ ё паҳнои дохилиро истифода баред. Аҳамият диҳед, ки сутунҳои дигар новобаста аз паҳнои сутуни марказӣ тағир меёбанд.

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

Синфҳои ҷавобӣ

Шабакаи Bootstrap панҷ қабати синфҳои пешакӣ муайяншударо барои сохтани тарҳҳои мураккаби ҷавобгӯ дар бар мегирад. Андозаи сутунҳои худро дар дастгоҳҳои иловагӣ хурд, хурд, миёна, калон ё аз ҳад калон, ҳарчанд ба шумо мувофиқ меҳисобед, танзим кунед.

Ҳама нуқтаҳо

Барои шабакаҳое, ки аз хурдтарин дастгоҳҳо то калонтарин якхелаанд, синфҳоро истифода .colбаред .col-*. Вақте ки ба шумо сутуни махсусан калон лозим аст, синфи рақамдорро муайян кунед; дар акси ҳол, озод ҳис кунед, ки ба .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>

Ба уфуқӣ печонида шудааст

Бо истифода аз маҷмӯи ягонаи .col-sm-*синфҳо, шумо метавонед як системаи асосии шабакаро эҷод кунед, ки аз stacked оғоз меёбад ва дар нуқтаи хурд ( 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>

Омезед ва мувофиқат кунед

Оё намехоҳед, ки сутунҳои шумо танҳо дар баъзе сатҳҳои шабака ҷамъ шаванд? Ҳангоми зарурат маҷмӯи синфҳои гуногунро барои ҳар як сатҳ истифода баред. Барои тасаввуроти беҳтар дар бораи он ки ҳама кор мекунад, ба мисоли зер нигаред.

<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изофаи номатлуб бо истифода аз утилитаи мувофиқи padding танзим карда шаванд.

Ин аст мисоли танзим кардани шабакаи 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 -ро истифода баред 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 истифода баред. Internet Explorer 10-11 ҳамоҳангсозии амудии ҷузъҳои чандирро пуштибонӣ намекунад, вақте ки контейнери flex дорои дороии дорои хусусияти дар 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. marginИн s манфиро аз .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-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 сутун дар як сатр ҷойгир карда шуда бошад, ҳар як гурӯҳи сутунҳои иловагӣ ҳамчун як воҳид ба хати нав печонида мешаванд.

<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%ҳар ҷое, ки мехоҳед сутунҳои худро ба хати нав печонед, як элемент илова кунед. Одатан, ин бо якчанд .rowс анҷом дода мешавад, аммо на ҳама усули татбиқ инро ҳисоб карда метавонад.

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

Шумо инчунин метавонед ин танаффусро дар нуқтаҳои мушаххас бо утилитаҳои намоишии ҷавобгӯи мо татбиқ кунед .

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

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

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

Offsetting columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

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

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

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

With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

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

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

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

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

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

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

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

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

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

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters.

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

Grid tiers

Гузаштан аз худи сутунҳо, шумо инчунин метавонед шумораи сатҳҳои шабакаро танзим кунед. Агар шумо танҳо чаҳор қабати шабакаро мехостед, шумо $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, ё %) муқаррар кунед.