Tembiasakue

Twitter ára iñepyrũme, umi ingeniero oipuru haimete oimeraẽ biblioteca oikuaáva ombohovái hag̃ua umi mba’e ojejeruréva front-end-pe. Bootstrap oñepyrũ ombohovái ramo umi desafío opresentáva ha desarrollo pya’e oñembopya’e Twitter peteĩha Hackweek aja.

Heta ingeniero Twitter-pegua pytyvõ ha ñe’ẽñemi rupive, Bootstrap tuicha okakuaa oike hag̃ua ndaha’éi estilo básico añónte, ha katu umi patrón diseño front-end elegante ha duraderovéva.

Emoñe’ẽve dev.twitter.com-pe ›

Navegador pytyvõ

Bootstrap oñeha’ã ha oñepytyvõ umi kundahára ko’ag̃agua tuichavévape Chrome, Safari, Internet Explorer ha Firefox-icha.

• Safari ipyahuvéva
• Google Chrome ipyahuvéva
• Firefox 4+ rehegua
• Internet Explorer 7+ rehegua

Mba'épa oike ipype

Bootstrap oúva hekopete CSS oñembohekopyréva, oñemboheko’ỹva ha techapyrã plantilla reheve.

• Opaite vore .less ypykue
• Oñembyatypaite ha oñemboguejýva CSS
• Oñemohu’ã kuatiañe’ẽ guía estilo rehegua
• Plantilla de página techapyrã (hetave oúta pya'e)

Cuadrícula por defecto rehegua

Pe sistema cuadrícula por defecto oñemeꞌeva Bootstrap pehẽngue ramo haꞌehína peteĩ cuadrícula 940px ipypuku 16 columna rehegua. Ha'e peteî sabor popular sistema de rejilla 960, pero ndorekóiva margen/acolchado adicional lado izquierdo ha derecho-pe.

Techapyrã marcado cuadrícula 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 16 columna fundamental rodefinivaꞌekue ore sistema cuadrícula rehegua. Ehecha umi techapyrã oĩva ko’ápe reikuaave hag̃ua mba’eichagua ñemoambue.

<div clase="fila"> rehegua
  <div clase = "span6 vorekuéra" > 
    ...
  </div> rehegua
  <div clase = "span10 vorekuéra" > 
    ...
  </div> rehegua
</div> rehegua

Disposición fija rehegua

Peteĩ mba’e’oka ñemohenda 940px ipypuku, oñembohapéva tenondegua haimete oimeraẽva tenda térã página-pe g̃uarã.

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

Disposición de líquido rehegua

Peteĩ estructura página líquido térã líquido flexible orekóva min- ha max-ancho ha peteĩ barra lateral izquierda gotyo. Tuicha mba’e umi app-pe g̃uarã.

<tete> rehegua
  <div clase = "mba'yru-líquido" > 
    <div clase = "barra lateral" > rehegua 
      ...
    </div> rehegua
    <div clase = "contenido" > rehegua 
      ...
    </div> rehegua
  </div> rehegua
</body> rehegua

Ñe’ẽryru ha kópia

Peteĩ jerarquía tipográfica estándar emohenda hag̃ua nde página web.

h1 rehegua. Ñe’ẽryru 1.1

h2 rehegua. Ñe’ẽryru 2.1

h3 rehegua. Ñe’ẽryru 3.1

h4 rehegua. Ñe’ẽryru 4.1

h5 rehegua. Ñe’ẽryru 5 rehegua

h6 rehegua. Ñe’ẽryru 6.1

Techapyrã párrafo

Nullam quis risus eget urna mollis ornare vel eu leo ​​rehegua. Cum sociis natoque penatibus ha magnis umi montes parturiente, nascetur ridiculus mus. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

Tembiecharã rubro Oguereko subpartida...

Misc rehegua. umi elemento rehegua

Oipurúvo énfasis, dirección, & abreviatura

<strong> <em> <address> <abbr>

Araka’épa ojepuruva’erã

Umi etiqueta de énfasis ( <strong>ha <em>) ojepuruvaʼerã ohechauka hag̃ua iñimportanteveha térã oñembotuichaveha peteĩ palávra térã fráse oñembojojávo ikopia ijerére. Eipuru <strong>iñimportanteha ha rembotuicha <em>hag̃ua estrés .

Oñemombaʼeguasu peteĩ párrafope

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum masa justo oguapy amet risus. Maecenas faucibus mollis interdum rehegua. Nulla vitae elit libero, peteĩ pharetra augue.

Ñe’ẽñemi: Oĩ porã gueteri ojepuru <b>ha <i>etiqueta HTML5-pe, ha katu ndoúivéima estilo inherente reheve. <b>oje’ese ojehechauka haguã ñe’ẽ térã ñe’ẽjoaju oñembohasa’ỹre importancia adicional, ha katu <i>ha’e hetave ñe’ẽme g̃uarã, término técnico, hamba’e.

Dirección-kuéra rehegua

Pe <address>elemento ojepuru marandu oñemboja hag̃ua ijypykuéra hiꞌaguĩvévape g̃uarã, térã tembiapo retepy tuichakue. Péicha ojehecha:

Ñembohysýi: Káda línea <address>peteĩvape oñemohuꞌavaꞌerã peteĩ línea-break ( <br />) reheve térã oñembojere peteĩ etiqueta nivel de bloque-pe (techapyrã, <p>) oñemohenda porã hag̃ua contenido.

Ñe’ẽ mbykymi

Ñe’ẽ mbyky ha ñe’ẽjoajurãme g̃uarã, eipuru <abbr>etiqueta ( <acronym>ndojepuruvéima HTML5 -pe ). Emoĩ pe formulario taquigrafía etiqueta ryepýpe ha emohenda peteĩ título téra completo-pe g̃uarã.

Umi cita bloque rehegua

<blockquote> <p> <small>

Mba’éichapa ikatu ñacita

Oñemoĩ hag̃ua peteĩ blockquote, embojere <blockquote>ha <p>emoĩ <small>etiqueta. Eipuru <small>elemento ecita hag̃ua nde fuente ha rehupytýta peteĩ em guión —henondépe.

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante venenatis dapibus posuere velit aliquet rehegua.

Dr. Julio Hibbert rehegua

Noñeordenáiva<ul>

• Lorem ipsum dolor oguapy amet
• Consectetur adipiscing rehegua elit
• Entero molestie lorem en masa rehegua
• Facilisis en aliquet nisl de pretio rehegua
• Nulla volutpat aliquam rehegua
  • Fasello iaculis neque rehegua
  • Purus sodales ultricies rehegua
  • Vestibulo laoreet porttitor sem rehegua
  • Ac tristique libero volutpat rehegua
• Faucibus porta lacus fringilla vel rehegua
• Aenegua oguapy amet erat nunc
• Eget porttitor lorem rehegua

No estilo rehegua<ul.unstyled>

• Lorem ipsum dolor oguapy amet
• Consectetur adipiscing rehegua elit
• Entero molestie lorem en masa rehegua
• Facilisis en aliquet nisl de pretio rehegua
• Nulla volutpat aliquam rehegua
  • Fasello iaculis neque rehegua
  • Purus sodales ultricies rehegua
  • Vestibulo laoreet porttitor sem rehegua
  • Ac tristique libero volutpat rehegua
• Faucibus porta lacus fringilla vel rehegua
• Aenegua oguapy amet erat nunc
• Eget porttitor lorem rehegua

Oñemanda<ol>

1. Lorem ipsum dolor oguapy amet
2. Consectetur adipiscing rehegua elit
3. Entero molestie lorem en masa rehegua
4. Facilisis en aliquet nisl de pretio rehegua
5. Nulla volutpat aliquam rehegua
6. Faucibus porta lacus fringilla vel rehegua
7. Aenegua oguapy amet erat nunc
8. Eget porttitor lorem rehegua

Techaukahadl

Umi lista descripción rehegua

Peteĩ lista descripción rehegua iporãiterei ojedefini hag̃ua umi término.

Euismod rehegua

Vestibulo id ligula porta felis euismod semper eget lacinia odio sem nec elit rehegua.

Donec id elit ndaha'éiva mi porta gravida eget metus-pe.

Malesuada porta rehegua

Etiam porta sem malesuada magna mollis euismod rehegua.

Oñemopu’ãvo mesakuéra

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Umi mesa tuichaiterei mba’e —heta mba’épe ĝuarã. Umi cuadro tuicháva katu, oikotevẽ peteĩ mborayhu marcado rehegua michĩmi ideprovécho, escalable ha ojelee hag̃ua (nivel código-pe). Koʼápe oĩ unos kuánto konsého ñaipytyvõ hag̃ua.

Akóinte embojere ne vore iñakãrapuꞌa peteĩ <thead>jerarquía haꞌe hag̃ua <thead>> <tr>> <th>.

Ojogua umi vore iñakãrapu’ãvape, opaite ne kundaha retepy mba’ekuaarã oñembojeguava’erã peteĩ <tbody>upéicha ne jerarquía ha’e <tbody>> <tr>> <td>.

Techapyrã: Estilos de tabla por defecto

Opaite cuadro ojeestilavaꞌerã ijeheguiete umi frontera esencial reheve añoite ikatu hag̃uáicha ojelee ha oñemantene estructura. Natekotevẽi oñembojoapy clase térã atributo extra.

<tabla clase="tabla-común"> rehegua clase = "mesa-común" >
  ...
</tabla> rehegua

Tembiecharã: Cebra-rayado

Ejepy’amongeta’imi nde mesakuéra ndive remoĩvo zebra-rayado —pemoĩnte pe .zebra-stripedclase.

Ñembohysýi: Zebra-striping haꞌehína peteĩ ñembotuichave ohóvo ndojeguerekóiva umi kundahára itujavévape g̃uarã IE8 ha iguýpeguáicha.

<table class="tabla-común cebra-rayado"> class = "mesa-común cebra-rayado" >
...
</tabla> rehegua

Techapyrã: Cebra-rayado w / TableSorter.js

Jaipyhývo techapyrã mboyvegua, ñamoporãve ñande tablakuéra mbaꞌeporã ñameꞌevo tembiaporã ñemohendarã jQuery ha Tablesorter plugin rupive. Emboguejy oimeraẽva vore iñakãrapuꞌa emoambue hag̃ua ñemohenda.

<script src="js/jquery/jquery.tablesorter.min.js"></script> rehegua src = "js/jporandu/jquery.tablesorter.min.js" ></script> rehegua
<guio > rehegua 
  $ ( tembiaporã () { . 
    $ ( "tabla#ordenTablaTechapyrã" ). tablesorter ({ lista de ordenación : [[ 1 , 0 ]] });  
  });
</script> rehegua
< clase de mesa = "mesa-común cebra-rayado" > 
  ...
</tabla> rehegua

Umi estilo por defecto rehegua

Opaite formulario-pe oñemeꞌe estilo por defecto opresenta hag̃ua peteĩ tape ojelee ha ojeescala hag̃ua. Oñemeꞌe estilo ojeike hag̃ua jehaipyre, lista jeporavorã, área de texto, radio botón ha casilla de verificación ha botón.

Umi formulario apilado rehegua

Emoĩve .form-stackedne formulario HTML-pe ha reguerekóta etiqueta ijyvyku’i ári ha’e rangue ijasu gotyo. Kóva ombaꞌapo porãiterei ne formulariokuéra mbyky ramo térã reguerekóramo mokõi columna insumo rehegua umi formulario ipohýivevape g̃uarã.

Umi botón rehegua

Convención ramo, ojepuru umi botón tembiaporãme g̃uarã ojepuru aja umi enlace mbaꞌekuérape g̃uarã. Techapyrã, "Emboguejy" ikatu ha'e peteĩ mboajepyréva ha "mba'apo nda'aréi ojejapóva" ikatu ha'e peteĩ joajuha.

Opaite botón por defecto peteĩ estilo gris tesape rehegua, ha katu .primaryojeguereko peteĩ clase hovy. Avei, pe rodamiento umi estilo propio ha’e fácil peasy.

Umi botón techapyrã

Umi estilo botón rehegua ikatu ojeporu oimeraẽ mbaꞌe rehe pe .btnojejapóva reheve. Jepiveguáicha eipuruséta koꞌãva <a>, <button>, ha eiporavo <input>elemento-kuérape añoite. Péicha ojehecha:

Umi tamaño alternado rehegua

¿Reipotaiterei umi botón tuichavéva térã michĩvéva? ¡Eguereko upépe!

Estado discapacitado rehegua

Umi botón noĩriva activo térã oñemboykéva app peteĩ térã ambue mba’ére, eipuru estado desactivado. Upéva ha’e .disabledenlace-kuérape g̃uarã ha :disabledumi <button>elemento-pe g̃uarã.

Enlaces rehegua

Umi botón rehegua

Mba’épa ha’e

Ore barra yvategua ha’e peteĩ barra fija oguerekóva peteĩ página web logotipo térã réra, jeguata tenondegua ha formulario jeheka rehegua.

Ikatu ojepersonaliza

Opaite elemento oĩva hyepýpe, ha opaite barra yvategua avei, haꞌehína opcional. Ikatu eiporavo emoĩ hag̃ua peteĩ logotipo/héra, nav, jeheka ha peteĩ nav mokõiha —térã oimeraẽva upéva ñembojoaju.

Umi dropdown oike

Pe jeguata tenondegua pehẽngue ramo, romoĩkuri mba’ekuaarã ndéve g̃uarã emoĩ hag̃ua mba’e’oka nde jeguatarãme. Ehecháke nav secundario yvate (alineado derecho) rehecha hag̃ua mbaꞌeichaitépa ojejapo.

Fichas ha pastillas

Ojapo navegación secundaria simple peteĩ <ul>. Embohasa umi ficha térã pastilla apytépe emoĩvo pe clase ohóva hese.

Tuicha mba’e umi subsección contenido-pe g̃uarã ore cuenta ñemboheko página-icha ha puruhára línea de tiempo oñembohasávo umi página contenido ojoguáva apytépe. Ojeguereko estilo tabbed térã píldora-pe.

• Óga
• Yke
• Marandukuéra
• Ñembohekorã
• Jekuaaverã

<ul clase="fichakuéra"> clase = "pestañas" >
  <li clase = "activo" ><a href = "#" > Óga </a></li>  
  <li><a href = "#" > Ñe’ẽmondo </a></li> 
  <li><a href = "#" > Marandukuéra </a></li> 
  <li><a href = "#" > Ñembohekorã </a></li> 
  <li><a href = "#" > Ñe’ẽmondo </a></li> 
</ul> rehegua

• Óga
• Yke
• Marandukuéra
• Ñembohekorã
• Jekuaaverã

<ul clase="píldoras"> rehegua clase = "pastillas" >
  <li clase = "activo" ><a href = "#" > Óga </a></li>  
  <li><a href = "#" > Ñe’ẽmondo </a></li> 
  <li><a href = "#" > Marandukuéra </a></li> 
  <li><a href = "#" > Ñembohekorã </a></li> 
  <li><a href = "#" > Ñe’ẽmondo </a></li> 
</ul> rehegua

Paginación rehegua

Paginación ultra simplista ha mínimamente estilo oñeinspiráva Rdio-pe. Pe bloque tuicháva hasy ojeheja hag̃ua, ndahasýi ojeescala hag̃ua ha omeꞌe área clic tuicháva.

<div clase="paginación"> rehegua clase = "paginación" >
  <ul> rehegua
    <li clase = "oñemboyke mboyve" ><a href = "#" > ← Ymaveguaréva </a></li>  
    <li mbo’esyry = "mba’apo” ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> Ñe’ẽpoty ha ñe’ẽpoty ñemohenda 
    < li><a href = "#" > 3 Ñe’ẽpoty ha ñe’ẽpoty ryru 
    < li><a href = "#" > 4 ​​Ñe’ẽpoty ha ñe’ẽpoty ñemohenda 
    <li><a href = "#" > 5 </a></li> rehegua 
    <li clase = "oúva" ><a href = "#" > Oúva → </a></li> rehegua  
  </ul> rehegua
</div> rehegua

Alerta básica rehegua

Marandu peteĩ línea rehegua ojehechauka hag̃ua mbaꞌeichaitépa osẽ vai, ikatuha osẽ térã osẽ porã peteĩ tembiapo. Particularmente útil umi formulario-pe guarã.

Ojoko marandukuéra

Umi marandu oikotevẽvape g̃uarã oñemyesakã’imi, jaguereko alertas estilo párrafo rehegua. Ko’ãva iporãiterei oñembopupu hag̃ua marandu jejavy ipukuvéva rehegua, oñemomarandu hag̃ua peteĩ puruhárape peteĩ tembiaporã pendiente rehegua, térã oñepresenta hag̃uánte marandu oñembotuichave hag̃ua página-pe.

Modal-kuéra rehegua

Umi modal —ñe’ẽmondo térã tesape’a— iporãiterei umi tembiaporã contextual-pe g̃uarã umi situación iñimportantehápe oñeñangareko contexto fondo rehegua.

Tembipururã Ñe’ẽñemi

Twipsies ha’e súper útil oipytyvõ haĝua peteĩ usuario confundido ha oapunta haĝua chupekuéra dirección correcta-pe.

Popovers rehegua

Eipuru popovers eme’ẽ hag̃ua marandu subtextual peteĩ página-pe oityvyro’ỹre diseño.

Bootstrap oñemopuꞌa Preboot ndive , peteĩ paquete código abierto mixin ha variable rehegua ojeporútava Less ndive , peteĩ CSS preprocesador pyaꞌeve ha ndahasýi hag̃ua web ñemoheñói.

Ehecháke mba’éichapa roipuru Preboot Bootstrap-pe ha mba’éichapa ikatu reipuru reiporavóramo remongu’e hag̃ua Less nde proyecto oúvape.

Mba’éichapa ojeporu

Eipuru ko jeporavopyre eipurupaite hag̃ua Bootstrap mba’ekuaarã Less, mixins ha nesting CSS-pe javascript rupive ne kundahárape.

<link rel="hoja de estilo/menos" href="menos/bootstrap.less" media="opavave" /> rel = "hoja de estilo/menos" href = "mbovyvéva/bootstrap.menos" media = "opavave" />   
<script src = "js/menos-1.0.41.min.js" ></script> rehegua 

¿Ndereñandúipa pe solución .js rehegua? Eñeha’ã Less Mac purupyrã térã eipuru Node.js embojoaju hag̃ua emosarambi jave ne código.

Mba'épa oike ipype

Ko’ápe oĩ umi mba’e ojehecharamovéva umi mba’e oikeva’ekue Twitter Bootstrap-pe Bootstrap ryepýpe. Ejesareko Bootstrap página web térã Github proyecto página-pe emboguejy ha eikuaave hag̃ua.

Umi mba’ekuaarã sa’y rehegua

Umi variable oĩva Sa’ive-pe iporãiterei oñeñangareko ha oñembopyahu hag̃ua ne CSS akãrasy’ỹre. Emoambueséramo peteĩ sa’y vore térã peteĩ mba’ekuaarã ojeporúva jepi, embopyahu peteĩ hendápe ha reñemohenda.

// Enlaces rehegua
@enlaceColor : #8b59c2 rehegua;         
@linkColorHover :     iñypytũ ( @linkColor , 10 ); 
// Grises rehegua
@morotĩ : #000;             
@gris Pytũmby :           ohesape ( @morotĩ , 25 %); 
@gris :               ohesape ( @morotĩ , 50 %); 
@grisTesape :          ohesape ( @morotĩ , 70 %); 
@grisLighter :        ombohesapéva ( @morotĩ , 90 %); 
@morotĩ : #fff ;             
// Colores de Acento rehegua
@hovy : #08b5fb rehegua;              
@verde : #46a546 rehegua;             
@rojo : # 9d261d rehegua;               
@hovy : # ffc40d rehegua;            
@ naranja : # f89406 rehegua;            
@rosa : # c3325f rehegua;              
@ púrpura : # 7a43b6;            
// Línea de base rehegua
@ línea base : 20px ;          

Okomentávo

Less omeꞌe avei ambue estilo ñe’ẽñemi rehegua CSS /* ... */ñe’ẽjoaju jepivegua ári.

// Kóva ha'e peteĩ comentario
/* Kóva ha'e avei peteĩ comentario */

Oñembojehe’a pe wazoo

Mixins haꞌehína básicamente incluido térã parcial CSS-pe g̃uarã, ohejáva ndéve embojoaju peteĩ bloque código peteĩme. Ha’ekuéra iporãiterei umi mba’ekuaarã ñemuha ñepyrũrãme g̃uarã ha’eháicha box-shadow, gradiente kurusu navegador rehegua, pila de fuente ha hetave mba’e. Iguýpe oĩ peteĩ techapyrã umi mixin oikeva’ekue Bootstrap ndive.

Umi pila de fuente rehegua

#fonte { Ñe'ẽ guarani .
  . taquigrafía ( @peso : normal , @tamaño : 14px , @líneaAltura : 20px ) {     
    font - tuichakue : @size ; 
    font - ipohýi : @pohýi ; 
    línea - yvate : @lineHeight ; 
  } rehegua .
  . sans - serif ( @pohýi : normal , @tamaño : 14px , @líneaAltura : 20px ) {     
    fuente - familia : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - tuichakue : @size ; 
    font - ipohýi : @pohýi ; 
    línea - yvate : @lineHeight ; 
  } rehegua .
  . serif ( @peso : normal , @tamaño : 14px , @líneaAltura : 20px ) {     
    font - familia : "Georgia" , Tiempos Nueva Romano , Tiempos , sans - serif ;     
    font - tuichakue : @size ; 
    font - ipohýi : @pohýi ; 
    línea - yvate : @lineHeight ; 
  } rehegua .
  . monospace ( @pohýi : normal , @ tamaño : 12px , @líneaAltura : 20px ) {     
    font - familia : "Mónaco" , Mensajero Ipyahúva , monoespacio ;   
    font - tuichakue : @size ; 
    font - ipohýi : @pohýi ; 
    línea - yvate : @lineHeight ; 
  } rehegua .
} rehegua .

