Correa de botas

Base CSS nisqa

Fundamental HTML elementokuna estilochasqa chaymanta mast'arikuq clasekunawan kallpachasqa.

Tipografía

Umakuna

Llapan HTML umalliqkuna, <h1>a través de <h6>están disponibles.

h1. Uma 1.1

h2. Umalliq 2

h3. Uma 3.1

h4. Uma 4.1

h5. Umalliq 5
h6. Uma 6

Copia del cuerpo

Bootstrappa tukuypaq ñawpaqmanta churasqanqa font-size14px , huk line-height20px kaqwan . Kayqa churakunmi <body>hinaspa llapan parrafokunapipas. Chaymantapas, <p>(paragrafokuna) huk uray margenta chaskinku kuskan chiru-alturankumanta (10px ñawpaqmanta).

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

Cum sociis natoque penatibus y magnis disparuriente montes, nascetur ridiculus mus nisqa. Donec ullamcorper nulla mana metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit nisqa. Donec ullamcorper nulla mana metus auctor fringilla.

Maecenas sed diam eget risus varius blandit tiyay amet mana magna. Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit nisqa.

<p> ... </p>

Copia de cuerpo de plomo

Huk parrafota aswan allinta qhawarichiy, chayta yapaspa .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor nisqa suministrador nisqa. Duis mollis, est mana imayuq.

<p clase = "pumaq" > ... </p>

Construido con Menos

Escala tipográfica nisqa iskay LESS variables nisqapi variables nisqapi sayasqa kachkan.less : @baseFontSizey @baseLineHeight. Ñawpaq kaqmi tukuyninpi llamk'achisqa base font-size iskay kaqtaq base line-height nisqa. Chay variablekuna chaymanta wakin sanu matemáticas kaqwan llamk'achiyku margenkuna, rellenokuna, chaymanta chiru-alturakuna tukuy layaykumanta chaymanta aswan ruwanapaq. Personalizarlos y Bootstrap adapta.

Niypuni

HTML kaqpa ñawpaqmanta churasqa enfasis etiquetakuna llamp'u estilokunawan llamk'achiy.

<small>

Inline utaq bloques de texto nisqakunata manaña enfatizanaykipaqqa, huch'uy etiquetata llamk'achiy.

Kay chiru qillqasqaqa sumaq qillqasqa hina qhawanapaqmi.

<p> <huch'uy> Kay chiru qillqaqa sumaq qillqasqa hina qhawanapaqmi. </small> </p>

Yanacha

Aswan llasa letra-llasaqwan huk qillqasqata aswanta kallpanchanapaq.

Kay qatiq qillqasqaqa yana qillqa hinam ruwasqa kachkan .

<strong> yana qillqa hina tikrasqa </strong>

Cursiva

Huk qillqasqata kursivawan aswanta kallpanchanapaq.

Kay qatiq qillqasqaqa kursivawan qillqasqa hinam ruwasqa kachkan .

<em> kursivawan qillqasqa hina tikrasqa </em>

¡Umakuna wichayman!Sientete libre de usar <b>y <i>en HTML5. <b>es destinado a resaltar palabras o frases sin transmitir importancia adicional mientras <i>que es mayormente para voz, términos técnicos, etc.

Clases de alineación

Qillqa chiqanchay clasekunawan componentekunaman mana sasachakuspa musuqmanta chiqanchay.

Lloq’eman chiqanchasqa qillqasqa.

Chawpi chiqanchasqa qillqasqa.

Paña chiqanchasqa qillqasqa.

  1. <p class = "text-left" > Lluq'iman chiqanchasqa qillqa. </p> 
  2. <p class = "text-center" > Chawpi chiqanchasqa qillqa. </p> 
  3. <p class = "text-right" > Paña chiqanchasqa qillqa. </p>

Clases de énfasis

Colorwan significadota apachiy huk makilla clases de utilidad de énfasis nisqawan.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh nisqa.

Etiam porta sem malesuada magna mollis euismod nisqamanta.

Donec ullamcorper nulla mana metus auctor fringilla.

Enean eu leo ​​quam. Pellentesco adorno sem lacinia quam venenatis nisqa.

Duis mollis, est mana commodo luctus, nisi erat porttitor ligula nisqa.

  1. <p clase = "upallachisqa" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "qillqa-willakuy" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "qillqa-pantasqa" > Donec ullamcorper nulla mana metus subasta fringilla. </p> 
  4. <p clase = "qillqa-willakuy" > Enean eu leo ​​quam. Pellentesco adorno sem lacinia quam venenatis nisqa. </p> 
  5. <p clase = "qillqa-allin" > Duis mollis, est mana commodo luctus, nisi erat porttitor ligula. </p>

Pisichasqa simikuna

HTML kaqpa <abbr>elementonpa estilizasqa ruwaynin pisichasqakuna chaymanta siglas kaqpaq mast'arisqa laya hover kaqpi rikuchinapaq. Huk layayuq pisichasqakuna titlehuk k'anchariq ch'ikuyuq uray fronterayuq chaymanta huk yanapakuy kursuta hover kaqpi, huk contexto hover kaqpi qun.

<abbr>

Huk pisichasqapa suni llamk'ayninpi mast'arisqa qillqapaq, titleatributota churay.

Atributo simip pisichasqanqa attr .

<abbr title = "atributo" > attr </abbr>

<abbr class="initialism">

.initialismAswan huch'uy qillqap sayayninpaq pisichasqa simiman yapay .

HTML nisqaqa t'anta phatmasqamanta pacha aswan allin kaqmi.

<abbr title = "HyperText Markup Simi" class = "qallarichiy" > HTML </abbr>

Direcciones

Aswan qaylla tayta mamapaq utaq llapa llamkaypa kurkunpaq rimanakuy willakuykunata riqsichiy.

<address>

Llapan chirukunata <br>.

795
Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 llankaymanta
Tukuy Suti
ñ[email protected] 
  1. <direccionnin>
  2.   <strong> Twitter, Inc. nisqamanta </strong><br>
  3.   795 Folsom Ave, Suite 600 nisqapi tiyaq runakuna
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefono" > P: </abbr> (123) 456-7890 nisqapi 
  6. </direccionnin>
  7.  
  8. <direccionnin>
  9.   <strong> Lliw Suti </strong><br>
  10.   <a href = "mailto:#" > ñ[email protected] </a> 
  11. </direccionnin>

Bloqueo nisqa

Qillqayki ukhupi huk pukyumanta bloquekuna contenidomanta citasqaykirayku.

Ñawpaqmanta churasqa bloqueo

<blockquote>Ima HTMLtapas cita hina p'istuy . Chiqan citakunapaqqa huk <p>.

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

  1. <bloqueo nisqa>
  2.   <p> Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante. </p>
  3. </blockquote> nisqa

