Andamios

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

HTML5 doctype nisqatam munan

Bootstrap HTML elementokuna chaymanta CSS propiedades llamk'achiyta ruwan mayqinkunachus HTML5 doctype llamk'ayta munanku. Aswan allinta churay sapa Bootstrapped p'anqa qallariypi proyectoykipi.

<!DOCTIPO html> nisqa
<html lang = "en" > 
  ...
</html> nisqa

Tipografía y enlaces

Scaffolding.less willañiqi ukhupi , sapsi tukuypaq qhaway, tipografía chaymanta t'inki estilokuna churayku. Específicamente, ñuqayku:

Kurkupi margenta hurquy
Set background-color: white;en elbody
@baseFontFamily, @baseFontSize, chaymanta @baseLineHeightatributokunata tipografía base nisqayku hina llamk'achiy
Tukuypaq t'inki llimp'ita vía nisqawan @linkColorchuray chaymanta t'inki subrayasqakunallata llamk'achiy:hover

Reset vía Normalizar

Bootstrap 2 kaqmanta, ñawpaq CSS kaqmanta churayqa wiñasqa Normalize.css kaqmanta elementokuna llamk'achinanpaq , huk llamk'apuy Nicolas Gallagher kaqmanta chaymanta HTML5 Boilerplate kaqmanta kallpachan .

Musuq kutichiyqa tarikunraqmi reset.less nisqapi , ichaqa achka elementokuna hurqusqawan pisi rimayllapi chaymanta chiqan kananpaq.

Bootstrap kaqpi qusqa ñawpaqmanta rejilla sistema 12 columnakuna llamk'achin chaymanta 724px, 940px (ñawpaqmanta mana kutichiq CSS yapasqa), chaymanta 1170px anchokunapi ruwan. 767px qhaway punkukuna urapi, columnakuna fluidoman tukun chaymanta sayaqpi pilakunku.

<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 fundacional 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) rejilla sistema kaqwan, nido ruwayqa facilmi. Contenidoyki anidadopaq, huk musuq .rowchaymanta huñu .span*columnakuna huk kachkaq .span*columna ukhupi yapaylla.

Qatina

Anidado filakuna huk huñu sapaqchasqakunayuq kanan tiyan chaymanta yapan yupay sapaqchasqakuna chaymanta tayta kaqninmanta. Ejemplopaq, iskay anidado .span3columnakunatam huk .span6.

Nivel 1 de columna

2 kaq ñiqi

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

Columnas de fluido

Pachakmanta huknin, mana pixelkunachu

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.

Filas de fluidos

.rowIma filatapas fluidota ruway kayman tikraspalla .row-fluid. Columnakuna kaqlla kaqlla qhipakunku, chaymanta super derechota tikranapaq fijo chaymanta fluido churaykuna ukhupi.

Markup

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

Nido de fluidos

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.

Fluido nisqa 12

Fluido 6.

<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

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

Kutichiq aparatokuna

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

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
Smartphones nisqakuna	480px y abajo	Columnas fluidas, mana takyasqa anchokunayuq
Smartphones nisqakuna tabletas nisqaman	767px y abajo	Columnas fluidas, mana takyasqa anchokunayuq
Tabletas de retrato	768px y más	42px nisqa	20px nisqa
Ñawpaqchasqa	980px y arriba	60px nisqa	20px nisqa
Hatun rikuchiy	1200px y hasta	70px nisqa	30px nisqa

Requiere meta etiqueta

Dispositivokuna kutichiq p'anqakunata allinta rikuchinankupaq, qhaway punku meta etiquetata churay.

<meta suti = "qhaway punku" contenido = "ancho=dispositivo-ancho, qallariy-escala=1.0" >

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
responsive.less nisqa sapaq willañiqi hina tikray chaymanta musuqmanta huñuy

¿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 : 767px ) { ... }.     
 
  /* Retrato tableta a paisaje y escritorio */
  @media ( min - ancho : 768px ) y ( max - ancho : 979px ) { ... }.        
 
  /* Hatun qillqana p'anqa */
  @media ( min - ancho : 1200px ) { ... }.

Clases de utilidad respuestas nisqa

Imataq kanku

Aswan utqaylla kuyuchina-amigo wiñachiypaq, kay básica utilidad clasekuna dispositivo kaqwan rikuchiypaq chaymanta pakaypaq llamk'achiy.

Hayk’aqtaq apaykachana

Huk pisi kaqpi llamk'achiy chaymanta mana kikin sitiomanta tukuy wak layakuna ruwaychu. Aswanpas chaykunata utilizay sapa aparatoq presentacionninta hunt’anaykipaq.

Ejemplopaq, huk <select>elemento nav kaqpaq rikuchiyta atikunki kuyuchina churaykunapi, ichaqa mana tabletakunapi utaq escritoriokunapichu.

Clases de apoyo

Kaypi rikuchisqa huk tabla clasekuna yanapakuyniyku chaymanta efectonkuna huk qusqa medio tapuy churaypi (dispositivowan etiquetasqa). Chaykunataqa tarisunmanmi responsive.less.

Yachakuna	Teléfonos nisqakuna480px y abajo	Tabletas767px y abajo	Escritoriokuna768px y más
`.visible-phone`	Rikuna	Pakasqa	Pakasqa
`.visible-tablet`	Pakasqa	Rikuna	Pakasqa
`.visible-desktop`	Pakasqa	Pakasqa	Rikuna
`.hidden-phone`	Pakasqa	Rikuna	Rikuna
`.hidden-tablet`	Rikuna	Pakasqa	Rikuna
`.hidden-desktop`	Rikuna	Rikuna	Pakasqa

Caso de prueba

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