Мрежова система

Пример

Мрежовата система на 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 се задават в проценти, така че винаги да имате едно и също относително оразмеряване.

• Улуците също са отзивчиви и персонализирани. Класовете Gutter са достъпни във всички точки на прекъсване, със същите размери като нашите маржове и интервали за подплънки . Променете хоризонталните улуци с .gx-*класове, вертикалните улуци с .gy-*или всички улуци с .g-*класове. .g-0предлага се и за премахване на улуци.

• Sass променливите, картите и миксините захранват мрежата. Ако не искате да използвате предварително дефинираните класове на мрежата в Bootstrap, можете да използвате Sass източника на нашата мрежа, за да създадете свой собствен с повече семантично маркиране. Ние също така включваме някои персонализирани свойства на CSS, за да използвате тези Sass променливи за още по-голяма гъвкавост за вас.

Бъдете наясно с ограниченията и грешките около flexbox , като невъзможността да използвате някои HTML елементи като flex контейнери .

Опции за решетка

Мрежовата система на Bootstrap може да се адаптира към всичките шест точки на прекъсване по подразбиране и всички точки на прекъсване, които персонализирате. Шестте нива на мрежата по подразбиране са както следва:

• Изключително малък (xs)
• малък (sm)
• Среден (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-*класове, можете да създадете основна мрежова система, която започва подредена и става хоризонтална при малката точка на прекъсване ( 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 mixin, 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 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 е възможно напълно да персонализирате предварително дефинираните класове на мрежата. Променете броя на нивата, размерите на медийните заявки и ширините на контейнера – след това компилирайте отново.

Колони и улуци

Броят на колоните на мрежата може да се променя чрез променливи на 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или %).