Source

Тор жүйесі

Он екі баған жүйесі, бес әдепкі жауап беретін деңгей, Sass айнымалылары мен араластырулары және ондаған алдын ала анықталған сыныптардың арқасында барлық пішіндер мен өлшемдердің макеттерін құру үшін қуатты мобильді бірінші флексбокс торын пайдаланыңыз.

Бұл қалай жұмыс істейді

Bootstrap тор жүйесі мазмұнды орналастыру және туралау үшін контейнерлер, жолдар және бағандар сериясын пайдаланады. Ол 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.
s бағандары widthпайызбен орнатылады, сондықтан олар әрқашан негізгі элементіне қатысты сұйық және өлшемді болады.
Жеке бағандар арасында саңылаулар жасау үшін бағандарда көлденең paddingболады, дегенмен marginжолдардан және paddingбағандардан жолдарды жоюға .no-guttersболады .row.
Торды жауапты ету үшін әрбір жауап беретін тоқтау нүктесі үшін бір-бірден бес тордың тоқтау нүктесі бар : барлық тоқтау нүктелері (өте кішкентай), кіші, орташа, үлкен және өте үлкен.
Тордың тоқтау нүктелері ең аз медиа сұрауларына негізделген, яғни олар бір тоқтау нүктесіне және одан жоғары тұрғандардың барлығына қолданылады (мысалы, .col-sm-4шағын, орташа, үлкен және аса үлкен құрылғыларға қолданылады, бірақ бірінші xsтоқтау нүктесі емес).
Семантикалық белгілеу үшін алдын ала анықталған тор сыныптарын (мысалы .col-4) немесе Sass араластырғыштарын пайдалануға болады.

Кейбір HTML элементтерін икемді контейнерлер ретінде пайдалану мүмкін еместігі сияқты flexbox айналасындағы шектеулер мен қателерден хабардар болыңыз .

Тор опциялары

Bootstrap көптеген өлшемдерді анықтау үшін ems немесе s қолданса, s тордың тоқтау нүктелері мен контейнер ені үшін пайдаланылады. Себебі қарау терезесінің ені пиксельде және қаріп өлшемімен өзгермейді .rempx

Bootstrap тор жүйесінің аспектілері ыңғайлы кесте арқылы бірнеше құрылғыларда қалай жұмыс істейтінін қараңыз.

	Өте кішкентай <576px	Шағын ≥576px	Орташа ≥768px	Үлкен ≥992px	Өте үлкен ≥1200px
Максималды контейнер ені	Ешбір (автоматты)	540px	720px	960px	1140px
Сынып префиксі	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
бағандар саны	12
Арық ені	30px (бағанның әр жағында 15px)
Ұялы	Иә
Бағанға тапсырыс беру	Иә

Бағандарды автоматты түрде орналастыру

сияқты нақты нөмірленген сыныпсыз оңай баған өлшемін алу үшін тоқтау нүктесіне тән баған сыныптарын пайдаланыңыз .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="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>

Жауапты сыныптар

Bootstrap торы күрделі жауап беретін орналасуларды құруға арналған алдын ала анықталған сыныптардың бес деңгейін қамтиды. Бағандар өлшемін өзіңіз қалағаныңызға қарамастан өте кішкентай, шағын, орташа, үлкен немесе аса үлкен құрылғыларда реттеңіз.

Барлық тоқтау нүктелері

Құрылғылардың ең кішкентайынан ең үлкеніне дейін бірдей торлар үшін .colжәне .col-*сыныптарын пайдаланыңыз. Арнайы өлшемді баған қажет болғанда нөмірленген сыныпты көрсетіңіз; әйтпесе, еркін ұстаныңыз .col.

кол

кол-8

кол-4

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

Көлденеңге дейін жинақталған

Класстардың жалғыз жинағын пайдалана отырып, шағын тоқтау нүктесінде ( ) .col-sm-*көлденең болмас бұрын жинақталған негізгі тор жүйесін жасауға болады .sm

col-sm-8

col-sm-4

col-sm

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

Араластырыңыз және сәйкестендіріңіз

Бағандарыңыздың жай ғана кейбір тор деңгейлерінде жинақталғанын қаламайсыз ба? Қажет болса, әр деңгей үшін әртүрлі сыныптардың комбинациясын пайдаланыңыз. Мұның бәрі қалай жұмыс істейтіні туралы жақсы түсінік алу үшін төмендегі мысалды қараңыз.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

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

Туралау

Бағандарды тігінен және көлденеңінен туралау үшін 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 болғандықтан, бұл 4-бағандық кең div бір іргелес бірлік ретінде жаңа жолға оралады.

.col-6
Келесі бағандар жаңа жол бойымен жалғасады.

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

Баған үзіледі

Flexbox-та бағандарды жаңа жолға бөлу шағын бұзуды қажет етеді: бағандарыңызды жаңа жолға орағыңыз width: 100%келетін жері бар элементті қосыңыз. Әдетте бұл бірнеше .rows көмегімен орындалады, бірақ әрбір іске асыру әдісі мұны есептей алмайды.

.col-6 .col-sm-3

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

Сондай-ақ, бұл үзілісті біздің жауап беретін дисплей утилиталары арқылы белгілі бір тоқтау нүктелерінде қолдануға болады .

.col-6 .col-sm-4

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

Қайта ретке келтіру

Сабақтарға тапсырыс беру

Мазмұныңыздың көрнекі ретін.order- басқару үшін сыныптарды пайдаланыңыз . Бұл сыныптар жауап береді, сондықтан үзіліс нүктесін орнатуға болады (мысалы, ). Барлық бес тор деңгейлері бойынша қолдауды қамтиды .order.order-1.order-md-2112

Бірінші, бірақ ретсіз

Екінші, бірақ соңғы

Үшінші, бірақ бірінші

<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сыныптар да бар. Бұл сыныптарды қажетінше нөмірленген сыныптармен араластыруға болады .orderorder: -1order: 13order: $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="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>

Жауап беретін тоқтау нүктелерінде бағандарды тазалауға қоса, ығысуларды қалпына келтіру қажет болуы мүмкін. Мұны тор мысалында әрекетте қараңыз .

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

Маржа утилиталары

v4 жүйесінде flexbox-қа көшу арқылы .mr-autoбауырлас бағандарды бір-бірінен алшақтататын маржа утилиталарын пайдалануға болады.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

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

Ұя салу

Мазмұнды әдепкі тормен кірістіру үшін бұрыннан бар бағанға жаңа .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="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>

Сасс қоспалары

Bootstrap бастапқы Sass файлдарын пайдаланған кезде теңшелетін, семантикалық және жауап беретін бет орналасуларын жасау үшін 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біркелкі бөлінген тоқтау нүктесіне тән ендерге мүмкіндік береді .padding-leftpadding-right

$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, немесе емес) орнатқаныңызға көз жеткізіңіз %.