Willarina

Twitter ñawpaq p'unchawkunapi, ingenierokuna yaqa mayqin biblioteca riqsisqankutapas llamk'achirqanku front-end kamachiykunata hunt'anankupaq. Bootstrap qallarirqa huk kutichiy hina chay sasachakuykuna rikuchisqa chaymanta wiñachiy usqhaylla usqhaylla Twitter ñawpaq Hackweek kaqpi.

Yanapakuywan chaymanta rimariywan achka ingenierokuna Twitter kaqpi, Bootstrap anchata wiñasqa mana básica estilokunallatachu hap'inanpaq, aswanpas aswan sumaq chaymanta unaypaq ñawpaq-tukuy diseño ruwaykunata.

Astawan ñawinchay dev.twitter.com nisqapi ›

Navegadorpa yanapakuynin

Bootstrap pruebasqa chaymanta yanapasqa hatun kunan pacha maskaqkunapi Chrome, Safari, Internet Explorer chaymanta Firefox hina.

• Qhipa kaq Safari
• Qhipa kaq Google Chrome
• Firefox 4+ nisqa
• Internet Explorer 7+ nisqapi
• Opera 11 nisqa

Imataq chaypi kachkan

Bootstrap hunt'asqa hamun huñusqa CSS kaqwan, mana huñusqa kaqwan, chaymanta ejemplo plantillas kaqwan.

• Tukuy ñawpaq .less willañiqikuna
• Tukuymanta huñusqa hinaspa pisiyachisqa CSS
• Estiloguide nisqa qillqakunata hunt'achiy
• Plantilla de página de ejemplo (más pronto)

Ñ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

Ñawpaqmanta chaymanta sanu 940px-ancho, chawpichasqa churay yaqa mayqin web kitipaq utaq p'anqapaq huk sapalla qusqa <div.container>.

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

Diseño de fluido

Huk alternativa, flexible fluido p'anqa estructura min- chaymanta max-anchos kaqwan chaymanta huk lluq'i lado barra kaqwan. Allinmi apps nisqapaq, docs nisqapaqpas.

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

Umakuna & copia

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

Llapan qillqana mayt'u iskay Aswan pisi tikraqkunapi preboot.less willañiqiykupi sayasqa kachkan: @basefontchaymanta @baseline. Ñawpaq kaqmi tukuyninpi llamk'achisqa base font-size iskay kaqtaq base line-height nisqa.

Chay tikraqkunata llamk'achiyku, chaymanta wakin yupaykunata, tukuy layaykumanta chaymanta aswanta margenkuna, rellenokuna, chaymanta chiru-alturakuna 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 titulo Tiene subpartida...

Misc. elementokuna

Enfasis, direcciones, & abreviaturas nisqakunata llamk’achispa

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

Hayk’aqtaq apaykachana

Etiquetas de énfasis ( <strong>y <em>) nisqawanmi qawachina huk palabrapa otaq huk frasepa muyuriqninpi copiawan tupachispa aswan importante kasqanmanta otaq enfasis kasqanmanta. <strong>Importanciapaq, <em>estrés nisqamanta astawan rimanapaq ima apaykachana .

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.

Qhaway: Hinallam allin kachkan llamk'achiyta <b>chaymanta <i>etiquetakuna HTML5 kaqpi chaymanta mana estiloyuq kananku tiyan negrita chaymanta cursiva kaqpi, chaymanta (aunque sichus huk aswan semántico elemento kan, llamk'achiy). <b>es destinado a resaltar palabras o frases sin transmitir importancia adicional, mientras <i>que es mayormente para voz, términos técnicos, etc.

Direcciones

Chay <address>elementoqa aswan qaylla ñawpaq taytanpaq tinkinapaq willakuypaq llamk'achisqa, icha tukuy llamk'ay kurkupaq. Kaypi imayna rikchakun:

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

Qhaway: Hukpi sapa chiruqa <address>chiru-p'akiywan ( <br />) tukukunan tiyan icha huk bloque-nivel etiquetawan (kayhina, ) p'istuykusqa kanan <p>tiyan allinta ruwanapaq.

Pisichasqa simikuna

Pisichasqakunapaq, siglaspaqpas, <abbr>etiquetata llamk'achiy ( HTML5<acronym> nisqapi manaña llamk'achisqachu ). Etiqueta ukhupi taquigrafía nisqa formulariota churay hinaspa hunt’asqa sutipaq huk titulota churay.

Bloqueo nisqa

<blockquote> <p> <small>

Imaynatataq citasunman

<blockquote>Huk bloqueo nisqa churanapaq, muyuriqninpi p'istuy <p>hinaspa <small>etiquetakuna. Utilizar el <small>elemento para citar tu fuente y obtendrás un guión em —antes de él.

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Integer posuere erat huk ante venenatis dapibus posuere velit aliquet.

