Componentes nisqakuna

Chunkakuna wakmanta llamk'achiy atikuq componentekuna Bootstrap kaqpi ruwasqa kanku puriyta, willaykunata, popovers chaymanta aswan achkata qunapaq.

Grupos de botones

Achka ñit'inakunata huk huñusqa componente hina hukllanapaq ñit'ina huñukunata llamk'achiy. Chaykunataqa huk serie <a>utaq <button>elementokunawan hatarichiy.

Allin ruwaykuna

Kay kamachiykunata yuyaychayku ñit'ina huñukuna chaymanta llamkanakuna llamk'achinapaq:

  • Huklla ñit'ina huñupi kikin elementota llamk'achiypuni, <a>icha <button>.
  • Ama huk boton huñupi hukniray llimp'iyuq botonkunata chaqruychu.
  • Qillqamanta yapasqa utaq rantinpi iconokunata llamk'achiy, ichaqa ama hina kaspa maypichus allin kanman chaypi alt chaymanta titulo qillqa churay.

Rimanakuy Botón qutukuna urayk'aqkunawan (urapi qhaway) sapanmanta waqyasqa kananku tiyan chaymanta sapa kuti huk urayk'aq caret churananku tiyan munasqa ruwayta rikuchinapaq.

Ejemplo predeterminado

Kaypi imayna HTML huk estándar ñit'ina huñuta ancla etiqueta ñit'inakunawan ruwasqa maskan:

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

Ejemplo de barra de herramientas

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

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 .

Javascript nisqamanta hurquy »

Botón qutukunapi urayk’aqkuna

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

Botón urayk’aqkuna

Resumen y ejemplos

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

Ejemplo de marcado

Huk ñit'ina huñuman rikch'akuq, markayku sapa kuti ñit'ina markayta llamk'achin, ichaqa huk maki yapasqakunawan estilota allinchaypaq chaymanta Bootstrap urayk'aq jQuery plugin yanapakuypaq.

  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. botónniykipa sayayninkunata .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. Chay chiqanchayta makiwan utaq sapanchasqa javascript kaqwan allichanayki tiyan.


Rakiy botón urayk’aqkuna

Resumen y ejemplos

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.

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. ...
  3. <ul class = "uraq-menú aysana-alliq" >
  4. <!-- urayk'aq menú t'inkikuna -->
  5. </ul>
  6. </div> nisqa

Ejemplo de marcado

Normal botón urayk'aqkunapi mast'ariyku iskay kaq botón ruwayta qunaykupaq mayqinchus sapaq urayk'aq gatillo hina llamk'an.

  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

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

Achka con-p'anqayuq paginakuna

Hayk’aqtaq apaykachana

Ultra simplista y mínimamente estilo paginación inspirada por Rdio, genial para apps y resultados de búsqueda. Hatun bloqueqa sasa pantaymi, facil escalable, hatun ñit'iy áreas nisqakunata qun.

Estadoyuq p'anqa t'inkikuna

T'inkikuna ruwanapaq kanku chaymanta llamk'anku huk yupay circunstanciakunapi allin clase kaqwan. .disabledmana ñit'iy atina t'inkikunapaq chaymanta .activekunan p'anqapaq.

Alineación flexible nisqa

Iskay akllana clasekunamanta mayqintapas yapay p'anqa t'inkikuna chiqanchayta tikranaykipaq: .pagination-centeredchaymanta .pagination-right.

Ejemplos

Ñawpaqmanta p'anqakuna componenteqa flexible kaqmi, achka tikraykunapi llamk'an.

Markup

Hukwan p'istuykusqa <div>, paginación nisqaqa huk <ul>.

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

Pager Utqaylla ñawpaq chaymanta qatiq t'inkikunapaq

Pager nisqamanta

Pager componente nisqaqa huk t'inkikuna huñun sasan pagina ruwanakuna k'anchay markawan chaymanta aswan k'anchariq estilokunawan. Allinmi kanman sasan sitiokunapaq blogkuna utaq revistakuna hina.

Munasqa mana atiq estado

Pager t'inkikunapas p'anqamanta general .disabledclase nisqatam llamk'achinku.

Ejemplo predeterminado

