Componentes nisqakuna

Chunkakuna wakmanta llamk'achiy atiy componentekuna ruwasqa puriy, alertakuna, popovers, chaymanta aswan qunapaq.

¡Umakuna wichayman! Kay docs v2.3.2 kaqpaq kanku, chaymanta manaña oficial yanapasqachu. ¡Qhaway Bootstrap nisqap qhipa kaq llamk'ayninta!

Ejemplos

Iskay akllanakuna básicas, iskay aswan específicas variaciones kaqwan kuska.

Huklla botón nisqa huñu

Huk serie ñit'inakunata .btnin nisqawan p'istuy .btn-group.

  1. <div clase = "btn-huñu" >
  2. <button class = "btn" > Lluq'i </button>
  3. <button class = "btn" > Chawpi </button>
  4. <button class = "btn" > Paña </button>
  5. </div> nisqa

Achka boton qutukuna

Huñuy conjuntos de <div class="btn-group">en a <div class="btn-toolbar">para componentes más complejos.

  1. <div clase = "btn-herramienta" >
  2. <div clase = "btn-huñu" >
  3. ...
  4. </div> nisqa
  5. </div> nisqa

Sayaq boton huñukuna

Huk huñu botones sayaqpi pilasqa rikurinanpaq ruway, manataq horizontal nisqapichu.

  1. <div clase = "btn-huñu btn-huñu-sayaq" >
  2. ...
  3. </div> nisqa

Caja de verificación y sabores de radio

Boton huñukunapas radio hina llamk'ayta atinku, maypichus huk botónlla llamk'achkanman, utaq qhaway cuadrokuna, maypichus mayk'a botonkuna llamk'achkanman. Chaypaq JavaScript qillqakunata qhaway .

Botón qutukunapi urayk’aqkuna

¡Umakuna wichayman!Urmachiyniyuq botones sapankama kikinkupi .btn-grouphuk ukhupi p'istuykusqa kananku tiyan .btn-toolbarallin ruwanapaq.

Resumen y ejemplos

Mayqin ñit'inatapas llamk'achiy huk urayk'aq menú llamk'achiyta huk ukhupi churaspa chaymanta .btn-groupallin menú markayta quspa.

  1. <div clase = "btn-huñu" >
  2. <a class = "btn urayk'achiq-t'ikray" data-toggle = "uraq" href = "#" >
  3. Ruwana
  4. <span clase = "caret" ></span>
  5. </a>
  6. <ul clase = "uraq-menú" >
  7. <!-- urayk'aq menú t'inkikuna -->
  8. </ul>
  9. </div> nisqa

Tukuy botón sayaykunawan llamkan

Botón urayk'achiqkuna ima sayaypipas llamk'anku: .btn-large, .btn-small, utaq .btn-mini.

JavaScript nisqatam munan

Botón urayk'achiqkuna Bootstrap urayk'aq plugin llamk'ananpaq munanku.

Wakin kutikunapi —kuyuchina hina— urayk'aq menúkuna qhawaypa hawanpi mast'arikunqa. Chinkachiyta makiwan utaq ruwasqa JavaScript kaqwan allichanayki tiyan.


Rakiy botón urayk’aqkuna

Botón huñu estilokuna chaymanta markakuna ruwaypi, huk rakisqa ñit'inata mana sasachakuspa ruwayta atiyku. Rakisqa botones huk ruwayta estándar paña kaqpi chaymanta huk urayk'aq tikray paña kaqpi contextual t'inkikunawan rikuchin.

  1. <div clase = "btn-huñu" >
  2. <button class = "btn" > Ruway </button>
  3. <button class = "btn urayk'aq-t'ikray" data-t'ikray = "uraq" >
  4. <span clase = "caret" ></span>
  5. </boton> nisqa
  6. <ul clase = "uraq-menú" >
  7. <!-- urayk'aq menú t'inkikuna -->
  8. </ul>
  9. </div> nisqa

Tamaños

Utilizar las clases de botón extra .btn-mini, .btn-small, utaq .btn-largetamaño ruwanapaq.

  1. <div clase = "btn-huñu" >
  2. <botón clase = "btn btn-mini" > Ruway </botón>
  3. <button class = "btn btn-mini urayk'aq-tukuy" willay-t'ikray = "uraq" >
  4. <span clase = "caret" ></span>
  5. </boton> nisqa
  6. <ul clase = "uraq-menú" >
  7. <!-- urayk'aq menú t'inkikuna -->
  8. </ul>
  9. </div> nisqa