Julio Hibbert sutiyuq doctormi

Mana kamachisqa<ul>

• Lorem ipsum dolor tiyay amet
• Consectetur adipiscing nisqa elit
• Entero molestie lorem en massa
• Facilisis en aliquet nisl de pretio nisqa
• Nulla volutpat aliquam velit
  • Fasello iaculis nisqa neque nisqa
  • Purus sodales ultricas nisqa
  • Vestibulo laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean tiyay amet erat nunc
• Eget porttitor lorem

Mana estiloyuq<ul.unstyled>

• Lorem ipsum dolor tiyay amet
• Consectetur adipiscing nisqa elit
• Entero molestie lorem en massa
• Facilisis en aliquet nisl de pretio nisqa
• Nulla volutpat aliquam velit
  • Fasello iaculis nisqa neque nisqa
  • Purus sodales ultricas nisqa
  • Vestibulo laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean tiyay amet erat nunc
• Eget porttitor lorem

Kamachisqa<ol>

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

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.

<thead>Sapa kuti sapaq umalliqniykikunata huk hinapi p'istuy , jerarquía <thead>> <tr>> <th>kananpaq.

Sapaq umalliqkunaman rikch'akuq, llapa tablaykip kurku kaqnin hukwan p'istuykusqa kanan tiyan <tbody>chaymanta 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

<mesa> nisqa
  ...
</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

Qhaway: Zebra-striping huk ñawpaqman puriq allinchay mana ñawpaq maskaqkunapaq IE8 hina chaymanta uraypi kanchu.

<tabla clase = "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 src = "js/jquery/jquery.tablakuna t'aqaq.min.js" ></script> 
<qillqa > 
  $ ( ruway () { . 
    $ ( "tabla#sortTablaEjemplo" ). tablakuna t'aqaq ({ t'aqayLista : [[ 1 , 0 ]] });  
  });
</script> nisqa
<tabla clase = "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

Cambios nisqakunata 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

X-Hatun Yaykuy

Yanapakuy qillqamanta uchuy qillqasqa

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.

Cambios nisqakunata 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 huk llimp'i gris estiloman ñawpaqmanta churasqa, ichaqa huk yupay ruwana clasekuna hukniray llimp'i estilokunapaq churakunman. Chay clasekunapiqa kanmi azul .primaryclase, azul claro .info, verde .successclase, puka .dangerclase ima. Astawan, kikin estilokunata rollo ruwayqa facil peasy.

Ejemplo de botones

Botón estilokuna imamanpas churakunman chay .btnchurasqawan. <a>Tipicamente kaykunata , <button>, chaymanta akllay <input>elementokunallaman 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 = "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" > 
  <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" > 
  <ul> nisqa
    <li clase = "ñawpaq mana llamk'achisqa" ><a href = "#" > ← Ñawpaq </a></li>  
    <li clase = "activo" ><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

div.alert-message

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

Willakuykunata harkay

div.alert-message.block-message

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.

Consejos de Herramientas

Twipsies super útiles kanku huk confundisqa usuariota yanapanapaq chaymanta allin ñanman señalanapaq.

Popovers

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

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" href = "aswan pisi/bootstrap.aswan" media = "tukuy" />    
<script src = "js/aswan-1.1.3.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.

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;            
 
// Rejilla de base nisqa
@basefont : 13px nisqa ;          
@baseline : 18px 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    
    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   
    qhipa - imayna : lineal - gradiente ( @qallariyLlimpi , @tukuyLlimpi ); // Chay estandarte  
  } .
  . direccional ( @QallariyLlimpi : #555, @tukuyLlimpi: #333, @deg: 45deg) { 
    ...
  } .
  . sayaq - kimsa - llimp'ikuna ( @QallariyLlimpi : #00b3ee, @chawpiLlimpi: #7a43b6, @colorStop: 50%, @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 ;   
@sitioAncho : ( @rejillaColumnas * @rejillaColumna Ancho ) + ( @rejillaGutterAncho * ( @rejillaColumnas - 1 ));                 
 
// Sistema de Rejilla
. waqaychana { .
  ancho : @sitioAncho ; 
  margen : 0 auto ;  
  . chuya allichay ();
} .
. columnas ( @columnSpan : 1 ) {  
  ancho : ( @Ancho de columna de rejilla * @Span de columna ) + ( @Ancho de canal de rejilla * ( @Span de columna - 1 ));         
} .
. offset ( @columnOffset : 1 ) { .  
  margen - izquierda : ( @rejillaColumna Ancho * @columnaOffset ) + ( @rejillaGutterAncho * ( @columnaOffset - 1 )) + @extraSpace ;           
} .