Pe sistema cuadrícula por defecto oñemeꞌeva Bootstrap pehẽngue ramo haꞌehína peteĩ cuadrícula 940px tuichakue, 12 vore rehegua .

Avei oguereko irundy variación ombohováiva opaichagua tembipuru ha resolución-pe g̃uarã: teléfono, tableta retrato, mesa paisaje ha escritorio michĩva, ha escritorio pantalla ancha tuicháva.

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

Ohechaukaháicha koꞌape, ikatu ojejapo peteĩ diseño básico mokõi "columna" reheve, peteĩteĩva oñemosarambíva peteĩ papapy umi 12 columna fundamental rodefinivaꞌekue ore sistema cuadrícula rehegua.

Pe sistema rejilla estática (ndahaꞌeiva fluido) reheve Bootstrap-pe, anidación ndahasýi. Oñemohenda hag̃ua ne mba’ekuaarã, emoĩnte peteĩ vore pyahu .rowha ñemohenda .span*peteĩ vore oĩmava ryepýpe .span*.

Tembiecharã

Umi vore oñembohysýiva oguerekovaꞌerã peteĩ vore aty oñembojoapýva mboy vorepa oguereko it's túva. Techapyrã, mokõi .span3vore oñembohysýiva oñemohendavaꞌerã peteĩ .span6.

<div clase = "fila" > rehegua 
  <div clase = "span12" > rehegua 
    Nivel 1 de columna rehegua
    <div clase = "fila" > rehegua 
      <div clase = "span6" > Nivel 2 </div> rehegua 
      <div clase = "span6" > Nivel 2 </div> rehegua 
    </div> rehegua
  </div> rehegua
</div> rehegua

Porcentaje, ndaha’éi píxel

Pe sistema cuadrícula fluida rehegua oipuru porcentaje umi columna ancho rehegua umi píxel fijo rangue. Avei oguereko umi variación ombohováiva ñande sistema red fija-icha, oaseguráva proporción hekopete umi resolución pantalla clave ha dispositivo-kuérape g̃uarã.

Umi fila líquido rehegua

Ejapo oimeraẽva fila líquido simplemente .rowremoambuévo .row-fluid. Umi columna opyta exactamente peteĩcha, ha upéicha rupi súper recto ojere haĝua umi diseño fijo ha fluido apytépe.

Marcado rehegua

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

Pe anidación umi rejilla fluida reheve iñambue’imi: pe número de columna anidado natekotevẽi ojoaju pe túva ndive. Upéva rangue, ne vorekuéra oñembopyahu peteĩteĩva nivel-pe peteĩteĩva vore oipyhýgui 100% vore túvagui.

<div clase = "fila-fluido" > 
  <div clase = "span12" > rehegua 
    Nivel 1 de columna rehegua
    <div clase = "fila-fluido" > 
      <div clase = "span6" > Nivel 2 </div> rehegua 
      <div clase = "span6" > Nivel 2 </div> rehegua 
    </div> rehegua
  </div> rehegua
</div> rehegua

Variables en MENOS rehegua

Oñemopuꞌa Bootstrap-pe peteĩ pokõi mbaꞌekuaarã oñemboheko hag̃ua sistema cuadrícula 940px ñepyrũrã, ojehai vaꞌekue yvateve. Opaite mbaꞌekuaarã cuadrícula-pe g̃uarã oñeñongatu mbaꞌekuaarãme.mbovyvéva.

Mba’éichapa ojejapokuaa

Oñemoambuévo cuadrícula heꞌise oñemoambueha mbohapy @grid*mbaꞌekuaarã ha oñemboheko jey Bootstrap. Emoambue umi mbaꞌekuaarã cuadrícula rehegua umi mbaꞌekuaarãme.less ha eipuru peteĩva umi irundy tape ojehaipyrévagui oñembohysýi jey hag̃ua . Emoĩramo hetave vore, eñangareko emoĩve hag̃ua CSS umi oĩva grid.less-pe g̃uarã.

