Base CSS nisqa

Andamio patapi, HTML elementokuna básicos estilochasqa chaymanta aswan allinchasqa mast'arikuq clasekunawan musuq, mana chiqninakuq qhawayta chaymanta sientekuyta qunapaq.

Titulos & copia de cuerpo

Escala tipográfica nisqa

Llapan qillqana mayt'uqa iskay Aswan pisi tikraqkunapim tikrasqanchikkunapi.aslla willañiqipi sayasqa kachkan: @baseFontSizechaymanta @baseLineHeight. Ñawpaq kaqmi tukuyninpi llamk'achisqa base font-size iskay kaqtaq base line-height nisqa.

Chay tikraqkunata llamk'achiyku, chaymanta wakin yupaykunata, tukuy layaykumanta chaymanta aswanta margenkuna, rellenokuna, chaymanta chiru-alturakuna ruwanapaq.

Ejemplo cuerpo texto

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.

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.

h1. Uma 1.1

h2. Umalliq 2

h3. Uma 3.1

h4. Uma 4.1

h5. Umalliq 5
h6. Uma 6

Enfasis, dirección y abreviatura

Imakuna Uso Akllanapaq
<strong> Huk fragmento de texto importantewan enfatizananpaq Mana mayqinpas
<em> Huk qillqasqata estreswan kallpanchanapaq Mana mayqinpas
<abbr> Pisichasqakunata chaymanta siglakunata p'istun mast'arisqa laya hover kaqpi rikuchinanpaq

titleMastarisqa qillqapaq akllana atributota churay

.initialismHatun qillqap pisichasqankunapaq clase nisqawan yanapachikuy .
<address> Aswan qaylla taytanpaq utaq llapan llamkaypa kurkunpaq rimanakuy willakuypaq Llapan chirukunata kaywan tukuchispa formato nisqa waqaychay<br>

Enfasiswan rimaspa

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum masa justo tiyay amet risus. Maecenas faucibus mollis nisqap chawpinpi kaq. Nulla vitae elit libero, huk pharetra augue.

Qhaway: Mana manchakuspa llamk'achiy <b>chaymanta <i>HTML5 kaqpi, ichaqa llamk'ayninqa huk chhikanta tikrakun. <b>es destinado a resaltar palabras o frases sin transmitir importancia adicional mientras <i>que es mayormente para voz, términos técnicos, etc.

Ejemplo direcciones

Kaypi iskay rikch'anakuna imayna <address>etiqueta llamk'achiy atikun:

795
Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 llankaymanta
Tukuy Suti
ñ[email protected]

Ejemplo abreviaturas

Huk layayuq pisichasqakunaqa titlek'anchariq ch'ikuyuq ura k'itiyuqmi, yanapay kursutayuqtaq hover nisqapi. Kayqa usuariokunaman extra indicación qun imapas hover kaqpi rikuchisqa kanqa.

Claseta initialismhuk pisichasqaman yapay, qillqap armonía nisqa yapananpaq, aswan huch'uy qillqa sayayninta quspa.

HTML nisqaqa t'anta phatmasqamanta pacha aswan allin kaqmi.

Atributo simip pisichasqanqa attr .

Bloqueo nisqa

Imakuna Uso Akllanapaq
<blockquote> Huk pukyumanta willayta citanapaq bloque-nivel elemento

citePukyu URL nisqapaq laya yapay

Uso .pull-lefty .pull-rightclases para opciones flotadas
<small> Huk akllana elemento huk llamk'aqman rikch'akuq citacionta yapanapaq, típicamente huk qillqaq llamk'aypa sutinwan <cite>Pukyupa titulonpa utaq sutinpa muyuriqninpi churay

<blockquote>Huk bloqueo nisqa churanapaq, mayqin HTML nisqatapas cita hina p'istuy . Chiqan citakunapaqqa huk <p>.

Incluye un elemento opcional <small>para citar tu fuente y obtendrás un tablero em &mdash;antes de él para propósitos de estilo.

  1. <bloqueo nisqa>
  2. <p> Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Tukuy yupay posuere erat a ante venenatis. </p>
  3. <huch'uy> Pipas riqsisqa </small>
  4. </blockquote> nisqa

