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

Мисол

Системаи шабакаи Bootstrap барои тарҳрезӣ ва мувофиқ кардани мундариҷа як қатор контейнерҳо, сатрҳо ва сутунҳоро истифода мебарад. Он бо flexbox сохта шудааст ва комилан ҷавобгӯ аст. Дар зер як мисол ва шарҳи амиқи он аст, ки чӣ тавр системаи шабакавӣ якҷоя мешавад.

<div class="container text-center">
  <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 ҳамчун контейнерҳои флекс .

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

Системаи шабакаи Bootstrap метавонад дар тамоми шаш нуқтаи қатъии пешфарз ва ҳама нуқтаҳое, ки шумо танзим мекунед, мутобиқат кунад. Шаш қабати пешфарзии шабака чунинанд:

• Хеле хурд (xs)
• Хурд (см)
• Миёна (md)
• Калон (lg)
• Хеле калон (xl)
• Хеле калон (xxl)

Тавре ки дар боло қайд карда шуд, ҳар яке аз ин нуқтаҳо дорои контейнери худ, префикси ягонаи синф ва тағирдиҳандаҳо мебошанд. Ин аст, ки чӣ тавр шабака дар ин нуқтаҳо тағир меёбад:

Сутунҳои тарҳбандии худкор

Синфҳои сутуни мушаххаси нуқтаи кандашударо барои андозагирии осони сутун бидуни синфи рақами дақиқи монанди .col-sm-6.

Бари баробар

Масалан, дар ин ҷо ду тарҳбандии шабака мавҷуданд, ки ба ҳар як дастгоҳ ва намоишгоҳ xsаз xxl. Барои ҳар як нуқтаи танаффус, ки ба шумо лозим аст, ҳама гуна шумораи синфҳои бе воҳидро илова кунед ва ҳар як сутун як паҳно хоҳад буд.

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

<div class="container text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <!-- 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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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);
  }
}

Лона кардан

Барои ҷойгир кардани мундариҷаи худ бо шабакаи пешфарз, дар дохили сутуни мавҷуда сутунҳои нав .rowва маҷмӯи сутунҳоро илова кунед . Сатрҳои ҷойгиршуда бояд маҷмӯи сутунҳоро дар бар гиранд, ки то 12 ё камтар аз он илова мекунанд (аз шумо истифода бурдани ҳамаи 12 сутуни дастрас талаб карда намешавад)..col-sm-*.col-sm-*

<div class="container text-center">
  <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, шумо имкон доред, ки тағирёбандаҳо ва омехтаҳои Sass барои эҷоди тарҳҳои фармоишӣ, семантикӣ ва ҷавобгӯи саҳифаҳо истифода баред. Синфҳои шабакаи қаблан муайяншудаи мо ҳамин тағирёбандаҳо ва омехтаҳоро истифода мебаранд, то маҷмӯи пурраи синфҳои ба истифода омодаро барои тарҳбандиҳои зуд ҷавобгӯ таъмин кунанд.

Тағйирёбандаҳо

Тағйирёбандаҳо ва харитаҳо шумораи сутунҳо, паҳнои ҷӯйборҳо ва нуқтаи дархости медиаро, ки дар он сутунҳои шинокунанда оғоз мешаванд, муайян мекунанд. Мо онҳоро барои тавлиди синфҳои қаблан муайяншудаи шабакаҳои дар боло ҳуҷҷатшуда ва инчунин барои омехтаҳои фармоишии дар зер номбаршуда истифода мебарем.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$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 тағир додан мумкин аст. $grid-columnsбарои тавлиди паҳнои (бо фоиз) ҳар як сутуни инфиродӣ истифода мешавад, дар ҳоле $grid-gutter-widthки паҳнои ҷӯйборҳои сутунро муқаррар мекунад. $grid-row-columnsбарои муқаррар кардани шумораи максималии сутунҳои , истифода мешавад .row-cols-*, ҳар як адад аз ин маҳдудият сарфи назар карда мешавад.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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, ё %) муқаррар кунед.