in English

Челтәр системасы

Унике багана системасы, алты килешү дәрәҗәсе, Sass үзгәрүчәннәре һәм миксиннары, һәм алдан билгеләнгән класслар ярдәмендә барлык форма һәм зурлыкларның макетларын төзү өчен безнең көчле мобиль-беренче флексбок челтәрен кулланыгыз.

Бу биттә

Мисал

Bootstrap челтәре системасы эчтәлекне урнаштыру һәм тигезләү өчен контейнерлар, рәтләр һәм баганалар сериясен куллана. Ул флексбок белән төзелгән һәм тулысынча җаваплы. Түбәндә челтәр системасының ничек берләшүе турында мисал һәм тирән аңлатма бирелгән.

Флексбокс белән яңамы яки таныш түгел? Фон, терминология, күрсәтмәләр, код сниппетлары өчен бу CSS Tricks флексбокс кулланмасын укыгыз .

Колонна

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Aboveгарыдагы мисал безнең алдан билгеләнгән челтәр класслары ярдәмендә барлык җайланмаларда һәм күренешләрдә өч тигез киңлектәге баганалар ясый. Бу баганалар биттә ата-аналар белән тупланган .container.

Ничек бу эшли

Аны җимереп, челтәр системасы ничек җыела:

Безнең челтәр алты җаваплы ноктаны хуплый . Тәнәфес нокталары массакүләм мәгълүмат чараларының сорауларына нигезләнгән min-width, димәк, алар бу ноктага һәм аның өстендәге барлык кешеләргә тәэсир итәләр ( мәсәлән , ,,, .col-sm-4һәм ) . Димәк, сез контейнерны, багананың зурлыгын һәм тәртибен контрольдә тота аласыз.smmdlgxlxxl
Контейнерлар сезнең эчтәлекне горизонталь рәвештә урнаштыралар. .containerПиксель киңлеге .container-fluidөчен width: 100%, барлык күренешләр һәм җайланмалар өчен, яки .container-mdсыеклык һәм пиксель киңлеге кушылу өчен җаваплы контейнер (мәсәлән) кулланыгыз .
Рәтләр - баганалар өчен төргечләр. Eachәр баганада paddingалар арасындагы киңлекне контрольдә тоту өчен горизонталь (чокыр дип атала) бар. Аннары бу paddingсезнең колонкалардагы эчтәлекнең сул ягына визуаль рәвештә тигезләнүен тәэмин итү өчен тискәре кырлар белән рәтләргә каршы тора. Рәтләр шулай ук үзгәртүче классларга булышалар , сезнең эчтәлекне үзгәртү өчен багана размерларын һәм чүпрәк классларын бертөрле куллану .
Колонналар искиткеч сыгылучан. Бер рәттә 12 шаблон баганасы бар, бу төрле элементларның комбинациясен булдырырга мөмкинлек бирә. Колонналар класслары шаблон баганаларының санын күрсәтәләр (мәсәлән, col-4дүрт арада). widthлар процентка куелган, шуңа күрә сез һәрвакыт бер үк чагыштырмача зурлыкка ия.
Чүпрәкләр шулай ук җаваплы һәм көйләнә. Гуттер класслары барлык марка нокталарында бар , безнең маржа һәм паддер аралыгы белән бер үк зурлыкта . Класслар белән горизонталь чокырларны .gx-*, вертикаль чокырларны .gy-*, яки класслар белән барлык чокырларны үзгәртегез .g-*. .g-0чокырларны бетерү өчен дә бар.
Сасс үзгәрүләр, карталар, миксиннар челтәрне куәтли. Әгәр дә сез Bootstrap'та алдан билгеләнгән челтәр классларын кулланырга теләмисез икән, сез безнең челтәр чыганагы Sass -ны күбрәк семантик билгеләр белән булдыру өчен куллана аласыз. Без шулай ук сезнең өчен тагын да зуррак сыгылу өчен бу Sass үзгәрүләрен куллану өчен кайбер CSS махсус үзлекләрен кертәбез.

Флексбокс тирәсендәге чикләүләрне һәм хаталарны белегез, кайбер HTML элементларын флекс контейнер буларак куллана алмау кебек .

