Source

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

Выкарыстоўвайце нашу магутную сетку flexbox для мабільных прылад, каб ствараць макеты ўсіх формаў і памераў дзякуючы сістэме з дванаццаці слупкоў, пяці адаптыўным узроўням па змаўчанні, зменным Sass і міксінам, а таксама дзесяткам прадвызначаных класаў.

Як гэта працуе

Сістэма сеткі Bootstrap выкарыстоўвае шэраг кантэйнераў, радкоў і слупкоў для размяшчэння і выраўноўвання змесціва. Ён створаны з дапамогай flexbox і цалкам адаптыўны. Ніжэй прыведзены прыклад і дэталёвы агляд таго, як сетка аб'ядноўваецца.

Вы ўпершыню або не знаёмыя з flexbox? Прачытайце гэты дапаможнік CSS Tricks flexbox для даведачнай інфармацыі, тэрміналогіі, інструкцый і фрагментаў кода.

Адзін з трох слупкоў

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

У прыведзеным вышэй прыкладзе ствараюцца тры слупкі аднолькавай шырыні на малых, сярэдніх, вялікіх і звышвялікіх прыладах з дапамогай загадзя вызначаных класаў сеткі. Гэтыя слупкі размешчаны па цэнтры старонкі з бацькоўскім .container.

Вось як гэта працуе:

Кантэйнеры забяспечваюць магчымасць цэнтравання і гарызантальнага размяшчэння змесціва вашага сайта. Выкарыстоўвайце .containerдля адаптыўнай шырыні ў пікселях або .container-fluidдля width: 100%ўсіх памераў акна прагляду і прылады.
Радкі - гэта абгорткі для слупкоў. Кожны слупок мае гарызантальны padding(званы жолаб) для кантролю прасторы паміж імі. Затым гэтаму paddingпроцідзейнічаюць у радках з адмоўнымі палямі. Такім чынам, увесь кантэнт у вашых слупках візуальна выраўноўваецца па левым баку.
У макеце сеткі змесціва павінна размяшчацца ў слупках, і толькі слупкі могуць быць непасрэднымі даччынымі элементамі радкоў.
Дзякуючы flexbox слупкі сеткі без указання widthбудуць аўтаматычна размяшчацца як слупкі роўнай шырыні. Напрыклад, .col-smкожны з чатырох асобнікаў аўтаматычна будзе мець шырыню 25% ад малой кропкі разрыву і вышэй. Больш прыкладаў глядзіце ў раздзеле аўтаматычнай раскладкі слупкоў .
Класы слупкоў паказваюць колькасць слупкоў, якія вы хочаце выкарыстоўваць з 12 магчымых у радку. Такім чынам, калі вам патрэбныя тры слупкі аднолькавай шырыні папярок, вы можаце выкарыстоўваць .col-4.
Слупкі widthзадаюцца ў працэнтах, таму яны заўсёды зменлівыя і маюць памер адносна бацькоўскага элемента.
Слупкі маюць гарызантальную рысу paddingдля стварэння жолабаў паміж асобнымі слупкамі, аднак вы можаце выдаліць marginз радкоў і paddingслупкоў з .no-guttersдапамогай .row.
Каб зрабіць сетку спагаднай, ёсць пяць кропак разрыву сеткі, па адной для кожнай кропкі разрыву : усе кропкі разрыву (вельмі малыя), малыя, сярэднія, вялікія і вельмі вялікія.
Кропкі разрыву сеткі заснаваныя на медыя-запытах мінімальнай шырыні, што азначае, што яны прымяняюцца да адной кропкі разрыву і ўсіх тых, што знаходзяцца вышэй за яе (напрыклад, .col-sm-4прымяняецца да малых, сярэдніх, вялікіх і вельмі вялікіх прылад, але не да першай xsкропкі разрыву).
Вы можаце выкарыстоўваць загадзя вызначаныя класы сеткі (напрыклад, .col-4) або міксіны Sass для большай семантычнай разметкі.

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

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

У той час як Bootstrap выкарыстоўвае ems або rems для вызначэння большасці памераў, pxs выкарыстоўваюцца для кропак разрыву сеткі і шырыні кантэйнера. Гэта адбываецца таму, што шырыня прагляду выражаецца ў пікселях і не змяняецца з памерам шрыфта .

Паглядзіце, як аспекты сеткавай сістэмы Bootstrap працуюць на некалькіх прыладах з дапамогай зручнай табліцы.

	Вельмі малы <576 пікселяў	Малы ≥576 пікселяў	Сярэдні ≥768 пікселяў	Вялікі ≥992 пікселяў	Вельмі вялікі ≥1200 пікселяў
