Систем мреже

Пример

Боотстрап-ов мрежни систем користи низ контејнера, редова и колона за распоред и поравнање садржаја. Направљен је са флексбоксом и потпуно реагује. Испод је пример и детаљно објашњење како се мрежни систем спаја.

<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обухвата четири). widthс се постављају у процентима тако да увек имате исту релативну величину.

• Олуци су такође прилагодљиви и прилагодљиви. Класе олука су доступне на свим тачкама прекида, са свим истим величинама као и наше маргине и размаци између поља . Замените хоризонталне олуке са .gx-*класама, вертикалне олуке са .gy-*, или све олуке са .g-*класама. .g-0доступан је и за уклањање олука.

• Сасс варијабле, мапе и мешавине напајају мрежу. Ако не желите да користите унапред дефинисане класе мреже у Боотстрап-у, можете користити изворни Сасс наше мреже да креирате сопствену са више семантичких ознака. Такође укључујемо нека ЦСС прилагођена својства за коришћење ових Сасс променљивих за још већу флексибилност за вас.

Будите свесни ограничења и грешака око флекбок-а , као што је немогућност коришћења неких ХТМЛ елемената као флек контејнера .

Опције мреже

Боотстрап-ов мрежни систем може да се прилагоди на свих шест подразумеваних тачака прекида и било које тачке прекида које прилагодите. Шест подразумеваних нивоа мреже су следећи:

• Изузетно мали (кс)
• Мала (см)
• средњи (мд)
• велики (лг)
• Екстра велики (кл)
• Екстра велики (ккл)

Као што је горе наведено, свака од ових тачака прекида има сопствени контејнер, јединствени префикс класе и модификаторе. Ево како се мрежа мења на овим тачкама прекида:

Аутоматски распоред колона

Користите класе колона специфичне за тачку прекида за једноставно одређивање величине колона без експлицитне нумерисане класе као што је .col-sm-6.

Једнаке ширине

На пример, ево два распореда мреже која се примењују на сваки уређај и оквир за приказ, од xsдо xxl. Додајте било који број класа без јединица за сваку тачку прекида која вам је потребна и свака колона ће бити исте ширине.

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

Подешавање ширине једне колоне

Аутоматски распоред за колоне флекбок мреже такође значи да можете да подесите ширину једне колоне и да сродним колонама аутоматски промените величину око ње. Можете користити унапред дефинисане класе мреже (као што је приказано испод), мешавине мреже или ширине у линији. Имајте на уму да ће се величина осталих колона променити без обзира на ширину централне колоне.

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

Респонсиве цлассес

Боотстрап мрежа укључује шест нивоа унапред дефинисаних класа за изградњу сложених респонзивних изгледа. Прилагодите величину својих колона на изузетно малим, малим, средњим, великим или екстра великим уређајима како год вам одговара.

Све тачке прекида

За мреже које су исте од најмањег уређаја до највећег, користите класе .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-*класа, можете креирати основни систем мреже који почиње наслагано и постаје хоризонталан на малој тачки прекида ( 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-*класе да брзо подесите број колона које најбоље приказују ваш садржај и изглед. Док се нормалне .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>

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

Такође можете користити пратећи Сасс миксин, 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 доступних колона).

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

Сасс

Када користите изворне Сасс датотеке Боотстрап-а, имате опцију да користите Сасс променљиве и миксине за креирање прилагођених, семантичких и прилагодљивих изгледа страница. Наше унапред дефинисане класе мреже користе ове исте варијабле и миксине да обезбеде читав пакет класа спремних за употребу за брзо реаговање распореда.

Променљиве

Променљиве и мапе одређују број колона, ширину олука и тачку упита медија у којој ће почети плутајуће колоне. Користимо их да генеришемо унапред дефинисане класе мреже које су горе документоване, као и за прилагођене миксине наведене у наставку.

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

Микинс

Миксини се користе заједно са варијаблама мреже за генерисање семантичког ЦСС-а за појединачне колоне мреже.

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

Пример употребе

Можете да модификујете променљиве на сопствене прилагођене вредности или једноставно користите миксине са њиховим подразумеваним вредностима. Ево примера коришћења подразумеваних подешавања за креирање распореда са две колоне са размаком између.

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

Прилагођавање мреже

Користећи наше уграђене мрежне Сасс променљиве и мапе, могуће је потпуно прилагодити унапред дефинисане класе мреже. Промените број слојева, димензије медијског упита и ширине контејнера — а затим поново компајлирајте.

Стубови и олуци

Број колона мреже може се мењати преко Сасс променљивих. $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
);

Када правите било какве промене у Сасс променљивим или мапама, мораћете да сачувате промене и поново компајлирате. На тај начин ће се добити потпуно нови скуп унапред дефинисаних класа мреже за ширине колона, помаке и редослед. Ажурирани услужни програми за видљивост ће такође бити ажурирани да користе прилагођене тачке прекида. Обавезно поставите вредности мреже у px(не rem, em, или %).