Ñepyrũrã

Andamio rehegua

Bootstrap oñemopuꞌa peteĩ cuadrícula 12 columna ombohováiva rehe. Avei romoĩkuri umi diseño fijo- ha fluido-ancho rehegua oñemopyendáva upe sistema-pe.

Estilos globales CSS jegueru jey, tipografía ha enlace-kuérape g̃uarã

Oikotevẽ HTML5 doctype

Bootstrap oipuru HTML elemento ha CSS mbaꞌekuaarã oikotevẽva ojepuru HTML5 doctype. Emoĩ katuete opaite Bootstrapped página ñepyrũme ne rembiaporãme.

  1. <!DOCTIPO html> rehegua
  2. <html lang = "guaraní" > 
  3.   ...
  4. </html> rehegua

Tipografía ha enlace-kuéra

Pe archivo scaffolding.less ryepýpe , romohenda umi estilo global jehechaukarã, tipografía ha enlace básico. Específicamente, ñande:

  • Ojepe’a margen ñande rete rehe
  • Oñemohenda background-color: white;pebody
  • Eipuru umi atributo @baseFontFamily, @baseFontSize, ha @baseLineHeightñande base tipográfica ramo
  • Emohenda enlace global color vía @linkColorha emoĩ enlace subrayado rehe añoite:hover

Reset vía Normalizar

Bootstrap 2 guive, CSS jegueru jey ymaite guive oñembohape ojepuru hag̃ua umi elemento Normalize.css -gui , peteĩ tembiaporã Nicolas Gallagher ojapovaꞌekue omombaretéva avei HTML5 Boilerplate .

Pe reset pyahu ikatu gueteri ojejuhu reset.less -pe , ha katu heta elemento ojeipeꞌavaꞌekue mbyky ha hekopete hag̃ua.

Sistema de rejilla por defecto 12 columna orekóva peteî giro ombohováiva

1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
4 rehegua
4 rehegua
4 rehegua
4 rehegua
8 rehegua
6 rehegua
6 rehegua
12 rehegua

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.

  1. <div clase = "fila" > rehegua 
  2.   <div clase = "span4" > ... </div> rehegua 
  3.   <div clase = "span8" > ... </div> rehegua 
  4. </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.


Umi columna de desplazamiento rehegua

4 rehegua
4 desplazamiento rehegua 4.1
3 desplazamiento rehegua 3.1
3 desplazamiento rehegua 3.1
8 desplazamiento rehegua 4.1 
  1. <div clase = "fila" > rehegua 
  2.   <div clase = "span4" > ... </div> rehegua 
  3.   <div clase = "span4 desplazamiento4" > ... </div> rehegua 
  4. </div> rehegua

Umi columna de anidación 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.

Nivel 1 de columna rehegua
Nivel 2 rehegua
Nivel 2 rehegua 
  1. <div clase = "fila" > rehegua 
  2.   <div clase = "span12" > rehegua 
  3.     Nivel 1 de columna rehegua
  4.     <div clase = "fila" > rehegua 
  5.       <div clase = "span6" > Nivel 2 </div> rehegua 
  6.       <div clase = "span6" > Nivel 2 </div> rehegua 
  7.     </div> rehegua
  8.   </div> rehegua
  9. </div> rehegua

Sistema de rejilla fluida 12 columna ombohováiva, oñemopyendáva porcentaje rehe

Umi columna líquido rehegua

1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
1. 1.1
4 rehegua
4 rehegua
4 rehegua
4 rehegua
8 rehegua
6 rehegua
6 rehegua
12 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

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

Nido de líquido 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.

Líquido rehegua 12.1
Líquido rehegua 6.1
Líquido rehegua 6.1 
  1. <div clase = "fila-fluido" > 
  2.   <div clase = "span12" > rehegua 
  3.     Nivel 1 de columna rehegua
  4.     <div clase = "fila-fluido" > 
  5.       <div clase = "span6" > Nivel 2 </div> rehegua 
  6.       <div clase = "span6" > Nivel 2 </div> rehegua 
  7.     </div> rehegua
  8.   </div> rehegua
  9. </div> rehegua

Personalización de rejilla rehegua

Variable rehegua Valor por defecto rehegua Techaukaha
@gridColumns 12 rehegua Número de columnas rehegua
@gridColumnWidth 60px rehegua Peteĩteĩva vore ipekue
@gridGutterWidth 20px rehegua Espacio negativo umi columna apytépe
@siteWidth Suma oñecomputa opaite columna ha canalización rehegua Oipapa mboy columna ha canalepa oguereko omohenda hagua .container-fixed()mixin ancho

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.

