Sistema de rejilla

Qatina

Bootstrap kaqpa rejilla sisteman huk serie waqaychanakuna, filakuna chaymanta columnakuna llamk'achin imakuna ruwanapaq chaymanta chiqanchaypaq. Flexbox nisqawan ruwasqa kachkan , tukuyninpitaq kutichiq kachkan. Uraypi huk rikch'anachiy kachkan chaymanta huk ukhu sut'inchay imaynachus sistema de rejilla huñukun chaymanta.

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

Hawa ejemplo kimsa kaqlla ancho columnakuna llapa dispositivokuna chaymanta qhaway punkukuna ruwan ñawpaqmanta riqsisqa rejilla claseykuwan. Chay columnakunaqa tayta mamawan kuska p'anqapi chawpichasqam kachkan .container.

Imayna llamkan

Chayta pakispa, kaypi imayna sistema rejilla huñukun:

• Rejillaykuqa suqta kutichiq ruphaykunatam yanapan . P'akiykuna willay mast'ariq tapuykunapi sayasqa kachkan min-width, niyta munan chay p'akiy puntota chaymanta tukuy chay patapi kaqkunaman afectanku (kayhina, , , , , chaymanta ) .col-sm-4kaqman ruwakun . Kayqa niyta munan sapa p'akiywan waqaychana chaymanta columna sayayninta chaymanta ruwayta kamachiyta atikunki.smmdlgxlxxl

• Contenedores centro y horizontalmente pad tu contenido. .containerHuk kutichiq pixel anchopaq llamk'achiy, llapa .container-fluidqhaway width: 100%punkukuna chaymanta dispositivokuna chimpapaq, utaq huk kutichiq waqaychana (kayhina, .container-md) huk huñusqa fluido chaymanta pixel anchokuna kaqpaq.

• Filakunaqa columnakunapaq p'istukunam. Sapa columnaqa horizontal nisqayuqmi padding(canal nisqa sutiyuq) chaykunapurapi espaciota kamachinapaq. Kayqa paddingchaymanta mana allin margenkunawan filakunapi contrarrestakun, columnaykikunapi kaq contenido rikuywan paña lado urayman chiqanchasqa kananpaq. Filakuna yanapakunkutaq clasekuna modificador kaqwan hukllachasqa columna sayachiyta chaymanta canalización clasekuna contenidoykimanta espaciamientota tikranapaq.

• Columnakunaqa mana iñiy atina flexible kanku. Sapa filapi 12 plantilla columnakuna tiyan, chaywantaq elementokuna hukniray combinacionkunata ruwayta atikunki, chaytaq mayk'a columnakunatapas span. Clases de columna nisqakunam qawachin hayka plantilla columnakuna span (por ejemplo, col-4spans tawa). widths pachakmanta hukninpi churasqa kachkan chayrayku sapa kuti kikin relativo sayayniyuq kanki.

• Canales nisqapas kutichikuqmi hinaspapas personalizanapaqmi. Clases de canalización nisqakunam kanku tukuy pakikunantinpi, llapan kikin sayayniyuq margenniykuwan chaymanta acolchado espaciamientoykuwan . Cambiar canales horizontales con .gx-*clases, canales verticales con .gy-*, o todas las canales con .g-*clases. .g-0kantaqmi canales nisqakunata hurqunapaqpas.

• Sass variables, mapas, mixins nisqakunam red nisqatam kallpanchan. Sichus mana Bootstrap kaqpi ñawpaqmanta riqsisqa llika clasekuna llamk'achiyta munankichu, llikaykumanta pukyuta Sass llamk'achiy atikunki qampaq aswan semántico markawan ruwanaykipaq. Hinallataq wakin CSS sapanchasqa propiedades kaqtapas kay Sass tikraqkunata qampaq aswan hatun flexibilidad kaqpaq mikhuypaq churayku.