Ejemplo de comillas de bloques

Ñawpaqmanta churasqa bloquekuna kayhinam estilochasqa kachkan:

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Tukuy yupay posuere erat huk ante venenatis.

Pipas riqsisqa Cuerpo de trabajo nisqapi

Blockquote nisqayki pañaman wayt'anaykipaqqa, yapay class="pull-right":

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Tukuy yupay posuere erat huk ante venenatis.

Pipas riqsisqa Cuerpo de trabajo nisqapi

Listakuna

Mana kamachisqa

<ul>

  • 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

Mana estiloyuq

<ul class="unstyled">

  • 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

Kamachisqa

<ol>

  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

Willay

<dl>

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.

Descripción horizontal

<dl class="dl-horizontal">

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.

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

Inline

Chiru ukhupi chirusqakunata <code>.

  1. Ejemplopaq , < code> t'aqa </ 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

Qhaway: Aswan allinta <pre>etiquetakuna ukhupi codigota waqaychay pañaman aswan qayllapi; chaymi llapa tablakunata ruwanqa.

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

Google nisqapi sumaqchay

Kikin elementota hapiy <pre>hinaspa iskay akllana clasekunata yapay allinchasqa ruwanapaq.

  1. <p> Kaypi qillqasqata rikuchiy... </p>
  1. <pre class = "sumaq qillqasqa."
  2. linenukuna" >
  3. <p>Kaypi qillqasqata rikuchiy...</p>
  4. </pre> nisqa

google-code-prettify nisqamanta uraykachiy chaymanta readme nisqa qhaway imayna llamk'achinapaq.

Marcado de tabla

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> Célula especial de tabla para columna (o fila, alcance y colocación) etiquetas
nisqapaq A ukhupi llamk'achisqa kanan tiyan<thead>
<caption> Descripción utaq resumen imakuna tabla hap'in, aswanta pantalla ñawiriqkunapaq allin
  1. <mesa> nisqa
  2. <uma>
  3. <tr> nisqa
  4. <th> ... </th> nisqa
  5. <th> ... </th> nisqa
  6. </tr>
  7. </thead> nisqa
  8. <cuerpo> nisqa
  9. <tr> nisqa
  10. <td> ... </td> nisqa
  11. <td> ... </td> nisqa
  12. </tr>
  13. </tbody> nisqa
  14. </tabla> nisqa

Tabla akllaykuna

Suti Yachakuna Willay
Ñawpaqchasqa Mana mayqinpas Mana estilokuna, columnakunalla, filakunalla
Qallariq .table Filakuna chawpipi sayaq chirukunalla
Fronterayuq .table-bordered K’uchukunata muyuchin, hawa fronteratapas yapan
Cebra-raya .table-striped Impar filakunaman (1, 3, 5, hukkunapas) llimp'i q'illu qhipa llimp'ita yapan.
Condensado nisqa .table-condensed Kuchun sayaq acolchado chawpipi, 8pxmanta 4pxkama, tukuy ukhupi tdchaymanta thelementokuna ukhupi

Tablas de ejemplo

1. Ñawpaqmanta churasqa tabla estilokuna

Tablakuna kikinmanta estilochasqa kanku pisi fronterakunallawan ñawirinapaq chaymanta estructurata waqaychaypaq. 2.0 nisqawanqa, .tableclase nisqatam mañakun.

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

2. Rayayuq mesa

Huk chhika fancy mesaykikunawan zebra-rayado yapaspa —claseta yapaylla .table-striped.

Qhaway: Rayado tablakuna :nth-childCSS akllanata llamk'achinku chaymanta mana IE7-IE8 kaqpi kanchu.

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

3. Bordeyuq mesa

Llapan mesa muyuriqpi bordekunata yapay, muyu k’uchukunatapas sumaq qhawarinapaq.

  1. <tabla clase = "tabla tabla-frontera" >
  2. ...
  3. </tabla> nisqa
# . Ñ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

4. Mesa condensada nisqa