Diseños Plantilla básica ojejapo hag̃ua página web

Disposición fija rehegua

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

  1. <tete> rehegua
  2.   <div clase = "mba'yru" > 
  3.     ...
  4.   </div> rehegua
  5. </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ã.

  1. <div clase = "mba'yru-líquido" > 
  2.   <div clase = "fila-fluido" > 
  3.     <div clase = "span2" > rehegua 
  4.       <!--Barra lateral rehegua contenido-->
  5.     </div> rehegua
  6.     <div clase = "span10" > rehegua 
  7.       <!--Tete rehegua contenido-->
  8.     </div> rehegua
  9.   </div> rehegua
  10. </div> rehegua

Diseño ombohováiva Oporandu medios de comunicación rehegua opaichagua tembipuru ha resolución rehegua

Umi tembipuru ombohováiva

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ã

Eipuru umi consulta medios de comunicación rehegua responsablemente ha ñepyrũrãnte umi ne audiencia móvil-pe g̃uarã. Umi proyecto tuichavévape g̃uarã, ehecha umi base código dedicado ha ndaha’éi capas de consultas medios de comunicación 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:

Maranduhaipyre Diseño ipekue rehegua Columna ancho rehegua Ancho de canalización rehegua
Umi teléfono inteligente rehegua 480px ha iguýpe Umi columna fluida, ndorekóiva ancho fijo
Umi teléfono inteligente umi tableta-pe 767px ha iguýpe Umi columna fluida, ndorekóiva ancho fijo
Tablas de retrato rehegua 768px ha yvateve 42px rehegua 20px rehegua
Upevakuére 980px ha yvate gotyo 60px rehegua 20px rehegua
Tuicha jehechauka 1200px ha yvateve 70px rehegua 30px rehegua

Oikotevê etiqueta meta

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

  1. <meta réra = "jehechaukaha" contenido = "ancho=dispositivo-ancho, escala-ñepyrũha=1.0" >

Oipurúvo umi consulta medios de comunicación rehegua

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. 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.

  1.   // Paisaje teléfonos ha oguejy
  2.   @media ( máximo - ancho : 480px ) { ... } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.     
  3.  
  4.   // Paisaje teléfono a tableta retrato rehegua
  5.   @media ( máximo - ancho : 768px ) { ... } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.     
  6.  
  7.   // Tableta retrato paisaje ha escritorio-pe
  8.   @media ( min - ancho : 768px ) ha ( max - ancho : 980px ) { ... }.        
  9.  
  10.   // Escritorio tuicháva
  11.   @media ( min - ancho : 1200px ) { . } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.

Umi clase de utilidad ombohováiva

Mba’épa umíva

Oñemoheñói pya’eve hag̃ua móvil-pe g̃uarã, eipuru ko’ã clase utilidad básica rehegua ehechauka ha emokañy hag̃ua contenido dispositivo rupive.

Araka’épa ojepuruva’erã

Eipuru peteĩ base limitada-pe ha ani emoheñói versión iñambuetereíva peteĩ sitio-gui. Upéva rangue, eipuru umíva rekomplementa hag̃ua káda aparáto presentasión.

Techapyrã, ikatu ehechauka peteĩ <select>elemento nav-pe g̃uarã umi diseño móvil-pe, ha katu ndaha’éi tableta térã escritorio-pe.

Umi mbo’esyry oipytyvõva

Ko’ápe ojehechauka peteĩ cuadro umi mbo’esyry roipytyvõva ha efecto orekóva peteĩ diseño consulta medio rehegua oñeme’ẽva rehe (oñemoĩva etiqueta dispositivo rupive). Ikatu ojejuhu ko’ápe responsive.less.

Mbo'ehakoty Teléfonokuéra rehegua480px ha iguýpe Tabletas rehegua767px ha iguýpe Escritorio-kuéra rehegua768px ha yvateve
.visible-phone Ojehecha
.visible-tablet Ojehecha
.visible-desktop Ojehecha
.hidden-phone Ojehecha Ojehecha
.hidden-tablet Ojehecha Ojehecha
.hidden-desktop Ojehecha Ojehecha

Káso de prueba rehegua

Embotuichave ne kundahára térã ekarga opaichagua tembipuru’ípe eñeha’ã hag̃ua umi clase yvategua.

Ojehecha ko...

  • Pumbyry✔ Teléfono
  • Tableta rehegua✔ Tableta rehegua
  • Escritorio rehegua✔ Escritorio rehegua

Oñomiva'ekue...

  • Pumbyry✔ Teléfono
  • Tableta rehegua✔ Tableta rehegua
  • Escritorio rehegua✔ Escritorio rehegua