Максімальная шырыня кантэйнера	Няма (аўта)	540 пікселяў	720 пікселяў	960 пікселяў	1140 пікселяў
Прэфікс класа	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# слупкоў	12
Шырыня жолабы	30 пікселяў (15 пікселяў з кожнага боку слупка)
Нестабільны	так
Упарадкаванне слупкоў	так

Аўтаматычная раскладка слупкоў

Выкарыстоўвайце спецыфічныя класы слупкоў кропак супыну для лёгкага вызначэння памераў слупкоў без відавочнага нумараванага класа, напрыклад .col-sm-6.

Роўнай шырыні

Напрыклад, вось два макеты сеткі, якія прымяняюцца да кожнай прылады і акна прагляду, ад xsда xl. Дадайце любую колькасць класаў без блокаў для кожнай неабходнай кропкі перапынку, і кожны слупок будзе аднолькавай шырыні.

1 з 2

2 з 2

1 з 3

2 з 3

3 з 3

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

Слупкі аднолькавай шырыні можна разбіваць на некалькі радкоў, але была памылка Safari flexbox , якая перашкаджала гэтаму працаваць без відавочнага flex-basisабо border. Існуюць абыходныя шляхі для старых версій браўзераў, але яны не патрэбныя, калі вы карыстаецеся апошнімі версіямі.

Слупок

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Ўстаноўка адной шырыні слупка

Аўтаматычны макет для слупкоў сеткі flexbox таксама азначае, што вы можаце задаць шырыню аднаго слупка і аўтаматычна змяняць памер слупкоў-сяброў вакол яго. Вы можаце выкарыстоўваць загадзя вызначаныя класы сеткі (як паказана ніжэй), міксіны сеткі або ўбудаваныя шырыні. Звярніце ўвагу, што памер іншых слупкоў будзе зменены незалежна ад шырыні цэнтральнага слупка.

1 з 3

2 з 3 (шырэй)

3 з 3

1 з 3

2 з 3 (шырэй)

3 з 3

<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класы для памеру слупкоў у залежнасці ад натуральнай шырыні іх змесціва.

1 з 3

Змест зменнай шырыні

3 з 3

1 з 3

Змест зменнай шырыні

3 з 3

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

Роўнашырынныя шматрадковыя

Стварыце слупкі аднолькавай шырыні, якія ахопліваюць некалькі радкоў, устаўляючы ў месца, .w-100дзе вы хочаце, каб слупкі разбіваліся на новы радок. Зрабіце перапынкі спагаднымі, змяшаўшы .w-100з некаторымі адаптыўнымі ўтылітамі дысплея .

зб

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Спагадныя класы

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

Усе кропкі перапынку

Для сетак, якія аднолькавыя ад самых маленькіх прылад да самых вялікіх, выкарыстоўвайце класы .colі . .col-*Укажыце пранумараваны клас, калі вам патрэбны слупок асаблівага памеру; у адваротным выпадку не саромейцеся прытрымлівацца .col.

зб

слупок-8

слупок-4

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

col-sm-8

col-sm-4

калон-см

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

Змяшайце і спалучайце

Не хочаце, каб вашыя слупкі проста складваліся ў некалькі ярусаў сеткі? Пры неабходнасці выкарыстоўвайце камбінацыю розных класаў для кожнага ўзроўню. Глядзіце прыклад ніжэй, каб лепш зразумець, як усё гэта працуе.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .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. Бацькоўскі .containerабо .container-fluidможа таксама спатрэбіцца наладзіць, каб пазбегнуць непажаданага перапаўнення, выкарыстоўваючы паўторна адпаведную ўтыліту запаўнення.

Вось прыклад налады сеткі Bootstrap на вялікай ( lg) кропцы перапынку і вышэй. Мы павялічылі .colзапаўненне з дапамогай .px-lg-5, супрацьстаялі гэтаму з .mx-lg-n5дапамогай бацькоўскага элемента .row, а затым адкарэктавалі .containerабгортку з дапамогай .px-lg-5.

Карыстальніцкае запаўненне слупкоў

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Выраўноўванне

Выкарыстоўвайце ўтыліты выраўноўвання flexbox для вертыкальнага і гарызантальнага выраўноўвання слупкоў.

Вертыкальнае выраўноўванне

Адзін з трох слупкоў

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Адзін з трох слупкоў

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Гарызантальнае выраўноўванне

Адзін з двух слупкоў

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Няма жолабаў

Жолабы паміж слупкамі ў нашых прадвызначаных класах сеткі можна выдаліць з дапамогай .no-gutters. Гэта выдаляе адмоўныя margins .rowі гарызанталь paddingз усіх непасрэдных даччыных слупкоў.

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