Menús de caída

Uray menúkunatapas uraymanta wichayman tikrayta atikunman huk sapalla clase yapaspa chaylla tayta mamaman .dropdown-menu. Chayqa tikranqa chay direccionta .caretchaymanta hukmanta churanqa kikin menú uraymanta wichayman kuyunanpaq aswan patamanta urayman kuyunanpaq.

  1. <div clase = "btn-qutu urmachiy" >
  2. <button class = "btn" > Urmachiy </button>
  3. <button class = "btn urayk'aq-t'ikray" data-t'ikray = "uraq" >
  4. <span clase = "caret" ></span>
  5. </boton> nisqa
  6. <ul clase = "uraq-menú" >
  7. <!-- urayk'aq menú t'inkikuna -->
  8. </ul>
  9. </div> nisqa

Paginación estándar

Simple paginación inspirada en Rdio, genial para apps y resultados de búsqueda. Hatun bloqueqa sasa pantaymi, facil escalable, hatun ñit'iy áreas nisqakunata qun.

  1. <div clase = "paginación" >
  2. <ul> nisqa
  3. <li><a href = "#" > Ñawpaq </a></li>
  4. <li><a href = "#" > 1 </a></li> nisqa
  5. <li><a href = "#" > 2 </a></li> nisqa
  6. <li><a href = "#" > 3 </a></li> nisqa
  7. <li><a href = "#" > 4 ​​</a></li> nisqa
  8. <li><a href = "#" > 5 </a></li> nisqa
  9. <li><a href = "#" > Qatiqnin </a></li>
  10. </ul>
  11. </div> nisqa

Akllanakuna

Estados discapacitados y activos

T'inkikuna hukniray circunstanciakunapaq ruwanapaq kanku. .disabledMana ñit'inapaq t'inkikunapaq chaymanta .activekunan p'anqata rikuchinapaq llamk'achiy .

  1. <div clase = "paginación" >
  2. <ul> nisqa
  3. <li clase = "mana atiq" ><a href = "#" > « </a></li> nisqa
  4. <li clase = "activo" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div> nisqa

Munasqaykimanta ruwasqa utaq mana atichisqa anclakuna spans kaqpaq tikrayta atikunki ñit'iy ruwanakunata hurqunapaq munasqa estilokuna waqaychaspa.

  1. <div clase = "paginación" >
  2. <ul> nisqa
  3. <li clase = "mana atiq" ><span> « </span></li> nisqa
  4. <li clase = "activo" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div> nisqa

Tamaños

¿Aswan hatunchu icha aswan huch’uy paginaciontachu munanki? Yapay .pagination-large, .pagination-small, icha .pagination-minihuk hatun sayaykunapaq.

  1. <div class = "p'anqa p'anqa-hatun" >
  2. <ul> nisqa
  3. ...
  4. </ul>
  5. </div> nisqa
  6. <div clase = "paginación" >
  7. <ul> nisqa
  8. ...
  9. </ul>
  10. </div> nisqa
  11. <div class = "p'anqa p'anqa-huch'uy" >
  12. <ul> nisqa
  13. ...
  14. </ul>
  15. </div> nisqa
  16. <div clase = "p'anqakuna pagina-mini" >
  17. <ul> nisqa
  18. ...
  19. </ul>
  20. </div> nisqa

Alineación

Iskay akllana clasekunamanta huknin yapay paginakuna t'inkikuna chiqanchayta tikranaykipaq: .pagination-centeredchaymanta .pagination-right.

  1. <div class = "p'anqa p'anqakuna-chawpi" >
  2. ...
  3. </div> nisqa
  1. <div class = "paginación pagina-allin" >
  2. ...
  3. </div> nisqa

Pager nisqa

Utqaylla ñawpaq chaymanta qatiq t'inkikuna sasan pagina ruwanakuna k'anchay markawan chaymanta estilokunawan. Allinmi kanman sasan sitiokunapaq blogkuna utaq revistakuna hina.

Ejemplo predeterminado

Ñawpaqmanta, pagerqa t'inkikunata chawpichan.

  1. <ul clase = "pager" >
  2. <li><a href = "#" > Ñawpaq </a></li>
  3. <li><a href = "#" > Qatiqnin </a></li>
  4. </ul>

T'inkikuna chiqanchasqa

