sîstema Grid

Mînak

Pergala torê ya Bootstrap rêzek konteyneran, rêzik û stûnan bikar tîne da ku naverok saz û rêz bike. Ew bi flexbox ve hatî çêkirin û bi tevahî bersivdar e. Li jêr mînakek û ravekirinek kûr heye ka pergala torê çawa li hev tê.

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

Mînaka li jor sê stûnên bi firehiya wekhev di nav hemî cîhaz û dîmenderan de bi karanîna çînên tora meya pêşwextkirî diafirîne. Ew stûn di nav rûpelê de bi dêûbav re têne navend kirin .container.

Çawa dixebite

Bi şikandina wê, li vir pergala torê çawa li hev tê:

• Tora me şeş xalên veqetandinê yên bersivdar piştgirî dike . Xalên veqetandinê li ser bingeha min-widthpirsên medyayê ne, yanî ew bandorê li wê xala veqetînê û hemî yên li jor dikin (mînak, .col-sm-4li sm, md, lg, xl, û xxl). Ev tê vê wateyê ku hûn dikarin li gorî her xala veqetandinê mezinahî û tevgerê konteynir û stûnê kontrol bikin.

• Konteyniran navend û bi horizontî naveroka xwe davêjin. Ji .containerbo firehiya pîxelê ya bersivdar, .container-fluidji bo width: 100%hemî dîmender û cîhazan, an konteynirek bersivdar (mînak, .container-md) ji bo berhevkirina firehiyên şil û pixel bikar bînin.

• Rêz ji bo stûnan pêçan in. paddingJi bo kontrolkirina cîhê di navbera wan de her stûnek horizontî heye (ku jê re goşt tê gotin). Dûv re ev paddingli ser rêzên bi marjînalên neyînî tê berevajîkirin da ku naveroka di stûnên we de bi dîtbarî li milê çepê were rêz kirin. Rêz di heman demê de çînên guhêrbar piştgirî dikin da ku bi rengek yekgirtî pîvana stûnê û dersên gutterê bicîh bikin da ku cîhê naveroka we biguhezînin.

• Stûn pir maqûl in. Li her rêzê 12 stûnên şablonê hene, ku dihêle hûn ji hêmanên cihêreng ên ku her hejmarek stûnan vedigirin biafirînin. Çînên stûnê hejmara stûnên şablonê yên ku werin vegerandin destnîşan dikin (mînak, col-4çaran vedigire). widths bi sedî têne destnîşan kirin ji ber vê yekê hûn her gav heman pîvana têkildar heye.

• Gutter di heman demê de bersivdar û xwerû ne. Dersên gûtterê li hemî xalên veqetandinê, bi hemî pîvanên me yên marjînal û cihêrengiya me re peyda dibin . Gûzên horizontî bi .gx-*dersan, gemarên vertîkal bi .gy-*, an hemî gemarên bi .g-*dersan biguhezînin. .g-0ji bo rakirina gogan jî heye.

• Guherbarên Sass, nexşe, û tevlihevkirina torê hêz dikin. Heke hûn nexwazin ku li Bootstrap dersên torê yên pêşwextkirî bikar bînin, hûn dikarin çavkaniya tora me Sass bikar bînin da ku xweya xwe bi nîşankirina semantîktir biafirînin. Em di heman demê de hin taybetmendiyên xwerû yên CSS-ê jî vedigirin da ku van guhêrbarên Sass bikar bînin da ku ji we re nermbûnek hîn mezintir bikin.

Hay ji sînorkirin û xeletiyên li dora flexbox-ê hebin , mîna nebûna karanîna hin hêmanên HTML-ê wekî konteynerên nerm .

Vebijarkên Grid

Pergala torê ya Bootstrap dikare li her şeş xalên veqetandinê yên xwerû, û her xalên veqetînê yên ku hûn xwe xweş bikin, biguncîne. Şeş qatên torê yên xwerû wiha ne:

• Zêde piçûk (xs)
• Piçûk (sm)
• Navîn (md)
• Mezin (lg)
• Zêde mezin (xl)
• Zêde zêde mezin (xxl)

Wekî ku li jor hate destnîşan kirin, her yek ji van xalên veqetandinê xwedan konteynir, pêşgira pola bêhempa, û guhêrbar hene. Li vir e ku çawa tora li ser van xalên veqetandinê diguhezîne:

Stûnên Auto-layout

Ji bo mezinbûna stûnê ya hêsan bêyî çînek jimarekirî ya eşkere mîna .col-sm-6.

Wekhev-fireh

Mînakî, li vir du sêwiranên torê hene ku li ser her amûr û dîmenderê, ji xsheya xxl. Ji bo her xala veqetandinê ya ku hûn hewce ne, hejmarek dersên yekîneyek kêm zêde bikin û her stûn dê heman firehiyê be.

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

Sazkirina yek width stûnê

Vesazkirina otomatîkî ya ji bo stûnên tora flexbox di heman demê de tê vê wateyê ku hûn dikarin firehiya yek stûnê destnîşan bikin û stûnên xwişk û bira bixweber li dora wê mezin bibin. Hûn dikarin çînên torê yên pêşwextkirî (wek ku li jêr tê xuyang kirin), mîksên torê, an firehiyên hundurîn bikar bînin. Bala xwe bidinê ku stûnên din dê mezinahiya stûna navendê nebe.

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

Naveroka firehiya guherbar

Dersan bikar bînin col-{breakpoint}-autoku stûnan li gorî firehiya xwezayî ya naveroka wan mezin bikin.

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

