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ã

<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

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ñemoambuévo 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ĩ 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 contenido--> rehegua
    </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 oipytyvõ hag̃ua ne rembiaporã oñemohenda porãve hag̃ua opaichagua tembipuru ha pantalla resolución-pe. Ko'ápe ojehecha mba'épa oike:

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 flota rangue tekotevẽhápe
• Embotuichave umi iñakãrapuꞌa ha jehaipyre oñemohenda porãve hag̃ua umi tembipururãme g̃uarã

Bootstrap ndoikéiva ijeheguiete ko’ã porandu 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. Omoambue ha ombojoaju jey responsive.less ha'eháicha peteî separado

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áximo - 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 : 940px ) { ... }.        
 
  // Escritorio tuicháva
  @media ( min - ancho : 1200px ) { . } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.