Патрэбен дызайн ад краю да краю? Адкіньце бацькоўскі .containerабо .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

На практыцы гэта выглядае вось як. Звярніце ўвагу, што вы можаце працягваць выкарыстоўваць гэта з усімі іншымі загадзя вызначанымі класамі сеткі (уключаючы шырыню слупкоў, адаптыўныя ўзроўні, змены парадку і многае іншае).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Абкручванне слупкоў

Калі ў адным радку размешчана больш за 12 слупкоў, кожная група дадатковых слупкоў будзе пераходзіць на новы радок як адно цэлае.

.col-9

.col-4
Паколькі 9 + 4 = 13 > 12, гэты div з 4 слупкоў пераносіцца ў новы радок як адна сумежная адзінка.

.col-6
Наступныя слупкі працягваюцца ўздоўж новага радка.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Разрываецца калона

Разбіванне слупкоў на новы радок у flexbox патрабуе невялікай хітрыкі: дадайце элемент з месцам, width: 100%дзе вы хочаце перанесці слупкі на новы радок. Звычайна гэта дасягаецца з дапамогай некалькіх .rows, але не кожны метад рэалізацыі можа ўлічыць гэта.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Вы таксама можаце прымяніць гэты перапынак у пэўных кропках перапынку з дапамогай нашых адаптыўных утыліт дысплея .

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Змена парадку

Заказ заняткаў

Выкарыстоўвайце .order-класы для кантролю візуальнага парадку вашага кантэнту. Гэтыя класы спагадныя, так што вы можаце ўсталяваць orderкропку перапынку (напрыклад, .order-1.order-md-2). Уключае падтрымку 1праходжання 12праз усе пяць узроўняў сеткі.

Першы, але неўпарадкаваны

Другі, але апошні

Трэці, але першы

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Ёсць таксама спагадныя класы .order-firstі .order-lastкласы, якія змяняюць orderэлемент, ужываючы order: -1і order: 13( order: $columns + 1), адпаведна. Пры неабходнасці гэтыя класы таксама можна змешваць з пранумараванымі .order-*класамі.

Першы, але апошні

Другі, але неўпарадкаваны

Трэці, але першы

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Зрушэнне слупкоў

Вы можаце зрушыць слупкі сеткі двума спосабамі: нашымі спагаднымі .offset-класамі сеткі і нашымі ўтылітамі маржы . Памер класаў сеткі адпавядае слупкам, у той час як палі больш карысныя для хуткіх макетаў, дзе шырыня зрушэння з'яўляецца зменнай.

Залік заняткаў

Перамясціць слупкі ўправа з дапамогай .offset-md-*класаў. Гэтыя класы павялічваюць левае поле слупка за слупком *. Напрыклад, .offset-md-4перамяшчаецца .col-md-4па чатырох слупках.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

У дадатак да ачысткі слупкоў у адаптыўных кропках супыну вам можа спатрэбіцца скінуць зрухі. Паглядзіце гэта ў дзеянні ў прыкладзе сеткі .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Маржынальныя камунальныя паслугі

З пераходам на flexbox у версіі 4 вы можаце выкарыстоўваць маржынальныя ўтыліты, напрыклад, аддаляць .mr-autoроднасныя слупкі адзін ад аднаго.

.col-md-4

.col-md-4 .ml-аўта

.col-md-3 .ml-md-аўта

.col-аўто .mr-аўта

.col-аўта

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Гняздаванне

Каб укласці свой кантэнт у сетку па змаўчанні, дадайце новы .rowі набор .col-sm-*слупкоў у існуючы .col-sm-*слупок. Укладзеныя радкі павінны ўключаць набор слупкоў, якія ў суме складаюць 12 або менш (неабавязкова выкарыстоўваць усе 12 даступных слупкоў).

Узровень 1: .col-sm-9

Узровень 2: .col-8 .col-sm-6

Узровень 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .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 міксіны

Пры выкарыстанні зыходных файлаў Sass ад Bootstrap у вас ёсць магчымасць выкарыстоўваць зменныя і міксіны Sass для стварэння карыстацкіх, семантычных і адаптыўных макетаў старонак. Нашы загадзя вызначаныя класы сеткі выкарыстоўваюць гэтыя ж зменныя і міксіны, каб забяспечыць цэлы набор гатовых да выкарыстання класаў для макетаў, якія хутка рэагуюць.

Пераменныя

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Міксіны

Міксіны выкарыстоўваюцца ў спалучэнні са зменнымі сеткі для стварэння семантычнага 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();
@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 {
  width: 800px;
  @include make-container();
}

.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: 30px !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або %).