Ñepyrũrã

Andamio rehegua

Bootstrap oñemopuꞌa umi rejilla, diseño ha componente ombohováiva 12 columna rehe.

Umi escenario global rehegua

Oikotevẽ HTML5 doctype

Bootstrap oipuru peteĩ HTML elemento ha CSS mbaꞌekuaarã oikotevẽva ojepuru HTML5 doctype. Emoĩ opaite ne rembiapo ñepyrũme.

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

Tipografía ha enlace-kuéra

Bootstrap omohenda jehechaukaha global, tipografía ha enlace estilo básico. Específicamente, ñande:

  • Ojepe’a marginhete ári
  • 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

Ko'ã estilo ikatu ojejuhu andamio ryepýpe.less .

Reset vía Normalizar

Bootstrap 2 rupive, pe bloque reset tuja ojeity Normalize.css favor-pe , peteĩ tembiapo Nicolas Gallagher ojapova’ekue avei omombaretéva HTML5 Boilerplate . Jaipuru aja heta Normalize ñande reset.less ryepýpe , jaipe’a peteĩ elemento específicamente Bootstrap-pe g̃uarã.

Sistema de rejilla por defecto rehegua

Rejilla en vivo techapyrã

Pe sistema cuadrícula Bootstrap por defecto oipuru 12 vore , ojapóva peteĩ mbaꞌeryru 940px ipypukúvape g̃uarã oñembohapéva mbaꞌeporã ombohováiva . Oñemoĩvo CSS vore ombohováiva, pe cuadrícula ojeadapta haꞌe hag̃ua 724px ha 1170px ipypuku odependévo nde jehechaukaha rehe. Umi jehechaukaha 767px guýpe, umi voregui oiko fluido ha oñemboguapy verticalmente.

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
2. 2.1
3 rehegua
4 rehegua
4 rehegua
5 rehegua
9 rehegua

HTML cuadrícula básica rehegua

Peteĩ mokõi vore ñemohenda isãsóvape g̃uarã, ejapo peteĩ .rowha emoĩve mboýpa oĩ .span*vore. Kóva haꞌe rupi peteĩ cuadrícula 12 vore rehegua, peteĩteĩva .span*oñemosarambi peteĩ papapy umi 12 vore rehegua, ha akóinte oñembojoapyvaꞌerã 12 peve peteĩteĩva vore rehe (térã mboy vore oĩva túvape).

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

Oñeme évo ko techapyrá, jaguereko .span4ha .span8, jajapóvo 12 columna total ha petet fila completa rehegua.

Umi columna de desplazamiento rehegua

Emoinge umi columna ijasu gotyo eipurúvo umi .offset*clase. Káda clase ombohetave peteĩ columna margen izquierda peteĩ columna entera rehe. Techapyrã, .offset4oñemomýi .span4irundy vore ári.

4 rehegua
3 desplazamiento rehegua 2.1
3 desplazamiento rehegua 1.1
3 desplazamiento rehegua 2.1
6 desplazamiento rehegua 3.1 
  1. <div clase = "fila" > rehegua 
  2.   <div clase = "span4" > ... </div> rehegua 
  3.   <div clase = "span3 desplazamiento2" > ... </div> rehegua 
  4. </div> rehegua

Umi columna de anidación rehegua

Oñemohenda hag̃ua ne mba’ekuaarã cuadrícula por defecto reheve, emoĩ peteĩ vore pyahu .rowha ñemohenda .span*peteĩ vore oĩmava ryepýpe .span*. Umi vore oñembohysýiva oguerekovaꞌerã peteĩ vore aty oñembojoapýva mboy vorepa oguereko ituvakuéra.

Tembiecharã

Ko’ápe oñemoĩ mokõi .span4vore oñembohysýiva peteĩ .span8.

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

Sistema de rejilla fluida rehegua

Rejilla de líquido en vivo techapyrã

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

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

Rejilla de fluido básico HTML rehegua

Ejapo oimeraẽva vore "fluido " emoambuévo .row. .row-fluidUmi clase columna rehegua opyta peteĩchaite, upévare ndahasýi ojere hagua umi rejilla fija ha fluida apytépe.

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

Compensación de líquido rehegua

Ombaꞌapo peteĩchaite sistema cuadrícula fija desplazamiento .offset*-icha: emoĩve oimeraẽva vore rehe oñemboheko hag̃ua upe heta vore rupive.