Gradientes rehegua

#gradiente rehegua { .
  . horizontal ( @Color de inicio : #555, @Color de fin: #333) { 
    fondo - color : @endColor ; 
    fondo - repetición : repetición - x ;
    fondo - imagen : - khtml - gradiente ( lineal , yvate gotyo ijasu gotyo , yvate gotyo ijasu gotyo , ( @startColor ) guive ( @endColor ) peve ); // Ñe’ẽñemi   
    fondo - imagen : -moz - lineal - gradiente ( izquierda , @color de ñepyrũ , @Color paha ); // FF 3.6+ rehegua    
    fondo - ta'anga : - ms - lineal - gradiente ( izquierda , @ñepyrũColor , @endColor ); // IE10 rehegua    
    fondo - imagen : - webkit - gradiente ( lineal , yvate gotyo ijasu gotyo , yvate gotyo ijakatúa gotyo , sa'y - jejopy ( 0 %, @startColor ), sa'y - jejopy ( 100 %, @endColor )); // Safari 4+, Cromo 2+ rehegua    
    fondo - ta'anga : - webkit - lineal - gradiente ( izquierda , @ñepyrũColor , @endColor ); // Safari 5.1+, Cromo 10+ rehegua    
    fondo - ta'anga : - o - lineal - gradiente ( izquierda , @ñepyrũColor , @endColor ); // Ópera 11.10 rehegua    
    - ms - filtro : %( "progid:DXImageTransform.Microsoft.gradient(ÑepyrũhaSa'yr='%d', ÑepyrũhaColorstr='%d', ÑepyrũhaTipo=1)" , @ ÑepyrũhaColor , @OpahaColor ); // IE8+ rehegua  
    filtro : e (%( "progid:DXImageTransform.Microsoft.gradient(ñepyrũha sa'y='%d', sa'y paha='%d', Ñepyrũha sa'y=1)" , @ñepyrũha sa'y , @pyta sa'y )); // IE6 & IE7 rehegua 
    fondo - imagen : lineal - gradiente ( izquierda , @color de inicio , @Color paha ); // Le estándar rehegua   
  } rehegua .
  . vertical ( @Color de inicio : #555, @Color de fin: #333) { 
    fondo - color : @endColor ; 
    fondo - repetición : repetición - x ;
    fondo - imagen : - khtml - gradiente ( lineal , izquierda yvate , izquierda iguy , guive ( @startColor ), guive ( @endColor )); // Ñe’ẽñemi   
    fondo - imagen : - moz - lineal - gradiente ( @Ñepyrũ Sa'y , @Opa Sa'y ); // FF 3.6+ rehegua   
    fondo - imagen : - ms - lineal - gradiente ( @Color de inicio , @Color paha ); // IE10 rehegua   
    fondo - imagen : - webkit - gradiente ( lineal , izquierda yvate , izquierda yvy gotyo , color - parada ( 0 %, @startColor ), color - parada ( 100 %, @endColor )); // Safari 4+, Cromo 2+ rehegua    
    fondo - imagen : - webkit - lineal - gradiente ( @Ñepyrũ Sa'y , @Opa Sa'y ); // Safari 5.1+, Cromo 10+ rehegua   
    fondo - imagen : - o - lineal - gradiente ( @Color de inicio , @Color paha ); // Ópera 11.10 rehegua   
    - ms - filtro : %( "progid:DXImageTransform.Microsoft.gradient(ÑepyrũhaSa'yr='%d', ÑepyrũhaColorstr='%d', ÑepyrũhaTipo=0)" , @ ÑepyrũhaColor , @OpahaColor ); // IE8+ rehegua  
    filtro : e (%( "progid:DXImageTransform.Microsoft.gradient(ñepyrũha sa'y='%d', sa'y paha='%d', Ñepyrũha sa'y=0)" , @Ñepyrũha sa'y , @ sa'y paha )); // IE6 & IE7 rehegua 
    fondo - ta'anga : lineal - gradiente ( @ñepyrũha sa'y , @ paha sa'y ); // Pe estándar  
  } rehegua .
  . direccional ( @Color de inicio : #555, @Color de fin: #333, @deg: 45deg) { 
    ...
  } rehegua .
  . vertical - mbohapy - sa'y ( @Color de inicio : #00b3ee, @Color mbytépe: #7a43b6, @colorStop: 0.5, @Sa'y paha: #c3325f) { 
    ...
  } rehegua .
} rehegua .

