Тор жүйесі

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

Бұл бетте

Мысал

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

Флексбокспен жаңадан таныссыз ба? Фон, терминология, нұсқаулар және код үзінділері үшін осы CSS Tricks flexbox нұсқаулығын оқыңыз .

Баған

html

<div class="container text-center">
  <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үшін қолданылады ). Бұл әр тоқтау нүктесі арқылы контейнер мен баған өлшемін және әрекетін басқара алатыныңызды білдіреді.smmdlgxlxxl
Контейнерлер мазмұныңызды ортаға салып, көлденеңінен орналастырыңыз. .containerЖауапты пиксел ені үшін , барлық көру порттары мен құрылғылары үшін немесе сұйықтық пен пиксел ендерінің тіркесімі үшін жауап беретін контейнерді (мысалы, .container-fluid) пайдаланыңыз.width: 100%.container-md
Жолдар - бағандарға арналған орауыштар. Әрбір бағанада paddingолардың арасындағы кеңістікті басқаруға арналған көлденең (арық деп аталады) бар. Содан paddingкейін бағандарыңыздағы мазмұнның сол жағымен төмен қарай визуалды туралануын қамтамасыз ету үшін бұл теріс шеттері бар жолдарда қарсы әрекет етеді. Мазмұныңыздың аралығын өзгерту үшін жолдар баған өлшемдерін біркелкі қолдану үшін модификатор сыныптарын және саңылау сыныптарын қолдайды.
Бағандар керемет икемді. Әр жолда қол жетімді 12 үлгі бағандары бар, олар кез келген баған санын қамтитын элементтердің әртүрлі комбинацияларын жасауға мүмкіндік береді. Баған сыныптары аралықты қамтитын үлгі бағандарының санын көрсетеді (мысалы, col-4төрт аралық). widths пайызбен орнатылады, сондықтан сізде әрқашан бірдей салыстырмалы өлшем болады.
Арықтар да жауап береді және теңшеуге болады. Шұңқыр класстары барлық тоқтау нүктелерінде қол жетімді, олардың өлшемдері біздің жиектеріміз бен толтыру аралықтары сияқты . .gx-*Көлденең ағындарды сыныптарымен, тік арықтарды -мен .gy-*немесе сыныптары бар барлық арықтарды өзгертіңіз .g-*. .g-0шұңқырларды жою үшін де қол жетімді.
Sass айнымалылары, карталар және миксиндер желіге қуат береді. Bootstrap жүйесінде алдын ала анықталған тор сыныптарын пайдаланғыңыз келмесе, семантикалық түзетулермен өзіңізді жасау үшін біздің тордың Sass көзін пайдалануға болады. Сондай-ақ біз сізге көбірек икемділік үшін осы Sass айнымалыларын тұтыну үшін кейбір CSS теңшелетін сипаттарымызды қосамыз.

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

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

Bootstrap тор жүйесі барлық алты әдепкі тоқтау нүктелеріне және сіз реттейтін кез келген тоқтау нүктелеріне бейімделе алады. Алты әдепкі тор деңгейлері төмендегідей:

Өте кішкентай (xs)
Кіші (см)
Орташа (md)
Үлкен (lg)
Өте үлкен (xl)
Өте үлкен (xxl)

Жоғарыда айтылғандай, осы тоқтау нүктелерінің әрқайсысының өз контейнері, бірегей класс префиксі және модификаторлары бар. Тор осы тоқтау нүктелерінде қалай өзгеретінін қараңыз:

	xs <576px	см ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Контейнер`max-width`	Ешбір (автоматты)	540px	720px	960px	1140px	1320px
Сынып префиксі	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
бағандар саны	12
Арық ені	1,5 рейм (сол және оң жақта ,75 рейм)
Арнайы арналар	Иә
Ұялы	Иә
Бағанға тапсырыс беру	Иә

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

сияқты нақты нөмірленген сыныпсыз оңай баған өлшемін алу үшін тоқтау нүктесіне тән баған сыныптарын пайдаланыңыз .col-sm-6.

Бірдей ені

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

1/2

2/2

1/3

2/3

3/3

html

<div class="container text-center">
  <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 тор бағандарының автоматты орналасуы бір бағанның енін орнатуға және оның айналасындағы бағандардың өлшемін автоматты түрде өзгертуге болатынын білдіреді. Алдын ала анықталған тор сыныптарын (төменде көрсетілгендей), тор қоспаларын немесе кірістірілген ендерді пайдалануға болады. Басқа бағандар ортаңғы бағанның еніне қарамастан өлшемін өзгертетінін ескеріңіз.

1/3

2/3 (кеңірек)

3/3

1/3

2/3 (кеңірек)

3/3

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <!-- 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

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

Баған

html

<div class="container text-center">
  <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>

Баған

html

<div class="container text-center">
  <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>

Баған

html

<div class="container text-center">
  <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>

Баған

html

<div class="container text-center">
  <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>

Баған

html

<div class="container text-center">
  <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>

Баған

html

<div class="container text-center">
  <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);
  }
}

Ұя салу

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

1-деңгей: .col-sm-3

2-деңгей: .col-8 .col-sm-6

2-деңгей: .col-4 .col-sm-6

html

<div class="container text-center">
  <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>

Сасс

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

Айнымалылар

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

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

// Offset with margins
@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);
  }
}

Негізгі мазмұн

Қосымша мазмұн

html

<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-row-columnsбағандарының максималды санын орнату үшін пайдаланылады, .row-cols-*осы шектен асатын кез келген сан еленбейді.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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, немесе емес) орнатқаныңызға көз жеткізіңіз %.