Tablakunayki aswan compacta ruway claseta yapaspa .table-condensedtabla celdakuna acolchadota kuskanman kuchunapaq (8pxmanta 4pxkama).

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

5. ¡Llapallanta huñuy!

Mana manchakuspa mayqin tabla clasekunatapas hukllaway hukniray qhawaykunata aypanaykipaq mayqin clasekuna kaqtapas llamk'achispa.

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

HTML y CSS flexible nisqa

Bootstrap kaqpi formulariokunamanta aswan allin kaqninqa llapa yaykuyniykikuna chaymanta controlkunayki ancha allinta qhawarikunku imaynatachus marcaykipi ruwanki chaypas. Mana HTML superfluo mañasqachu, ichaqa patronkunata quyku pikunachus chayta mañanku chaykunapaq.

Aswan sasachakuyniyuq churanakuna sucinto chaymanta escalable clasekunawan hamunku mana sasa estilo ruwanapaq chaymanta evento wataypaq, chayrayku sapa llamkanapi tapasqa kanki.

Tawa layouts incluidos

Bootstrap tawa laya formulario churanapaq yanapakuywan hamun:

  • Sayaq (ñawpaqmanta churasqa) .
  • Maskay
  • Inline
  • Kinranpa

Hukhina laya formulario churanakuna wakin tikraykunata marcanapaq munanku, ichaqa kikin kamachiykuna kaqlla qhipakunku chaymanta ruwanku.

Control estados y más

Bootstrap kaqpa formulariokuna llapa base formulario kamachiykunapaq estilokunayuq kanku imayna yaykusqa, textarea, chaymanta akllay suyasqayki. Ichaqa huk yupay componentes personalizados kaqwanpas hamun imayna yapasqa chaymanta ñawpaqmanta churasqa yaykuykuna chaymanta yanapakuy listakuna qhawaypaq.

Estadokuna pantay, willakuy, chaymanta allin ruway hina sapa laya formulario kamachiypaq churasqa kanku. Hinallataq mana atisqa kamachiykunapaq estilokuna churasqa kachkan.

Tawa laya formakuna

Bootstrap tawa estilokuna común web formulariokuna kaqpaq sasallawan marcayta chaymanta estilokuna qun.

Suti Yachakuna Willay
Sayaq (ñawpaqmanta churasqa) . .form-vertical (mana kamachisqachu) Controlkuna hawapi pilasqa, lluq'iman chiqanchasqa etiquetakuna
Inline .form-inline Lloq'eman chiqanchasqa etiqueta chaymanta inline-block kamachiykuna compacto estilopaq
Maskay .form-search Huk típica maskana estética nisqapaq qillqa yaykuy extra-redondeado
Kinranpa .form-horizontal Lluq'i, paña chiqanchasqa etiquetakunata kamachiykunawan kikin chirupi wayt'ay

Ejemplo formulariokuna formulario controlkunallata llamk'achispa, mana extra marcado kaqwan

Forma básica

Inteligente y ligero por defectos sin marca extra.

Ejemplo bloque-nivel yanapakuy qillqa kaypi.

  1. <forma clase = "allin" >
  2. <etiqueta> Etiqueta suti </etiqueta>
  3. <yaykusqa laya = "qillqa" clase = "span3" churana = " Imatapas qillqay..." >
  4. <span class = "help-block" > Kaypi bloque-nivel yanapakuy qillqamanta rikch'anachiy. </span> nisqa
  5. <etiqueta clase = "chay qillqa" >
  6. <input type = "checkbox" > Qhawariway
  7. </etiqueta> nisqa
  8. <button type = "kachay " class = "btn" > Kachay </button>
  9. </form> nisqa

Formulario de búsqueda

.form-searchFormularioman hinaspa .search-querychayman yapay input.

  1. <form class = "allin formulario-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

Yanapay .form-inlineallinchaypaq sayaq alineacionta chaymanta espaciamientota controles de forma kaqmanta.

  1. <forma clase = "allin 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

Formas horizontales nisqa