Blockquote nisqa akllanakuna

Estilo chaymanta contenido tikraykuna huk blockquote estándar kaqpi sanu variaciones kaqpaq.

Huk pukyuta sutichay

<small>Pukyuta riqsichinapaq etiqueta yapay . Pukyu llamk'aypa sutinta <cite>.

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

Pipas riqsisqa Fuente Titulo nisqapi 
  1. <bloqueo nisqa>
  2.   <p> Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante. </p>
  3.   <small> Pipas riqsisqa <cite title = "Pukyupa Titulon" > Pukyupa Titulon </cite></small> 
  4. </blockquote> nisqa

Huk qhawarichiykuna

.pull-rightHuk unupi purisqa, pañaman chiqanchasqa bloquepaq llamk'achiy .

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

Pipas riqsisqa Fuente Titulo nisqapi 
  1. <blockquote clase = "aysay-alliq" > 
  2.   ...
  3. </blockquote> nisqa

Listakuna

Mana kamachisqa

Lista de artículos en los que el orden no importa explícitamente importa.

  • Lorem ipsum dolor tiyay amet
  • Consectetur adipiscing nisqa elit
  • Entero molestie lorem en massa
  • Facilisis en aliquet nisl de pretio nisqa
  • Nulla volutpat aliquam velit
    • Fasello iaculis nisqa neque nisqa
    • Purus sodales ultricas nisqa
    • Vestibulo laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean tiyay amet erat nunc
  • Eget porttitor lorem
  1. <ul> nisqa
  2.   <li> ... </li> nisqa
  3. </ul>

Kamachisqa

Lista de artículos en los que el orden hace explícitamente importa.

  1. Lorem ipsum dolor tiyay amet
  2. Consectetur adipiscing nisqa elit
  3. Entero molestie lorem en massa
  4. Facilisis en aliquet nisl de pretio nisqa
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean tiyay amet erat nunc
  8. Eget porttitor lorem
  1. <ol> nisqa
  2.   <li> ... </li> nisqa
  3. </ol> nisqa

Mana estiloyuq

Lista elementokunapi ñawpaqmanta chaymanta lluq'i acolchadota hurquy list-style(chaylla wawakunalla).

  • Lorem ipsum dolor tiyay amet
  • Consectetur adipiscing nisqa elit
  • Entero molestie lorem en massa
  • Facilisis en aliquet nisl de pretio nisqa
  • Nulla volutpat aliquam velit
    • Fasello iaculis nisqa neque nisqa
    • Purus sodales ultricas nisqa
    • Vestibulo laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean tiyay amet erat nunc
  • Eget porttitor lorem
  1. <ul clase = "mana estiloyuq" > 
  2.   <li> ... </li> nisqa
  3. </ul>

Inline

Llapan lista kaqkunata huk chirullapi churay inline-blockchaymanta wakin k’anchay acolchado kaqwan.

  • Lorem ipsum
  • Fasello iaculis nisqa
  • Nulla volutpat
  1. <ul clase = "inline" > 
  2.   <li> ... </li> nisqa
  3. </ul>

Willay

Huk lista términokuna chaywan tupaq willakuykunawan.

Listas de descripción
Huk sut'inchay listaqa allinmi términokunata sut'inchanapaq.
Euismod nisqa
Vestibulo id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit mana mi porta gravida nisqapi eget metus nisqapi.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod nisqamanta. 
  1. <dl> nisqa
  2.   <dt> ... </dt> nisqa
  3.   <dd> ... </dd> nisqa
  4. </dl> nisqa

Descripción horizontal

Términos y descripciones en <dl>filapi lado-lado ruway.

Listas de descripción
Huk sut'inchay listaqa allinmi términokunata sut'inchanapaq.
Euismod nisqa
Vestibulo id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit mana mi porta gravida nisqapi eget metus nisqapi.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod nisqamanta.
Felis euismod semper eget lacinia nisqa
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum masa justo tiyay amet risus. 
  1. <dl clase = "dl-horizontal" > 
  2.   <dt> ... </dt> nisqa
  3.   <dd> ... </dd> nisqa
  4. </dl> nisqa

¡Umakuna wichayman!Horizontal sut'inchay listakunaqa ancha hatun términokunatam kuchunqa , paña columna allichaypi mana churanapaq text-overflow. Aswan k'iti qhawanakunapi, ñawpaqmanta churasqa pilasqa churanaman tikranqanku.

Código

Inline

Chiru ukhupi chirusqakunata <code>.

Ejemplopaq, <section>inline hinam wankusqa kanan. 
  1. Ejemplopaq , < code> & lt ; t'aqa & gt ;</ code > nisqataqa chiru ukhupi hinam p'istuykusqa kanan .

Bloque básico

<pre>Achka chiru qillqakunapaq llamk'achiy . Aswan allinta ruwanapaq ima k'uchu corchetekunamantapas codigopi ayqiy.

<p>Kaypi qillqasqata rikuchiy...</p>
  1. <pre> nisqa
  2.   <p>Kaypi qillqasqata rikuchiy...</p>
  3. </pre> nisqa

¡Umakuna wichayman!Aswan allinta <pre>etiquetakuna ukhupi codigota waqaychay aswan qayllamanta lluq'i kaqman; chaymi llapa tablakunata ruwanqa.

Munasqaykimanhina claseta yapayta atinki .pre-scrollablemayqinchus huk max-altura 350px kaqmanta churanqa chaymanta huk y-eje barra de desplazamiento qunqa.

Tablas

Ñawpaqmanta churasqa estilokuna

Estilo básico kaqpaq —k'anchay acolchado kaqpaq chaymanta horizontal rakiqkunallapaq— yapay clase base .tablekaqmanta mayqin kaqmanpas <table>.

# . Ñawpa suti Taytamama suti Nombre de usuario
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay Pisqu @twitter nisqapi 
  1. <tabla clase = "tabla" > 
  2.   ...
  3. </tabla> nisqa

Clases opcionales nisqa

Kay qatiq clasekunamanta mayqintapas yapay chay .tablebase claseman.

.table-striped

Zebra-striping mayqin tabla filamanpas yapan chaymanta <tbody>via :nth-childCSS akllaq (mana IE7-8 kaqpi kanchu).

# . Ñawpa suti Taytamama suti Nombre de usuario
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay Pisqu @twitter nisqapi 
  1. <tabla clase = "tabla tabla-rayado" > 
  2.   ...
  3. </tabla> nisqa

.table-bordered

Mesaman bordekunata, muyu k’uchukunata ima yapay.

# . Ñawpa suti Taytamama suti Nombre de usuario
1. Marcos Otto @mdo nisqa
Marcos Otto @getbootstrap nisqamanta
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi 
  1. <tabla clase = "tabla tabla-frontera" > 
  2.   ...
  3. </tabla> nisqa

