Ñawpaqmanta churasqa rejilla

Bootstrap kaqpa huknin kaqnin hina qusqa ñawpaqmanta ruwasqa llika llamkana 940px ancho 16 columnayuq llika kachkan. Chayqa huk sabor riqsisqa 960 rejilla sistemamanta, ichaqa mana chay yapasqa margen/acolchado paña chaymanta paña ladokunapi.

Ejemplo de marca de rejilla

Kaypi rikuchisqa hina, huk sapsi churay iskay "columnakunawan" ruwakunman, sapa huk yupayta 16 fundacional columnakunamanta sut'inchasqayku sistema rejillaykumanta. Aswan hukniray kananpaq uraypi kaq ejemplokunata qhaway.

<div clase="fila">
  <div clase = "span6 columnakuna" > 
    ...
  </div> nisqa
  <div clase = "span10 columnakuna" > 
    ...
  </div> nisqa
</div> nisqa

Diseño fijo

Huk sapsi 940px ancho, chawpichasqa waqaychana churay yaqa mayqin sitiopaqpas utaq p'anqapaqpas.

<cuerpo> nisqa
  <div clase = "contenedor" > 
    ...
  </div> nisqa
</cuerpo> nisqa

Diseño de fluido

Huk flexible fluido utaq liquido p'anqa estructura min- chaymanta max-anchos kaqwan chaymanta huk lluq'i lado barra kaqwan. Allinmi apps nisqapaq.

<cuerpo> nisqa
  <div clase = "contenedor-fluido" > 
    <div clase = "barra lado" > 
      ...
    </div> nisqa
    <div clase = "contenido" > 
      ...
    </div> nisqa
  </div> nisqa
</cuerpo> nisqa

Titulos y copia

Huk jerarquía tipográfica estándar web kitiykikuna ruwanapaq.

h1. Uma 1.1

h2. Umalliq 2

h3. Uma 3.1

h4. Uma 4.1

h5. Umalliq 5

h6. Uma 6

Ejemplo parrafo

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus y magnis disparuriente montes, nascetur ridiculus mus nisqa. Nullam id dolor id nibh ultricies antawakuna ut id elit.

Ejemplo umalliq Huch'uy umalliqniyuqmi...

Chaymantapas yapawaqmi <strong>hinaspa niqwan subtitulokunata<em>

Misc. elementokuna

Enfasis, direcciones, & abreviaturas nisqakunata llamk’achispa

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

Hayk’aqtaq apaykachana

Etiquetas de énfasis ( <strong>y <em>) nisqawanmi huk simita otaq huk frasetapas muyuriqninpi copiatapas rikuylla t’aqana. Uso <strong>para atención vieja llana y <em>para atención slick y títulos.

Huk parrafopi enfasis

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum masa justo tiyay amet risus. Maecenas faucibus mollis nisqap chawpinpi kaq. Nulla vitae elit libero, huk pharetra augue.

Direcciones

Chay addresselementoqa —adivinarqanki!— direccionkunapaqmi. Kaypi imayna rikchakun:

795
Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 llankaymanta

Qhaway: Hukpi sapa chiru addresshuk chiru-pakiwan ( ) tukunan tiyan <br />, chiqa kawsaypi ñawirisqamanhina mana ima estilokuna churasqa kasqanmanhina allinta estructurananpaq.

Pisichasqa simikuna

Pisichasqakunapaq, siglaspaqpas, abbretiquetata llamk'achiy ( HTML5acronym nisqapi manaña llamk'achisqachu ). Etiqueta ukhupi taquigrafía nisqa formulariota churay hinaspa hunt’asqa sutipaq huk titulota churay.

Bloqueo nisqa

<blockquote> <p> <cite>

Aseguraychik envolver tu blockquotealrededor paragraphy citeetiquetas. Huk pukyuta citaspaqa chay citeelemento nisqawanmi yanapachikuna. CSS kikinmanta huk sutita em chiruwan (—) ñawpaqchanqa.

