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.

También puedes combinar conjuntos de <div class="btn-group">en un <div class="btn-toolbar">para proyectos más complejos.

Ejemplo de marcado

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

<div clase = "btn-huñu" > 
  <a clase = "btn" href = "#" > 1 </a>  
  <a clase = "btn" href = "#" > 2 </a>  
  <a clase = "btn" href = "#" > 3 </a>  
</div> nisqa

Hinallataq achka huñukunapaq huk yanapakuypa llikanwan:

<div clase = "btn-herramienta" > 
  <div clase = "btn-huñu" > 
    ...
  </div> nisqa
</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 »

Umakuna wichayman

Botón huñukunapaq CSS huk sapaq willañiqipi kachkan, button-groups.less.

Botón urayk’aqkuna

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.

<div clase = "btn-huñu" > 
  <a class = "btn urayk'achiq-t'ikray" data-toggle = "uraq" href = "#" >   
    Ruwana
    <span clase = "caret" ></span> 
  </a>
  <ul clase = "uraq-menú" > 
    <!-- urayk'aq menú t'inkikuna -->
  </ul>
</div> nisqa

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.

Ejemplo de marcado

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

<div clase = "btn-huñu" > 
  <a class = "btn" href = "#" > Ruway </a>  
  <a class = "btn urayk'achiq-t'ikray" data-toggle = "uraq" href = "#" >   
    <span clase = "caret" ></span> 
  </a>
  <ul clase = "uraq-menú" > 
    <!-- urayk'aq menú t'inkikuna -->
  </ul>
</div> nisqa

Llampu ñawpaqmanta churasqakuna Kikin marka, hukniray clasekuna

Poderoso clase de base

Llapan nav componentes kaypi —pestañas, pastillas chaymanta listas— kikin base marcado chaymanta estilokuna.nav clase kaqnintakama qunakunku.

Por qué lengüetas y pastillas

Bootstrap kaqpi pestañas chaymanta pastillas huk kaqpi ruwasqa kanku <ul>kikin HTML núcleo kaqwan, huk lista t'inkikuna kaqmanta. Intercambio entre fichas o pastillas con solo una clase.

Iskaynin akllanakuna ancha allin kanku sub-secciones kaqmanta contenido kaqpaq utaq puriypaq p'anqakunapura tinkisqa contenido kaqmanta.

Pestañas básicas

Toma un regular <ul>de enlaces y añade .nav-tabs:

<ul clase = "nav nav-tabs" > 
  <li clase = "activo" > 
    <a href = "#" > Wasi </a> 
  </li>
  <li><a href = "#" > ... </a></li> nisqa 
  <li><a href = "#" > ... </a></li> nisqa 
</ul>

Pastillas básicas

Chay kikin HTML nisqallata hap'iy, ichataq .nav-pillschaypa rantinpi llamk'achiy:

<ul clase = "nav nav-pastillas" > 
  <li clase = "activo" > 
    <a href = "#" > Wasi </a> 
  </li>
  <li><a href = "#" > ... </a></li> nisqa 
  <li><a href = "#" > ... </a></li> nisqa 
</ul>

Apilable Hacer lengüetas o pastillas verticales

Imaynatataq pilar 'em

Imaynachus tablakuna chaymanta pastillakuna horizontal kanku ñawpaqmanta, huk iskay kaq clasellata yapay, .nav-stacked, sayaqmanta pilasqa rikhurinankupaq.

Pestañas apiladas

<ul clase = "nav nav-tabs nav-pilado" > 
  ...
</ul>

Pastillas apiladas

<ul clase = "nav nav-pastillas nav-pilado" > 
  ...
</ul>

Urmachiykuna Ñawpaqchasqa nav componentes kaqpaq

Qhapaq menúkuna ruwasqa facil

Menús desplegable en pestañas de Bootstrap y pastillas son super fáciles y requieren solamente un poco de HTML extra y un plugin ligero jQuery.

Javascript p'anqaman uma kay Bootstrap kaqpi urayk'achiykuna qallariymanta docs ñawirinaykipaq.

Pestañas con desplegables

<ul clase = "nav nav-tabs" > 
  <li clase = "uraq" > 
    <a class = "uraq-tukuy". 
       data-toggle = "hukllachasqa".
       href = "#" >
        Urmachiy
        <b clase = "caret" ></b> 
      </a>
    <ul clase = "uraq-menú" > 
      <!-- t'inkikuna -->
    </ul>
  </li>
</ul>

Pastillas con caídas