Ñawpaqmanta, pagerqa t'inkikunata chawpichan.

  1. <ul clase = "pager" >
  2. <li> nisqa
  3. <a href = "#" > Ñawpaq </a>
  4. </li>
  5. <li> nisqa
  6. <a href = "#" > Qatiqnin </a>
  7. </li>
  8. </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>
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>

Sobre

Insigniakunaqa huk rikch'aq rikuchiqta icha yupayta rikuchinapaq huch'uy, sasan componentekunam. Paykunaqa sapa kuti tarikunku correo electrónico clientekunapi Mail.app hina utaq kuyuchina ruwanakunapi tanqay willakuykunapaq.

Clases nisqakuna tarikuq

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>

Unidad de héroe

Bootstrap huk llampu, flexible componente qun huk unidad heroe sutiyuqta sitioykipi contenidota rikuchinapaq. Allinta llamkan qhatuypi chaymanta contenido-llasaq sitiokunapi.

Markup

Envolve tu contenido en un divlike así:

  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

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

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

  • 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

  • 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.

Chay marcasqa

Ñ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 = "span3" >
  3. <a href = "#" clase = "huch'uy rikch'aq" >
  4. <img src = "https://qu.wix.com/260x180" 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 = "span3" >
  3. <div clase = "huch'uy rikch'aq" >
  4. <img src = "https://qu.wix.com/260x180" alt = "" >
  5. <h5> Uchuy siq'i etiqueta </h5>
  6. <p> Kaypipuni 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.

Llampu ñawpaqmanta churasqakuna

Clase base kaqmanta qillqasqa

Bootstrap 2 kaqwan, sapsi claseta pisiyachirqayku .alert: .alert-message. Hinallataq pisiyachirqayku aswan pisi mañasqa markayta —mana <p>ñawpaqmanta mañasqa, hawa kaqlla <div>.

Huklla willakuy willakuy

Aswan unaypaq componente kaqpaq aswan pisi codigo kaqwan, diferenciador qhawayta bloque alertas kaqpaq, willakuykunata aswan relleno kaqwan chaymanta típicamente aswan qillqawan hamuqkunata hurqurqayku. Chay clasepas cambiarunñam .alert-block.


Javascriptwan ancha allinta rin

Bootstrap huk hatun jQuery plugin kaqwan hamun chaymanta willay willaykunata yanapan, chaymanta chaykunata qarquy utqaylla chaymanta mana sasachu ruwan.

Pluginta hap'iy »

Ejemplo de alertas

Envolve tu mensaje y un icono de cierre opcional en un div con clase simple.

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

¡Umakuna wichayman! iOS dispositivokuna huk href="#"alertakuna qarqusqa kananpaq mañanku. Aswan allinta chayta chaymanta willay atributo ancla wichq'ana iconokunapaq churay. 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.

Mana sasachu mast'ariy willayta estándar willayta iskay akllana clasekunawan: .alert-blockaswan relleno kaqpaq chaymanta qillqa kamachiykunapaq chaymanta .alert-headinghuk tupachisqa umalliqpaq.

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. <a class = "wichqay" data-dismiss = "alerta" href = "#" > × </a>
  3. <h4 class = "alerta-heading" > ¡Willakuy! </h4>
  4. Mejor revisa yo self, no eres...
  5. </div> nisqa

Contextual alternativakuna Akllana clasekunata yapay huk alertapa 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".
  3. estilo = " ancho : 60 %; " ></div>
  4. </div> nisqa

Rayado

Gradiente nisqatam llamk'achin huk rayayuq efectota ruranapaq (mana IE nisqayuq).

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

Animado

Toma el ejemplo rayado y lo anima (no IE).

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

Akllanakuna chaymanta navegador yanapakuy

Colores adicionales

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

Barras rayadas

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

Comportamiento

Ñawpaqman puriy barrakuna CSS3 tikraykunata llamk'achinku, chayrayku sichus javascript kaqnintakama anchota dinamicamente allichanki, sumaqlla sayayninta tikranqa.

Sichus .activeclaseta llamk’achinki chayqa, .progress-stripedñawpaqman purinaykipaq barrakunayki lluq’imanta pañaman rayakunata kawsachinqa.

Navegadorpa yanapakuynin

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

Opera chaymanta IE mana kay pacha animacionkunata yanapanchu.

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

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 aswan huk ancla llamk'achinki.

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