Sistema de rejilla

Atiyniyuq kuyuchina-ñawpaq flexbox rejillaykuta llamk'achiy llapa rikchaykunamanta chaymanta sayaykunamanta churanakuna ruwanapaq huk chunka iskayniyuq columna sistema kaqman, pichqa ñawpaqmanta kutichiq patakunaman, Sass tikraqkuna chaymanta mixins kaqman, chaymanta chunkakuna ñawpaqmanta riqsisqa clasekunaman gracias nispa.

Imayna llamkan

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 qhaway imaynachus chay rejilla huñukun chayta.

¿Musuqchu icha manachu flexbox nisqapi riqsinkichu? Ñawiriy kay CSS Tricks flexbox yanapakuyta qhipa kaqpaq, terminología kaqpaq, kamachiykunapaq chaymanta código fragmentos kaqpaq.

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

Hawa ejemplo kimsa kaqlla ancho columnakuna ruwan huch'uy, chawpi, hatun chaymanta yapa hatun dispositivokunapi ñawpaqmanta riqsisqa rejilla claseykuwan. Chay columnakunaqa tayta mamawan kuska p'anqapi chawpichasqam kachkan .container.

Chayta pakispa, kaypi imayna llamk'an:

• Contenedores huk mediota qun chawpiman chaymanta horizontalmente sitioykipa contenidonta pad. Huk kutichiq pixel anchopaq .containerutaq .container-fluidllapa width: 100%qhaway punku chaymanta dispositivo sayayninkuna chimpapaq llamk'achiy.
• Filakunaqa columnakunapaq p'istukunam. Sapa columnaqa horizontal nisqayuqmi padding(canal nisqa sutiyuq) chaykunapurapi espaciota kamachinapaq. Chaymantaqa paddingmana allin margenniyuq filakunapim chayta contrarrestakun. Chayhina, llapa columnakunaykipi kaq contenido paña lado urayman rikuylla chiqanchasqa kachkan.
• Huk rejilla churaypi, contenidoqa columnakuna ukhupi churasqa kanan tiyan chaymanta columnakunalla filakunap chaylla wawankuna kanman.
• Flexbox kaqman gracias, mana huk nisqayuq rejilla columnakuna widthkikinmanta churakunqa kaqlla ancho columnakuna hina. Ejemplopaq, tawa instanciakuna .col-smsapan kikillanmanta kanqa 25% ancho huch'uy p'akiymanta chaymanta wichayman. Aswan rikch'anakunapaq kikinmanta churana columnakuna t'aqapi qhaway .
• Sapaq clasekuna hayk'a columnakuna llamk'achiyta munanki sapa filapi 12 atikuqmanta rikuchin. Chaymi, kimsa kaqlla anchoyuq columnakuna chimpapi munanki chayqa, llamk'achiy atikunki .col-4.
• Columna widths pachakmanta hukninpi churasqa, chayrayku sapa kuti fluido chaymanta sayayniyuq kanku tayta elementonkumanhina.
• paddingSapaq sapaqchasqakuna sapa sapaq sapaqchasqakunapura canales nisqakunata ruwanapaq horizontal nisqayuqmi , chaywanpas, chay marginfrom filakunamanta chaymanta paddingcolumnakunamanta hurquyta atinki chaywan .no-gutterson the .row.
• Rejilla kutichiq kananpaqqa, pichqa rejilla pakikuna kan, sapa kutichiq pakinapaq huk : llapa pakikuna (yapa uchuy), uchuy, chawpi, hatun, yapa hatun.
• Rejilla p'akiykuna aswan pisi ancho willay tapuykunapi sayasqa kanku, niyta munan chay huk p'akiy punto kaqman chaymanta llapa chaymanta pata kaqkunaman ruwanku (kayhina, .col-sm-4huch'uy, chawpi, hatun chaymanta yapasqa hatun dispositivokunaman ruwakun, ichaqa mana ñawpaq xsp'akiy punto kaqpichu).
• Aswan semántico markapaq ñawpaqmanta riqsisqa rejilla clasekunata (hina .col-4) utaq Sass mixins llamk'achiyta atinki.

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

Rejilla akllanakuna

Bootstrap ems icha rems llamk'achin aswan sayaykunata riqsichinapaq, pxs llamk'achin llika p'akiykunapaq chaymanta waqaychana anchokunapaq. Kayqa qhawana punkup anchun pixel nisqapi kasqanraykum , qillqap sayayninwan mana tikrasqanraykum .

Qaway imayna Bootstrap rejilla sistemamanta aspectokuna llamkanku achka dispositivokunapura huk makiwan ruwana tablawan.

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

Kikin anchoyuq achka chiruyuq

Achka chirukunata span kaqlla anchoyuq sapaqchakunata ruway, huk .w-100maypi sapaqchakuna musuq chiruman pakiyta munanki chayta churaspa. .w-100Wakin kutichiq qhaway yanapakuykunawan chaqruspa samaykunata kutichiq ruway .

Huk Safari flexbox pantay karqan kay mana sut'i flex-basisutaq border. Ñawpaq maskaq layakunapaq llamkanakuna kanku, ichaqa mana necesariochu kananku tiyan sichus munasqa maskaqniyki mana pantasqa layakunaman urmankuchu.

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

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

Canales

