Ñ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 ha Jonathan Neal 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.1
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 akatúa 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.

Nivel 1 vore 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 rehegua 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

Umi rejilla fluida oipuru anidación iñambuéva: peteĩteĩva nivel anidado columna rehegua omoĩvaꞌerã 12 columna peve. Kóva ojehu pe cuadrícula fluida oipurúgui porcentaje, ndahaꞌei píxel, oñemohenda hag̃ua umi ancho.

Líquido rehegua 12.1
Líquido rehegua 6.1
Líquido rehegua 6.1
Líquido rehegua 6.1
Líquido rehegua 6.1 
  1. <div clase = "fila-fluido" > 
  2.   <div clase = "span12" > rehegua 
  3.     Líquido rehegua 12.1
  4.     <div clase = "fila-fluido" > 
  5.       <div clase = "span6" > rehegua 
  6.         Líquido rehegua 6.1
  7.         <div clase = "fila-fluido" > 
  8.           <div clase = "span6" > Ñembohysýi 6 </div> 
  9.           <div clase = "span6" > Ñembohysýi 6 </div> 
  10.         </div> rehegua
  11.       </div> rehegua
  12.       <div clase = "span6" > Ñembohysýi 6 </div> 
  13.     </div> rehegua
  14.   </div> rehegua
  15. </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 contenido--> rehegua
  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=dispositivo-ancho, escala-ñepyrũha=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 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
Tuicha jehechauka 1200px ha yvateve 70px rehegua 30px rehegua
Upevakuére 980px ha yvate gotyo 60px rehegua 20px rehegua
Tablas de retrato rehegua 768px ha yvateve 42px rehegua 20px rehegua
Teléfono ha tableta-kuérape 767px ha iguýpe Umi columna fluida, ndorekóiva ancho fijo
Teléfonokuéra rehegua 480px ha iguýpe Umi columna fluida, ndorekóiva ancho fijo 
  1. /* Escritorio tuicháva */
  2. @media ( min - ancho : 1200px ) { ... } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.     
  3.  
  4. /* Tableta retrato paisaje ha escritorio-pe */
  5. @media ( min - ancho : 768px ) ha ( max - ancho : 979px ) { ... }.        
  6.  
  7. /* Teléfono paisaje a tableta retrato rehegua */
  8. @media ( máximo - ancho : 767px ) { ... } Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.     
  9.  
  10. /* Paisaje teléfonos ha oguejy */
  11. @media (max-width: 480px) { ... }

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

Responsive utilities test case

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