Bootstrap nisqaqa kutichiq 12 columnayuq llikapi ruwasqam. Chantapas chay sistemapi hapipakuspa takyasqa- chaymanta fluido-ancho churaykunata churarqayku.
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.
- <div clase = "fila" >
- <div clase = "span4" > ... </div> nisqa
- <div clase = "span4 offset4" > ... </div> nisqa
- </div> nisqa
Bootstrap kaqpi mana kuyusqa (mana fluido kaq) rejilla sistema kaqwan, nido ruwayqa facilmi. Contenidoyki anidadopaq, huk musuq .row
chaymanta huñu .span*
columnakuna huk kachkaq .span*
columna ukhupi yapaylla.
Anidado filakuna huk huñu sapaqchasqakunayuq kanan tiyan chaymanta yapan yupay sapaqchasqakuna chaymanta tayta kaqninmanta. Ejemplopaq, iskay anidado .span3
columnakunatam huk .span6
.
- <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
Sistema de rejilla fluida nisqaqa pachakmanta hukkunatam llamk'achin columna anchokunapaq, takyasqa pixelkunap rantinpi. Hinallataq, kikin kutichiq variacionesniyuq kachkan sistemayku rejilla takyasqa kaqhina, allin proporcionkuna pantalla llave resolucionkuna kaqpaq chaymanta dispositivokuna kaqpaq qhawaspa.
.row
Ima filatapas fluidota ruway kayman tikraspalla .row-fluid
. Columnakuna kaqlla kaqlla qhipakunku, chaymanta super derechota tikranapaq fijo chaymanta fluido churaykuna ukhupi.
- <div clase = "fila-fluido" >
- <div clase = "span4" > ... </div> nisqa
- <div clase = "span8" > ... </div> nisqa
- </div> nisqa
Fluido rejillakunawan anidado ruwayqa huk chhika wakjina kachkan: yupay anidado columnakuna mana tayta mamawan tupananchu tiyan. Aswanpas, sapa patapi sapa fila 100% tayta columnamanta hapinrayku columnakunayki sapa patapi kaqmanta churasqa kanku.
- <div clase = "fila-fluido" >
- <div clase = "span12" >
- Nivel 1 de columna
- <div clase = "fila-fluido" >
- <div clase = "span6" > 2 kaq ñiqi </div>
- <div clase = "span6" > 2 kaq ñiqi </div>
- </div> nisqa
- </div> nisqa
- </div> nisqa
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 |
Bootstrap kaqpi ruwasqa huk maki tikraqkuna kanku ñawpaqmanta 940px llika llamkana ruwanapaq, patamanta qillqasqa. Rejillapaq llapa variables nisqakunam variables nisqapi waqaychasqa kachkan.less.
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.
Rejillamanta sapanchasqa ruwayqa ñawpaqmanta ruwasqa patallapi llamkan, 940px llikapi. Bootstrap kaqmanta kutichiq aspectokuna waqaychaypaq, chaymanta rejillakuna responsive.less kaqpi ruwanayki tiyan.
Ñ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
<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
Bootstrap huk maki willay tapuykunata huk willakuypi yanapakun proyectokunayki aswan allin kananpaq hukhina dispositivokunapi chaymanta pantalla resolucionkunapi. 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 979pxkama | 42px nisqa | 20px nisqa |
Ñawpaqchasqa | 980px y arriba | 60px nisqa | 20px nisqa |
Hatun rikuchiy | 1210px y arriba | 70px nisqa | 30px nisqa |
Dispositivokuna kutichiq p'anqakunata allinta rikuchinankupaq, qhaway punku meta etiquetata churay.
- <meta suti = "qhaway punku" contenido = "ancho=dispositivo-ancho, qallariy-escala=1.0" >
Media tapuykuna sapanchasqa CSS huk yupay condicionkunapi hapisqa saqin —ratios, anchos, qhaway laya, hukkuna— ichaqa aswanta muyuriqpi min-width
chaymanta max-width
.
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:
¿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 : 980px ) { ... }.
- // Hatun escritorio
- @media ( min - ancho : 1200px ) { . }.