Мрежен систем

Пример

Мрежниот систем на Bootstrap користи серија контејнери, редови и колони за распоред и усогласување на содржината. Изграден е со flexbox и целосно реагира. Подолу е пример и длабинско објаснување за тоа како системот на мрежа се спојува.

<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опфаќа четири). widths се поставени во проценти, така што секогаш ја имате истата релативна големина.

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

• Sass променливите, мапите и мешаниците ја напојуваат мрежата. Ако не сакате да ги користите претходно дефинираните класи на мрежа во Bootstrap, можете да го користите изворот на нашата мрежа Sass за да креирате своја сопствена со повеќе семантичко обележување. Вклучуваме и некои сопствени својства на CSS за да ги искористиме овие Sass променливи за уште поголема флексибилност за вас.

Бидете свесни за ограничувањата и грешките околу flexbox , како што е неможноста да користите некои HTML елементи како флекс контејнери .

Опции за мрежа

Мрежниот систем на Bootstrap може да се прилагоди на сите шест стандардни точки на прекин и сите точки на прекин што ќе ги приспособите. Шесте стандардни нивоа на мрежа се како што следува:

• Екстра мал (xs)
• Мали (sm)
• Средно (мд)
• Голем (lg)
• Екстра голем (xl)
• Екстра екстра големо (xxl)

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

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

Користете класи на колони специфични за точката на прекин за лесно одредување на големината на колоните без експлицитна нумерирана класа како .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>

Поставување ширина на една колона

Автоматскиот распоред за мрежните колони на 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-*класи, можете да креирате основен мрежен систем кој започнува наредени и станува хоризонтален на малата точка на прекин ( 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>

Можете исто така да го користите придружниот 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и множество .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>

Сас

Кога ги користите изворните Sass датотеки на Bootstrap, имате можност да користите Sass променливи и миксини за да креирате прилагодени, семантички и одговорни распореди на страници. Нашите предефинирани мрежни класи ги користат истите овие променливи и мешавини за да обезбедат цела група спремни за употреба класи за распореди кои брзо реагираат.

Променливи

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

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

Мешавини

Миксините се користат заедно со променливите на мрежата за да се генерираат семантички 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);

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

Приспособување на мрежата

Користејќи ги нашите вградени променливи и мапи на мрежата Sass, можно е целосно да се приспособат претходно дефинираните класи на мрежа. Променете го бројот на нивоа, димензиите на барањето за медиуми и ширината на контејнерот - потоа повторно компајлирајте.

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

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

Кога правите какви било промени на променливите или мапите на Sass, ќе треба да ги зачувате промените и повторно да ги компајлирате. Со тоа ќе се добие сосема нов сет на предефинирани класи на мрежа за ширина на колони, поместувања и нарачка. Ќе се ажурираат и алатките за одговорна видливост за да ги користат приспособените точки на прекин. Погрижете се да ги поставите вредностите на мрежата во px(не rem, em, или %).