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:

<div clase = "btn-huñu" > 
  <botón clase = "btn" > 1 </botón> 
  <botón clase = "btn" > 2 </botón> 
  <botón clase = "btn" > 3 </botón> 
</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.

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

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.

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

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.

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.

<div clase = "btn-huñu" > 
  ...
  <ul class = "uraq-menú aysana-alliq" > 
    <!-- urayk'aq menú t'inkikuna -->
  </ul>
</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.

<div clase = "btn-huñu" > 
  <button class = "btn" > Ruway </button> 
  <button class = "btn urayk'aq-t'ikray" data-t'ikray = "uraq" >  
    <span clase = "caret" ></span> 
  </boton> nisqa
  <ul clase = "uraq-menú" > 
    <!-- urayk'aq menú t'inkikuna -->
  </ul>
</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.

<div clase = "btn-qutu urmachiy" > 
  <button class = "btn" > Urmachiy </button> 
  <button class = "btn urayk'aq-t'ikray" data-t'ikray = "uraq" >  
    <span clase = "caret" ></span> 
  </boton> nisqa
  <ul clase = "uraq-menú" > 
    <!-- urayk'aq menú t'inkikuna -->
  </ul>
</div> nisqa

Poderoso clase de base

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

Hayk’aqtaq apaykachana

Pestañas chaymanta pastillas ancha allin kanku secciones de contenido kaqpaq utaq puriypaq p'anqakuna ukhupi contenido relacionado kaqmanta.

Alineación de componentes nisqa

Nav t'inkikunata chiqanchanaykipaq, .pull-leftutaq .pull-rightyanapakuy clasekunata llamk'achiy. Iskaynin clasekuna huk CSS float nisqa yapanqa chay nisqa ñanpi.

Pestañas básicas

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

• Wasi
• Runapa kaynin
• Willakuykuna

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

• Wasi
• Runapa kaynin
• Willakuykuna

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

Imaynatataq pilar 'em

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

Pestañas apiladas

• Wasi
• Runapa kaynin
• Willakuykuna

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

Pastillas apiladas

• Wasi
• Runapa kaynin
• Willakuykuna

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

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

• Wasi
• Yanapay
• Urmachiy
  • Ruwana
  • Huk ruway
  • Huk imapas kaypi
  • T'aqasqa t'inki

<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

• Wasi
• Yanapay
• Urmachiy
  • Ruwana
  • Huk ruway
  • Huk imapas kaypi
  • T'aqasqa t'inki

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

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.

Divisores horizontales nisqa

Huk horizontal rakiqta yapay huk ch'usaq lista elementota ruwaspa clasewan .divider, kayhina:

<ul clase = "nav nav-lista" > 
  ...
  <li clase = "rakiq" </li> 
  ...
</ul>

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>

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.

Desvanecer en tablas

Pestañakuna chinkananpaqqa, .fadesapakamaman yapay .tab-pane.

jQuery plugin nisqatam munan

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

Javascript nisqamanta hurquy →

Ejemplo de tabla

Pestañakuna tablakuna ruwanapaq, .tab-panesapa tablapaq huk sapalla ID kaqwan ruway chaymanta .tab-content.

Paña icha lluq'i chiqanchasqa tablakunapaq, .nav-tabschaymanta .tab-contentnisqapi p'istuy .tabbable.

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 class = "tabbable" > <!-- Lluq'i/alliq tablakunallapaqmi mañasqa -->  
  <ul clase = "nav nav-tabs" > 
    <li class = "activo" ><a href = "#tab1" data-toggle = "tab" > 1 kaq raki </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 2 kaq t'aqa </a></li>  
  </ul>
  <div clase = "pistaña-contenido" > 
    <div clase = "pestaña-panel activo" id = "tab1" >  
      <p> 1 kaq rakipi kachkani. </p>
    </div> nisqa
    <div clase = "pestaña-panel" id = "tab2" >  
      <p> Howdy, 2 rakipi kachkani. </p>
    </div> nisqa
  </div> nisqa