Dersên bersivdar

Tora Bootstrap ji bo avakirina sêwiranên bersivdar ên tevlihev şeş rêzikên dersên diyarkirî vedihewîne. Mezinahiya stûnên xwe li ser cîhazên piçûk, piçûk, navîn, mezin, an zêde mezin lê hûn guncaw dibînin, xweş bikin.

Hemû xalên veqetînê

Ji bo torên ku ji cîhazên herî piçûk heya herî mezin yek in, çînên .colû bikar bînin. .col-*Dema ku hûn hewceyê stûnek bi taybetî bi mezinahî hewce bikin, çînek hejmarkirî diyar bikin; wekî din, xwe azad hîs bikin ku pê ve girêdayî bin .col.

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

Berbi horizontal ve hatî berhev kirin

Bi karanîna komek çînek yekane .col-sm-*, hûn dikarin pergalek torê ya bingehîn biafirînin ku ji hev veqetandî dest pê dike û li xala veqetîna piçûk ( sm) dibe horîzontal.

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

Mix û hev bikin

Ma hûn naxwazin stûnên we bi tenê di hin rêzikên torê de werin berhev kirin? Li gorî hewcedariyê ji bo her rêzek hevbendiyek çînên cûda bikar bînin. Ji bo ramanek çêtir ka ew hemî çawa dixebite, mînaka jêrîn bibînin.

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

Stûnên rêzê

Dersên bersivdar bikar bînin da .row-cols-*ku zû hejmara stûnên ku naverok û sêwirana we çêtirîn çêdikin destnîşan bikin. Digel ku çînên normal .col-*li ser stûnên takekesî derbas dibin (mînak, .col-md-4), çînên stûnên rêzê li ser dêûbav .rowwekî kurtebir têne danîn. Bi .row-cols-autowe re dikarin stûnan firehiya xweya xwezayî bidin.

Van çînên stûnên rêzê bikar bînin da ku zû sêwiranên torê yên bingehîn biafirînin an jî sêwiranên qerta xwe kontrol bikin.

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

Her weha hûn dikarin tevliheviya Sass-ê jî bikar bînin 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);
  }
}

Nesting

Ji bo ku hûn naveroka xwe bi tora xwerû re nehêlin, di nav stûnek heyî de stûnek nû .rowû komeke zêde bikin . Rêzên hêlînkirî divê komek stûnên ku ji 12 an kêmtir zêde dibin tê de bin (ne hewce ye ku hûn hemî 12 stûnên berdest bikar bînin)..col-sm-*.col-sm-*

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

Sass

Dema ku pelên Sass-a çavkaniya Bootstrap-ê bikar tînin, vebijarka we heye ku hûn guhêrbar û mixînên Sass bikar bînin da ku nexşeyên rûpelê yên xwerû, semantîk û bersivdar biafirînin. Dersên meyên torê yên pêşwextkirî van heman guhêrbar û mixîn bikar tînin da ku ji bo sêwiranên bilez bersivdar komek dersên amade-bikarhêner peyda bikin.

Variables

Guherîn û nexşe hejmara stûnan, firehiya gemarê, û xala pirsiyariya medyayê ya ku tê de dest bi stûnên herikîn dikin diyar dikin. Em vana bikar tînin da ku çînên tora pêşwext ên ku li jor hatine belge kirin, û her weha ji bo mîksên xwerû yên ku li jêr hatine destnîşan kirin çêbikin.

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

Mixins

Miksîn bi guhêrbarên torê re têne bikar anîn da ku CSS-ya semantîk ji bo stûnên torê yên kesane çêbikin.

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

Nimûne karanîna

Hûn dikarin guherbaran li gorî nirxên xweya xwerû biguhezînin, an jî tenê mîksan bi nirxên xweyên xwerû bikar bînin. Li vir mînakek karanîna mîhengên xwerû heye ku hûn nexşeyek du-stûnî bi navberek veqetandî çêbikin.

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

Kesayetîkirina torê

Bi karanîna guhêrbar û nexşeyên tora Sass-a me ya çêkirî, gengaz e ku meriv bi tevahî dersên torê yên pêşwextkirî xweş bike. Hejmara rêzan, pîvanên pirsa medyayê, û firehiyên konteynerê biguhezînin - dûv re ji nû ve berhev bikin.

Stûn û gemar

Hejmara stûnên torê dikare bi guhêrbarên Sass ve were guheztin. $grid-columnsji bo hilberandina firehiyên (ji sedî) ya her stûnek kesane tê bikar anîn dema ku firehiyê ji bo guliyên stûnê $grid-gutter-widthdestnîşan dike.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Tûrên torê

Ji stûnan bi xwe re derbas bibin, hûn dikarin hejmara rêzikên torê jî xweş bikin. Ger we tenê çar qatên torê dixwest, hûn ê nûve bikin $grid-breakpointsû bi vî rengî nûve bikin $container-max-widths:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

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

Dema ku hûn guhartinan li guhêrbar an nexşeyên Sass-ê bikin, hûn hewce ne ku guheztinên xwe hilînin û ji nû ve berhev bikin. Bi kirina vê yekê dê komek nû ya çînên torê yên pêşwextkirî ji bo firehiyên stûn, veqetandin, û rêzkirinê derxe. Karûbarên xuyangiya bersivdar jî dê werin nûve kirin da ku xalên veqetandinê yên xwerû bikar bînin. Bawer bikin ku nirxên torê di nav px(ne rem, em, an %) de bicîh bikin.