Hukninpiqa, sapa t'inkita kinraykunaman chiqanchayta atinki:

  1. <ul clase = "pager" >
  2. <li clase = "ñawpaq" >
  3. <a href = "#" > &Qhichwa simipi; Kuraq </a>
  4. </li>
  5. <li clase = "qhipa" >
  6. <a href = "#" > Aswan musuq → </a>
  7. </li>
  8. </ul>

Munasqa mana atiq estado

Pager t'inkikunapas paginamanta general .disabledutilidad claseta llamk'achinku.

  1. <ul clase = "pager" >
  2. <li class = "ñawpaq mana llamk'achisqa" >
  3. <a href = "#" > &Qhichwa simipi; Kuraq </a>
  4. </li>
  5. ...
  6. </ul>

Etiquetas

Etiquetas Markup
Ñawpaqchasqa <span class="label">Default</span>
Allinmi <span class="label label-success">Success</span>
Manchachiy <span class="label label-warning">Warning</span>
Chaniyuq <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverso <span class="label label-inverse">Inverse</span>

Insignias

Suti Qatina Markup
Ñawpaqchasqa 1. <span class="badge">1</span>
Allinmi 2. <span class="badge badge-success">2</span>
Manchachiy 4. <span class="badge badge-warning">4</span>
Chaniyuq 6. <span class="badge badge-important">6</span>
Info 8. <span class="badge badge-info">8</span>
Inverso 10. 10 <span class="badge badge-inverse">10</span>

Facilmente collapsible

Mana sasa ruwanapaq, etiquetakuna chaymanta insigniakunalla urmanqaku (CSS :emptyakllaq kaqnintakama) mayk'aq mana ima contenido ukhupi kanchu.

Unidad de héroe

Huk llamp'u, flexible componente sitioykipi llave contenidota rikuchinapaq. Allinta llamkan qhatuypi chaymanta contenido-llasaq sitiokunapi.

Allin p'unchaw, pacha!

Kayqa huk unidad heroe simple kaq, huk componente simple jumbotron-estilo kaqmanta waqyanapaq extra atención kaqmanta contenido utaq willakuy rikuchisqa kaqman.

Astawan yachaykunaykipaq

  1. <div clase = "huro-unidad" >
  2. <h1> Uma </h1>
  3. <p> Etiqueta </p>
  4. <p> nisqa
  5. <a clase = "btn btn-primaria btn-hatun" >
  6. Astawan yachaykunaykipaq
  7. </a>
  8. </p>
  9. </div> nisqa

P'anqap umalliqnin

Huk sanu shell hukpaq h1apropiadamente espaciota hawaman chaymanta segmentar secciones de contenido huk p'anqapi. Chayqa h1's default small, elementota hinallataq aswan huk componentekunata (yapasqa estilokunawan) llamk'achiyta atin.

  1. <div class = "p'anqa-umalliq" >
  2. <h1> Ejemplo p'anqa umalliq <small> Umapaq huch'uy qillqa </small></h1>
  3. </div> nisqa

Ñawpaqmanta churasqa uchuy qillqakuna

Ñawpaqmanta, Bootstrap kaqpa uchuy siq'inkuna ruwasqa kanku t'inkisqa siq'ikuna aswan pisi mañasqa markawan rikuchinapaq.

Altamente personalizable

Huk chhika yapasqa markawan, atikun ima laya HTML willayta yapayta imaynachus umalliqkuna, parrafokuna utaq botones huch'uy siq'ikunaman.

  • 300x200 nisqa

    Etiqueta de miniatura

    Cras justo odio, dapibus ac facilisis en, egestas eget quam. Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Nullam id dolor id nibh ultricies antawakuna ut id elit.

    Ruwana Ruwana

  • 300x200 nisqa

    Etiqueta de miniatura

    Cras justo odio, dapibus ac facilisis en, egestas eget quam. Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Nullam id dolor id nibh ultricies antawakuna ut id elit.

    Ruwana Ruwana

  • 300x200 nisqa

    Etiqueta de miniatura

    Cras justo odio, dapibus ac facilisis en, egestas eget quam. Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Nullam id dolor id nibh ultricies antawakuna ut id elit.

    Ruwana Ruwana

Por qué utilizar miniaturas

Uchuy qillqakuna (ñawpaq .media-gridv1.4 kaqkama) ancha allin kanku rejillas fotokuna utaq videokuna, siq'i maskana ruwaykuna, qhatu rurukuna, carteras chaymanta aswan achka kaqpaq. Chaykunaqa kanmanmi t'inkikuna utaq contenido estático.

