Тор жүйесі

Он екі баған жүйесі, бес әдепкі жауап беру деңгейі, 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>

Бірдей ені көп сызықты

.w-100Бағандарды жаңа жолға үзгіңіз келетін жерге кірістіру арқылы бірнеше жолды қамтитын бірдей ені бар бағандарды жасаңыз . .w-100Кейбір жауап беретін дисплей утилиталарымен араластыру арқылы үзілістерді жауапты етіңіз .

Safari flexbox қатесі болды , бұл оның нақты flex-basisнемесе жоқ жұмыс істеуіне кедергі болды border. Браузердің ескі нұсқалары үшін уақытша шешімдер бар, бірақ мақсатты браузерлер қате нұсқаларға түспесе, олар қажет болмауы керек.

кол

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

Бір баған енін орнату

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>

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

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

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

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

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

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

Арықтар

Арықтарды тоқтау нүктесіне тән толтыру және теріс маржа утилиталары сыныптары арқылы жауапты түрде реттеуге болады. Берілген жолдағы саңылауларды өзгерту үшін теріс маржа қызметтік бағдарламасын және s .rowжолындағы сәйкес толтыру утилиталарын жұптаңыз. .colҚайта сәйкес толтыру утилитасын пайдаланып, қажетсіз толып кетуді болдырмау үшін .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>

Жол бағандары

.row-cols-*Мазмұныңыз бен орналасуыңызды жақсы көрсететін бағандар санын жылдам орнату үшін жауап беретін сыныптарды пайдаланыңыз. Қалыпты .col-*сыныптар жеке бағандарға (мысалы, ) қолданылатын болса, жол бағандарының сыныптары таңбаша ретінде .col-md-4ата-анаға орнатылады ..row

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

Баған

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

Сондай-ақ, сіз ілеспе 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);
  }
}

Туралау

Бағандарды тігінен және көлденеңінен туралау үшін flexbox туралау утилиталарын пайдаланыңыз. Төменде көрсетілгендей икемді контейнерде болса, Internet Explorer 10-11 икемді элементтерді тік туралауды қолдамайды . min-height Қосымша мәліметтер алу үшін Flexbugs №3 бөлімін қараңыз.

Тігінен туралау

Үш бағанның бірі

<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-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.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="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-2112

Біріншіден, DOM-та тапсырыс қолданылмаған

DOM бойынша екінші, үлкенірек тапсырыспен

DOM бойынша үшінші, 1 ретімен

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Сәйкесінше және ( ) қолдану арқылы элементті өзгертетін жауап беретін .order-firstжәне .order-lastсыныптар да бар. Бұл сыныптарды қажетінше нөмірленген сыныптармен араластыруға болады .orderorder: -1order: 13order: $columns + 1.order-*

DOM жүйесінде бірінші, соңғы рет тапсырыс берілді

DOM бойынша екінші, ретсіз

DOM-те үшінші, бірінші рет тапсырыс берілді

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered 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>

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

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="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 қоспалары

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

Тор жүйесі

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

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

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

Бірдей ені

Бірдей ені көп сызықты

Бір баған енін орнату

Айнымалы ені мазмұны

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

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

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

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

Арықтар

Жол бағандары

Туралау

Тігінен туралау

Көлденең туралау

Арықтар жоқ

Бағанды ​​орау

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

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

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

Есеп айырысу бағандары

Офсеттік сыныптар

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

Ұя салу

Sass қоспалары

Айнымалылар

Миксиндер

Мысал пайдалану

Торды теңшеу

Колонналар мен шұңқырлар

Тор деңгейлері

Бағанды орау