.table-hover

Huk <tbody>.

# . Ñawpa suti Taytamama suti Nombre de usuario
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi 
  1. <tabla clase = "tabla tabla-hover" > 
  2.   ...
  3. </tabla> nisqa

.table-condensed

Mesakunata aswan compacta ruwan, celda acolchadota kuskanman kuchuspa.

# . Ñawpa suti Taytamama suti Nombre de usuario
1. Marcos Otto @mdo nisqa
2. Jacob Thornton sutiyuq @wira
3. Larry chay P'isqu @twitter nisqapi 
  1. <tabla clase = "tabla tabla-condensada" > 
  2.   ...
  3. </tabla> nisqa

Clases de fila opcionales

Tabla filakunata llimp’inapaq contextual clasekunata llamk’achiy.

Yachakuna Willay
.success Allin ruwasqa utaq allin ruwasqa kasqanmantam qawachin.
.error Peligroso otaq mana allin ruway kasqanmantan willan.
.warning Huk advertenciatam qawachin, chay willakuyqa allintam qawana kanman.
.info Ñawpaqmanta churasqa estilokunaman huk alternativa hina llamk'achisqa.
# . Ruru Pago Tomado Imayna kaynin
1. TB - Killamanta 01/04/2012 watapi Uyakusqa
2. TB - Killamanta 02/04/2012 watapi Mana munasqa
3. TB - Killamanta 03/04/2012 watapi Kaqraq
4. TB - Killamanta 04/04/2012 watapi Llama en para confirmar 
  1. ...
  2.   < tr clase = "allin ruway" >
  3.     <td> 1 < /td> nisqa
  4.     <td>TB - Killamanta</ td >
  5.     <td> 01 / 04 / 2012 watapi < /td>
  6.     <td>Aprobasqa</ td >
  7.   </ tr > nisqa
  8. ...

Yanapasqa tabla marcado

Lista yanapasqa tabla HTML elementokuna chaymanta imayna llamk'achinan tiyan.

Sutichaq Willay
<table> Tabla nisqapi willakuykunata qawachinapaq elemento de envoltura
<thead> Tabla umalliq filakuna ( <tr>) nisqapaq waqaychana elemento tabla columnakunata etiquetananpaq
<tbody> Tablapa kurkunpi tabla filakunapaq ( <tr>) elemento contenedor
<tr> Huk filapi rikuriq tabla celdakunap huñunpaq ( <td>icha ) waqaychana elemento<th>
<td> Ñawpaqmanta churasqa tabla celda
<th> Sapaq tabla celda columnapaq (utaq fila, alcancemanta chaymanta churasqamanta) etiquetakunapaq
<caption> Descripción utaq resumen imakuna tabla hap'in, aswanta pantalla ñawiriqkunapaq allin 
  1. <mesa> nisqa
  2.   <caption> ... </caption> nisqa
  3.   <uma>
  4.     <tr> nisqa
  5.       <th> ... </th> nisqa
  6.       <th> ... </th> nisqa
  7.     </tr>
  8.   </thead> nisqa
  9.   <cuerpo> nisqa
  10.     <tr> nisqa
  11.       <td> ... </td> nisqa
  12.       <td> ... </td> nisqa
  13.     </tr>
  14.   </tbody> nisqa
  15. </tabla> nisqa

Formas

Ñawpaqmanta churasqa estilokuna

Sapanchasqa formulario kamachiykuna estilota chaskinku, ichaqa mana ima munasqa clase base kaqpi chay <form>utaq hatun tikraykuna marcapi kaqpi. Formulario kamachiykuna patapi pilasqa, lluq'iman chiqanchasqa etiquetakuna ruwan.

Yuyapachiq Ejemplo bloque-nivel yanapakuy qillqa kaypi. 
  1. <forma> nisqa
  2.   <chakra huñu>
  3.     <leyenda> Leyenda </leyenda>
  4.     <etiqueta> Etiqueta suti </etiqueta>
  5.     <input type = "text" placeholder = "Imatapas qillqay..." >  
  6.     <span class = "help-block" > Kaypi bloque-nivel yanapakuy qillqamanta rikch'anachiy. </span> nisqa 
  7.     <etiqueta clase = "chay qillqa" > 
  8.       <input type = "checkbox" > Qhawariway 
  9.     </etiqueta> nisqa
  10.     <button type = "kachay " class = "btn" > Kachay </button>  
  11.   </chakra churasqa>
  12. </form> nisqa

Disposiciones opcionales

Bootstrap kaqwan yapasqa kimsa akllana formulario churaykuna común llamkana casos kaqpaq.

Formulario de búsqueda

.form-searchFormularioman chaymanta .search-querychayman yapay <input>huk extra-redondo qillqa yaykuypaq.

  1. <forma clase = "forma-maskay" > 
  2.   <yaykusqa laya = "qillqa" clase = "yaykuna-chawpi maskana-tapuy" >  
  3.   <button type = "kachay " class = "btn" > Maskay </button>  
  4. </form> nisqa

Formulario en línea

.form-inlineLluq'i chiqanchasqa etiquetakunapaq chaymanta chiru-bloque kamachiykunapaq huk compacto churanapaq yapay .

  1. <forma clase = "forma-inline" > 
  2.   <yaykusqa laya = "qillqa" clase = "yaykusqa-huch'uy" tiyana = "Email" >   
  3.   <yaykuna laya = "yaykuna rimay" class = "yaykuna-huch'uy" tiyana = "Yaykuna rimay" >   
  4.   <etiqueta clase = "chay qillqa" > 
  5.     <input type = "checkbox" > Yuyariway 
  6.   </etiqueta> nisqa
  7.   <button type = "kachay " class = "btn" > Yaykuy </button>  
  8. </form> nisqa

Forma horizontal nisqa

Etiquetakunata pañaman chiqanchay hinaspa lluq'iman wayt'ay, controlkuna hina kikin chirupi rikurinanpaq. Aswan marka tikraykunata huk ñawpaqmanta ruwasqa formulariomanta mañan:

  • .form-horizontalFormularioman yapay
  • Envolver etiquetas y controles en.control-group
  • .control-labelEtiquetaman yapay
  • Ima tinkisqa kamachiykunatapas .controlsallin chiqanchasqa kananpaq p'istuy
  1. <forma clase = "forma-horizontal" > 
  2.   <div clase = "kamachiy-huñu" > 
  3.     <label class = "control-label" for = "yaykusqaEmail" > Correo electrónico </etiqueta>  
  4.     <div clase = "kamachiykuna" > 
  5.       <yaykusqa laya = "qillqa" id = "yaykusqaEmail" tiyana = "Email" >   
  6.     </div> nisqa
  7.   </div> nisqa
  8.   <div clase = "kamachiy-huñu" > 
  9.     <label class = "control-label" for = "yaykuna Yaykuna rimay" > Yaykuna rimay </etiqueta>  
  10.     <div clase = "kamachiykuna" > 
  11.       <yaykuna laya = "yaykuna rimay" id = "yaykuna Yaykuna rimay " placeholder = "Yaykuna rimay" >   
  12.     </div> nisqa
  13.   </div> nisqa
  14.   <div clase = "kamachiy-huñu" > 
  15.     <div clase = "kamachiykuna" > 
  16.       <etiqueta clase = "chay qillqa" > 
  17.         <input type = "checkbox" > Yuyariway 
  18.       </etiqueta> nisqa
  19.       <button type = "kachay " class = "btn" > Yaykuy </button>  
  20.     </div> nisqa
  21.   </div> nisqa
  22. </form> nisqa

