Etiam porta sem malesuada magna mollis euismod nisqamanta. Maecenas faucibus mollis nisqap chawpinpi kaq. Morbi leo risus, porta ac consectetur ac, vestibulo en eros.
Bootstrap huk yanapakuy Twitter kaqmanta ruwasqa webapps chaymanta sitiokuna wiñachiyta kickstart kaqpaq.
Chayqa base CSS chaymanta HTML tipografía kaqpaq, formulariokuna, botones, tablakuna, rejillas, puriypaq chaymanta aswan kaqpaq churan.
Nerd willay: Bootstrap Less kaqwan ruwasqa chaymanta ruwasqa karqan punkumanta hawa llamk'ananpaq kunan pacha maskaqkuna yuyaypi.
Aswan utqaylla chaymanta mana sasa qallariypaq, kay fragmentota web kitiykiman qillqaylla.
Un fan de usar Menos? Mana ima sasachakuypas, repota clonaspalla kay chirukunata yapay:
Uraykachiy, bifurcación, aysana, archivo sasachakuykuna, chaymanta aswanta Github kaqpi Bootstrap repo oficial kaqwan.
Kunanqa v1.3.0
Twitter kaqpi ingenierokuna ñawpaqmanta pacha yaqa mayqin biblioteca riqsisqa kasqankuta llamk'achirqanku ñawpaq-tukuy kamachiykunata hunt'anankupaq. Bootstrap qallarirqa huk kutichiy hina chay sasachakuykuna presentasqa. Achka manchay runakunap yanapayninwan, Bootstrap anchata wiñasqa.
Astawan ñawinchay dev.twitter.com nisqapi ›
Bootstrap pruebasqa chaymanta yanapasqa hatun kunan pacha maskaqkunapi Chrome, Safari, Internet Explorer chaymanta Firefox hina.
Bootstrap hunt'asqa hamun huñusqa CSS kaqwan, mana huñusqa kaqwan, chaymanta ejemplo plantillas kaqwan.
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.
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" >
- ...
- </div> nisqa
- <div clase = "span10" >
- ...
- </div> nisqa
- </div> nisqa
Anidado contenidoyki sichus ruwanayki tiyan huk ruwaspa .row
huk kachkaq columna ukhupi.
- <div clase = "fila" >
- <div clase = "span12" >
- Nivel 1 de columna
- <div clase = "fila" >
- <div clase = "span6" >
- 2 kaq ñiqi
- </div> nisqa
- <div clase = "span6" >
- 2 kaq ñiqi
- </div> nisqa
- </div> nisqa
- </div> nisqa
- </div> nisqa
Bootstrap kaqpi ruwasqa huk makilla tikraqkuna kanku ñawpaqmanta 940px llika llamkana ruwanapaq. Huk chhika ruwaywan, columnakunap sayayninta, canalesninkuta, chaymanta maypichus tiyasqanku waqaychanata tikrayta atikunki.
Chay rejilla sistemata tikranapaq necesitasqanku variablekuna kunan llapanku variables.less
.
Variable nisqa | Ñawpaqmanta churasqa chani | Willay |
---|---|---|
@gridColumns |
16 | Rejilla ukhupi hayk’a columnakuna kasqan |
@gridColumnWidth |
40px nisqa | Rejilla ukhupi sapa columnapa anchun |
@gridGutterWidth |
20px nisqa | Sapa columna chawpipi kaq negativo espacio |
@siteWidth |
Llapan columnakunamanta, canales nisqamanta ima yupasqa | Wakin tupachiy básico nisqawanmi yupayku hayka columnakuna chaymanta canales nisqakuna chaymanta .fixed-container() mixinpa anchunta churanchik. |
Rejillata tikrayqa kimsa @grid-*
tikraqkunata tikraymi, chaymanta Aswan pisi willañiqikunata musuqmanta huñuymi.
Bootstrap hamun equipado huk sistema de rejilla 24 columnakunakama hapinanpaq; ñawpaqmanta churasqa 16. Kaypi imayna llika tikraykikuna 24 columna llikaman ruwasqa rikch'akunman.
- @rejillaColumnas : 24 ;
- @rejillaColumna Ancho : 20px ;
- @gridGutterAncho : 20px nisqa ;
Una vez recompilado, estarás establecido!
Ñ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
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
Huk jerarquía tipográfica estándar web kitiykikuna ruwanapaq.
Llapan qillqana mayt'uqa iskay Aswan pisi tikraqkunapim tikrasqanchikkunapi.aslla willañiqipi sayasqa kachkan: @basefont
chaymanta @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.
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.
Enfasis, direcciones, & abreviaturas nisqakunata llamk’achispa
<strong>
<em>
<address>
<abbr>
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 .
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.
Chay <address>
elementoqa aswan qaylla ñawpaq taytanpaq tinkinapaq willakuypaq llamk'achisqa, icha tukuy llamk'ay kurkupaq. Kaypin iskay ejemplokuna kashan imaynatas utilizakunman chayta:
Qhaway: Hukpi sapa chiruqa <address>
chiru-p'akiywan ( <br />
) tukukunan tiyan icha huk bloque-nivel etiquetawan (kayhina, ) p'istuykusqa kanan <p>
tiyan allinta ruwanapaq.
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.
<blockquote>
<p>
<small>
<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
- <bloqueo nisqa>
- <p> Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Integer posuere erat huk ante venenatis dapibus posuere velit aliquet. </p>
- <huch’uy> Dr. Julius Hibbert </huch’uy>
- </blockquote> nisqa
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Pimp códigoyki estilopi iskay etiquetakuna simplewan. Aswan manchay kaypaq javascript kaqnintakama, Google kaqpa codigo prettify biblioteca kaqpi urmachiy chaymanta churasqa kanki.
Código, bloques de o simplemente fragmentos inline, estilowan rikuchikunman allin etiquetapi p'istuykuspalla. Achka chirukunata mast'ariq codigo bloquekunapaq, <pre>
elementota llamk'achiy. Chiru ukhupi codigopaq, <code>
elementota llamk'achiy.
Imakuna | Tukusqa |
---|---|
<code> |
Kayhina qillqa chirupiqa, p'istuykusqa codigoyki kay <html> elemento hinam rikchakunqa. |
<pre> |
<div> nisqa <h1>Uma</h1> <p>Imapas kayllapi...</p> </div> nisqa Qhaway: Aswan allinta |
<pre class="prettyprint"> |
google-code-prettify biblioteca llamk'achispa, bloquekunayki código huk pisi hukniray rikuy estilota chaymanta kikillan sintaxis resaltayta tarinku. <div> <h1> Uma </h1> <p> Kaypi imapas... </p> </div> google-code-prettify nisqamanta uraykachiy chaymanta readme nisqa qhaway imayna llamk'achinapaq. |
<span class="label">
Cuerpoykipi textopi mayqen frasetapas atencionta waqyay otaq banderawan churay.
Nunca necesitaba uno de esos lujoso Nuevo! utaq ¿Código qillqachkaspa importante banderakuna? Bueno, kunanqa chaykunatan chaskinki. Kaypi imakuna ñawpaqmanta churasqa kachkan:
Suti | Tukusqa |
---|---|
<span class="label">Default</span> |
Ñawpaqchasqa |
<span class="label success">New</span> |
Musuq |
<span class="label warning">Warning</span> |
Manchachiy |
<span class="label important">Important</span> |
Chaniyuq |
<span class="label notice">Notice</span> |
Willakuy |
Huk pisi HTML chakiyuq chaymanta pisi estilokunayuq p'anqakunapi hukniray sayayniyuq uchuy siq'ikunata qhaway.
Huch'uy siq'ikuna kaqpi .media-grid
mayqin sayayniyuqpas kanman, ichaqa aswan allinta llamk'anku mayk'aq chiqalla Bootstrap rejilla sistema ruwasqa kaqman mapasqa. 90, 210, 330 hina siq'i anchokuna huk pisi pixelkuna hunt'achiyninwan hukllanakunku .span2
, .span4
, chaymanta .span6
columna sayayninkuna kaqlla kananpaq.
Rejillas de medios nisqakunaqa mana sasachu llamk'achinapaq chaymanta aswan sasallawan marcasqa lado kaqpi. Dimensiones nisqakunaqa puramente basada en el tamaño de las imágenes incluidas nisqapi.
- <ul clase = "media-rejilla" >
- <li> nisqa
- <a href = "#" > nisqa
- <img class = "huch'uy rikch'aq" src = "https://qu.wi.com/330x230" alt = "" >
- </a>
- </li>
- <li> nisqa
- <a href = "#" > nisqa
- <img class = "huch'uy rikch'aq" src = "https://qu.wi.com/330x230" alt = "" >
- </a>
- </li>
- </ul>
<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>
.
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
Aswan t'inkisqa espaciokunapi aswan datukunata mañakuq tablakunapaq, sabor condensado kaqwan llamk'achiy, chaymi acolchadota kuskanman kuchun. Hinallataq, fronterakunawan chaymanta zebra-rayaswan kuskachasqa llamk'achiy atikun, imaynachus ñawpaqmanta tabla estilokuna hina.
# . | Ñawpa suti | Taytamama suti | Simi |
---|---|---|---|
1. | Wakin | Huk | Ingles Simi |
2. | Joe nisqa | Suqta paqu | Ingles Simi |
3. | Stu | Dent | Código |
Haz que tus mesas se vean solo un poco más elegante redondeando sus esquinas y añadiendo bordes en todos los lados.
# . | Ñawpa suti | Taytamama suti | Simi |
---|---|---|---|
1. | Wakin | Huk | Ingles Simi |
2. | Joe nisqa | Suqta paqu | Ingles Simi |
3. | Stu | Dent | Código |
- <tabla clase = "frontera-tabla" >
- ...
- </tabla> nisqa
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 |
span 4 columnas | |||
span 2 columnas | span 2 columnas |
Qhaway: Zebra-striping huk ñawpaqman puriq allinchay mana ñawpaq maskaqkunapaq IE8 hina chaymanta uraypi kanchu.
- <tabla clase = "cebra-rayado" >
- ...
- </tabla> nisqa
Ñ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 |
---|---|---|---|
2. | Joe nisqa | Suqta paqu | Ingles Simi |
3. | Stu | Dent | Código |
1. | Qampa | Huk | Ingles Simi |
- <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
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.
Formularioykipa HTML kaqninman yapay .form-stacked
chaymanta 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.
Ima formulariotapas input
, select
, utaq textarea
anchotapas ruway, huk iskay kimsa clasekunallata markaykiman yapaspa.
v1.3.0 kaqmanta, formulario elementokunapaq rejilla-based sayay clasekunata yapasqayku. Ama hina kaspa, kaykunata kunan kaq .mini
, .small
, etc clasekuna hawapi llamk'achiy.
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 .primary
clase, azul claro .info
, verde .success
clase, puka .danger
clase ima.
Botón estilokuna imamanpas churakunman chay .btn
churasqawan. <a>
Tipicamente kaykunata , <button>
, chaymanta akllay <input>
elementokunallaman churayta munanki . Kaypi imayna rikchakun:
¿Aswan hatunchu icha aswan huch’uy botonkunatachu munanki? ¡Tienen en ello!
Botonkuna mana ruwasqa utaq huk razonrayku utaq wak app kaqwan mana llamk'achisqa kaqpaq, mana llamk'achisqa estadota llamk'achiy. Chayqa .disabled
t'inkikunapaqmi, :disabled
elementokunapaqpas <button>
.
.alert-message
Huk chiru willakuykunata huk ruwaypa mana allin kayninta, mana allin kayninta utaq allin kayninta riqsichinapaq. Particularmente útil para formularios.
- <div class = "alerta-willakuy willakuy" >
- <a clase = "wichqay" href = "#" > × </a>
- <p><strong> ¡Santo guacamole! </strong> Aswan allin qhaway yo kikiyki, mana ancha allintachu qhawarikunki. </p>
- </div> nisqa
.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.
- <div class = "alerta-willakuy hark'ay-willakuy willay" >
- <a clase = "wichqay" href = "#" > × </a>
- <p><strong> ¡Santo guacamole! ¡Kayqa huk advertencian! </strong> Aswan allin qhaway yo kikiyki, mana ancha allintachu qhawarikunki. Nulla vitae elit libero, huk pharetra augue. Praesent commodo cursus magna, vel escelerisco nisl nisqa consectetur nisqa. </p>
- <div clase = "alerta-ruray" >
- <a class = "btn huch'uy" href = "#" > Kay ruwayta ruway </a> <a class = "btn huch'uy" href = "#" > Utaq kayta ruway </a>
- </div> nisqa
- </div> nisqa
Modales —rimanakuna utaq k'anchay qutukuna— ancha allin kanku contextual ruwaykunapaq situacionkunapi maypichus importante kan qhipa contexto waqaychasqa kananpaq.
Huk sumaq cuerpo...
Twipsies super útiles kanku huk confundisqa usuariota yanapanapaq chaymanta allin ñanman señalanapaq.
Lorem ipsum dolar tiyay amat illo pantasqa ipsum veritatis aut isiste perspiciatis iste voluptas natus illo quasi odit aut natus consecuntur consecuuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit acusantium totam totam architecto explicabo tiyay yaqa fugit fugit, totam doloremque unde sunt sed dicta quae acusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis cuasi quae.
Popovers llamk'achiy huk p'anqaman subtextual willayta qunaykipaq mana churayta afectaspa.
Etiam porta sem malesuada magna mollis euismod nisqamanta. Maecenas faucibus mollis nisqap chawpinpi kaq. Morbi leo risus, porta ac consectetur ac, vestibulo en eros.
Javascript Bootstrap bibliotecawan tinkiyqa super facilmi. Uraypi riyku aswan allin kaqkunamanta chaymanta quyku wakin manchay plugins qallarinaykipaq!
Wakin Bootstrap kaqpa ñawpaq kaqninkunata kawsayman apamuy musuq sapanchasqa plugins kaqwan mayqinkunachus jQuery chaymanta Ender kaqwan llamk'anku . Kallpanchaykiku mast'arinaykipaq chaymanta tikranaykipaq chaymanta específico wiñariy necesidadniykiman hina.
Kipu | Willay |
---|---|
bootstrap-modal.js nisqa | Nuestro plugin Modal es un toma super delgado en el plugin tradicional modal js! Cuidado especialta ruwarqayku chay desnuda funcionalidadllata churanaykupaq, chayta twitterpi necesitayku. |
bootstrap-alertas.js nisqamanta | Alerta plugin huk super uchuy clase kan qaylla ruwanakuna alertakunaman yapanapaq. |
bootstrap-uraq.js | Kay plugin bootstrap pata barraman utaq tablayuq puriykunaman urayk'aq tinkiyta yapanapaq kachkan. |
bootstrap-scrollspy.js nisqa | ScrollSpy plugin huk auto actualización nav yapanapaq kachkan, kuyuchiy posición kaqpi bootstrap pata barra kaqman. |
bootstrap-botones.js nisqa | ScrollSpy plugin huk auto actualización nav yapanapaq kachkan, kuyuchiy posición kaqpi bootstrap pata barra kaqman. |
bootstrap-tabs.js nisqamanta | Kay plugin usqay, kallpasapa tabla chaymanta pastilla ruwanakunata yapan ciclo ruwanapaq llaqta contenido kaqninta. |
bootstrap-twipsy.js nisqa | Jason Framepa qillqasqan allin jQuery.tipsy plugin nisqapi hapipakuspa; twipsy huk musuqchasqa laya kachkan, mayqinchus mana siq'ikunapi hapirinchu, css3 llamk'achin animacionkunapaq, chaymanta data-attributos kitipi titulu waqaychaypaq! |
bootstrap-popover.js nisqa | Popover plugin huk sanu interfazta qun popovers ruwanaykiman yapanapaq. Chayqa boostrap-twipsy.js pluginta mast'arikun, chayrayku ama hina kaspa chay archivota hap'iy hinallataq popovers proyectoykipi churaspa! |
Manam! Bootstrap nisqaqa ñawpaq kaq chaymanta aswan ñawpaq kaq CSS biblioteca kananpaq ruwasqa. Kay javascript huk sapsi interactivo qatata qun chaymanta churasqa estilokuna patapi.
Ichaqa, pikunachus javascript necesitanku chaypaq, patamanta plugins qusqayku yanapanapaq imayna Bootstrap javascript kaqwan tinkiyta hamut'ayta chaymanta huk utqaylla, llamp'u akllanata qunapaq chaymanta chaylla ruwanakuna básica kaqpaq.
Aswan willakuypaq chaymanta wakin kawsaq rikuchiykunata qhawanaykipaq, ama hina kaspa qhaway plugin qillqa p'anqaykupi .
Bootstrap Preboot kaqmanta ruwasqa karqan , 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.
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.
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 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 ;
Less huk estilo comentarios kaqtapas qun CSS kaqpa normal /* ... */
sintaxisninmanta yapasqa.
- // Kayqa huk rimaymi
- /* Kayqa huk rimaypas */
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.
- #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 ;
- } .
- ...
- } .
- #gradiente { .
- ...
- . 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
- } .
- ...
- } .
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 ));
- // Wakin columnakunata ruway
- . columnas ( @columnSpan : 1 ) {
- ancho : ( @Ancho de columna de rejilla * @Span de columna ) + ( @Ancho de canal de rejilla * ( @Span de columna - 1 ));
- } .
/ lib .less
/ kaqpi willañiqikunata hukchaymanta, musuqmanta huñunayki tiyan, bootstrap-*.*.*.css chaymanta bootstrap-*.*.*.min.css willañiqikunata musuqmanta paqarichinaykipaq. Sichus huk aysana mañakuyta GitHub kaqman apachichkanki, sapa kuti musuqmanta huñunayki tiyan.
Imayna | Pasokuna |
---|---|
Nodo con makefile nisqa | Aswan pisi kamachiy chiru huñuqta npm kaqwan churay kay kamachiyta purichispa: $ npm churay lessc Huk kuti churasqa chaylla purichiy Chaymanta, sichus watchr churasqa kanki, purinkiman |
Javascript nisqa | Aswan qhipa Less.js uraykachiy chaymanta chayman ñanta (hinallataq Bootstrap) kaqpi churay
.less willañiqikunata musuqmanta huñunaykipaqqa, waqaychaylla hinaspa p'anqaykita musuqmanta kargay. Less.js chaykunata huñun chaymanta llaqta waqaychaypi waqaychan. |
Kamachiy chiru | Sichus aswan pisi kamachiy chiru yanapakuy churasqaña kanki, kay kamachiyta purichiylla: $ lessc ./lib/bootstrap.less > qallariy.css ¡Aseguray |
Aswan pisi Mac nisqa app | Mana oficial Mac ruwana .less willakuykunata directoriokunata qhawan chaymanta codigota llaqta willakuykunaman huñun sapa qhawasqa .less willakuypa waqaychaymanta qhipaman. Sichus munanki, munasqakuna ruwanapi tikrayta atikunki kikillanmanta pisiyachiypaq chaymanta mayqin directorio kaqpi huñusqa willakuykunata tukun. |