<ul clase = "nav nav-pastillas" > 
  <li clase = "uraq" > 
    <a class = "uraq-tukuy". 
       data-toggle = "hukllachasqa".
       href = "#" >
        Urmachiy
        <b clase = "caret" ></b> 
      </a>
    <ul clase = "uraq-menú" > 
      <!-- t'inkikuna -->
    </ul>
  </li>
</ul>

Nav listakuna Sasa pilasqa navkuna ruway, lado barraspaq ancha allin

Aplicación-estilo puriy

Nav listakuna huk sanu chaymanta mana sasa ñanta qun qutukuna ruwanapaq nav t'inkikuna akllana umalliqkunawan. Paykunaqa aswan allin llamk'achisqa kanku lado barrakunapi imaynachus Finder OS X kaqpi.

Estructural kaqpi, paykuna kikin core nav estilokuna kaqpi ruwasqa kanku tablakuna chaymanta pastillakuna hina, chayrayku llamk'achiynin chaymanta ruwanakuna chiqan kanku.

Con iconos

Nav listakunapas iconokunawan equipayqa facilmi. Yanapakuy allin <i>etiqueta clasewan chaymanta churasqa kanki.

Ejemplo nav lista

Huk lista t'inkikuna hap'iy hinaspa yapay class="nav nav-list":

<ul clase = "nav nav-lista" > 
  <li clase = "nav-umalliq" > 
    Lista umalliq
  </li>
  <li clase = "activo" > 
    <a href = "#" > Wasi </a> 
  </li>
  <li> nisqa
    <a href = "#" > Qillqana wasi </a> 
  </li>
  ...
</ul>

Ejemplo con iconos

Kikin ejemplo, ichaqa <i>iconokunapaq etiquetakunawan.

<ul clase = "nav nav-lista" > 
  ...
  <li> nisqa
    <a href = "#" > nisqa 
      <i clase = "icono-libro" ></i> 
      Yachay taqi
    </a>
  </li>
  ...
</ul>

Tabbable nav Javascript nisqawan tablakunata kawsachiy

Imataq chaypi kachkan

Pestañakunayki kawsachiy huk sanu plugin kaqwan tablakuna kaqnintakama contenidokunapura tikranapaq. Bootstrap tablakuna tablakuna tawa estilokunapi tinkin: pata (ñawpaqmanta), paña, uray, chaymanta lluq'i.

Paykunapura tikrayqa facilmi chaymanta ancha pisi marcata tikrayllatam munan.

Ejemplo de tabla

Pestañakuna tablakuna ruwanapaq, .nav-tabshuk div nisqapi clase nisqawan p'istuy .tabbable.

Ñuqaqa 1 kaq rakipim kachkani.

Howdy, 2 kaq rakipim kachkani.

Ima up sipas, kayqa Sección 3.

Plugin de jQuery personalizado

Llapan tablakuna tablakuna llasaq jQuery pluginniykuwan kallpachasqa kanku. Aswan ñawiriy imayna tablakuna tablakuna kawsachiymanta javascript docs p'anqapi.

Javascript nisqamanta hurquy →

Chiqan marcasqa

Tabbable tablakuna llamk'achinapaq huk p'istu div, huk huñu tablakuna chaymanta huk huñu tablakuna paneles kaqmanta contenido kaqmanta munan.

<div clase = "tabba" > 
  <ul clase = "nav nav-tabs" > 
    <li class = "activo" ><a href = "#1" data-toggle = "tab" > 1 kaq raki </a></li>   
    <li><a href = "#2" data-toggle = "tab" > 2 kaq raki </a></li>  
  </ul>
  <div clase = "pistaña-contenido" > 
    <div clase = "pestaña-panel activo" id = "1" >  
      <p> 1 kaq rakipi kachkani. </p>
    </div> nisqa
    <div clase = "pestaña-panel" id = "2" >  
      <p> Howdy, 2 rakipi kachkani. </p>
    </div> nisqa
  </div> nisqa
</div> nisqa

Tabbable en cualquier dirección

Uraypi kaq tablakuna

HTMLpa ordenninta tikray hinaspa huk clase yapay urayninpi tablakunata churanaykipaq.

A rakipim kachkani.

Howdy, ñuqaqa Sección B nisqapi kachkani.

Ima up sipas, kayqa Sección C.

<div class = "pistaña tablakuna-urapi" > 
  <div clase = "pistaña-contenido" > 
    ...
  </div> nisqa
  <ul clase = "nav nav-tabs" > 
    ...
  </ul>
</div> nisqa

Pestañas en la izquierda

Claseta cambiay paña ladoman tablakunata churanaykipaq.

A rakipim kachkani.

Howdy, ñuqaqa Sección B nisqapi kachkani.