Yanapasqa formulario kamachiykuna

Huk ejemplo formulario churaypi yanapasqa formulario kamachiykuna estándar kaqmanta ejemplokuna.

Insumos

Aswan riqsisqa formulario kamachiy, qillqapi sayasqa yaykuna pampakuna. Llapan HTML5 layakuna yanapakuyta yapan: qillqa, yaykuna rima, p'unchaw pacha, p'unchaw pacha-llaqta, p'unchaw, killa, pacha, semana, yupay, correo electrónico, url, maskana, tel, chaymanta llimp'i.

Requiere el uso de un especificado typeen todo momento.

  1. <yaykusqa laya = "qillqa" placeholder = "Qillqa yaykuy" >

Área de texto

Control de formas nisqa mayqinchus achka chiru qillqakunata yanapan. rowsNecesario kasqanman hina atributota cambiay .

  1. <textarea filakuna = "3" ></textarea>

Cajas de verificación y radios

Checkboxkuna huk utaq achka akllanakuna huk lista kaqpi akllanapaq kanku radiokuna huk akllanakuna achkamanta akllanapaq kanku.

Ñawpaqmanta churasqa (pilasqa) .


  1. <etiqueta clase = "chay qillqa" > 
  2.   <yaykusqa laya = "qhaway qutu" chani = "" >  
  3.   Huk akllana kay chaymanta chay —ama hina kaspa churay imarayku ancha allin kasqanmanta
  4. </etiqueta> nisqa
  5.  
  6. <etiqueta clase = "radio" > 
  7.   <yaykuna laya = "radio" suti = "akllanakunaRadiokuna" id = "akllanakunaRadiokuna1" chani = "akllana1" qhawasqa >     
  8.   Huk akllana kay chaymanta chay —ama hina kaspa churay imarayku ancha allin kasqanmanta
  9. </etiqueta> nisqa
  10. <etiqueta clase = "radio" > 
  11.   <yaykuna laya = "radio" suti = "akllanakunaRadiokuna" id = "akllanakunaRadiokuna2" chani = "akllana2" >    
  12.   Iskay akllana huk imapas kanman chaymanta akllayqa huk akllanata manaña akllanqachu
  13. </etiqueta> nisqa

Inline nisqapi qillqanakuna

Yanapakuy .inlineclaseta huk serie cuadros de verificación utaq radiokuna controlkuna kikin chirupi rikurinanpaq.

  1. <etiqueta clase = "checkbox inline" > 
  2.   <yaykusqa laya = "qhaway qutu" id = "inlineCheckbox1" chani = "akllana1" > 1   
  3. </etiqueta> nisqa
  4. <etiqueta clase = "checkbox inline" > 
  5.   <yaykusqa laya = "qhaway qutu" id = "inlineCheckbox2" chani = "akllana2" > 2   
  6. </etiqueta> nisqa
  7. <etiqueta clase = "checkbox inline" > 
  8.   <yaykusqa laya = "qhaway qutu" id = "inlineCheckbox3" chani = "akllana3" > 3   
  9. </etiqueta> nisqa

Akllan

Ñawpaqmanta akllanata llamk'achiy utaq a multiple="multiple"niy achka akllanakunata huk kutillapi rikuchinaykipaq.


  1. <akllay>
  2.   <akllana> 1 </akllana>
  3.   <akllana> 2 </akllana>
  4.   <akllana> 3 </akllana>
  5.   <akllana> 4 </akllana>
  6.   <akllana> 5 </akllana>
  7. </akllay>
  8.  
  9. < achka akllay = "achka" > 
  10.   <akllana> 1 </akllana>
  11.   <akllana> 2 </akllana>
  12.   <akllana> 3 </akllana>
  13.   <akllana> 4 </akllana>
  14.   <akllana> 5 </akllana>
  15. </akllay>

Controles de formulario nisqakunata mast’ariy

Kaqlla maskaq kamachiykuna patamanta yapaspa, Bootstrap wak allin formulario componentes kaqninta yapan.

Insumos prependidos y apendidos

Qillqata utaq ñit'inakunata yapay ima qillqamanta ruwasqa yaykuchiymanta ñawpaq utaq qhipa. selectKaypi elementokuna mana yanapasqa kasqankuta reparay .

Ñawpaqmanta churasqa akllanakuna

Hukwan hukwan iskay clasemanta hukninwan p'istuy, .add-onhuk inputqillqasqaman ñawpaqmanta qillqanapaq utaq yapanapaq.

@ .

.00 nisqa 
  1. <div clase = "yaykuchiy-ñawpaqmanta churay" > 
  2.   <span clase = "yapasqa" > @ </span> 
  3.   <yaykusqa clase = "span2" id = "prependedInput" laya = "qillqa" tiyana = "Ruraqpa sutin" >    
  4. </div> nisqa
  5. <div clase = "yaykuchiy-yapay" > 
  6.   <yaykusqa clase = "span2" id = "yapasqaYaykusqa" laya = "qillqa" >   
  7.   <span clase = "yapasqa" > .00 </span> 
  8. </div> nisqa

Huñusqa

Iskaynin clasekunata iskay instanciakunatapas .add-onllamk'achiy huk yaykuchiyta ñawpaqmanta churanapaq chaymanta yapanapaq.

$ .00 nisqa 
  1. <div class = "yaykuy-ñawpaqmanta churay yaykuchiy-yapachiy" > 
  2.   <span clase = "yapasqa" > $ </span> 
  3.   <yaykusqa clase = "span2" id = "yapasqaPrependedYaykuna" tipo = "qillqa" >   
  4.   <span clase = "yapasqa" > .00 </span> 
  5. </div> nisqa

Textopa rantinpi botones