4 rehegua
4 desplazamiento rehegua 4.1
3 desplazamiento rehegua 3.1
3 desplazamiento rehegua 3.1
6 desplazamiento rehegua 6.1 
  1. <div clase = "fila-fluido" > 
  2.   <div clase = "span4" > ... </div> rehegua 
  3.   <div clase = "span4 desplazamiento2" > ... </div> rehegua 
  4. </div> rehegua

Nido de líquido rehegua

Pe anidación umi rejilla fluida reheve iñambue’imi: mboy columna anidado ndojoavýiva’erã pe túva número de columna ndive. Upéva rangue, peteĩteĩva nivel columna anidado rehegua oñembopyahu peteĩteĩva fila oipyhýgui 100% columna 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

Umi diseño rehegua

Disposición fija rehegua

<div class="container">Omeꞌe peteĩ ñemohenda jepivegua fijo-ancho (ha opcionalmente ombohováiva) oñeikotevẽva añoite reheve .

  1. <tete> rehegua
  2.   <div clase = "mba'yru" > 
  3.     ...
  4.   </div> rehegua
  5. </body> rehegua

Disposición de líquido rehegua

Ejapo peteĩ página fluida, mokõi columna rehegua orekóva <div class="container-fluid">—tuicha mba’e 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

Ombohapévo umi mba’ekuaarã ombohováiva

Emboguejy CSS ombohováiva nde proyecto-pe emoĩvo meta etiqueta hekopete ha estilo hoja adicional <head>nde kuatia ryepýpe. Emohenda ramo Bootstrap página Personalizar-gui, tekotevẽ remoĩ meta etiqueta añoite.

  1. <meta réra = "jehechaukaha" contenido = "ancho=tembipuru-ipekue, escala-ñepyrũ=1.0" >  
  2. <link href = "mba’ekuaarã/css/bootstrap-responsive.css" rel = "hoja de estilo" >

¡Akã yvate! Bootstrap ndoikéiva mba’ekuaarã ombohováiva por defecto ko’áĝaite ndaha’éigui opa mba’e oikotevẽva ombohovái. Ñamokyre’ỹ rangue umi moheñóiharakuérape oipe’a hag̃ua ko mba’ekuaarã, rofigura iporãveha emboguata hag̃ua tekotevẽháicha.

Bootstrap ombohováiva rehegua

Umi tembipuru ombohováiva

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ã

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
Teléfonokuéra 480px ha iguýpe Umi columna fluida, ndorekóiva ancho fijo
Teléfono ha tableta-kuérape 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 
  1. /* Paisaje teléfonos ha oguejy */
  2. @media ( máx - ancho : 480px ) { ... } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.     
  3.  
  4. /* Teléfono paisaje a tableta retrato rehegua */
  5. @media ( máximo - ancho : 767px ) { ... } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.     
  6.  
  7. /* Tableta retrato paisaje ha escritorio-pe */
  8. @media ( min - ancho : 768px ) ha ( max - ancho : 979px ) { ... }.        
  9.  
  10. /* Escritorio tuicháva */
  11. @media ( min - ancho : 1200px ) { ... } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.

Umi clase de utilidad ombohováiva

Ojejapo pyaꞌeve hag̃ua móvil-pe g̃uarã, eipuru koꞌã clase utilidad rehegua ehechauka ha emokañy hag̃ua contenido dispositivo rupive. Iguýpe oĩ peteĩ cuadro umi clase ojeguerekóva ha efecto orekóva peteĩ diseño consulta medio rehegua oñemeꞌevaꞌekue rehe (oñemoĩva etiqueta dispositivo rupive). Ikatu ojejuhu ko’ápe responsive.less.

Mbo'ehakoty Teléfonokuéra767px ha iguýpe Tabletas rehegua979px guive 768px peve Escritorio-kuéra reheguaUpevakuére
.visible-phone Ojehecha
.visible-tablet Ojehecha
.visible-desktop Ojehecha
.hidden-phone Ojehecha Ojehecha
.hidden-tablet Ojehecha Ojehecha
.hidden-desktop Ojehecha Ojehecha

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.

Káso de prueba de servicios públicos ombohováiva

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

Ojehecha ko...

Umi marca verde ohechauka clase ojehechaha nde jehechaukaha ko’áĝaguápe.

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

Oñomiva'ekue...

Ko’ápe, umi marca verde ohechauka clase oñeñomiha nde jehechaukaha ko’áĝaguápe.

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