Ima up sipas, kayqa Sección C.

<div class = "pistaña tablakuna-ichuq" > 
  <ul clase = "nav nav-tabs" > 
    ...
  </ul>
  <div clase = "pistaña-contenido" > 
    ...
  </div> nisqa
</div> nisqa

Pestañas en la derecha

Claseta cambiay paña ladoman tablakunata churanaykipaq.

A rakipim kachkani.

Howdy, ñuqaqa Sección B nisqapi kachkani.

Ima up sipas, kayqa Sección C.

<div class = "pistaña tablakuna-alliq" > 
  <ul clase = "nav nav-tabs" > 
    ...
  </ul>
  <div clase = "pistaña-contenido" > 
    ...
  </div> nisqa
</div> nisqa

Ejemplo de navbar estático

Huk rikch'ana huk mana kuyusqa (mana pataman takyasqa) navbar kaqmanta proyecto sutiwan, puriywan chaymanta maskana formulariowan.

Andamio de Navbar

Navbar huk pisi divsllata munan allinta estructurananpaq estatico utaq takyasqa qhawaypaq.

<div clase = "navbar" > 
  <div clase = "navbar-ukhu" > 
    <div clase = "contenedor" > 
      ...
    </div> nisqa
  </div> nisqa
</div> nisqa

Navbar qhawaypa hawanpi takyasqa kananpaq, aswan .navbar-fixed-tophawa div kaqman yapay, .navbar. CSS kaqniykipi, chaymanta yupayta qunayki tiyan chaymanta chay llanthupa ruwasqanmanta yapaspayki padding-top: 40px;.<body>

<div clase = "navbar navbar-allisqa-pata" > 
  ...
</div> nisqa

Nombre de marca

Un enlace simple para mostrar tu nombre de marca o proyecto solo requiere una etiqueta de anclaje.

<a clase = "marka" href = "#" >  
  Nombre del proyecto
</a>

Formulario de búsqueda

Maskana formulariokuna sapanchasqa estilokunata chaskinku navbar kaqpi .navbar-searchclase kaqwan. Incluye .pull-lefto .pull-righten el formpara alinearlo.

<form class = "navbar-maskana aysana-lluq'i" > 
  <yaykusqa laya = "qillqa" clase = "maskana-tapukuy" sitioyuq = "Maskay" >   
</form> nisqa

Variación respuesta opcional nisqa

Hawa barraykipi mayk'a contenido kaqmanta, kutichiy akllanakunata ruwayta munankiman. Chaypaq, nav contenidoykita huk div, .nav-collapse.collapse, nisqayuq kaqpi p'istuy, chaymanta navbar tikray ñit'inata yapay, .btn-navbar.

<div clase = "navbar" > 
  <div clase = "navbar-ukhu" > 
    <div clase = "contenedor" > 
 
      <!-- .btn-navbar nisqaqa urmasqa navbar nisqap kaqninpaq tikray hinam llamk'achisqa -->
      <a clase = "btn btn-navbar" willay-t'ikray = "t'uqyachiy" willay-tarpuy = ".nav-t'uqyay" >   
        <span clase = "icon-bar" ></span> 
        <span clase = "icon-bar" ></span> 
        <span clase = "icon-bar" ></span> 
      </a>
 
      <!-- Aswan allinta saqiy chay markata chay hawapi sichus munanki rikuchisqa kananta -->
      <a class = "brand" href = "#" > Llamk'apuypa sutin </a>  
 
      <!-- Tukuy ima munasqayki pakasqa 940px utaq pisi kaqpi, kaypi ukhupi churay -->
      <div clase = "nav-ch'usaqyachiy" > 
        <!-- .nav, .navbar-maskana, .navbar-forma, hukkunapas -->
      </div> nisqa
 
    </div> nisqa
  </div> nisqa
</div> nisqa

¡Umakuna wichayman! Kutichiq navbar nisqaqa urmachiy plugin nisqatam munan .

Nav t'inkikuna

Nav elementokuna mana ordenasqa listakuna kaqnintakama yapanapaq sasa kanku.

<ul clase = "nav" > 
  <li clase = "activo" > 
    <a href = "#" > Wasi </a> 
  </li>
  <li><a href = "#" > T'inki </a></li> 
  <li><a href = "#" > T'inki </a></li> 
</ul>

Urmachiykunata yapay

Nav kaqman urayk'aqkuna yapayqa super simple kaq, ichaqa javascript pluginniyku llamk'ayta munan .