Marcado simple, flexible nisqa

Huch'uy siq'i marcayqa sasan —hu ulmayqin yupay lielementokunawanpas tukuy ima necesitakun. Hinallataq super flexible kaq, ima laya contenidotapas huk chhika aswan marcasqallawan contenidoykikunata p'istuykunanpaq saqin.

Rejilla columna sayaykunata llamk'achin

Tukuyninpaq, uchuy siq'ikuna componente kunan kaq rejilla sistema clasekunata llamk'achin —hina .span2utaq .span3—huch'uy siq'i dimensiones kamachiypaq.

Markup

Ñawpaqta nisqanchis hina, huch’uy siq’ikunapaq necesario marcasqa llamp’u hinallataq chiqanmi. Kaypi huk qhaway t'inkisqa siq'ikunapaq ñawpaqmanta churasqa :

  1. <ul clase = "huch'uy rikch'aqkuna" >
  2. <li clase = "span4" >
  3. <a href = "#" clase = "huch'uy rikch'aq" >
  4. <img data-src = "kamachiq.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Uchuy siq'ikunapi sapanchasqa HTML kaqpaq, markasqa pisita tikran. Maypipas bloque nivel contenidota saqinapaq, chayta <a>huk <div>hina chayhinata t'ikrayku:

  1. <ul clase = "huch'uy rikch'aqkuna" >
  2. <li clase = "span4" >
  3. <div clase = "huch'uy rikch'aq" >
  4. <img data-src = "kamachiq.js/300x200" alt = "" >
  5. <h3> Uchuy siq'i etiqueta </h3>
  6. <p> Uchuy qillqap qillqasqan... </p>
  7. </div> nisqa
  8. </li>
  9. ...
  10. </ul>

Aswan ejemplokuna

Llapan akllasqaykikunata maskay imaymana rejilla clasekuna qampaq kaqkunawan. Hinallataqmi hukniray sayaykunata chaqruspa tupachiyta atinki.

Ñawpaqmanta churasqa willakuy

Ima qillqatapas chaymanta huk akllana qarquy ñit'inata .alerthuk qallariy willay willaypaq willaypaq p'istuy.

Manchachiy! Best check yo self, mana ancha allintachu qhawarikunki.
  1. <div clase = "alerta" >
  2. <botón laya = "botón" clase = "wichqay" data-dismiss = "alerta" > × </boton> nisqa
  3. <strong> ¡Advertencia! </strong> Aswan allin qhaway yo kikiyki, mana ancha allintachu qhawarikunki.
  4. </div> nisqa

Despedir botones

Mobile Safari chaymanta Mobile Opera maskaqkuna, data-dismiss="alert"atributomanta yapasqa, huk etiquetata href="#"llamk'achkaspa alertakuna qarqusqa kananpaq mañanku.<a>

  1. <a href = "#" clase = "wichqay" willay-qarquy = "willakuy" > × </a>

Hukninpi, huk <button>elementota willay atributo kaqwan llamk'achiy atikunki, mayqinchus docsniykupaq ruwayta akllasqayku. , llamk’achkaspaqa <button>, churanayki tiyan type="button"mana chayqa formularioykikuna mana apachiyta atinkuchu.

  1. <botón laya = "botón" clase = "wichqay" data-dismiss = "alerta" > × </boton> nisqa

JavaScript nisqawan willakuykunata qarquy

Utilizar alertas jQuery plugin usqhaylla chaymanta mana sasachu alertas qarqunapaq.


Akllanakuna

Aswan unay willakuykunapaq, alerta p'istupa hawanpi chaymanta urayninpi acolchado yapay yapaspa .alert-block.

Manchachiy!

Best check yo self, mana ancha allintachu qhawarikunki. Nulla vitae elit libero, huk pharetra augue. Praesent commodo cursus magna, vel escelerisco nisqa nisl nisqa consectetur nisqa.

  1. <div clase = "alerta alerta-bloqueo" >
  2. <botón laya = "botón" clase = "wichqay" data-dismiss = "alerta" > × </boton> nisqa
  3. <h4> ¡Advertencia! </h4>
  4. Mejor revisa yo self, no eres...
  5. </div> nisqa

Alternativas contextuales nisqa

Akllana clasekunata yapay huk willaypa connotacionninta tikranaykipaq.

Pantasqa utaq peligro

¡Ay snap! Huk iskay kimsa imakunata tikray hinaspa hukmanta apachiyta kallpanchakuy.
  1. <div class = "alerta alerta-pantasqa" >
  2. ...
  3. </div> nisqa

