Сеткавая сістэма

Прыклад

Сістэма сеткі 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 задаюцца ў працэнтах, таму вы заўсёды маеце аднолькавы аднолькавы памер.

• Жолабы таксама хутка рэагуюць і наладжваюцца. Класы Gutter даступныя ва ўсіх кропках супыну, з тымі ж памерамі, што і нашы межы і прамежкі . Змяніць гарызантальныя жолабы з .gx-*класамі, вертыкальныя жолабы з .gy-*або ўсе жолабы з .g-*класамі. .g-0таксама даступны для выдалення жолабаў.

• Зменныя Sass, карты і міксіны забяспечваюць сетку. Калі вы не хочаце выкарыстоўваць прадвызначаныя класы сеткі ў Bootstrap, вы можаце выкарыстоўваць зыходны код Sass нашай сеткі, каб стварыць свой уласны з большай семантычнай разметкай. Мы таксама ўключаем некаторыя карыстальніцкія ўласцівасці CSS для выкарыстання гэтых зменных Sass для яшчэ большай гнуткасці для вас.

Майце на ўвазе абмежаванні і памылкі вакол flexbox , напрыклад, немагчымасць выкарыстоўваць некаторыя элементы HTML у якасці flex-кантэйнераў .

Параметры сеткі

Сістэма сеткі Bootstrap можа адаптавацца да ўсіх шасці кропак супыну па змаўчанні і любых кропак супыну, якія вы наладжваеце. Шэсць узроўняў сеткі па змаўчанні наступныя:

• Вельмі маленькі (xs)
• Маленькі (см)
• Сярэдні (MD)
• Вялікі (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або %).