Andamios

Bootstrap nisqaqa kutichiq 12 columnayuq llikapi ruwasqam. Chantapas chay sistemapi hapipakuspa takyasqa- chaymanta fluido-ancho churaykunata churarqayku.

Ñawpaqmanta churasqa 940px llikata

Bootstrap kaqpa huknin kaqnin hina qusqa ñawpaqmanta ruwasqa llika llamkana 940px-anchoyuq, 12-satuyuq llika .

Hinallataq tawa kutichiq variaciones imaymana dispositivokuna chaymanta resolucionkunayuq: telefono, tableta retrato, mesa paisaje chaymanta huch'uy escritoriokuna, chaymanta hatun pantalla ancho escritoriokuna.

<div clase = "fila" > 
  <div clase = "span4" > ... </div> nisqa 
  <div clase = "span8" > ... </div> nisqa 
</div> nisqa

Kaypi rikuchisqa hina, huk sapsi churay iskay "columnakunawan" ruwakunman, sapa huk yupayta 12 cimiento columnakunamanta sut'inchasqayku sistema rejillaykumanta.

Columnas nisqakunata offset nisqa

4 offset 4

3 offset 3

8 offset 4.1

<div clase = "fila" > 
  <div clase = "span4" > ... </div> nisqa 
  <div clase = "span4 offset4" > ... </div> nisqa 
</div> nisqa

Columnas de nidificación

Bootstrap kaqpi mana kuyusqa (mana fluido kaq) rejilla sistema kaqwan, nido ruwayqa facilmi. Contenidoyki anidadopaq, huk musuq .rowchaymanta huñu .span*columnakuna huk kachkaq .span*columna ukhupi yapaylla.

Qatina

Nivel 1 de columna

2 kaq ñiqi

<div clase = "fila" > 
  <div clase = "span12" > 
    Nivel 1 de columna
    <div clase = "fila" > 
      <div clase = "span6" > 2 kaq ñiqi </div> 
      <div clase = "span6" > 2 kaq ñiqi </div> 
    </div> nisqa
  </div> nisqa
</div> nisqa

Personalización de rejilla

Variable nisqa	Ñawpaqmanta churasqa chani	Willay
`@gridColumns`	12	Yupay columnakuna
`@gridColumnWidth`	60px nisqa	Sapa columnapa anchun
`@gridGutterWidth`	20px nisqa	Columnakuna chawpipi negativo espacio
`@siteWidth`	Llapan columnakunamanta, canales nisqamanta ima yupasqa	Yupan hayka columnakuna hinaspa canales nisqakuna `.container-fixed()`mixinpa anchunta churananpaq

Variables en LESS

Bootstrap kaqpi ruwasqa huk maki tikraqkuna kanku ñawpaqmanta 940px llika llamkana ruwanapaq, patamanta qillqasqa. Rejillapaq llapa variables nisqakunam variables nisqapi waqaychasqa kachkan.less.

Imaynatataq ruwana

Rejilla tikrayqa kimsa @grid*tikraqkuna tikrayta chaymanta Bootstrap kaqmanta huñuyta munan. variables.less nisqapi rejilla variables nisqakunata tikray hinaspa tawa ñankunamanta hukninta llamk'achiy wakmanta huñunapaq . Aswan sapaq sapaqchasqakunata yapanki chayqa, ama hina kaspa CSS yapay grid.less kaqpi kaqkunapaq.

Kutichiq hina qipakuy

Rejillamanta sapanchasqa ruwayqa ñawpaqmanta ruwasqa patallapi llamkan, 940px llikapi. Bootstrap kaqmanta kutichiq aspectokuna waqaychaypaq, chaymanta rejillakuna responsive.less kaqpi ruwanayki tiyan.

Diseño fijo

Ñawpaqmanta chaymanta sanu 940px-ancho, chawpichasqa churay yaqa mayqin web kitipaq utaq p'anqapaq huk sapalla qusqa <div class="container">.

<cuerpo> nisqa
  <div clase = "contenedor" > 
    ...
  </div> nisqa
</cuerpo> nisqa

Diseño de fluido

<div class="container-fluid">qun flexible p'anqa estructurata, min- chaymanta max-anchokunata, chaymanta huk lluq'i lado barra. Ancha allinmi apps kaqpaq chaymanta docs kaqpaq.

<div clase = "contenedor-fluido" > 
  <div clase = "fila-fluido" > 
    <div clase = "span2" > 
      <!--Contenido de la barra lateral-->
    </div> nisqa
    <div clase = "span10" > 
      <!--Contenido del cuerpo-->
    </div> nisqa
  </div> nisqa
</div> nisqa

Yanapasqa aparatokuna

Bootstrap huk maki willay tapuykunata yanapakun proyectokunayki aswan allin kananpaq hukhina dispositivokunapi chaymanta pantalla resolucionkunapi yanapanapaq. Kaypi imakuna churasqa kachkan:

Suti	Ancho de diseño	Ancho de columna	Ancho de canalización
Smartphones nisqakuna	480px y abajo	Columnas fluidas, mana takyasqa anchokunayuq
Tabletas de retrato	480pxmanta 768pxkama	Columnas fluidas, mana takyasqa anchokunayuq
Tabletas de paisaje	768pxmanta 940pxkama	44px nisqa	20px nisqa
Ñawpaqchasqa	940px y hasta	60px nisqa	20px nisqa
Hatun rikuchiy	1210px y arriba	70px nisqa	30px nisqa

Ima rurasqanku

Media tapuykuna sapanchasqa CSS huk yupay condicionkunapi hapisqa saqin —ratios, anchos, qhaway laya, hukkuna— ichaqa aswanta muyuriqpi min-widthchaymanta max-width.

Rejillanchikpi columnapa anchunta tikray
Maypipas necesario kaqpi flotarpa rantinpi elementokunata pilay
Umakunata chaymanta qillqakunata dispositivokunapaq aswan allin kananpaq tikray

Medios de comunicación tapuykunata llamk’achispa

Bootstrap mana kikillanmantachu kay willaykunata tapuykunata churan, ichaqa hamut'ay chaymanta yapay ancha facil chaymanta pisi churayta munan. Huk pisi akllanakunayuq kanki Bootstrap kutichiy ruwanakuna churanapaq:

Huñusqa kutichiq laya llamk'achiy, bootstrap-responsive.css
@import "responsive.less" yapay chaymanta Bootstrap kaqmanta huñuy
Modificar y recompilar responsive.less huk sapaq hina

¿Imanasqataq mana chayllatachu churana? Chiqaptaqa, manam tukuy imapaschu uyarinapaq hina kanan. Ruwaqkuna kay ruwayta hurqunankupaq kallpachanamantaqa, aswan allinta yuyayku atichiypaq.

  // Paisaje teléfonos y abajo
  @media ( max - ancho : 480px ) { ... }.     
 
  // Paisaje teléfono a tableta de retrato
  @media ( max - ancho : 768px ) { ... }.     
 
  // Retrato tableta a paisaje y escritorio
  @media ( min - ancho : 768px ) y ( max - ancho : 940px ) { ... }.        
 
  // Hatun escritorio
  @media ( min - ancho : 1200px ) { . }.