Correa de botas

Andamios

Bootstrap kutichiq 12 columna rejillakunapi, churanakunapi, chaymanta componentes kaqpi ruwasqa.

Tukuy pachapaq churanakuna

HTML5 doctype nisqatam munan

Bootstrap wakin HTML elementokuna chaymanta CSS propiedades llamk'achiyta ruwan mayqinkunachus HTML5 doctype llamk'ayta munanku. Incluyelo al inicio de todos tus proyectos.

  1. <!DOCTIPO html> nisqa
  2. <html lang = "en" > 
  3.   ...
  4. </html> nisqa

Tipografía y enlaces

Bootstrap sapanchasqa tukuypaq qhaway, tipografía chaymanta t'inki estilokuna churan. Específicamente, ñuqayku:

  • marginCuerpo patapi hurquy
  • Set background-color: white;en elbody
  • @baseFontFamily, @baseFontSize, chaymanta @baseLineHeightatributokunata qillqanapaq baseyku hina llamk'achiy
  • Tukuypaq t'inki llimp'ita vía nisqawan @linkColorchuray chaymanta t'inki subrayasqakunallata llamk'achiy:hover

Kay estilokunataqa andamio ukhupi tarikunman.less .

Reset vía Normalizar

Bootstrap 2 kaqwan, ñawpaq kutichiy bloque Normalize.css kaqpa favorninpi urmachisqa kachkan , huk proyecto Nicolas Gallagher chaymanta Jonathan Neal kaqmanta chaymanta HTML5 Boilerplate kaqman kallpachan . Mientras aswan Normalize kaqmanta llamk'achiyku reset.less kaqniyku ukhupi , wakin elementokunata Bootstrap kaqpaq específicamente hurqurqayku.

Sistema de rejilla ñawpaqmanta churasqa

Kawsaq rejilla ejemplo

Ñawpaqmanta Bootstrap llika llamkana 12 sayaqkunata llamk'achin , huk 940px ancho waqaychanapaq mana kutichiq ruwanakuna atichisqa kaqwan. Kutichiq CSS willañiqi yapasqawan, rejilla 724px chaymanta 1170px ancho kananpaq qhawayniykimanta ruwasqa. 767px qhaway punkukuna urapi, columnakuna fluidoman tukun chaymanta sayaqpi pilakunku.

1.
1.
1.
1.
1.
1.
1.
1.
1.
2.
3.
4.
4.
5.
9. 9.1

HTML de rejilla básica

Iskay sapaq sapaqchasqa churanapaq, huk ruway .rowhinaspa tupaq yupay .span*sapaqchasqa yapay. Kayqa 12 columnayuq rejilla kasqanrayku, sapakama .span*chay 12 columnakunamanta huk yupayta mast’arikun, chaymanta sapa filapaq 12kama sapa kuti yapana tiyan (utaq tayta mamapi columnakuna yupayta).

  1. <div clase = "fila" > 
  2.   <div clase = "span4" > ... </div> nisqa 
  3.   <div clase = "span8" > ... </div> nisqa 
  4. </div> nisqa

Kay rikch'anata qusqa, .span4chaymanta .span8, ruwaspa 12 tukuyninpi columnakuna chaymanta huk hunt'asqa fila.

Columnas nisqakunata offset nisqa

.offset*Clases nisqawan columnakunata pañaman kuyuchiy . Sapa clase huk columnapa lluqi margenninta huk columnawan yapan. Ejemplopaq, tawa columnakunapim .offset4kuyun ..span4

4.
3 offset 2
3 offset 1
3 offset 2
6 offset 3 
  1. <div clase = "fila" > 
  2.   <div clase = "span4" > ... </div> nisqa 
  3.   <div clase = "span3 offset2" > ... </div> nisqa 
  4. </div> nisqa

Columnas de nidificación

Ñawpaqmanta ruwasqa llikawan willanaykipaq, musuq .rowchaymanta huñu .span*sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa ukhupi yapay .span*. Anidado filakunapiqa huk huñu sapaqchasqakunam kanan, chaykunam tayta-mamanpa sapaqchankuna yupayninman yapakun.