Allinmi

Allinmi! Kay importante alerta mensajeta allinta leerqanki.
  1. <div class = "alerta-alerta-allin" >
  2. ...
  3. </div> nisqa

Willakuy

¡Umakuna wichayman! Kay alerta necesitan atenciónniyki, ichaqa manan super importantechu.
  1. <div class = "willakuy willay-willakuy" >
  2. ...
  3. </div> nisqa

Ejemplos y marcado

Qallariq

Sayaq gradiente nisqawan ñawpaqmanta churasqa ñawpaqman puriy barra.

  1. <div clase = "awpaqman puriy" >
  2. <div clase = "barra" estilo = " ancho : 60 %; " ></div>
  3. </div> nisqa

Rayado

Gradiente nisqawanmi huk rayayuq efectota ruwan. Mana IE7-8 kaqpi tarikunchu.

  1. <div class = "awpaqman puriy-rayasqa" >
  2. <div clase = "barra" estilo = " ancho : 20 %; " ></div>
  3. </div> nisqa

Animado

Yanapay .activea .progress-stripedpara animar las rayas derecha a izquierda. Mana tukuy IE kaqpa layakunapi kanchu.

  1. <div class = "awpaqman puriy-rayasqa llamk'aq" >
  2. <div clase = "barra" estilo = " ancho : 40 %; " ></div>
  3. </div> nisqa

Apilasqa

Achka barrakunata hukllaman churay, .progresschaykunata pilanapaq.

  1. <div clase = "awpaqman puriy" >
  2. <div clase = "bar bar-success" estilo = " ancho : 35 %; " ></div>
  3. <div clase = "barra barra-advertencia" estilo = " ancho : 20 %; " ></div>
  4. <div clase = "barra barra-peligro" estilo = " ancho : 10 %; " ></div>
  5. </div> nisqa

Akllanakuna

Colores adicionales

Progreso barrakuna wakin kikin ñit'inata llamk'achinku chaymanta alerta clasekunata sapanchasqa estilokunapaq.

  1. <div class = "awpaqman puriy-willakuy" >
  2. <div clase = "barra" estilo = " ancho : 20 % " ></div>
  3. </div> nisqa
  4. <div class = "awpaqman puriy-allin" >
  5. <div clase = "barra" estilo = " ancho : 40 % " ></div>
  6. </div> nisqa
  7. <div class = "awpaqman puriy-willakuy" >
  8. <div clase = "barra" estilo = " ancho : 60 % " ></div>
  9. </div> nisqa
  10. <div class = "awpaqman puriy-peligro" >
  11. <div clase = "barra" estilo = " ancho : 80 % " ></div>
  12. </div> nisqa

Barras rayadas

Sólido colores nisqaman rikchakuq, imaymana rayayuq progreso barrakunatam kapuwanchik.

  1. <div class = "awpaqman puriy-willakuy ñawpaqman-rayasqa" >
  2. <div clase = "barra" estilo = " ancho : 20 % " ></div>
  3. </div> nisqa
  4. <div class = "awpaqman puriy-allin ñawpaqman puriy-rayasqa" >
  5. <div clase = "barra" estilo = " ancho : 40 % " ></div>
  6. </div> nisqa
  7. <div class = "awpaqman puriy-willakuy ñawpaqman puriy-rayasqa" >
  8. <div clase = "barra" estilo = " ancho : 60 % " ></div>
  9. </div> nisqa
  10. <div class = "awpaqman puriy-peligro ñawpaqman puriy-rayasqa" >
  11. <div clase = "barra" estilo = " ancho : 80 % " ></div>
  12. </div> nisqa

Navegadorpa yanapakuynin

Progreso barrakuna CSS3 gradientekuna, tikraykunata, chaymanta animacionkunata llamk'achinku llapa efectosninkuta aypanankupaq. Kay ruwanakuna mana yanapasqachu IE7-9 utaq ñawpaq Firefox kaqpi.

Internet Explorer 10 kaqmanta chaymanta Opera 12 kaqmanta ñawpaq kaq layakuna mana animacionkunata yanapanchu.

Abstracto objeto estilokuna imaymana laya componentekuna ruwanapaq (imayna blog comentarios, Tweets, hukkuna) chaymanta huk lluq'i- utaq paña-alineado siq'ita qillqa contenidowan kuska rikuchin.

Ejemplo predeterminado