Operaciones ha sistema de red rehegua

Eñemboja ha ejapo michĩmi matemática egenera hag̃ua umi mixin flexible ha ipoderósova pe oĩva iguýpeguáicha.

// Rejilla rehegua
@rejillaColumnas : 16 ;       
@rejillaColumna Ancho : 40px ;   
@rejillaGutterAncho : 20px ;   
// Sistema de Rejilla rehegua
. mba’yru { .
  ancho : @sitio Ancho ; 
  margen : 0 auto rehegua ;  
  . ñemyatyrõ hesakãva ();
} rehegua .
. columnas ( @columnSpan : 1 ) { Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.  
  ohechauka : línea ryepýpe ; 
  flotador : ijasu gotyo ;
  ancho : ( @rejillaColumnaAncho * @columnaSpan ) + ( @rejillaGutterAncho * ( @columnaSpan - 1 ));         
  margen - izquierda : @rejillaGutterAncho ; 
  &: peteĩha - mitã { .
    margen - izquierda : 0 ; 
  } rehegua .
} rehegua .
. desplazamiento ( @columnaOffset : 1 ) { .  
  margen - izquierda : ( @rejillaColumnaAncho * @columnaOffset ) + ( @rejillaGutterAncho * ( @columnaOffset - 1 )) ! iñimportánteva ;          
} rehegua .