Qillqawan <span>huk .btnninamantaqa, huk ñit'inata (icha iskay) huk qillqasqaman k'askanaykipaq llamk'achiy.

  1. <div clase = "yaykuchiy-yapay" > 
  2.   <yaykusqa clase = "span2" id = "yapasqaYaykuyButton" tipo = "qillqa" >   
  3.   <botón clase = "btn" tipo = "botón" > ¡Riy! </boton> nisqa  
  4. </div> nisqa
  1. <div clase = "yaykuchiy-yapay" > 
  2.   <yaykusqa clase = "span2" id = "yapasqaYaykuyBotonkuna" tipo = "qillqa" >   
  3.   <button class = "btn" type = "button" > Maskay </button>  
  4.   <botón clase = "btn" tipo = "botón" > Akllanakuna </button>  
  5. </div> nisqa

Botón urayk’aqkuna

  1. <div clase = "yaykuchiy-yapay" > 
  2.   <yaykusqa clase = "span2" id = "yapachisqaDropdownButton" laya = "qillqa" >   
  3.   <div clase = "btn-huñu" > 
  4.     <button class = "btn urayk'aq-t'ikray" data-t'ikray = "uraq" >  
  5.       Ruwana
  6.       <span clase = "caret" ></span> 
  7.     </boton> nisqa
  8.     <ul clase = "uraq-menú" > 
  9.       ...
  10.     </ul>
  11.   </div> nisqa
  12. </div> nisqa
  1. <div clase = "yaykuchiy-ñawpaqmanta churay" > 
  2.   <div clase = "btn-huñu" > 
  3.     <button class = "btn urayk'aq-t'ikray" data-t'ikray = "uraq" >  
  4.       Ruwana
  5.       <span clase = "caret" ></span> 
  6.     </boton> nisqa
  7.     <ul clase = "uraq-menú" > 
  8.       ...
  9.     </ul>
  10.   </div> nisqa
  11.   <yaykuna clase = "span2" id = "prependidoDropdownButton" laya = "qillqa" >   
  12. </div> nisqa
  1. <div class = "yaykuy-ñawpaqmanta churay yaykuchiy-yapachiy" > 
  2.   <div clase = "btn-huñu" > 
  3.     <button class = "btn urayk'aq-t'ikray" data-t'ikray = "uraq" >  
  4.       Ruwana
  5.       <span clase = "caret" ></span> 
  6.     </boton> nisqa
  7.     <ul clase = "uraq-menú" > 
  8.       ...
  9.     </ul>
  10.   </div> nisqa
  11.   <yaykusqa clase = "span2" id = "yapasqaPrependedDropdownButton" laya = "qillqa" >   
  12.   <div clase = "btn-huñu" > 
  13.     <button class = "btn urayk'aq-t'ikray" data-t'ikray = "uraq" >  
  14.       Ruwana
  15.       <span clase = "caret" ></span> 
  16.     </boton> nisqa
  17.     <ul clase = "uraq-menú" > 
  18.       ...
  19.     </ul>
  20.   </div> nisqa
  21. </div> nisqa

Segmentado nisqa urayk’aq huñukuna

  1. <forma> nisqa
  2.   <div clase = "yaykuchiy-ñawpaqmanta churay" > 
  3.     <div clase = "btn-huñu" > ... </div> 
  4.     <yaykuna laya = "qillqa" > 
  5.   </div> nisqa
  6.   <div clase = "yaykuchiy-yapay" > 
  7.     <yaykuna laya = "qillqa" > 
  8.     <div clase = "btn-huñu" > ... </div> 
  9.   </div> nisqa
  10. </form> nisqa

Formulario de búsqueda

  1. <forma clase = "forma-maskay" > 
  2.   <div clase = "yaykuchiy-yapay" > 
  3.     <yaykuna laya = "qillqa" clase = "span2 maskana-tapuy" >  
  4.     <button type = "kachay " class = "btn" > Maskay </button>  
  5.   </div> nisqa
  6.   <div clase = "yaykuchiy-ñawpaqmanta churay" > 
  7.     <button type = "kachay " class = "btn" > Maskay </button>  
  8.     <yaykuna laya = "qillqa" clase = "span2 maskana-tapuy" >  
  9.   </div> nisqa
  10. </form> nisqa

Control de tamaño

Relativo sayay clasekuna llamk'achiy imayna .input-largeutaq tupachiy yaykuyniykikunata rejilla columna sayaykunaman .span*clasekuna llamk'achispa.

Insumos de nivel de bloque

Mayqintapas <input>utaq <textarea>elementotapas bloque nivel elemento hina purichiy.

  1. <yaykusqa clase = "yaykusqa-bloque-nivel" tipo = "texto" lugarholder = ".yaykuy-bloque-nivel" >

Tamaño relativo

  1. <yaykusqa clase = "yaykusqa-mini" laya = "qillqa" tiyana = ".yaykusqa-mini" >   
  2. <yaykusqa clase = "yaykusqa-huch'uy" laya = "qillqa" tiyana = ".yaykusqa-huch'uy" >   
  3. <yaykusqa clase = "yaykuna-chawpi" laya = "qillqa" tiyana = ".yaykuna-chawpi" >   
  4. <yaykusqa clase = "yaykusqa-hatun" laya = "qillqa" tiyana = ".yaykusqa-hatun" >   
  5. <yaykusqa clase = "yaykusqa-xhatun" laya = "qillqa" tiyana = ".yaykusqa-xhatun" >   
  6. <yaykusqa clase = "yaykusqa-xxhatun" laya = "qillqa" tiyana = ".yaykusqa-xxhatun" >

¡Umakuna wichayman!Hamuq layakunapi, kay relativo yaykuna clasekuna llamk'ayta tikrasaqku botón sayayniykuwan tupananpaq. Ejemplopaq, .input-largehuk yaykuchiypa relleno kaqninta chaymanta font-tamaño kaqninta yapanqa.

Rejilla de tamaño

Rejilla columnakunap kikin sayayninwan tupaq yaykuykunapaq .span1to nisqawan llamk'achiy ..span12

  1. <yaykusqa clase = "span1" laya = "texto" nisqa churana = " .span1 " >   
  2. <yaykusqa clase = "span2" laya = "texto" nisqa churana = " .span2 " >   
  3. <yaykusqa clase = "span3" laya = "texto" tiyana = ".span3" >   
  4. < clase akllay = "span1" > 
  5.   ...
  6. </akllay>
  7. < clase akllay = "span2" > 
  8.   ...
  9. </akllay>
  10. < clase akllay = "span3" > 
  11.   ...
  12. </akllay>

Sapa chirupi achka llika yaykuykunapaq, allin rakinapaq tikraq claseta llamk'achiy.controls-row . Yuraq-ch'usaq urmachinapaq yaykusqakunata wayt'an, allin margenkunata churan, wayt'ayta ch'uyanchan.

  1. <div clase = "kamachiykuna" > 
  2.   <yaykuna clase = "span5" laya = "qillqa" tiyana = ".span5" >   
  3. </div> nisqa
  4. <div class = "kamachiykuna-fila" > 
  5.   <yaykusqa clase = "span4" laya = "qillqa" tiyana = ".span4" >   
  6.   <yaykusqa clase = "span1" laya = "texto" nisqa churana = " .span1 " >   
  7. </div> nisqa
  8. ...