Flexbox muyuriqpi hark'akuykunata chaymanta pantaykunata yachay , wakin HTML elementokunata flex waqaychanakuna hina llamk'achiyta mana atiy hina .

Rejilla akllanakuna

Bootstrap kaqpa rejilla sisteman llapa suqta ñawpaqmanta p'akisqakuna ukhupi ruwayta atin, chaymanta ima pakinakuna ruwasqaykipipas. Suqta ñawpaqmanta churasqa llika patakunaqa kayhinam:

• Extra pequeño (xs) .
• Uchuy (sm) .
• Chawpi (md) .
• Hatun (lg) .
• Yapamanta hatun (xl) .
• Extra extra hatun (xxl) .

Hawa nisqanchikhina, sapakama kay pakikuna kikin waqaychanayuq, sapalla clase ñawpaqnin, chaymanta tikraqkunayuq. Kaypi imayna rejilla kay pakikuna chimpapi tikrakun:

Kikinmanta churana columnakuna

Punto de ruptura-específica columna clasekunata llamk'achiy mana sasa columna sayaypaq mana huk sut'i yupasqa clase hina .col-sm-6.

Igual-ancho

Ejemplopaq, kaypi iskay rejilla churanakuna kanku sapa dispositivopaq chaymanta qhawana punkupaq, kaqmanta xschaymanta xxl. Yapay mayk'a unidad mana unidadniyuq clasekuna sapa p'akiypaq necesitasqaykipaq chaymanta sapa columna kaqlla ancho kanqa.

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

Huk columna anchota churay

Kikinmanta churay flexbox rejilla columnakunapaqpas niyta munan huk columna anchota churayta atikunki chaymanta wawqi columnakuna kikillanmanta muyuriqninpi sayayninta tikrayta atikunki. Ñawpaqmanta riqsisqa llika clasekunata (urapi rikuchisqa hina), llika mixins utaq chiru ukhupi anchokunata llamk'achiy atikunki. Reparay huk columnakuna hatun sayayninta tikranqa ima anchoña chawpi columna kaptinpas.

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

Contenido de ancho variable

Clases nisqakunata llamk'achiy col-{breakpoint}-autocolumnakunata hatunyachinapaq, contenidonkupa ancho naturalninman hina.

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

Clases de respuesta

Bootstrap kaqpa llikan suqta patakuna ñawpaqmanta riqsisqa clasekunayuq kachkan, sasa kutichiq churanakuna ruwanapaq. Sapaqchay columnakunaykipa sayayninta yapa uchuy, uchuy, chawpi, hatun utaq yapa hatun dispositivokunapi imayna munasqaykimanhina.

Tukuy pakikuykuna

Aswan huch'uy dispositivokunamanta aswan hatun kaqkama kaqlla rejillakunapaq, .colchaymanta .col-*clasekunata llamk'achiy. Huk yupasqa claseta willay mayk'aq huk particular sayayniyuq columnata necesitanki; mana chayqa, ama manchakuspa .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>

Apilado a horizontal

Huk huñu .col-sm-*clasekuna llamk'achispa, huk sistema de rejilla básica ruwayta atikunki chaymanta pilasqa qallarikun chaymanta horizontalman tukun huch'uy p'akiypi ( 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>

Chaqruy hinaspa tupachiy

¿Manachu munanki columnakunayki wakin rejilla patakunapi pilakunalla kananpaq? Sapa patapaq hukniray clasekuna huñusqata necesitasqanman hina llamk’achiy. Uraypi kaq ejemplota qhaway aswan allin yuyayta imayna tukuy llamk’asqanmanta.

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

Fila columnakuna

Kutichiq .row-cols-*clasekuna llamk'achiy usqhaylla churanaykipaq yupay columnakuna aswan allin ruwan contenidoykita chaymanta churasqaykita. Maypichus normal .col-*clasekuna sapalla columnakunaman ruwakunku (kayhina, .col-md-4), fila columnakuna clasekuna tayta .rowkaqpi churasqa kanku ñawpaqmanta hina waqaychasqa columnakunapaq. Con .row-cols-autotu puedes dar a las columnas su ancho natural.