<ul clase = "nav" > 
  <li clase = "uraq" > 
    <a href = "#" nisqa. 
          class = "uraq-tukuy".
          data-toggle = "uraq" >
          Yupay
          <b clase = "caret" ></b> 
    </a>
    <ul clase = "uraq-menú" > 
      ...
    </ul>
  </li>
</ul>

Javascript nisqamanta hurquy →

Imaraykutaq chaykunata apaykachana

Breadcrumb puriy huk ñan hina llamk'achisqa maypi huk ruwana utaq huk sitio ukhupi kasqankuta rikuchinapaq, ichaqa mana ñawpaq purinapaqchu. Manténga su uso escaso y sucinto para ser más efectivo.

Ejemplos

Huklla rikch'ana rikuchisqa imaynachus achka p'anqakunapi rikuchikunman hina.

Markup

HTML nisqaqa t'inkikunayuq mana kamachisqa listayki estándar kaqmi.

<ul clase = "t'anta mikhuy" > 
  <li> nisqa
    <a href = "#" > Wasi </a> <span clase = "rakiq" > / </span>   
  </li>
  <li> nisqa
    <a href = "#" > Librería </a> <span clase = "rakiq" > / </span>   
  </li>
  <li clase = "activo" > 
    <a href = "#" > Willayta </a> 
  </li>
</ul>

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

<div clase = "paginación" > 
  <ul> nisqa
    <li><a href = "#" > Ñawpaq </a></li> 
    <li clase = "activo" > 
      <a href = "#" > 1 </a> nisqa 
    </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 = "#" > Qatiqnin </a></li> 
  </ul>
</div> nisqa

Pager Utqaylla ñawpaq chaymanta qatiq t'inkikunapaq

Pager nisqamanta

Componente pager nisqaqa huk t'inkikuna huñusqa sasan paginacion implementacionkunapaq k'anchay markawan chaymanta aswan k'anchariq estilokunawan. Allinmi kanman sasan sitiokunapaq blogkuna utaq revistakuna hina.

Ejemplo predeterminado

Ñawpaqmanta, pagerqa t'inkikunata chawpichan.

<ul clase = "pager" > 
  <li> nisqa
    <a href = "#" > Ñawpaq </a> 
  </li>
  <li> nisqa
    <a href = "#" > Qatiqnin </a> 
  </li>
</ul>

T'inkikuna chiqanchasqa

Hukninpiqa, sapa t'inkita kinraykunaman chiqanchayta atinki:

<ul clase = "pager" > 
  <li clase = "ñawpaq" > 
    <a href = "#" > &Qhichwa simipi; Kuraq </a> 
  </li>
  <li clase = "qhipa" > 
    <a href = "#" > Aswan musuq → </a> 
  </li>
</ul>

Etiquetas	Markup
Ñawpaqchasqa	`<span class="label">Default</span>`
Musuq	`<span class="label label-success">New</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>`

Ñ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 :

<ul clase = "huch'uy rikch'aqkuna" > 
  <li clase = "span3" > 
    <a href = "#" clase = "huch'uy rikch'aq" >  
      <img src = "https://qu.wix.com/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul clase = "huch'uy rikch'aqkuna" > 
  <li clase = "span3" > 
    <div clase = "huch'uy rikch'aq" > 
      <img src = "https://qu.wix.com/260x180" alt = "" >  
      <h5> Uchuy siq'i etiqueta </h5>
      <p> Kaypipuni uchuy qillqap qillqasqan... </p>
    </div> nisqa
  </li>
  ...
</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, hawalla <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.

<div clase = "alerta" > 
  <a clase = "wichqay" > × </a> 
  <strong> ¡Advertencia! </strong> Aswan allin qhaway yo kikiyki, mana ancha allintachu qhawarikunki.
</div> nisqa

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.

<div clase = "alerta alerta-bloqueo" > 
  <a clase = "wichqay" > × </a> 
  <h4 class = "alerta-heading" > ¡Willakuy! </h4> 
  Mejor revisa yo self, no eres...
</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.

<div class = "alerta alerta-pantasqa" > 
  ...
</div> nisqa

Allinmi

× Allinmi! Kay importante alerta mensajeta allinta leerqanki.

<div class = "alerta-alerta-allin" > 
  ...
</div> nisqa

Willakuy

× ¡Umakuna wichayman! Kay alerta necesitan atenciónniyki, ichaqa manan super importantechu.

<div class = "willakuy willay-willakuy" > 
  ...
</div> nisqa

Ejemplos y marcado

Qallariq

Sayaq gradiente nisqawan ñawpaqmanta churasqa ñawpaqman puriy barra.

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

Rayado

Gradiente nisqawanmi huk rayayuq efectota ruwan.

