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 ultricies antawakuna ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor nisqa suministrador nisqa. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit nisqa. Donec sed odio dui.

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:

Ejemplo abreviaturas

Pisichasqa simikunaqa hatun qillqawan, urayninpi k'anchariq ch'ikuwan ima estilochasqam. Hinallataq huk yanapakuy cursor hover kaqpi kanku chaymanta usuariokuna extra indicación kaqwan kanku imapas hover kaqpi rikuchikunqa.

HTML nisqaqa t'anta phatmasqamanta pacha aswan allin kaqmi.

Atributo simip pisichasqanqa attr .

<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 —antes de él para propósitos de estilo.

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

Ñ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

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.

Inline

Chiru ukhupi chirusqakunata <code>.

Ejemplopaq , < code> t'aqa </ code > nisqataqa chiru ukhupi hinam p'istuykusqa kanan .  

Bloque básico

<pre>Achka chiru qillqakunapaq llamk'achiy . Ama hina kaspa mayqin caretkunatapas unicode qillqakunaman tikray allin ruwanapaq.

<p>Kaypi qillqasqata rikuchiy...</p>

<pre> nisqa
  <p>Kaypi qillqasqata rikuchiy...</p>
</pre> nisqa

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

Google nisqapi sumaqchay

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

<p> Kaypi qillqasqata rikuchiy... </p>

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

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

<mesa> nisqa
  <uma>
    <tr> nisqa
      <th> ... </th> nisqa
      <th> ... </th> nisqa
    </tr>
  </thead> nisqa
  <cuerpo> nisqa
    <tr> nisqa
      <td> ... </td> nisqa
      <td> ... </td> nisqa
    </tr>
  </tbody> nisqa
</tabla> nisqa

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

<tabla clase = "tabla" > 
  ...
</tabla> nisqa

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

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

<tabla clase = "tabla tabla-rayado" > 
  ...
</tabla> nisqa

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

<tabla clase = "tabla tabla-frontera" > 
  ...
</tabla> nisqa

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

<tabla clase = "tabla tabla-condensada" > 
  ...
</tabla> nisqa

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

<table class = "tabla tabla-rayado tabla-bordeado tabla-condensado" > 
  ...
</tabla> nisqa

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.

v2.0 kaqwan, aswan llamp'u chaymanta aswan yachaysapa ñawpaqmanta ruwasqakuna formulario estilokuna kaqpaq kapuwanchik. Mana yapasqa marcayuqchu, formulario controlkunalla.

Ñawpaqmanta WebKit estilokuna rikuchiy, yapaylla .form-searchyapa muyu maskana pampakuna kaqpaq.

Insumos nisqakunaqa bloque nivelmi qallarinanpaq. Para .form-inliney .form-horizontal, utilizamos inline-block.

Imataq chaypi kachkan

Lluq'i 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 nisqa

Musuq ñawpaqmanta churasqakuna v2.0 kaqwan

v1.4 kaqkama, Bootstrap kaqpa ñawpaqmanta ruwasqa formulario estilokuna horizontal churayta llamk'achirqan. Bootstrap 2 kaqwan, chay harkayta hurqurqayku aswan yachaysapa, aswan escalable ñawpaqmanta ruwasqakunayuq kananpaq mayqin formulariopaqpas.

Musuqmanta ruwasqa maskaqpa nisqankuna

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

Formulario nisqa validacion

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

<chakra huñu
  class = "kamachiy-qutu pantasqa" >
  ...
</chakra churasqa>

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.

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.

Para anclajes y formas

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

Qhaway: Llapan botonkunapin .btnclaseta churananku. Estilos de botón nisqakunan churakunan <button>chaymanta <a>elementokuna consistenciapaq.

Achka sayayniyuq

¿Aswan hatunchu icha aswan huch’uy botonkunatachu munanki? ¡Tienen en ello!

Primaria ruway Ruwana

Primaria ruway Ruwana

Mana atiq suyu

Mana llamk'achisqa ñit'inakunapaq, .btn-disabledt'inkikunapaq chaymanta :disabledelementokunapaq <button>llamk'achiy.

Primaria ruway Ruwana

Primaria ruway Ruwana

Chimpapuray maskaqpa tupachiynin

IE9 kaqpi, llapa botones kaqpi gradienteta urmachiyku muyu k'uchukuna favorninpi imaynachus IE9 mana qhipa gradientekunata k'uchukunaman kuchunchu.

Rimanakuy, IE9 mana atichisqa buttonelementokunata jankifies ruwan, qillqata gris ruwan huk millay qillqa-llantuywan—llakikuypaq mana kayta allichayta atiykuchu.

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

v2.0.0 kaqwan, huk <i>etiqueta llapa iconoykupaq llamk'achiyta akllasqayku, ichaqa mana caso claseyuqchu kanku —huk rakisqa ñawpaq similla. Utilizanaykipaqqa kay codigota yaqa maypipas churay:

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

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

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

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

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.

Refrescar Qhaway Chinkachiy

Rimasqa Ajustes Astawan yachaykunaykipaq