Insumos ineditables

Willayta huk formulariopi rikuchiy mayqinchus mana llamk'achiy atikunchu mana chiqa formulario markayta llamk'achispa.

Wakinqa kaypi chaninchanku 
  1. <span class = "input-xlarge uneditable-input" > Kaypi wakin chani </span>

Ruwaykunata rurana

Huk formulariota huk huñu ruwaykunawan (botones) tukuchiy. Huk ukhupi churasqa kaqtin .form-actions, botones kikinmanta k'askakunqa formulario kamachiykunawan chiqan kananpaq.

  1. <div clase = "forma-ruray" > 
  2.   <button type = "submit" class = "btn btn-primary" > Hukchasqakunata waqaychay </button>  
  3.   <botón tipo = "botón" clase = "btn" > Cancelar </botón>  
  4. </div> nisqa

Yanapakuy qillqa

Yanapakuy qillqapaq chiru ukhupi chaymanta hark'ay pata yanapakuy mayqinchus formulario kamachiykuna muyuriqpi rikukun.

Yanapakuy en línea

Inline yanapakuy qillqa 
  1. <yaykusqa laya = "qillqa" ><span class = "yanapakuy-inline" > Chiru ukhupi yanapakuy qillqa </span>

Yanapakuy harkay

Aswan hatun bloque yanapakuy qillqa musuq chiruman pakikuq chaymanta huk chirumanta aswan mastarikunman. 
  1. <input type = "text" ><span class = "help-block" > Yanapakuy qillqap aswan suni hark'an, musuq chiruman p'akispa, huk chirumanta aswan mast'arikunman. </span> nisqa

Forma control nisqa suyukuna

Ruwaqkunaman utaq watukuqkunaman yuyaychaykunata quy, formulario kamachiykunamanta chaymanta etiquetakunamanta qallariy yuyayniyuq estadokunawan.

Enfoque de entrada

outlineWakin formulario kamachiykunapi ñawpaqmanta ruwasqa estilokunata hurquyku chaymanta huk box-shadowrantinpi churayku :focus.

  1. <input class = "input-xlarge" id = "enfocadoInput" type = "texto" valor = "Kayqa t'inkisqa kachkan..." >

Mana allin qillqasqakuna

Estilo yaykuykuna ñawpaqmanta maskaq ruwanakuna kaqnintakama :invalid. Huk nisqa willay , chakra mana akllana kaptinqa laya typeyapay required, chaymanta (sichus ruwanapaq) huk pattern.

Kayqa mana Internet Explorer 7-9 kaqpa layakunapi kanchu CSS yanqa akllaqkuna mana yanapakuy kasqanrayku.

  1. <yaykusqa clase = "span3" laya = "correo electrónico" nisqa munasqa >

Mana llamk’achisqa yaykuykuna

Huk yaykusqapi atributota yapay, disabledllamk'achiqpa yaykuyninta hark'anapaq chaymanta huk pisi wak qhawayta llamk'achinapaq.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Kaypi mana llamk'achisqa yaykuy..." mana llamk'achisqa >

Validación nisqa

Bootstrap pantaypaq, willakuypaq, willakuypaq chaymanta allin willakuypaq chiqaqchay estilokunayuq. Utilizanaykipaqqa, muyuriqninpi kaqman tupaq claseta yapay .control-group.

Ichapas imapas mana allinchu karqa
Ama hina kaspa, pantasqata allichay
Usuario sutiqa hurqusqam
¡Woohoo! 
  1. <div class = "kamachiy-qutu willakuy" > 
  2.   <label class = "control-label" for = "yaykuyWarning" > Willakuywan yaykuchiy </label>  
  3.   <div clase = "kamachiykuna" > 
  4.     <yaykusqa laya = "qillqa" id = "yaykuyAdvertencia" >  
  5.     <span class = "help-inline" > Imapas mana allintachu rirqan </span> 
  6.   </div> nisqa
  7. </div> nisqa
  8.  
  9. <div class = "kamachiy-qutu pantasqa" > 
  10.   <label class = "control-label" for = "inputError" > Pantasqawan yaykuchiy </label>  
  11.   <div clase = "kamachiykuna" > 
  12.     <yaykusqa laya = "qillqa" id = "yaykunaPantay" >  
  13.     <span class = "help-inline" > Ama hina kaspa, pantasqata allichay </span> 
  14.   </div> nisqa
  15. </div> nisqa
  16.  
  17. <div clase = "kamachiy-qutu willakuy" > 
  18.   <label class = "control-label" for = "inputInfo" > Willakuywan yaykuchiy </label>  
  19.   <div clase = "kamachiykuna" > 
  20.     <yaykusqa laya = "qillqa" id = "yaykusqaWillakuy" >  
  21.     <span class = "help-inline" > Ruraqpa sutinqa hap'isqañam </span> 
  22.   </div> nisqa
  23. </div> nisqa
  24.  
  25. <div class = "kamachiy-qutu allin ruway" > 
  26.   <label class = "control-label" for = "inputSuccess" > Allin kaqwan yaykuchiy </label>  
  27.   <div clase = "kamachiykuna" > 
  28.     <yaykusqa laya = "qillqa" id = "yaykuyAllin" >  
  29.     <span clase = "yanapay-inline" > Woohoo! </span> nisqa 
  30.   </div> nisqa
  31. </div> nisqa

Botones

Ñawpaqmanta churasqa botones

Botón estilokuna imamanpas churakunman .btnclase churasqawan. <a>Ichaqa, típicamente kaykunata sapalla chaymanta <button>elementokuna aswan allin ruwaypaq churayta munanki .

Ñitina clase="" nisqa. Willay
btn Botón gris estándar con gradiente
btn btn-primary Yapa rikuy llasayta qun chaymanta huk huñu botones kaqpi primaria ruwayta riqsichin
btn btn-info Ñawpaqmanta churasqa estilokunaman huk alternativa hina llamk'achisqa
btn btn-success Allin ruwasqa utaq allin ruwasqa kasqanmantam qawachin
btn btn-warning Indica cuidado debe tomar con esta acción
btn btn-danger Peligroso otaq mana allin ruway kasqanmantan willan
btn btn-inverse Yana gris botón alterna, mana huk semántica ruwayman utaq llamk'achiyman watasqachu
btn btn-link Huk ñit'inata pisiyachiy, huk t'inkiman rikch'achispa, ñit'inap ruwayninta waqaychaspa

Chimpapuray maskaqpa tupachiynin