Nivel 1 nisqa columna
2 kaq ñiqi
2 kaq ñiqi 
  1. <div clase = "fila" > 
  2.   <div clase = "span9" > 
  3.     Nivel 1 nisqa columna
  4.     <div clase = "fila" > 
  5.       <div clase = "span6" > 2 kaq ñiqi </div> 
  6.       <div clase = "span3" > 2 kaq ñiqi </div> 
  7.     </div> nisqa
  8.   </div> nisqa
  9. </div> nisqa

Sistema de rejilla fluida nisqa

Kawsaq fluido rejilla ejemplo

Sistema de rejilla fluida nisqaqa pachakmanta hukninmi pixelkunap rantinpi columna anchokunapaq llamk'achin. Kikin kutichiy atiyniyuq kay takyasqa rejilla sistemayku hina, allin proporcionkuna pantalla llave resolucionkuna kaqpaq chaymanta dispositivokuna kaqpaq qhawaspa.

1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
4.
4.
4.
4.
8.
6.
6.
12

Rejilla de fluido básico HTML nisqa

Ima chirutapas "fluido" nisqatam rurana , nisqaman .rowtikraspa .row-fluid. Columna clasekuna kaqllapuni qhipakunku, chayraykutaq mana sasachu tikranapaq rejillas fijas chaymanta fluidas ukhupi.

  1. <div clase = "fila-fluido" > 
  2.   <div clase = "span4" > ... </div> nisqa 
  3.   <div clase = "span8" > ... </div> nisqa 
  4. </div> nisqa

Compensación de fluidos nisqa

Llamkan kikin hina takyasqa rejilla sistema .offset*offset kaqwan: mayqin columnamanpas yapay chay achka columnakunawan offset kananpaq.

4.
4 offset 4
3 offset 3
3 offset 3
6 offset 6 
  1. <div clase = "fila-fluido" > 
  2.   <div clase = "span4" > ... </div> nisqa 
  3.   <div clase = "span4 offset2" > ... </div> nisqa 
  4. </div> nisqa

Nido de fluidos

Fluido rejillas nisqakunam huknirayta anidado nisqataqa llamkachinku: sapa columnakuna anidado nisqa nivelqa 12 columnakamam yapana. Kayqa, yaku llikata pachakmanta hukninta llamk'achisqanraykum, manam pixelkunatachu, anchokunata churanapaq.

Fluido nisqa 12
Fluido 6.
Fluido 6.
Fluido 6.
Fluido 6. 
  1. <div clase = "fila-fluido" > 
  2.   <div clase = "span12" > 
  3.     Fluido nisqa 12
  4.     <div clase = "fila-fluido" > 
  5.       <div clase = "span6" > 
  6.         Fluido 6.
  7.         <div clase = "fila-fluido" > 
  8.           <div clase = "span6" > 6 kaq yaku </div> 
  9.           <div clase = "span6" > 6 kaq yaku </div> 
  10.         </div> nisqa
  11.       </div> nisqa
  12.       <div clase = "span6" > 6 kaq yaku </div> 
  13.     </div> nisqa
  14.   </div> nisqa
  15. </div> nisqa

Diseños

Diseño fijo

Huk común takyasqa-ancho (hinallataq munasqa kutichiy) churayta qun sapalla <div class="container">mañasqa kaqwan.

  1. <cuerpo> nisqa
  2.   <div clase = "contenedor" > 
  3.     ...
  4.   </div> nisqa
  5. </cuerpo> nisqa

Diseño de fluido

Huk fluido, iskay columnayuq p'anqata ruway <div class="container-fluid">—aswan allin ruwanakunapaq chaymanta docs kaqpaq.

  1. <div clase = "contenedor-fluido" > 
  2.   <div clase = "fila-fluido" > 
  3.     <div clase = "span2" > 
  4.       <!--Contenido de la barra lateral-->
  5.     </div> nisqa
  6.     <div clase = "span10" > 
  7.       <!--Contenido del cuerpo-->
  8.     </div> nisqa
  9.   </div> nisqa
  10. </div> nisqa

Diseño respuesta

Kutichiy ruwanakunata atichiy