Lorem ipsum dolor tiyay amet, consectetur adipisicing elit, sed ruway eiusmod incididunt tempor ut llamk'ay chaymanta dolore magna aliqua...

Julio Hibbert sutiyuq doctormi

Mana kamachisqa<ul>

• Jeremy Bixby sutiyuq runam
• Roberto Dezure sutiyuq runam
• Josh Washington sutiyuq runam
• Antón Capresi sutiyuq runam
• Mi Compañeros de Equipo
  • George Castanza sutiyuq runam
  • Jerry Seinfeld sutiyuq runam
  • Cosmo Kramer nisqa
  • Elaine Bennis sutiyuq warmim
  • Musuq runa
• Juan Jacob
• Pablo Pierce sutiyuq runa
• Kevin Garnett sutiyuq runam

Mana estiloyuq<ul.unstyled>

• Jeremy Bixby sutiyuq runam
• Roberto Dezure sutiyuq runam
• Josh Washington sutiyuq runam
• Antón Capresi sutiyuq runam
• Mi Compañeros de Equipo
  • George Castanza sutiyuq runam
  • Jerry Seinfeld sutiyuq runam
  • Cosmo Kramer nisqa
  • Elaine Bennis sutiyuq warmim
  • Musuq runa
• Juan Jacob
• Pablo Pierce sutiyuq runa
• Kevin Garnett sutiyuq runam

Kamachisqa<ol>

1. Jeremy Bixby sutiyuq runam
2. Roberto Dezure sutiyuq runam
3. Josh Washington sutiyuq runam
4. Antón Capresi sutiyuq runam
5. Mi Compañeros de Equipo
   1. George Castanza sutiyuq runam
   2. Jerry Seinfeld sutiyuq runam
   3. Cosmo Kramer nisqa
   4. Elaine Bennis sutiyuq warmim
   5. Musuq runa
6. Juan Jacob
7. Pablo Pierce sutiyuq runa
8. Kevin Garnett sutiyuq runam

Willaydl

Listas de descripción

Huk sut'inchay listaqa allinmi términokunata sut'inchanapaq.

Euismod nisqa

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

Donec id elit mana mi porta gravida nisqapi eget metus nisqapi.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod nisqamanta.

Mesas de construcción

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

Mesakunaqa ancha allinmi —achka imakunapaqpas. Hatun tablakuna, ichaqa, huk chhika marcador munakuyta necesitanku allin, escalable, chaymanta ñawirinapaq (codigo nivelpi). Kaypi huk iskay kimsa yuyaychaykunata yanapanapaq.

theadSapa kuti sapaq umalliqniykikunata huk hinapi p'istuy , jerarquía thead> tr> thkananpaq.

Sapaq umalliqkunaman rikch'akuq, llapa tablaykip kurku kaqnin hukwan p'istuykusqa kanan tiyan tbodychaymanta jerarquíayki tbody> tr> td.

Ejemplo: Ñawpaqmanta churasqa tabla estilokuna

Llapan tablakuna kikinmanta estilochasqa kanqa fronteras esenciales kaqllawan ñawirinapaq chaymanta estructurata waqaychaypaq. Mana necesariochu yapanapaq clasekunata utaq atributokunata.

# .	Ñawpa suti	Taytamama suti	Simi
1.	Wakin	Huk	Ingles Simi
2.	Joe nisqa	Suqta paqu	Ingles Simi
3.	Stu	Dent	Código

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

Ejemplo: Cebra-rayasqa

Huk chhika fancy mesaykikunawan zebra-rayado yapaspa —claseta yapaylla .zebra-striped.

# .	Ñawpa suti	Taytamama suti	Simi
1.	Wakin	Huk	Ingles Simi
2.	Joe nisqa	Suqta paqu	Ingles Simi
3.	Stu	Dent	Código

<table class="común-tabla zebra-rayado"> class = "común-tabla cebra-rayado" >
...
</tabla> nisqa