IE9 mana qhipa gradientekunata muyu k'uchukunapi tarpunchu, chayrayku chayta hurquyku. Rimanakuy, IE9 mana llamk'achisqa buttonelementokunata jankifies, qillqata gris ruwan huk millay qillqa-llantuywan mana allichayta atisqanchik.

Tamaños de botones

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

  1. <p> nisqa
  2.   <button class = "btn btn-hatun btn-primary" type = "button" > Hatun ñit'ina </button>  
  3.   <button class = "btn btn-hatun" type = "button" > Hatun ñit'ina </button>  
  4. </p>
  5. <p> nisqa
  6.   <button class = "btn btn-primary" type = "button" > Ñawpaqmanta churasqa ñit'ina </button>  
  7.   <button class = "btn" type = "button" > Ñawpaqmanta churasqa ñit'ina </button>  
  8. </p>
  9. <p> nisqa
  10.   <button class = "btn btn-huch'uy btn-primary" type = "button" > Huch'uy ñit'ina </button>  
  11.   <button class = "btn btn-huch'uy" type = "button" > Huch'uy ñit'ina </button>  
  12. </p>
  13. <p> nisqa
  14.   <botón clase = "btn btn-mini btn-primaria" tipo = "botón" > Mini botón </botón>  
  15.   <botón clase = "btn btn-mini" tipo = "botón" > Mini botón </botón>  
  16. </p>

Bloque nivel botones ruway —chaykuna huk tayta-mamapa hunt'a anchunta span— yapaspa .btn-block.

  1. <button class = "btn btn-hatun btn-bloqueo btn-primary" type = "button" > Hark'ay pata ñit'ina </button>  
  2. <button class = "btn btn-hatun btn-block" type = "button" > Hark'ay pata ñit'ina </button>

Mana atiq suyu

Botonkunata mana ñit’inapaq hina qhawarichiy 50% kutichispa.

Elemento de anclaje

.disabledChay claseta <a>botonkunaman yapay .

Enlace primario Tupana 

  1. <a href = "#" class = "btn btn-hatun btn-primaria mana llamk'achisqa" > Ñawpaq t'inki </a>  
  2. <a href = "#" class = "btn btn-hatun mana llamk'achisqa" > T'inki </a>

¡Umakuna wichayman!Kaypi .disabledhuk utilidad clase hina llamk'achiyku, común .activeclase kaqman rikch'akuq, chayrayku mana ñawpaq simita mañakunchu. Hinallataq, kay claseqa estética nisqallapaqmi; kaypi t'inkikunata mana llamk'achinaykipaqqa sapanchasqa JavaScript llamk'achinayki tiyan.

Elemento de botón

disabledChay atributota <button>botonkunaman yapay .

  1. <button type = "button" class = "btn btn-hatun btn-primary mana llamk'achisqa" mana llamk'achisqa = "mana llamk'achisqa" > Ñawpaq kaq ñit'ina </button>   
  2. <button type = "button" class = "btn btn-hatun" mana llamk'achisqa > Botón </button>

Huk clase, achka etiquetakuna

Chay .btnclaseta huk <a>, <button>, utaq <input>elemento nisqapi llamk’achiy.

Tupana 
  1. <a class = "btn" href = "" > T'inki </a>  
  2. <botón clase = "btn" tipo = "kachay " > Botón </botón>  
  3. <yaykusqa clase = "btn" laya = "botón" valor = "Yaykuy" >   
  4. <yaykusqa clase = "btn" tipo = "kachay " valor = "Kachay" >

Aswan allin ruway hina, elementota contextoykipaq tupachiyta kallpachakuy, chimpa-navegador ruway tupachiyta qhawanaykipaq. Si tienes un input, utiliza un <input type="submit">para tu botón.

Imaykuna

Huk elementoman clasekunata yapay <img>ima proyectopipas siq'ikunata mana sasachakuspalla estilochanaykipaq.

140x140 nisqa 140x140 nisqa 140x140 nisqa 
  1. <img src = "..." clase = "img-muyusqa" >  
  2. <img src = "..." clase = "img-muyu" >  
  3. <img src = "..." clase = "img-polaroid" >

¡Umakuna wichayman! .img-roundedchaymanta .img-circlemana IE7-8 kaqpi llamk'ankuchu mana border-radiusyanapakuy kasqanrayku.

Iconos por Glyphicons

Glifos de icono

140 siq'ikuna sprite rikch'aypi, yana q'illu (ñawpaqmanta) yuraq ima, Glyphicons nisqap qusqan .

  • icono-vidrio nisqa
  • icono-musica
  • icono-maskay
  • icono-sobre nisqa
  • icono-sunqu
  • icono-quyllur
  • icono-quyllur-ch'usaq
  • icono-ruraq
  • icono-pelicula nisqa
  • icono-ñ-hatun
  • icono-th
  • icono-th-lista nisqa
  • icono-allinmi
  • icono-qichuy
  • icono-zoom-in nisqa
  • icono-zoom-out nisqa
  • icono-apagado nisqa
  • icono-señal nisqa
  • icono-diente
  • icono-basura
  • icono-wasi
  • icono-archivo nisqa
  • icono-tiempo
  • icono-ñan
  • icono-descargar-alt
  • icono-descargar nisqa
  • icono-upload nisqa
  • icono-inbox nisqa
  • icono-pukllay-muyu
  • icono-yapamanta ruway
  • icono-refrescar nisqa
  • icono-lista-alt
  • icono-bloqueo
  • icono-bandera
  • icono-auriculares nisqa
  • icono-volumen-apagado nisqa
  • icono-volumen-uray
  • icono-volumen-up nisqa
  • icono-qrcode nisqa
  • icono-código de barras nisqa
  • icono-etiqueta nisqa
  • icono-etiquetas nisqakuna
  • icono-libro
  • icono-marcador nisqa
  • icono-impresión
  • icono-cámara nisqa
  • icono-fuente nisqa
  • icono-negro nisqa
  • icono-cursivo nisqa
  • icono-texto-altura
  • icono-texto-ancho nisqa
  • icono-align-ichuq
  • icono-align-chawpi
  • icono-align-derecha
  • icono-align-justificar
  • icono-lista nisqa
  • icono-indent-ichuq
  • icono-indent-derecha
  • icono-uya-pacha-video
  • icono-siq’i
  • icono-lapiz
  • icono-mapa-markakuq
  • icono-allinchay
  • icono-tinta
  • icono-editar
  • icono-compartir
  • icono-chequeo nisqa
  • icono-kuyuchiy
  • icono-paso-qhipaman
  • icono-utqaylla-qhipaman
  • icono-qhipaman
  • icono-pukllay
  • icono-pausa nisqa
  • icono-parada
  • icono-awpaqman
  • icono-utqaylla ñawpaqman
  • icono-paso-awpaqman
  • icono-eject nisqa
  • icono-chevron-izquierda nisqa
  • icono-chevron-derecha
  • icono-más-señal
  • icono-menos-signo
  • icono-qichuy-señal
  • icono-allin-señal
  • icono-tapuy-señal
  • icono-info-signo nisqa
  • icono-pantalla nisqa
  • icono-qichuy-muyu
  • icono-allin-muyu
  • icono-prohibición-muyu
  • icono-flecha-izquierda
  • icono-flecha-derecha
  • icono-flecha-up
  • icono-flecha-uray
  • icono-compartir-alt
  • icono-tamaño-hunt’asqa
  • icono-tamaño-huch’uy
  • icono-plus nisqa
  • icono-minus nisqa
  • icono-quyllur
  • icono-exclamación-signo
  • icono-regalo
  • icono-raphi
  • icono-nina
  • icono-ñawi-kichasqa
  • icono-ñawi-wichqay
  • icono-advertencia-señal
  • icono-plano nisqa
  • icono-calendario nisqa
  • icono-al azar nisqa
  • icono-comentarios nisqa
  • icono-imán nisqa
  • icono-chevron-up nisqa
  • icono-chevron-uray
  • icono-retweet nisqa
  • icono-rantiq-carrito
  • icono-carpeta-wichqay
  • icono-carpeta-kichasqa
  • icono-tamaño-vertical nisqa
  • icono-tamaño-horizontal nisqa
  • icono-hdd nisqa
  • icono-bullhorn nisqa
  • icono-campana
  • icono-certificado nisqa
  • icono-pulgares-up
  • icono-pulgares-uray
  • icono-maki-alliq
  • icono-maki-ichuq
  • icono-makiwan wichayman
  • icono-makiwan urayman
  • icono-muyu-flecha-derecha
  • icono-muyu-flecha-izquierda
  • icono-muyu-flecha-up
  • icono-muyu-flecha-uray
  • icono-globo nisqa
  • icono-llave
  • icono-tareakuna
  • icono-filtro nisqa
  • icono-maletín
  • icono-pantalla hunt’a