Proyectoykipi kutichiq CSS llamk'achiy allin meta etiqueta chaymanta yapasqa estilo raphi ukhupi <head>qillqaykimanta. Sichus Bootstrap llamk'achiyta p'anqamanta huñurqanki, meta etiquetallata churanayki tiyan.

  1. <meta suti = "qhaway punku" contenido = "ancho=dispositivo-ancho, qallariy-escala=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "estilo raphi" >

¡Umakuna wichayman!Bootstrap mana kutichiq ruwanakunata kay pachapi ñawpaqmanta churanchu mana tukuychu kutichiq kanan tiyan. Ruwaqkuna kay ruwayta hurqunankupaq kallpachanamantaqa, aswan allinta yupayku necesitasqanmanhina atichinaykupaq.

Kutichiq Bootstrap nisqamanta

Kutichiq aparatokuna

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

Utilizar medios tapuykunata responsablemente chaymanta huk qallariy hinalla audiencias móviles kaqniykipaq. Aswan hatun ruwanakunapaq, ruway dedicado código bases kaqmanta qhaway chaymanta mana capas kaqmanta medios tapuykunamantachu.

Yanapasqa aparatokuna

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
Hatun rikuchiy 1200px y hasta 70px nisqa 30px nisqa
Ñawpaqchasqa 980px y arriba 60px nisqa 20px nisqa
Tabletas de retrato 768px y más 42px nisqa 20px nisqa
Teléfonos a tabletas 767px y abajo Columnas fluidas, mana takyasqa anchokunayuq
Teléfonos nisqakuna 480px y abajo Columnas fluidas, mana takyasqa anchokunayuq 
  1. /* Hatun qillqana p'anqa */
  2. @media ( min - ancho : 1200px ) { ... }.     
  3.  
  4. /* Retrato tableta a paisaje y escritorio */
  5. @media ( min - ancho : 768px ) y ( max - ancho : 979px ) { ... }.        
  6.  
  7. /* Paisaje teléfono a tableta de retrato */
  8. @media ( max - ancho : 767px ) { ... }.     
  9.  
  10. /* Paisaje teléfonos y abajo */
  11. @media ( max - ancho : 480px ) { ... }.

Clases de utilidad respuestas nisqa

Aswan utqaylla kuyuchina-amigo wiñachiypaq, kay yanapakuy clasekunata llamk'achiy dispositivo kaqwan willayta rikuchinapaq chaymanta pakanapaq. Uraypi huk tabla kachkan chaymanta clasekuna tarikuq chaymanta efecton huk qusqa medio tapuy churaypi (dispositivowan sutichasqa). Chaykunataqa tarisunmanmi responsive.less.

Yachakuna Teléfonos nisqakuna767px y abajo Tabletas979pxmanta 768pxkama EscritoriokunaÑawpaqchasqa
.visible-phone Rikuna
.visible-tablet Rikuna
.visible-desktop Rikuna
.hidden-phone Rikuna Rikuna
.hidden-tablet Rikuna Rikuna
.hidden-desktop Rikuna Rikuna

Hayk’aqtaq apaykachana

Huk pisi kaqpi llamk'achiy chaymanta mana kikin sitiomanta tukuy wak layakuna ruwaychu. Aswanpas chaykunata utilizay sapa aparatoq presentacionninta hunt’anaykipaq. Kutichiy yanapakuykuna mana tablakunawan llamk'achinankuchu tiyan, chaymanta chayhina mana yanapasqachu.

Caso de prueba de utilidades respuestas nisqa

Navegadorniykipa sayayninta tikray utaq wak dispositivokunapi kargay kay pata clasekuna pruebapaq.

Rikuna kaypi...

Q'umir qhaway markakuna kunan qhawanaykipi clase rikukuq kaqta rikuchin.

  • Telefono✔ Teléfono
  • Tableta✔ Tableta
  • Escritorio✔ Escritorio

Pakasqa...

Kaypi, q'umir qhaway markakuna kunan qhawanaykipi clase pakasqa kaqta rikuchin.

  • Telefono✔ Teléfono
  • Tableta✔ Tableta
  • Escritorio✔ Escritorio