Paña kaqpi rikuchisqa llapa ñawpaqmanta ruwasqa formulario kamachiykuna yanapasqayku. Kaypi kachkan chay lista de balas:

  • qillqa yaykuna (qillqa, yaykuna rimay, correo electrónico, hukkunapas) .
  • cuadro de verificación nisqapi
  • radio nisqapi
  • akllay
  • achka akllay
  • willañiqi yaykuchiy
  • textarea nisqapi

Libre forma qillqamanta aswan, mayqin HTML5 qillqamanta ruwasqa yaykuchiypas chayhinam rikurin.

Ejemplo de marcado

Hawa ejemplo formulario churay qusqa, kaypi marca ñawpaq yaykuy chaymanta kamachiy huñuwan tinkisqa. Chay .control-group, .control-label, chaymanta .controlsclasekuna llapanku necesitakunku estilo ruwanapaq.

  1. <forma clase = "forma-horizontal" >
  2. <chakra huñu>
  3. <leyenda> Leyenda qillqa </leyenda>
  4. <div clase = "kamachiy-huñu" >
  5. <etiqueta clase = "control-etiqueta" para = "yaykusqa01" > Qillqa yaykuy </etiqueta>
  6. <div clase = "kamachiykuna" >
  7. <yaykusqa laya = "qillqa" clase = "yaykusqa-xhatun" id = "yaykusqa01" >
  8. <p class = "help-block" > Yanapakuy qillqa </p>
  9. </div> nisqa
  10. </div> nisqa
  11. </chakra churasqa>
  12. </form> nisqa

Forma control nisqa suyukuna

Bootstrap estilokuna ruwan maskaq-yanapasqa enfocado chaymanta disabledestadokuna kaqpaq. Webkit ñawpaqmanta churasqa kaqta hurquyku outlinechaymanta huk box-shadowrantinpi churayku :focus.


Formulario nisqa validacion

Hinallataq pantasqakunapaq, willakuykunapaq, allin ruwaypaqpas chiqapchay estilokunata churan. Llamk'achinapaq, pantasqa claseta muyuriqninpi yapay .control-group.

  1. <chakra huñu
  2. class = "kamachiy-qutu pantasqa" >
  3. ...
  4. </chakra churasqa>
Wakinqa kaypi chaninchanku
Ichapas imapas mana allinchu karqa
Ama hina kaspa, pantasqata allichay
¡Woohoo!
¡Woohoo!

Controles de formulario nisqakunata mast’ariy

Insumos nisqakunata ñawpaqmanta churay & yapay

Yaykuy huñukuna —yapasqa utaq ñawpaq qillqawan— huk facil ñanta qun aswan contexto qunaykipaq yaykusqaykikunapaq. Hatun ejemplokuna @ señal Twitter usernames kaqpaq utaq $ qullqipaq.


Cajas de verificación y radios

v1.4 kaqkama, Bootstrap yapasqa marcayta mañarqa qhaway qutukuna chaymanta radiokuna muyuriqninpi chaykunata pilananpaq. Kunanqa, huk sasan asunto kutichiy chay <label class="checkbox">chaymi p'istuy chay <input type="checkbox">.

Inline nisqapi kaq cuadrokuna, radiokunapas yanapakunmi. Solo añadir .inlinea cualquiera .checkboxo .radioy estás hecho.


Formularios en línea y agregar/prepender

Prepend utaq yapay yaykuykunata huk chiru ukhupi formulariopi llamk'achinapaq, ama hina kaspa .add-onchaymanta chaymanta inputkikin chirupi churay, mana ch'usaqniyuq.


Yanapakuy qillqasqata ruray

Yanapakuy qillqata yapanaykipaq formulario yaykunaykipaq, chiru ukhupi yanapakuy qillqawan <span class="help-inline">utaq huk yanapakuy qillqa bloquewan <p class="help-block">yaykuna elementomanta qhipaman churay.

.span*Yaykuy sayaykunapaq rejilla sistemamanta kikin clasekunata llamk'achiy .

Chantapas llamk'achiy atikunki mana kuyusqa clasekuna mana rejillaman mapa ruwankuchu, kutichiq CSS estilokunaman adaptanku utaq hukniray laya kamachiykunamanta yupayta ruwanki (kayhina, inputvs. select).