Opytáva ombohováivo

Pe cuadrícula ñemboheko ombaꞌapo nivel por defecto-pe añoite, pe cuadrícula 940px. Oñemantene hag̃ua Bootstrap aspecto ombohováiva, avei tekotevẽta emohenda umi rejilla responsive.less-pe.

Disposición fija rehegua

Pe ñemohenda ha isãsóva 940px tuichakue, oñecentráva haimete oimeraẽva página web térã página ome’ẽva peteĩ <div class="container">.

<tete> rehegua
  <div clase = "mba'yru" > 
    ...
  </div> rehegua
</body> rehegua

Disposición de líquido rehegua

<div class="container-fluid">omeꞌe página estructura flexible, min- ha max-ancho, ha peteĩ barra lateral izquierda gotyo. Iporãiterei umi aplicación ha docs-pe g̃uarã.

<div clase = "mba'yru-líquido" > 
  <div clase = "fila-fluido" > 
    <div clase = "span2" > rehegua 
      <!--Barra lateral rehegua contenido-->
    </div> rehegua
    <div clase = "span10" > rehegua 
      <!--Tete rehegua contenido-->
    </div> rehegua
  </div> rehegua
</div> rehegua

Umi tembipuru oipytyvõva

Bootstrap oipytyvõ peteĩ pokõi porandu medio rehegua peteĩ vore’ípe oipytyvõ hag̃ua ne rembiaporã oñemohenda porãve hag̃ua opaichagua tembipuru ha pantalla resolución-pe. Ko'ápe ojehecha mba'épa oike:

Oikotevê etiqueta meta

Ojeasegura hag̃ua umi tembipuru ohechauka porã umi páhina ombohováiva, emoinge meta etiqueta jehechaukaha.

<meta réra = "jehechaukaha" contenido = "ancho=tembipuru-ipekue, escala-ñepyrũ=1.0" >  

Mba’épa ojapo hikuái

Umi consulta medio rehegua oheja CSS jeporupyre oñemopyendáva heta condición rehe—ratio, ancho, tipo de visualización, ha mbaꞌe—ha katu jepivegua oñecentra min-widthha jerere max-width.

• Ñamoambue columna ipekue ñande cuadrícula-pe
• Emoĩ apila umi elemento oveve rangue tekotevẽhápe
• Embotuichave umi iñakãrapu’ã ha jehaipyre oñemohenda porãve hag̃ua umi tembipuru’ípe g̃uarã

Bootstrap ndoikéiva ijeheguiete ko’ã ñeporandu medio rehegua, ha katu oñentende ha oñembojoapy hag̃ua ndahasyiete ha oikotevẽ ñembosako’i michĩvéva. Eguereko mbovymi opción emoĩ hag̃ua Bootstrap mba’ekuaarã ombohováiva:

1. Eipuru pe versión ombohováiva oñembohekopyréva, bootstrap-responsive.css
2. Emoĩ @import "responsive.less" ha embojoaju jey Bootstrap
3. Emoambue ha embojoaju jey responsive.less peteĩ vore añónte ramo

Mbaʼére piko ndajaikemoʼãi rei? Añetehápe, natekotevẽi opa mba’e ombohovái. Ñamokyre’ỹ rangue umi moheñóiharakuérape oipe’a hag̃ua ko mba’ekuaarã, rofigura iporãveha emboguata hag̃ua.

  // Paisaje teléfonos ha oguejy
  @media ( máx - ancho : 480px ) { ... } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.     
 
  // Paisaje teléfono a tableta retrato rehegua
  @media ( máximo - ancho : 768px ) { ... } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.     
 
  // Tableta retrato paisaje ha escritorio-pe
  @media ( min - ancho : 768px ) ha ( max - ancho : 980px ) { ... }.        
 
  // Escritorio tuicháva
  @media ( min - ancho : 1200px ) { . } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.