<div class = "awpaqman puriy-willakuy." 
     progreso-rayado" >
  <div clase = "barra". 
       estilo = " ancho : 20 %; " ></div> 
</div> nisqa

Animado

Toma el ejemplo rayado y lo anima.

<div class = "awpaqman puriy-peligro." 
     progreso-rayado activo" >
  <div clase = "barra". 
       estilo = " ancho : 40 %; " ></div> 
</div> nisqa

Akllanakuna chaymanta navegador yanapakuy

Colores adicionales

Progreso barrakuna wakin kikin clase sutikunata botones hina chaymanta alertas kaqlla estilopaq llamk'achinku.

.progress-info
.progress-success
.progress-danger

Hukninpi, LESS willañiqikunata ruwayta atinki chaymanta kikiyki llimp'ikunata chaymanta sayayniykikunata rollo ruwayta atinki.

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-8 utaq ñawpaq Firefox kaqpi.

Operaqa manam kay pacha animacionkunata yanapanchu.

Pukyukuna

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

¡Qhawariy, huk pukyupin kashani!

<div clase = "allin" > 
  ...
</div> nisqa

Insignias

Mana ñawirisqa yupaypaq icha sasan rikuchiq hina huk elementopi insignia llamk'achiy.

<span clase = "insignia" > 3 </div>

Cerrar icono

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

<a clase = "wichqay" > × </a>

Botón huñukuna Aswan llamkanakuna barra hina ruwanapaq ñit'inakunata hukllana

Grupos de botones

Ejemplo de marcado

Caja de verificación y sabores de radio

Umakuna wichayman

Botonkuna urayk'achiykuna Contextual urayk'aq menúkuna botón qutukunapi ruwasqa

Botón urayk’aqkuna

Ejemplo de marcado

Rakiy botón urayk’aqkuna

Ejemplo de marcado

Nav, tabs, y pastillas Navegación de estilo de lista altamente personalizable

Llampu ñawpaqmanta churasqakuna Kikin marka, hukniray clasekuna

Poderoso clase de base

Por qué lengüetas y pastillas

Pestañas básicas

Pastillas básicas

Apilable Hacer lengüetas o pastillas verticales

Imaynatataq pilar 'em

Pestañas apiladas

Pastillas apiladas

Urmachiykuna Ñawpaqchasqa nav componentes kaqpaq

Qhapaq menúkuna ruwasqa facil

Pestañas con desplegables

Pastillas con caídas

Nav listakuna Sasa pilasqa navkuna ruway, lado barraspaq ancha allin

Aplicación-estilo puriy

Con iconos

Ejemplo nav lista

Ejemplo con iconos

Tabbable nav Javascript nisqawan tablakunata kawsachiy

Imataq chaypi kachkan

Ejemplo de tabla

Plugin de jQuery personalizado

Chiqan marcasqa

Tabbable en cualquier dirección

Uraypi kaq tablakuna

Pestañas en la izquierda

Pestañas en la derecha

Navbar nisqa

Ejemplo de navbar estático

Andamio de Navbar

Nombre de marca

Formulario de búsqueda

Variación respuesta opcional nisqa

Nav t'inkikuna

Urmachiykunata yapay

T'antakuna

Imaraykutaq chaykunata apaykachana

Ejemplos

Markup

Paginación Iskay akllanakuna contenido nisqapi paginakuna ruwanapaq

Achka con-p'anqayuq paginakuna

Hayk’aqtaq apaykachana

Estadoyuq p'anqa t'inkikuna

Alineación flexible nisqa

Ejemplos

Markup

Pager Utqaylla ñawpaq chaymanta qatiq t'inkikunapaq

Pager nisqamanta

Ejemplo predeterminado

T'inkikuna chiqanchasqa

Etiquetas en línea Etiqueta y anotar texto

Huch'uylla siq'ikuna Rejillas de imágenes, videos, texto y más

Ñawpaqmanta churasqa uchuy qillqakuna

Altamente personalizable

Etiqueta de miniatura

Etiqueta de miniatura

Por qué utilizar miniaturas

Marcado simple, flexible nisqa

Rejilla columna sayaykunata llamk'achin

Chay marcasqa

Aswan ejemplokuna

Alertakuna Estilos allin kananpaq, willakuypaq chaymanta pantay willakuykunapaq

Llampu ñawpaqmanta churasqakuna

Clase base kaqmanta qillqasqa

Huklla willakuy willakuy

Javascriptwan ancha allinta rin

Ejemplo de alertas

Manchachiy!

Contextual alternativakuna Akllana clasekunata yapay huk alertapa connotacionninta tikranaykipaq