@ .

Kaypi wakin yanapakuy qillqa

.00 nisqa
Aquí hay más texto de ayuda
$ .00 nisqa

Qhaway: Etiquetakuna llapa akllanakunata muyurinku aswan hatun ñit'iy áreas kaqpaq chaymanta aswan llamk'anapaq formulario kaqpaq.

Ñ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

Ruwaykunapaq botones

Huk convención hina, botones ruwanakunallapaq llamk'achisqa kanan tiyan chaymanta hipervínculos objetokunapaq llamk'achisqa kanan tiyan. Ejemplopaq, "Uraykachiy" huk ñit'ina kanan tiyan "qhipa ruway" huk t'inki kanan tiyan.

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

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.

Achka sayayniyuq

¿Aswan hatunchu icha aswan huch’uy botonkunatachu munanki? Yapay .btn-large, .btn-small, utaq .btn-miniiskay yapasqa sayaypaq.


Mana atiq suyu

.disabledMana atichisqa ñit'inakunapaq, t'inkikunaman claseta yapay chaymanta elementokunapaq disabledatributota .<button>

Enlace primario Tupana

¡Umakuna wichayman! Kaypi .disabledhuk utilidad clase hina llamk'achiyku, común .activeclase kaqman rikch'akuq, chayrayku mana ñawpaq simita mañakunchu.

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 " >
  3. Ñitina
  4. </boton> nisqa
  5. <yaykusqa clase = "btn" tipo = "botón".
  6. valor = "Yaykuy" >
  7. <yaykuna clase = "btn" tipo = "kachay ".
  8. valor = "Kachay" >

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

  • 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

Sprite hina ruwasqa

Sapa icono huk yapasqa mañakuy ruwanamantaqa, huk sprite kaqman huñuyku —huk willañiqipi huk qutu siq'ikuna CSS kaqwan siq'ikunata churanapaq llamk'achin background-position. Kayqa kikin método Twitter.com kaqpi llamk'achisqayku chaymanta allinta llamk'arqan ñuqaykupaq.

Llapan iconokuna clasekuna ñawpaq .icon-sutikuna espaciamientopaq chaymanta alcancepaq ñawpaqchasqa kanku, aswan wak componentesniyku hina. Chaynapim yanapakunqa huk yanapakuykunawan mana piñanakunanchikpaq.

Glyphicons Halflings churasqa llamk'ayta quwarqanku kichasqa qullqisapa yanapakuyniykupi chaymanta huk t'inki chaymanta crédito kaypi docs kaqpi qusqayku. Ama hina kaspa, proyectoykikunapipas chaynata ruwayta yuyaykuy.

Imaynatataq apaykachana

Bootstrap huk <i>etiqueta llapa iconokunapaq llamk'achin, ichaqa mana caso claseyuqchu kanku —huk rakisqa ñawpaq similla. Utilizanaykipaqqa kay codigota yaqa maypipas churay:

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

Hinallataqmi kan estilokuna invertisqa (yuraq) iconokunapaq, huk yapasqa clasewan wakichisqa ruwasqa:

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

140 clasekuna kanku akllanaykipaq iconoykikunapaq. Huk <i>etiquetata yapaylla allin clasekunawan chaymanta churasqa kanki. Huk hunt'asqa listata tarinki sprites.less nisqapi icha kaypipuni kay qillqapi.

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

Uso casos

Iconos nisqakunaqa ancha allinmi, ichaqa, ¿maypitaq huk runa chaykunata servichikunman? Kaypi iskay kimsa yuyaykuna kachkan:

  • Lado barra purinaykipaq rikuykuna hina
  • Puramente iconowan purichisqa puriypaq
  • Huk ruwaypa ima ninan kasqanmanta willanapaq yanapananpaq botonkuna
  • Huk llamk'achiqpa mayman risqanpi contexto rakinapaq t'inkikunawan

Esencialmente, maypipas huk <i>etiqueta churayta atikunki, huk icono churayta atikunki.

Ejemplos

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