Ñawpaqmanta willay mast'ariq huk willay mast'ariy imayay (siq'ikuna, video, uyarina) huk willay bloquepa lluq'i utaq paña kaqman yakupi purichiyta saqin.

64x64 nisqa

Medios de comunicación nisqap umalliqnin

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.
64x64 nisqa

Medios de comunicación nisqap umalliqnin

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.
64x64 nisqa

Medios de comunicación nisqap umalliqnin

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.
  1. <div clase = "media" >
  2. <a clase = "aysay-lluq'i" href = "#" >
  3. <img clase = "media-objeto" datos-src = "holder.js/64x64" >
  4. </a>
  5. <div clase = "media-cuerpo" >
  6. <h4 class = "media-heading" > Willaypa umalliqnin </h4>
  7. ...
  8.  
  9. <!-- Anidado medios objeto -->
  10. <div clase = "media" >
  11. ...
  12. </div> nisqa
  13. </div> nisqa
  14. </div> nisqa

Lista de medios de comunicación

Huk chhika yapasqa markawan, lista ukhupi willaykunata llamk'achiy atikunki (allin rimay q'ipikuna utaq qillqakuna listakuna).

  • 64x64 nisqa

    Medios de comunicación nisqap umalliqnin

    Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis.

    64x64 nisqa

    Anidado medios de comunicación umalliq

    Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis.
    64x64 nisqa

    Anidado medios de comunicación umalliq

    Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis.
    64x64 nisqa

    Anidado medios de comunicación umalliq

    Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis.
  • 64x64 nisqa

    Medios de comunicación nisqap umalliqnin

    Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis.
  1. <ul clase = "willakuy-lista" >
  2. <li clase = "media" >
  3. <a clase = "aysay-lluq'i" href = "#" >
  4. <img clase = "media-objeto" datos-src = "holder.js/64x64" >
  5. </a>
  6. <div clase = "media-cuerpo" >
  7. <h4 class = "media-heading" > Willaypa umalliqnin </h4>
  8. ...
  9.  
  10. <!-- Anidado medios objeto -->
  11. <div clase = "media" >
  12. ...
  13. </div> nisqa
  14. </div> nisqa
  15. </li>
  16. </ul>

Pukyukuna

Pukyuta huk elementopi huk sanu efectota hina llamk'achiy, huk inserto efectota qunaykipaq.

¡Qhawariy, huk pukyupin kashani!
  1. <div clase = "allin" >
  2. ...
  3. </div> nisqa

Clases opcionales nisqa

Control acolchado chaymanta k'uchukuna muyuchisqa iskay clase modificador opcional kaqwan.

¡Qhawariy, huk pukyupin kashani!
  1. <div class = "allin allin-hatun" >
  2. ...
  3. </div> nisqa
¡Qhawariy, huk pukyupin kashani!
  1. <div class = "allin allin-huch'uy" >
  2. ...
  3. </div> nisqa

Cerrar icono

Genérico wichq'ana icono llamk'achiy contenidota modales hina chaymanta alertas hina qarqunapaq.

  1. <botón clase = "wichqay" > × </boton> nisqa

iOS dispositivokuna huk href="#"ñit'iy ruwaykunapaq munanku sichus huk ancla llamk'achiyta munanki.

  1. <a clase = "wichqay" href = "#" > &kutikuna; </a>

Yanapakuq clasekuna

Sasan, enfocado clasekuna huch'uy qhawaypaq utaq comportamiento tweaks kaqpaq.

.aysay-lluq'i

Huk elementota lluq’iman wayt’ay

  1. clase = "aysay-lluq'i".
  1. . aysay - lluq'i { .
  2. float : lluq'i ;
  3. } .

.aysay-allin

Flota un elemento derecho

  1. clase = "aysay-alliq".
  1. . aysay - paña { .
  2. float : paña ;
  3. } .

.upallachisqa

Huk elementopa llimp'inta kayman tikray#999

  1. clase = "upallachisqa".
  1. . upallachisqa { .
  2. llimp'i : #999;
  3. } .

.ch'uyanchana

Ch’uyanchana chay floaten cualquier elemento

  1. class = "ch'uyanchasqa".
  1. . chuya allichay { .
  2. * hatunyachiy : 1 ;
  3. &: ñawpaq , .
  4. &: qhipaman { .
  5. qhaway : tabla ;
  6. contenido : "" ;
  7. } .
  8. &: qhipaman { .
  9. sut'i : iskaynin ;
  10. } .
  11. } .