</div> nisqa

Uraypi kaq tablakuna

HTMLpa ordenninta tikray hinaspa huk clase yapay urayninpi tablakunata churanaykipaq.

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

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

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

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 nisqa allichasqa

Navbarta qhawaypa hawanpi utaq urayninpi huk yapasqa clasewan aswan hawa div kaqpi allichay, .navbar.

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

<div class = "navbar navbar-uray-allinchasqa" > 
  ...
</div> nisqa

Navbarta churaptiykiqa, yuyariy urayninpi pakasqa kitimanta cuentata quyta. 40px utaq aswan acolchadota yapay chaymanta <body>. Aswan allinta kayta yapay chaymanta uma Bootstrap CSS kaqmanta chaymanta ñawpaq akllana kutichiq CSS kaqmanta.

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>

Formas en navbar

Navbar ukhupi huk formulariota allinta estilochanaykipaq chaymanta churanaykipaq, uraypi rikuchisqa hina tupaq clasekunata yapay. Huk ñawpaqmanta ruwasqa formulariopaq, churay .navbar-formchaymanta utaq .pull-leftutaq .pull-rightallinta chiqanchaypaq.

<forma clase = "navbar-forma aysana-lluq'i" > 
  <yaykusqa laya = "qillqa" clase = "span2" >  
</form> nisqa

Aswan ruwasqa maskana formulariopaq, yapay .navbar-searchchaymanta formchaymanta .search-queryyaykuchiyman especializada estilokuna navbar kaqpi.

<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

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>

Nav t'inkikunaykiman rakiqkunata mana sasachu yapayta atikunki huk ch'usaq lista elemento kaqwan chaymanta huk sanu clase kaqwan. Kayta t'inkikunapura yapaylla:

<ul clase = "nav" > 
  ...
  <li clase = "rakiq-sayaq" </li> 
  ...
</ul>

Alineación de componentes nisqa

Nav, maskana formulario utaq qillqata chiqanchanaykipaq, .pull-leftutaq .pull-rightyanapakuy clasekunata llamk'achiy. Iskaynin clasekuna huk CSS float nisqa yapanqa chay nisqa ñanpi.

Uraykaq menúkunata yapay

Nav kaqman urayk'aqkuna chaymanta 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 →

Navbar nisqapi qillqasqa

Qillqap watiqankunata huk <.navbar-text>, aswanta huk <p>etiquetapi p'istuy, allin umalliqpaq, llimp'ipaqpas.

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.

• Wasi

• Wasi / .
• Yachay taqi

• Wasi / .
• Biblioteca / .
• Willakuy

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" > Willaykuna </li> 
</ul>

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

• Ñawpaq
• Qatiq

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

• ← Kuraq
• Aswan musuq →

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

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

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

<div clase = "huro-unidad" > 
  <h1> Uma </h1>
  <p> Etiqueta </p>
  <p> nisqa
    <a clase = "btn btn-primaria btn-hatun" > 
      Astawan yachaykunaykipaq
    </a>
  </p>
</div> nisqa

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.

<div class = "p'anqa-umalliq" > 
  <h1> Ejemplo p'anqa umalliq </h1>
</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 :

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

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.

<div clase = "alerta" > 
  <button class = "wichqay" data-dismiss = "alerta" > × </button>  
  <strong> ¡Advertencia! </strong> Aswan allin qhaway yo kikiyki, mana ancha allintachu qhawarikunki.
</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.

<div clase = "alerta alerta-bloqueo" > 
  <a class = "wichqay" data-dismiss = "alerta" href = "#" > × </a>   
  <h4 class = "alerta-heading" > ¡Willakuy! </h4> 
  Mejor revisa yo self, no eres...
</div> nisqa

Pantasqa utaq peligro

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

Allinmi

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

Willakuy

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

Qallariq

Sayaq gradiente nisqawan ñawpaqmanta churasqa ñawpaqman puriy barra.

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

Rayado

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

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

Animado

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

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

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.

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

Cerrar icono

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

×

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

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

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