Ejemplo: Zebra-rayado w/ TableSorter.js

Ñawpaq ejemplota hapispa, tablakunaykupa allin kayninta allinchayku jQuery kaqninta chaymanta Tablesorter plugin kaqnintakama t'aqay ruwayta quspa. Mayqin sapaqchasqap umalliqninpipas ñit'iy, t'aqayta tikranaykipaq.

# .	Ñawpa suti	Taytamama suti	Simi
1.	Qampa	Huk	Ingles Simi
2.	Joe nisqa	Suqta paqu	Ingles Simi
3.	Stu	Dent	Código

<script type="qillqa/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "qillqa/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script laya = "qillqa/javascript" > 
  $ ( qillqa ). listo ( ruway () { . 
    $ ( "tabla#sortTablaEjemplo" ). tablesorter ( { t'aqayLista : [[ 1 , 0 ]]} );   
  });
</script> nisqa
<tabla clase = "común-tabla cebra-rayado" > 
  ...
</tabla> nisqa

Ñawpaqmanta churasqa estilokuna

Llapan formulariokunaman ñawpaqmanta ruwasqa estilokuna qusqa kanku ñawirinapaq chaymanta escalable kaqpi rikuchinankupaq. Estilokuna qillqa yaykuchiypaq, akllana listakuna, qillqanakuna, radio botones chaymanta qhaway qutukuna chaymanta botones qusqa kanku.

Ejemplo forma leyenda

X-Hatun Yaykuy

Akllay

1. 2. 3. 4. 5.

Akllay

1. 2. 3. 4. 5.

Entrada Mana Editable

Wakin Valor Kaypi

Discapacitado Yaykuy

X-Hatun Yaykuy

Yanapakuy qillqamanta uchuy qillqasqa

Ejemplo forma leyenda

Texto Prependido

@ .

Prependido nisqa cuadro de verificación

Yanapasqa cuadro de verificación

Archivo Yaykuy

Ejemplo forma leyenda

Lista de Opciones

• Huk akllana kay chaymanta chay —ama hina kaspa churay imarayku ancha allin kasqanmanta
• Iskay akllanatapas qhawarikunmanmi hinaspa formulariopa ruwasqankunapi churakunman
• Kimsa akllanaqa kanman —arí, adivinarqunki— qhawasqallataq kanman chaymanta formulario ruwaykunapi churasqa kanman
• Tawa akllanaqa manam qhawayta atikunmanchu mana llamk'achisqa kasqanrayku.

Qhaway: Etiquetakuna llapa akllanakunata muyurinku aswan hatun ñit'iy áreas kaqpaq chaymanta aswan llamk'anapaq formulario kaqpaq.

Rango de Fechas

a Tukuy pachakunaqa Pacífico Estándar nisqa pacha hinam rikuchikun (GMT -08:00).

Área de texto

Bloque de texto de ayuda para describir el campo arriba si es necesario.

Lista de Opciones

• Huk akllana kay chaymanta chay —ama hina kaspa churay imarayku ancha allin kasqanmanta
• Iskay akllanatapas qhawarikunmanmi hinaspa formulariopa ruwasqankunapi churakunman

Tikrasqakunata waqaychay Sayachiy

Formularios apilados

Formularioykipa HTML kaqninman yapay .form-stackedchaymanta etiquetakunayuq kanki paykunap chakrankunap hawanpi mana paña kaqninkupi. Kayqa ancha allinta llamkan sichus formulariokunayki pisi kanku utaq iskay columnakuna yaykuyniyuq kanki aswan llasa formulariokunapaq.

Ejemplo forma leyenda

X-Hatun Yaykuy

Akllay

1. 2. 3. 4. 5.

Ejemplo forma leyenda

Lista de Opciones

• Huk akllana kay chaymanta chay —ama hina kaspa churay imarayku ancha allin kasqanmanta
• Iskay akllanatapas qhawarikunmanmi hinaspa formulariopa ruwasqankunapi churakunman

Qhaway: Etiquetakuna llapa akllanakunata muyurinku aswan hatun ñit'iy áreas kaqpaq chaymanta aswan llamk'anapaq formulario kaqpaq.

Tikrasqakunata waqaychay Sayachiy

Botones

Huk convención hina, botones ruwanapaq llamk'achisqa chaymanta t'inkikuna objetokunapaq llamk'achisqa. Ejemplopaq, "Uraykachiy" huk ñit'ina kanman chaymanta "qhipa ruway" huk t'inki kanman.

Llapan botones ñawpaqmanta huk llimp'i gris estilo kaqman, ichaqa huk azul .primaryclase tiyan. Astawan, kikin estilokunata rollo ruwayqa facil peasy.

Ejemplo de botones

Botón estilokuna imamanpas churakunman chay .btnchurasqawan. aTipicamente kaykunata , button, chaymanta akllay inputelementokunallaman churayta munanki . Kaypi imayna rikchakun:

Tamaños alternas

¿Aswan hatunchu icha aswan huch’uy botonkunatachu munanki? ¡Tienen en ello!

Mana atiq suyu

Botonkuna mana ruwasqa utaq huk razonrayku utaq wak app kaqwan mana llamk'achisqa kaqpaq, mana llamk'achisqa estadota llamk'achiy. Chayqa .disabledt'inkikunapaqmi, :disabledelementokunapaqpas button.

T'inkikuna

Botones

Imataq

Pata barrayku huk takyasqa barra kaq mayqinchus huk web kitip logotipo utaq sutin, ñawpaq puriy chaymanta maskana formularioyuq.

Personalizable

Llapan elementokuna ukhupi, chaymanta tukuy pata barra hinallataq, munasqa kanku. Akllayta atikunki huk logotipo/suti, nav, maskana chaymanta huk iskay kaq nav churayta —utaq mayqin chaymanta chay huñusqa kaqtapas.

Dropdowns incluidos

Hatun puriypa huknin hina, atiyta churarqayku qampaq navniykiman urayk'aqkuna yapanaykipaq. Rikuy iskay kaq nav hawapi (alliq chiqanchasqa) imayna ruwasqa kaqta qhawanaykipaq.

Tabs y pastillas

Hukwan sasa iskay kaq puriyta ruway ul. Intercambio entre pestañas o pastillas añadiendo la clase adecuada.

Hatun sub-secciones kaqmanta contenidopaq imaynachus yupayniyku churanakuna p'anqakuna chaymanta user timelines kaqmanta tikraypaq p'anqakuna hina contenido kaqmanta. Disponible en estilos tabbed o pastillas.

• Wasi
• Runapa kaynin
• Willakuykuna
• Ajustes
• Tupaqmasi

<ul clase="tabs"> clase = "pestañas" >
  <li clase = "activo" ><a href = "" > Wasi </a></li>  
  <li><a href = "" > Willakuy </a></li> 
  <li><a href = "" > Willakuykuna </a></li> 
  <li><a href = "" > Ajustes </a></li> 
  <li><a href = "" > Rimanakuy </a></li> 
</ul>

• Wasi
• Runapa kaynin
• Willakuykuna
• Ajustes
• Tupaqmasi

<ul clase="pastillas"> clase = "pastillas" >
  <li clase = "activo" ><a href = "" > Wasi </a></li>  
  <li><a href = "" > Willakuy </a></li> 
  <li><a href = "" > Willakuykuna </a></li> 
  <li><a href = "" > Ajustes </a></li> 
  <li><a href = "" > Rimanakuy </a></li> 
</ul>

Paginación

Paginación ultra simplista y mínimamente estilo inspirada por Rdio. Hatun bloqueqa sasa pantaymi, facil escalable, hatun ñit'iy áreas nisqakunata qun.

<div clase="paginación"> clase = "paginación" >
  <ul> nisqa
    <li clase = "ñawpaq mana llamk'achisqa" ><a href = "" > ← Ñawpaq </a></li>  
    <li clase = "ruray" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> nisqa 
    <li><a href = "" > 3 </a></li> nisqa 
    <li><a href = "" > 4 ​​</a></li> nisqa 
    <li><a href = "" > 5 </a></li> nisqa 
    <li clase = "qhipa kaq" ><a href = "" > Qhipa kaq → </a></li> nisqa  
  </ul>
</div> nisqa

Alerta básica nisqa

Huk chiru willakuykunata huk ruwaypa mana allin kayninta, mana allin kayninta utaq allin kayninta riqsichinapaq. Particularmente útil para formularios.

Willakuykunata harkay

Willakuykuna huk chhika sut'inchayta munanku, parrafo estilo alertasniyuq kayku. Kaykunaqa allin kanku aswan unay pantay willakuykunata burbujanapaq, huk llamk'aqman huk pendiente ruwaymanta willaypaq, utaq willayta sapalla p'anqapi aswan kallpachakuypaq rikuchiypaq.

Modales nisqa

Modales —rimanakuna utaq k'anchay qutukuna— ancha allin kanku contextual ruwaykunapaq situacionkunapi maypichus importante kan qhipa contexto waqaychasqa kananpaq.

Popovers

Popovers llamk'achiy huk p'anqaman subtextual willayta qunaykipaq mana churayta ruwaspa.

Bootstrap Preboot kaqwan ruwasqa karqa , huk kichasqa-qullqi pack mixins kaqmanta chaymanta tikraqkunamanta Less kaqwan kuska llamk'anapaq , huk CSS ñawpaq ruwaq aswan utqaylla chaymanta aswan facil web wiñachiypaq.

Rikuy imaynatachus Preboot Bootstrap kaqpi llamk'achirqayku chaymanta imaynatachus chayta llamk'achiyta atikunki sichus akllanki Less llamk'achiyta qatiq proyectoykipi.

Imaynatataq apaykachana

Kay akllanata llamk'achiy Bootstrap kaqpa Aswan pisi tikraqninkunata, mixins kaqninta chaymanta CSS kaqpi anidado ruwayta javascript kaqninta maskaqniykipi hunt'asqa llamk'achinaykipaq.

<link rel="estilo raphi/aswan pisi" type="text/css" href="aswan pisi/bootstrap.less" media="tukuy" /> rel = "estilo raphi/aswan pisi" type = "texto/css" href = "aswan pisi/bootstrap.aswan" media = "tukuy" />    
<script type = "qillqa/javascript" src = "js/aswan-1.0.41.min.js" ></script>  

¿Manachu .js allichayta sientechkanki? Aswan pisi Mac ruwanata kallpachakuy utaq Node.js llamk'achiy huñunapaq mayk'aq codigoyki mast'arinki.

Imataq chaypi kachkan

Kaypi wakin aswan riqsisqakuna imakuna Twitter Bootstrap kaqpi Bootstrap kaqhina churasqa kachkan. Umachay Bootstrap web kitiman utaq Github proyecto p'anqaman uraykachinaykipaq chaymanta astawan yachanaykipaq.

Color variables nisqakuna

Variables en Menos kanku allin kanku waqaychaypaq chaymanta musuqyachiypaq CSS uma nanayniyuq mana. Mayk'aq huk llimp'i chanita utaq sapa kuti llamk'achisqa chanita tikrayta munanki, huk chiqanpi musuqchay chaymanta churasqa kanki.

// T'inkikuna
@linkColor : #8b59c2 nisqa;         
@linkColorHover : tutayay (     @linkColor , 10 ); 
// Griskuna
@yana : #000;             
@grayDark :           k'anchariy ( @yana , 25 %); 
@gris :               k'anchariy ( @yana , 50 %); 
@grisK'anchay :          k'anchariy ( @yana , 70 %); 
@grayLighter :        k'anchariy ( @yana , 90 %); 
@yuraq : #fff;             
// Colores de Acento
@azul : #08b5fb nisqa;              
@q'umir : #46a546 ;             
@puka : #9d261d nisqa;               
@q'illu : #ffc40d ;            
@naranja : #f89406 nisqa;            
@ rosa : #c3325f nisqa;              
@lila : #7a43b6 nisqa;            
// Línea de base
@baseline : 20px nisqa ;          

Comentaspa

Less huk estilo comentarios kaqtapas qun CSS kaqpa normal /* ... */sintaxisninmanta yapasqa.

// Kayqa huk rimaymi
/* Kayqa huk rimaypas */

Mixins hasta el wazoo

Mixins aswanta CSS kaqpaq incluidos utaq parciales kanku, huk bloque codigo hukman hukllanaykipaq saqin. Paykunaqa ancha allin kanku ranqhaq ñawpaqchasqa propiedades kaqpaq kayhina box-shadow, chakana maskaq gradientekuna, qillqa pilakuna chaymanta aswan. Uraypi huk muestra kachkan chay mixinkuna Bootstrapwan churasqa.

Pilas de fuentes

#font { 1 .
  . taquigrafía ( @pesa : normal , @tamaño : 14px , @lineHeight : 20px ) {     
    letra - tamaño : @size ; 
    font - llasaynin : @llasaq ; 
    chiru - sapa : @lineHeight ; 
  } .
  . sans - serif ( @pesa : normal , @tamaño : 14px , @lineHeight : 20px ) {     
    qillqap rikch'aynin : "Helvetica Neue " , ​​Helvetica , Arial , sans - serif ;   
    letra - tamaño : @size ; 
    font - llasaynin : @llasaq ; 
    chiru - sapa : @lineHeight ; 
  } .
  . serif ( @pesa : normal , @tamaño : 14px , @lineHeight : 20px ) {     
    qillqap rikch'aynin : " Georgia " , Times New Roman , Times , sans - serif ;     
    letra - tamaño : @size ; 
    font - llasaynin : @llasaq ; 
    chiru - sapa : @lineHeight ; 
  } .
  . monospacio ( @pesa : normal , @tamaño : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Willakuq Musuq , huk espacio ;   
    letra - tamaño : @size ; 
    font - llasaynin : @llasaq ; 
    chiru - sapa : @lineHeight ; 
  } .
} .

Gradientes nisqa

#gradiente { .
  . horizontal ( @QallariyLlimpi : #555, @tukuyLlimpi: #333) { 
    qhipa - llimp'i : @endColor ; 
    qhipa - kutichiy : kutichiy - x ;
    qhipa - siq'i : - khtml - gradiente ( lineal , lluq'i pata , paña pata , ( @startColor ), manta ( @endColor ) ); // Conquero nisqa   
    qhipa - imayna : -moz - lineal - gradiente ( ichuq , @qallariyLlimpi , @tukuyLluqsi ) ; // FF 3.6+ nisqa    
    qhipa - imayna : - ms - lineal - gradiente ( ichuq , @qallariyLlimpi , @tukuyLlumpi ) ; // IE10 nisqa    
    qhipa - siq'i : - webkit - gradiente ( lineal , lluq'i pata , paña pata , llimp'i - sayachiy ( 0 %, @startColor ), llimp'i - sayachiy ( 100 %, @endColor )); // Safari 4+, Cromo 2+    
    qhipa - imayna : - webkit - lineal - gradiente ( ichuq , @qallariyRay , @tukuyLluqsi ) ; // Safari 5.1+, Cromo 10+ nisqa    
    qhipa - imayna : -o - lineal - gradiente ( ichuq , @qallariyRay , @tukuyLluqsi ) ; // Opera 11.10 nisqa    
    - ms - filtro : %( "progid:DXImageTransform.Microsoft.gradient(QallariyLlimpi='%d', tukukuyLlimpi='%d', GradienteTipo=1)" , @QallariyLlimpi , @tukuyLlimpi ); // IE8+ nisqa  
    filtro : e (%( "progid:DXImageTransform.Microsoft.gradiente(qallariyLlimpi='%d', tukukuy llimp'i='%d', tukukuy llimp'i=1)" , @qallariy llimp'i , @tukuy llimp'i )); // IE6 y IE7 
    qhipa - imayna : chiru - gradiente ( ichuq , @qallariyLlimpi , @tukuyLluqsi ); // Le estándar   
  } .
  . sayaq ( @QallariyLlimpi : #555, @tukuyLlimpi: #333) { 
    qhipa - llimp'i : @endColor ; 
    qhipa - kutichiy : kutichiy - x ;
    qhipa - siq'i : - khtml - gradiente ( chiruyuq , lluq'i pata , lluq'i uray , ( @startColor ), manta ( @endColor ) ); // Conquero nisqa   
    qhipa - siq'i : - moz - lineal - gradiente ( @qallariy llimp'i , @tukuy llimp'i ); // FF 3.6+ nisqa   
    qhipa - imayna : - ms - lineal - gradiente ( @qallariyLlimpi , @tukuyLlumpi ) ; // IE10 nisqa   
    qhipa - siq'i : - webkit - gradiente ( chiruyuq , lluq'i pata , lluq'i uray , llimp'i - sayachiy ( 0 %, @qallariyColor ), llimp'i - sayachiy ( 100 %, @tukuyColor )); // Safari 4+, Cromo 2+    
    qhipa - siq'i : - webkit - lineal - gradiente ( @qallariy llimp'i , @tukuy llimp'i ); // Safari 5.1+, Cromo 10+ nisqa   
    qhipa - siq'i : - o - lineal - gradiente ( @qallariyLlimpi , @tukuyLlimpi ); // Opera 11.10 nisqa   
    - ms - filtro : %( "progid:DXImageTransform.Microsoft.gradient(QallariyLlimpi='%d', tukukuyLlimpi='%d', GradienteTipo=0)" , @qallariyLlimpi , @tukuyLlimpi ); // IE8+ nisqa  
    filtro : e (%( "progid:DXImageTransform.Microsoft.gradient(qallariyLluq'i='%d', tukukuy llimp'i='%d', tukukuy llimp'i=0)" , @qallarina llimp'i , @tukuy llimp'i )); // IE6 y IE7 
    qhipa - imayna : lineal - gradiente ( @qallariyLlimpi , @tukuyLlimpi ); // Chay estandarte  
  } .
  . direccional ( @QallariyLlimpi : #555, @tukuyLlimpi: #333, @deg: 45deg) { 
    ...
  } .
  . sayaq - kimsa - llimp'ikuna ( @QallariyLlimpi : #00b3ee, @chawpiLlimpi: #7a43b6, @colorStop: 0.5, @tukuyLlimpi: #c3325f) { 
    ...
  } .
} .

Operaciones y sistema de red

Fancia ruway chaymanta wakin matemáticas ruway flexible chaymanta kallpasapa mixins ruwanapaq kay urapi kaqhina.

// Rejilla nisqa
@gridColumnas : 16 ;       
@rejillaColumna Ancho : 40px ;   
@gridGutterAncho : 20px nisqa ;   
// Sistema de Rejilla
. waqaychana { .
  ancho : @sitioAncho ; 
  margen : 0 auto ;  
  . chuya allichay ();
} .
. columnas ( @columnSpan : 1 ) {  
  qhaway : inline ; 
  float : lluq'i ;
  ancho : ( @Ancho de columna de rejilla * @Span de columna ) + ( @Ancho de canal de rejilla * ( @Span de columna - 1 ));         
  margen - izquierdo : @gridGutterAncho nisqa ; 
  &: ñawpaq - wawa { .
    margen - izquierdo : 0 ; 
  } .
} .
. offset ( @columnOffset : 1 ) { .  
  margen - izquierdo : ( @rejillaColumnaAncho * @columnaOffset ) + ( @rejillaGutterAncho * ( @columnaOffset - 1 )) ! importante ;          
} .