Canalkuna kutichisqa allichasqa kanman acolchado específico de punto de ruptura kaqwan chaymanta clases de utilidad de margen negativo kaqwan. Huk qusqa filapi kanalkunata tikranapaq, huk negativo margen utilidadta .rowchaymanta tupachiy acolchado utilidadkunata .cols kaqpi tupachiy. Chay .containerutaq .container-fluidtayta mamapas allinchasqa kanan kanman mana mana munasqa hunt'ananpaq, yapamanta tupachiy acolchado utilidadta llamk'achispa.

Kaypi huk rikch'ana Bootstrap llikata hatun ( lg) p'akiypi chaymanta pata kaqpi ruwanapaq. Ñuqaykuqa .colacolchado nisqawan yapasqayku, chayta tayta mamapi .px-lg-5kaqwan contrarrestayku chaymanta chaymanta envolturata allicharqayku ..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>

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 huk llalliq hina churasqa.

Kay fila columnakuna clasekuna llamk'achiy usqhaylla ruwanapaq básica rejilla churanakuna utaq tarjeta churanakunayki kamachinapaq.

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

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

Alineación

Flexbox chiqanchay yanapakuykunata llamk'achiy sayaqmanta, sayaqmanta columnakunata chiqanchaypaq. Internet Explorer 10-11 mana yanapanchu sayaq chiqanchay flex kaqkunamanta mayk'aq flex waqaychana huk min-heighturaypi rikuchisqa hina. Aswan sut'inchaykunapaq Flexbugs #3 nisqapi qhaway.

Alineación vertical nisqa

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

Alineación horizontal nisqa

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

Mana kanalniyuq

Ñawpaqmanta riqsisqa rejilla claseykupi columnakunapura canales nisqakunataqa .no-gutters. Kayqa llapa chaylla wawakuna columnakunamanta negativo margins nisqakunatam hurqun .row, horizontal nisqatapas hurqun.padding

Kaypi kay estilokuna ruwanapaq pukyuta kachkan. Reparay sapaq sapaqchasqakuna ñawpaq wawakuna sapaqchasqakunallaman alcanceyuq kasqankuta chaymanta atributo akllaq kaqnintakama targetchasqa kasqankuta . Kay aswan específico akllanata ruwan chaypas, columna relleno aswan ruwasqa kanmanraq espaciamiento yanapakuykunawan .

¿Necesitan un diseño de borde a borde? Tayta mamata .containerutaq .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Ruwaypiqa kaypim imayna qawakun. Reparay kayta llapa wak ñawpaqmanta riqsisqa llika clasekunawan llamk'ayta atikunki (sapaq anchokuna, kutichiq patakuna, wakmanta kamachiykuna chaymanta aswan).

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

Columna envoltura

Sichus huk sapaq sapaqchasqa 12 aswan sapaqchasqakuna churasqa kanqa, sapa huñu yapasqa sapaqchasqakuna, huk unidad hina, musuq chiruman p'istunqa.

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

Columna pakikuna

Flexbox kaqpi musuq chiruman columnakunata pakiyqa huk uchuy hack nisqatam munan: huk elementota yapay width: 100%maypipas columnakunayki musuq chiruman p'istuykuyta munanki chaywan. Normalmente kayqa achka .rows kaqwan ruwakun, ichaqa mana sapa implementación métodochu kayta cuentata quyta atin.

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

Hinallataq kay samayta wakin p'akiykunapi ruwayta atikunki kutichiq qhaway yanapakuyniykuwan .

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

Wakmanta kamachiy

Clases nisqakunata kamachiy

.order-Clases llamk'achiy contenidoykipa rikuy ordenninta kamachinapaq . Kay clasekuna kutichiq kanku, chayrayku chay by breakpoint churayta atikunki order(kayhina, .order-1.order-md-2). Pichqantin rejilla patakunapi a través 1nisqapaq yanapakuyta churan .12

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

También hay responsivos .order-firsty .order-lastclases que cambian el orderde un elemento aplicando order: -1y order: 13( order: $columns + 1), respectivamente. .order-*Kay clasekunatapas necesitasqanman hinam yupasqa clasekunawanpas chaqrusqa kanman .

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

Columnas nisqakunata offset nisqa

Iskay ñanpi rejilla columnakunata offsetta atikunki: kutichiq .offset-rejilla claseyku chaymanta margen yanapakuyniyku . Rejilla clasekuna sayayniyuq kanku columnakunawan tupananpaq chaymanta margenkuna aswan allin kanku usqhayta churanapaq maypichus offset anchun tikraq kachkan.

Clases de desplazamiento

.offset-md-*Clases nisqawan columnakunata pañaman kuyuchiy . Kay clasekunaqa huk columnapa lluq'i margenninta *columnakunawan yapan. Ejemplopaq, tawa columnakunapim .offset-md-4kuyun ..col-md-4

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

Kutichiq pakikunapi columna ch'uyanchanamanta aswan, offsetkunata musuqmanta churanayki tiyan. Kayta ruwaypi qhaway rejilla ejemplopi .

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

Utilidades de margen nisqa

v4 kaqpi flexbox kaqman kuyuywan, margen yanapakuykunata llamk'achiy atikunki imayna .mr-autowawqi columnakuna hukninmanta karuman tanqay hina.

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

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

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

Mixinkuna

Mixinkuna llamk'achisqa kanku llika 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();
@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: 30px !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.