Челтәр вариантлары

Bootstrap челтәре системасы алты килешү ноктасына һәм сез көйләгән теләсә нинди ноктага яраклаша ала. Алты килешү челтәре түбәндәгечә:

Өстәмә кечкенә (xs)
Кечкенә (см)
Урта (md)
Зур (lg)
Өстәмә зур (xl)
Өстәмә зур (xxl)

Aboveгарыда әйтелгәнчә, бу пунктларның һәрберсенең үз контейнеры, уникаль класс префиксы һәм үзгәртүчеләре бар. Менә бу өзекләр аша челтәр ничек үзгәрә:

	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. Сезгә кирәк булган һәр нокта өчен берәмлектән азрак класслар өстәгез һәм һәр багана бер үк киңлектә булачак.

2 дән 1

3тән 1

3нең 2

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

Бер багана киңлеген кую

Флексбокс челтәр колонкалары өчен авто-макет шулай ук сез бер багананың киңлеген куя аласыз һәм кардәш баганалар аның тирәсендә автоматик рәвештә үзгәртелә ала. Сез алдан билгеләнгән челтәр классларын куллана аласыз (аста күрсәтелгәнчә), челтәр миксиннары яки киңлек киңлеге. Игътибар итегез, бүтән баганалар үзәк багананың киңлегенә карамастан үзгәрәчәк.

3тән 1

3нең 2 (киңрәк)

3тән 1

3нең 2 (киңрәк)

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

Wideзгәрешле киңлек эчтәлеге

col-{breakpoint}-autoЭчтәлекнең табигый киңлегенә карап баганаларны зурлау өчен класслар кулланыгыз .

3тән 1

Wideзгәрешле киңлек эчтәлеге

3тән 1

Wideзгәрешле киңлек эчтәлеге

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

Onsаваплы класслар

Bootstrap челтәрендә катлаулы җаваплы макетлар төзү өчен алты дәрәҗә алдан билгеләнгән класслар бар. Колонналарның зурлыгын өстәмә кечкенә, кечкенә, урта, зур яки өстәмә зур җайланмаларда көйләгез, ләкин сез үзегез теләгәнчә.

Барлык өзекләр

Кечкенә җайланмалардан иң зурларына кадәр булган челтәрләр өчен .colклассларны .col-*кулланыгыз. Сезгә аеруча зур багана кирәк булганда номерланган классны күрсәтегез; югыйсә, ябышырга ирек бирегез .col.

кол

col-8

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

Рәт баганалар

.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һәм баганалар җыелмасы өстәгез . Ояланган рәтләр 12 яки аннан да азрак булган баганалар җыелмасын кертергә тиеш (барлык 12 багананы куллану таләп ителми)..col-sm-*.col-sm-*

1 дәрәҗә: .col-sm-3

2 нче дәрәҗә: .col-8 .col-sm-6

2 дәрәҗә: .col-4 .col-sm-6

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

Сасс

Bootstrap чыганагы Sass файлларын кулланганда, сез Sass үзгәрүчәннәрен һәм миксиннарны куллана аласыз, гадәти, семантик һәм җаваплы бит макетларын булдыру өчен. Алдан билгеләнгән челтәр класслары шул ук үзгәрүчәннәрне һәм миксиннарны кулланалар, тиз җаваплы макетлар өчен куллануга әзер классларның тулы комплектын.

Variзгәрешләр

Variзгәрешләр һәм карталар баганалар санын, чокырның киңлеген, йөзә торган баганаларны башлау өчен медиа соравын билгели. Без боларны югарыда документлаштырылган челтәр классларын, шулай ук түбәндә күрсәтелгән махсус миксиннар өчен кулланабыз.

$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 үзгәрүчәннәренә яки карталарына үзгәрешләр керткәндә, сез үзгәртүләрегезне сакларга һәм яңадан компиляцияләргә тиеш. Моны эшләү багана киңлеге, офсет һәм заказ бирү өчен алдан билгеләнгән челтәр классларының яңа җыелмасын чыгарачак. Customзенчәлекле күренешләр куллану өчен яңартылачак. Челтәр кыйммәтләрен куегыз px(түгел rem, emяки %).