Glyphicons nisqamanta atribución

Glyphicons Halflings normalmente mana qullqipaqchu kanku, ichaqa huk arreglo Bootstrap kaqwan Glyphicons ruwaqkunawan kayta ruwasqa mana qullqipaq qampaq ruwaqkuna hina. Gracias hina, mañakuykiku huk opcional link Glyphicons kaqman kutinaykipaq mayk'aqllapas ruway atikuqtin.

Imaynatataq apaykachana

Llapan iconokuna <i>huk sapalla claseyuq etiquetata munan, ñawpaqninpi icon-. Utilizanaykipaqqa kay codigota yaqa maypipas churay:

  1. <i clase = "icon-maskay" ></i>

Hinallataqmi kan estilokuna invertido (yuraq) iconokunapaq, huk yapasqa clasewan wakichisqa ruwasqa. Kay claseta hover kaqpi chaymanta activo estadokunapi nav chaymanta urayk'aq t'inkikuna kaqpaq específicamente kallpachasaqku.

  1. <i class = "siku-maskana icono-yuraq" ></i>

¡Umakuna wichayman!Qillqap watiqankunap ladunpi llamk'achkaspa, imaynachus botones utaq nav t'inkikuna kaqpi, ama hina kaspa huk ch'usaqta saqiy <i>etiqueta qhipanpi allin t'inkisqa kananpaq.

Icono ejemplokuna

Chaykunata llamk'achiy botones kaqpi, botones qutukunapi huk llamkanakuna barrapaq, puriypaq utaq ñawpaqmanta pendido formulario yaykuykunapi.

Botones

Huk ñit'ina llamkanakunap llikanpi ñit'ina huñu
  1. <div clase = "btn-herramienta" > 
  2.   <div clase = "btn-huñu" > 
  3.     <a clase = "btn" href = "#" ><i clase = "icono-align-izquierda" ></i></a>   
  4.     <a clase = "btn" href = "#" ><i clase = "icon-align-centro" ></i></a>   
  5.     <a clase = "btn" href = "#" ><i clase = "icon-align-derecha" ></i></a>   
  6.     <a clase = "btn" href = "#" ><i clase = "icon-align-justificar" ></i></a>   
  7.   </div> nisqa
  8. </div> nisqa
Huk boton huñupi uraykachiy
Usuario 
  1. <div clase = "btn-huñu" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "siku-ruraq icono-yuraq" ></i> Ruraq </a>   
  3.   <a clase = "btn btn-primary urayk'aq-tukuy" data-toggle = "urquy" href = "#" ><span clase = "caret" ></span></a>    
  4.   <ul clase = "uraq-menú" > 
  5.     <li><a href = "#" ><i class = "icono-lapiz" ></i> Llamk'apuy </a></li>  
  6.     <li><a href = "#" ><i class = "icono-basura" ></i> Qulluy </a></li>  
  7.     <li><a href = "#" ><i clase = "icon-ban-muyu" ></i> Hark'ay </a></li>  
  8.     <li clase = "rakiq" </li> 
  9.     <li><a href = "#" ><i clase = "i" ></i> Kamachiq </a></li> ruway  
  10.   </ul>
  11. </div> nisqa
Tamaños de botones
Quyllur Quyllur Quyllur 
  1. <a class = "btn btn-hatun" href = "#" ><i class = "siku-quyllur" ></i> Quyllur </a>   
  2. <a clase = "btn btn-huch'uy" href = "#" ><i clase = "icono-quyllur" ></i> Quyllur </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "siku-quyllur" ></i> Quyllur </a>

Navegación nisqa

  1. <ul clase = "nav nav-lista" > 
  2.   <li class = "activo" ><a href = "#" ><i class = "icon-wasi icono-yuraq" </i> Wasi </a></li>   
  3.   <li><a href = "#" ><i clase = "icon-libro" ></i> Qillqana mayt'u </a></li>  
  4.   <li><a href = "#" ><i class = "icono-lapiz" ></i> Yanapakuykuna </a></li>  
  5.   <li><a href = "#" ><i clase = "i" ></i> Misc </a></li>  
  6. </ul>

Formulario chakrakuna

  1. <div clase = "kamachiy-huñu" > 
  2.   <label class = "control-label" for = "inputIcon" > E-chaskipa tiyaynin </label>  
  3.   <div clase = "kamachiykuna" > 
  4.     <div clase = "yaykuchiy-ñawpaqmanta churay" > 
  5.       <span clase = "yapasqa" ><i clase = "icono-sobre" ></i></span>  
  6.       <yaykusqa clase = "span2" id = "yaykusqaIcono" laya = "qillqa" >   
  7.     </div> nisqa
  8.   </div> nisqa
  9. </div> nisqa