Kay fila columnakuna clasekuna llamk'achiy usqhaylla ruwanapaq básica rejilla ruwanakuna utaq tarjeta ruwanakunayki kamachinapaq chaymanta columna patapi necesitakuqtin llallichiy.

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

También puedes usar el acompañante Sass mixin, 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);
  }
}

Nido

Ñawpaqmanta ruwasqa llikawan willanaykipaq, musuq .rowchaymanta huñu .col-sm-*sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa ukhupi yapay .col-sm-*. Anidado filakuna huk huñu sapaqchasqakunayuq kanan tiyan 12 utaq aswan pisi yapasqa (mana llapa 12 kaq sapaq sapaqchasqakuna llamk'achinaykipaq kamachisqachu).

<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

Bootstrap kaqpa pukyu Sass willakuykunata llamk'achkaspa, akllanayuq kanki Sass tikraqkuna chaymanta mixins llamk'achiyta sapanchasqa, semántico chaymanta kutichiq p'anqa churanakuna ruwanapaq. Ñawpaqmanta riqsisqa rejilla claseyku kay kikin variables chaymanta mixins llamk'achinku huk tukuy suite listo llamk'anapaq clasekuna usqaylla kutichiq churanakuna qunankupaq.

Variables nisqakuna

Variables chaymanta mapakuna yupay columnakuna, canal ancho, chaymanta medios tapuy punto maypichus columnakuna flotante qallarinapaq kamachin. Kaykunata llamk'achiyku ñawpaqmanta riqsisqa rejilla clasekuna ruwanapaq, chaymanta uraypi listasqa sapanchasqa mixins kaqpaq.

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

Mixinkuna

Mixinkuna llamk'achisqa kanku llikata tikraqkunawan kuskachasqa sapa llika columnakunapaq CSS semántico ruwanapaq.

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

Ejemplo de uso

Tikraqkunata kikin sapanchasqa chanikunaman tikrayta atinki, icha mixins nisqakunata ñawpaqmanta chanikunawan llamk'achiylla. Kaypi huk rikch'ana kachkan ñawpaqmanta churasqakuna llamk'achiyta iskay columna churayta ruwanapaq huk ch'usaq chawpipi.

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

Personalizar la rejilla

Sass rejilla ruwasqaykuwan chaymanta mapakunawan llamk'achispa, ñawpaqmanta riqsisqa rejilla clasekuna hunt'asqa ruwayta atikun. Yupay patakuna, willay mast'ariy dimensiones, chaymanta waqaychana anchokuna tikray —chaymanta wakmanta huñuy.

Columnas y canales

Rejilla columnakuna yupayqa Sass variables nisqawanmi tikrasqa kanman. $grid-columnssapa sapa columnapa anchunkunata (pachakmanta) paqarichinanpaqmi llamkachisqa, $grid-gutter-widthcolumna canales nisqapaq anchonta churan.

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

Niveles de rejilla

Kikin columnakunamanta aswan karuman kuyuspa, yupayta rejilla patakunatapas ruwayta atinki. Sichus tawa llika patakunallata munanki, $grid-breakpointschaymanta $container-max-widthskayhina kaqman musuqyachinki:

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

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

Sass tikraqkunapi utaq mapakunapi ima tikraykunatapas ruwachkaspa, tikrayniykikunata waqaychanki chaymanta wakmanta huñunayki tiyan. Chayta ruwaspaqa huk musuq huñu ñawpaqmanta riqsisqa rejilla clasekuna columna anchokunapaq, offsets kaqpaq chaymanta kamachiypaq lluqsichinqa. Kutichiy rikuy yanapakuykunapas musuqchasqa kanqa sapanchasqa pakinakuna llamk'achinapaq. Aswan allinta qhaway llikata chanikunata px(mana rem, em, icha %) nisqapi churayta.