Glifos disponibles

Glyphicon Halflings huñumanta 250 masnin glifokuna letra formatopi churan. Glyphicons Halflings normalmente mana qullqipaqchu kanku, ichaqa kamaqninqa Bootstrappaq mana qullqipaq ruwasqa. Gracias hina, mañakuykulla huk t'inki Glyphicons kaqman kutiy atikuqtin churanaykipaq.

glyphicon glyphicon-quyllur simi
glyphicon glyphicon-plus nisqa
glyphicon glyphicon-euro nisqa
glyphicon nisqa glyphicon-eur nisqa
glyphicon glyphicon-minus nisqa
glyphicon glyphicon-phuyu
glyphicon glyphicon-sobre nisqa
glyphicon glyphicon-lapiz nisqa
glyphicon glyphicon-vidrio nisqa
glyphicon glyphicon-musiku
glyphicon glyphicon-maskay
glyphicon glyphicon-sunqu
glyphicon glyphicon-quyllur
glyphicon glyphicon-quyllur-ch'usaq
glyphicon glyphicon-ruraq
glyphicon glyphicon-pelicula nisqa
glyphicon glyphicon- kaq hatun
glyphicon glyphicon- kaq
glyphicon glyphicon-th-lista nisqa
glyphicon glyphicon-ok nisqa
glyphicon glyphicon-qichuy
glyphicon glyphicon-hatun-kamachiy
glyphicon glyphicon-uchuchiy
glyphicon glyphicon-apagado nisqa
glyphicon glyphicon-señal nisqa
glyphicon glyphicon-diente nisqa
glyphicon glyphicon-basura
glyphicon glyphicon-wasi
glyphicon glyphicon-archivo nisqa
glyphicon glyphicon-tiempo
glyphicon glyphicon-ñan
glyphicon glyphicon-descargar-alt
glyphicon glyphicon-manta uraykachiy
glyphicon glyphicon-kachay
glyphicon glyphicon-yaykuna qillqa
glyphicon glyphicon-pukllay-muyu
glyphicon glyphicon-yapamanta rimay
glyphicon glyphicon-refresco nisqa
glyphicon glyphicon-lista-alt nisqa
glyphicon glyphicon-bloqueo nisqa
glyphicon glyphicon-bandera nisqa
glyphicon glyphicon-auriculares nisqa
glyphicon glyphicon-volumen-apagado nisqa
glyphicon glyphicon-volumen-uray
glyphicon glyphicon-volumen-up nisqa
glyphicon glyphicon-qrcode nisqa
glyphicon glyphicon-barcode nisqa
glyphicon glyphicon-etiqueta nisqa
glyphicon glyphicon-etiquetas nisqakuna
glyphicon glyphicon-libro nisqa
glyphicon glyphicon-markakuq
glyphicon glyphicon-impresion nisqa
glyphicon glyphicon-kamara nisqa
glyphicon glyphicon-fuente nisqa
glyphicon glyphicon-q’illu
glyphicon glyphicon-cursivo nisqa simi
glyphicon glyphicon-qillqa-altura
glyphicon glyphicon-qillqa-ancho
glyphicon glyphicon-allinchay-ichuq
glyphicon glyphicon-align-chawpi
glyphicon glyphicon-allinchay-allin
glyphicon glyphicon-alinear-justificar
glyphicon glyphicon-lista nisqa
glyphicon glyphicon-indent-ichuq
glyphicon glyphicon-indent-alliq
glyphicon glyphicon-uya pacha-video
glyphicon glyphicon-siq'i
glyphicon glyphicon-mapa-markakuq
glyphicon glyphicon-allinchay
glyphicon glyphicon-tint nisqa
glyphicon glyphicon-manta llamk'apuy
glyphicon glyphicon-compartir
glyphicon glyphicon-qhaway
glyphicon glyphicon-kuyuchiy
glyphicon glyphicon-paso-qhipaman
glyphicon glyphicon-utqaylla-qhipaman
glyphicon glyphicon-qhipaman
glyphicon glyphicon-pukllay
glyphicon glyphicon-pausa nisqa
glyphicon glyphicon-stop nisqa
glyphicon glyphicon-awpaqman
glyphicon glyphicon-utqaylla ñawpaqman
glyphicon glyphicon-awpaqman puriy
glyphicon glyphicon-eject nisqa
glyphicon glyphicon-chevron-ichuq
glyphicon glyphicon-chevron-allin
glyphicon glyphicon-plus-señal nisqa
glyphicon glyphicon-minus-signo nisqa
glyphicon glyphicon-qichuy-señal
glyphicon glyphicon-ok-señal nisqa
glyphicon glyphicon-tapuy-señal
glyphicon glyphicon-info-señal nisqa
glyphicon glyphicon-pantallamanta hurqusqa
glyphicon glyphicon-qichuy-muyu
glyphicon glyphicon-ok-muyu
glyphicon glyphicon-ban-muyu
glyphicon glyphicon-flecha-ichuq
glyphicon glyphicon-flecha-alliq
glyphicon glyphicon-flecha-up
glyphicon glyphicon-flecha-uraman
glyphicon glyphicon-compartir-alt
glyphicon glyphicon-hatun-hatun-hunt'a
glyphicon glyphicon-hatuy-huchuy
glyphicon glyphicon-exclamación-señal
glyphicon glyphicon-regalo
glyphicon glyphicon-raphi
glyphicon glyphicon-nina
glyphicon glyphicon-ñawi kicharisqa
glyphicon glyphicon-ñawi-wichqay
glyphicon glyphicon-advertencia-señal
glyphicon glyphicon-plano nisqa
glyphicon glyphicon-calendario nisqa
glyphicon glyphicon-aleatorio nisqa
glyphicon glyphicon-comment nisqa
glyphicon glyphicon-imán nisqa
glyphicon glyphicon-chevron-up nisqa
glyphicon glyphicon-chevron-urayman
glyphicon glyphicon-retweet nisqa
glyphicon glyphicon-rantinapaq-carrito
glyphicon glyphicon-carpeta-wichqay
glyphicon glyphicon-carpeta-kichasqa
glyphicon glyphicon-hatun-hatun-sayaq
glyphicon glyphicon-hatun-kamachiy-horizontal
glyphicon glyphicon-hdd nisqa
glyphicon glyphicon-bullhorn nisqa
glyphicon glyphicon-campana nisqa
glyphicon glyphicon-certificado nisqa
glyphicon glyphicon-thumbs-up nisqa
glyphicon glyphicon-thumbs-down nisqa
glyphicon glyphicon-maki-alliq
glyphicon glyphicon-maki-ichuq
glyphicon glyphicon-makiwan wichayman
glyphicon glyphicon-makiwan urayman
glyphicon glyphicon-muyu-flecha-alliq
glyphicon glyphicon-muyu-flecha-ichuq
glyphicon glyphicon-muyu-flecha-wichayman
glyphicon glyphicon-muyu-flecha-uraman
glyphicon glyphicon-globo nisqa
glyphicon glyphicon-llave nisqa
glyphicon glyphicon-rurakuna
glyphicon glyphicon-filtro nisqa
glyphicon glyphicon-maletín nisqa
glyphicon glyphicon-pantalla hunt'a
glyphicon glyphicon-tablero de instrumentos
glyphicon glyphicon-paperclip nisqa
glyphicon glyphicon-sonqo-ch'usaq
glyphicon glyphicon-t'inki
glyphicon glyphicon-teléfono nisqa
glyphicon glyphicon-pushpin nisqa
glyphicon glyphicon-usd nisqa
glyphicon nisqa glyphicon-gbp nisqa
glyphicon glyphicon-sort nisqa
glyphicon glyphicon-orden-por-alfabeto
glyphicon glyphicon-orden-por-alfabeto-alt
glyphicon glyphicon-orden-por-orden
glyphicon glyphicon-orden-por-orden-alt
glyphicon glyphicon-orden-por-atributos
glyphicon glyphicon-orden-por-atributos-alt
glyphicon glyphicon-mana qhawasqa
glyphicon glyphicon-mast'ariy
glyphicon glyphicon-uchuy-uray
glyphicon glyphicon-tukuy-uchuy
glyphicon glyphicon-yaykuna
glyphicon glyphicon-flash nisqa
glyphicon glyphicon-manta lluqsiy
glyphicon glyphicon-musuq-ventana
glyphicon glyphicon-registro nisqa
glyphicon glyphicon-waqaychay
glyphicon glyphicon-kichasqa
glyphicon glyphicon-waqaychasqa
glyphicon glyphicon-yaykuchiy
glyphicon glyphicon-hawaman apachiy
glyphicon glyphicon-kachay
glyphicon glyphicon-disquete-disquete nisqa
glyphicon glyphicon-disquete-waqaychasqa
glyphicon glyphicon-disquete-qichuy
glyphicon glyphicon-disquete-waqaychay
glyphicon glyphicon-disquete-kichasqa
glyphicon glyphicon-tarjeta de crédito nisqa
glyphicon glyphicon-transferencia nisqa
glyphicon glyphicon-cubiertos nisqa
glyphicon glyphicon-umayuq
glyphicon glyphicon-wan ñit’isqa
glyphicon glyphicon-auricular nisqa
glyphicon glyphicon-teléfono-alt
glyphicon glyphicon-torre nisqa
glyphicon glyphicon-estadísticas nisqa
glyphicon glyphicon-sd-video nisqa
glyphicon glyphicon-hd-video nisqa
glyphicon glyphicon-subtítulos nisqakuna
glyphicon glyphicon-sonido-estereo nisqa
glyphicon glyphicon-sonido-dolby nisqa
glyphicon glyphicon-sonido-5-1 nisqa
glyphicon glyphicon-sonido-6-1 nisqa
glyphicon glyphicon-sonido-7-1
glyphicon glyphicon-huk hayñi-marka
glyphicon glyphicon-registro-marka
glyphicon glyphicon-phuyu-urquy
glyphicon glyphicon-phuyu-kamachiy
glyphicon glyphicon-sach'a-conífera
glyphicon glyphicon-sach’a-raphi-raphiyuq
glyphicon glyphicon-cd nisqa
glyphicon glyphicon-waqaychay-willakuy
glyphicon glyphicon-kichasqa-willakuy
glyphicon glyphicon-nivel-up nisqa
glyphicon glyphicon-copia nisqa
glyphicon glyphicon-pasta nisqa
glyphicon glyphicon-alerta nisqa
glyphicon glyphicon-ecualizador nisqa
glyphicon glyphicon-rey nisqa
glyphicon glyphicon-reina nisqa
glyphicon glyphicon-peón nisqa
glyphicon glyphicon-obispo nisqa
glyphicon glyphicon-caballero nisqa
glifico glifico-wawa-fórmula
glyphicon glyphicon-karpa nisqa
glyphicon glyphicon-pizarra nisqa
glyphicon glyphicon-cama nisqa
glyphicon glyphicon-manzana nisqa
glyphicon glyphicon-borrado nisqa
glyphicon glyphicon-reloj de arena nisqa
glyphicon glyphicon-lamparata
glyphicon glyphicon-duplicado nisqa
glyphicon glyphicon-alcancía nisqa
glyphicon glyphicon-tijeras nisqa
glyphicon glyphicon-bitcoin nisqa
glyphicon nisqa glyphicon-btc
glyphicon glyphicon-xbt nisqa
glyphicon glyphicon-yen nisqa
glyphicon glyphicon-jpy nisqa
glyphicon glyphicon-rublo nisqa
glyphicon glyphicon-rub nisqa
glyphicon glyphicon-escala nisqa
glyphicon glyphicon-hielo-lolly nisqa
glyphicon glyphicon-hielo-lolly-malliykusqa
glyphicon glyphicon-yachay
glyphicon glyphicon-akllana-horizontal nisqa
glyphicon glyphicon-akllana-sayaq
glyphicon glyphicon-menú-hamburguesa nisqa
glyphicon glyphicon-modal-ventana nisqa
glyphicon glyphicon-aceite nisqa
glyphicon glyphicon-grano nisqa
glyphicon glyphicon-lentes de sol
glyphicon glyphicon-texto-tamaño
glyphicon glyphicon-texto-color nisqa
glyphicon glyphicon-texto-fondo
glyphicon glyphicon-objeto-align-pata
glyphicon glyphicon-objeto-align-urapi
glyphicon glyphicon-objeto-alinear-horizontal nisqa
glyphicon glyphicon-objeto-align-ichuq
glyphicon glyphicon-objeto-align-vertical nisqa
glyphicon glyphicon-objeto-allinchay-allin
glyphicon glyphicon-kimsa kuchu-alliq
glyphicon glyphicon-kimsa kuchu-ichuq
glyphicon glyphicon-kimsa kuchu-ura
glyphicon glyphicon-kimsa kuchu-pata
glyphicon glyphicon-consola nisqa
glyphicon glyphicon-superscript nisqa
glyphicon glyphicon-suskrito nisqa
glyphicon glyphicon-menú-ichuq
glyphicon glyphicon-menú-alliq
glyphicon glyphicon-menú-uraman
glyphicon glyphicon-menú-up nisqa

Imaynatataq apaykachana

Ruwayrayku, llapa iconokuna huk base clase chaymanta sapalla icono clase munanku. Utilizanaykipaqqa kay codigota yaqa maypipas churay. Aswan allinta saqiy huk espaciota iconowan qillqawan chawpinpi allin relleno kananpaq.

Ama huk componentekunawanqa chaqrukuychu

Icono clasekunaqa manam huk componentekunawan chiqap hukllachasqachu kanman. Chaykunataqa manam huk clasekunawan kuskachu kikin elementomanta llamk’achinanku. Aswanpas, huk anidado yapay <span>chaymanta icono clasekunata <span>.

Ch'usaq elementokunapi llamk'anapaqlla

Icono clasekunaqa mana qillqap contenidoyuq elementokunallapim llamk'achisqa kanan tiyan, mana wawa elementoyuq elementokunallapim.

Icono letra maypi kasqan tikray

Bootstrap icono letra willañiqikuna willañiqipi tarikunanta hapin ../fonts/, huñusqa CSS willañiqikunawan tupachisqa. Chay qillqap willañiqikunata kuyuchiy icha sutichayqa CSS kimsa ñankunamanta hukninpi musuqchay niyta munan:

Pukyupi @icon-font-pathchaymanta/utaq @icon-font-nametikraqkunata tikray Aswan pisi willañiqikuna.
Aswan pisi huñuqpa qusqan URLkuna relativo akllanata llamk'achiy.
url()Huñusqa CSS nisqapi ñankunata tikray .

Ima akllanatapas aswan allin wiñachiy churasqaykiman hina kaqta llamk'achiy.

Iconos accesibles

Yanapakuq tecnologiakuna kunan pacha layakuna CSS ruwasqa willayta willanqa, chaymanta Unicode sapanchasqa qillqakuna. Pantalla ñawiriqkunapi mana munasqa chaymanta pantasqa lluqsiyta hark'anapaq (aswanta mayk'aq iconokuna sapalla sumaqchaypaq llamk'achisqa), aria-hidden="true"atributowan pakayku.

Sichus huk icono llamk'achkanki significadota willanaykipaq (aswan huk sumaqchasqa elemento hinallachu), qhaway kay significadota yanapakuq tecnologiakunamanpas apachisqa kaqta – kayhina, yapa contenidota churay, qhawaypi pakasqa .sr-onlyclasewan.

Sichus mana wak qillqayuq kamachiykunata ruwachkanki (kayhina huk <button>huk iconollata hap'in), sapa kuti huk contenidota qunayki tiyan kamachiypa propósito riqsichinapaq, chaymanta yanapakuq tecnologiakuna ruwaqkunaman sentidoyuq kanqa. Kayhina kaqtinqa, huk aria-labelatributota kikin kamachiypi yapayta atinki.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Ejemplos

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Huk icono huk willaypi llamk'achisqa pantay willay kaqta willanapaq , yapasqa .sr-onlyqillqawan kay yuyaychayta yanapaq tecnologiakuna ruwaqkunaman apachinapaq.

Huk allin correo electrónico nisqatam qillqay

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

T'inkikunap listankunata rikuchinapaq tikray atikuq, contextual menú. JavaScript nisqap urayk'achiqninwan tinkinakuy rurasqa .

Qatina

Uraykachiqpa llamk'ayninta chaymanta urayk'aq menú nisqatapas ukhupi p'istuy .dropdown, icha huk elemento nisqa willakuq position: relative;. Chaymantataq menú nisqapi HTML nisqa yapay.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

.dropupUray menúkuna tikrasqa kanman wichayman mast'arikunanpaq (urayman ranti) tayta mamaman yapaspa .

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Alineación

Ñawpaqmanta, huk urayk'aq menú kikinmanta churasqa 100% patamanta chaymanta tayta-mamanpa paña ladonpi. Hukman yapay .dropdown-menu-rightpañaman .dropdown-menuurayk’aq menú nisqapi chiqanchay.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Umakuna

Ima urayk'aq menú kaqpipas ruwanakuna t'aqakunata etiquetananpaq huk umalliqta yapay.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Rakiq

Huk rakiq yapay sapaq serie t'inkikuna huk urayk'aq menú kaqpi.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Menú nisqapi kaqkuna mana llamk’achisqa

Hukman yapay urayk'aqpi t'inkita mana llamk'achinapaq .disabled.<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Huk chirullapi huk serie botonkunata huñuna boton huñuwan. Yanapakuy JavaScript radio kaqpi chaymanta qhaway qutu estilo ruwaypi yapay ñuqaykupaq botones plugin kaqwan .

Tooltips & popovers botón qutukunapi especial churayta munanku

Huk ukhupi elementokunapi yanapakuykunata utaq popovers .btn-groupllamk'achkaspa, akllanata container: 'body'mana munasqa efectos secundarios kaqmanta (kayhina elemento aswan ancho wiñaynin chaymanta/utaq muyu k'uchukunata chinkachiy mayk'aq yanapakuypa yuyaychaynin utaq popover llamk'achisqa).

Aseguray allinta `role`hinaspa huk etiquetata quy

Yanapakuq tecnologiakuna – pantalla ñawiriqkuna hina – huk serie botones huñusqa kaqta willanankupaq, huk roleatributo tupaq quna tiyan. Botón huñukunapaq, kayqa kanman role="group", llamkanakunap llikankuna huk role="toolbar".

Huk excepción kanku qutukuna mayqinkunachus huk kamachiyllata hap'inku (kayhina, chiqanchasqa botón qutukuna elementokunawan <button>) utaq huk urayk'aq.

Chaymantapas, huñukunaman chaymanta yanapakuypa barrankunaman huk sut'i etiqueta qusqa kanan tiyan, imaynachus aswan yanapakuq tecnologiakuna wakhinamanta mana willanqakuchu, chiqan roleatributo kaptinpas. En los ejemplos proporcionados aquí, utilizamos aria-label, pero alternativas como aria-labelledbytambién pueden ser utilizadas.

Ejemplo básico

Huk serie ñit'inakunata .btnin nisqawan p'istuy .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Huñuy conjuntos de <div class="btn-group">en a <div class="btn-toolbar">para componentes más complejos.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Tamaño

Huk huñupi sapa ñit'inaman ñit'ina sayachiy clasekunata churanaykimantaqa, sapaman yapaylla .btn-group-*, .btn-groupachka huñukunata anidado kaqpipas.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Nido

Huk huk .btn-groupukhupi churay .btn-groupmayk'aq huk serie botoneswan chaqrusqa urayk'aq menúkuna munanki.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Variación vertical nisqa

Huk huñu botones sayaqpi pilasqa rikurinanpaq ruway, manataq horizontal nisqapichu. Rakisqa ñit'inakuna urayk'achiqkuna kaypi mana yanapasqachu.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Justificasqa boton huñukuna

Huk huñu botones kaqlla sayayniyuq llañuyachiyta ruway, tayta-mamanpa lliw anchunta mast’arinanpaq. Hinallataq llamkan botón urayk'aqkunawan botón qutu ukhupi.

Fronteras nisqakunata hap’iy

Botonkuna chaninchanapaq llamk'achisqa HTML chaymanta CSS específico kaqrayku (chayqa display: table-cell), paykunapura fronterakuna iskay kutita yapakun. Sapa kuti ñit'ina huñukunapi, margin-left: -1pxllamk'achkan k'uchukunata pilanapaq, chayta hurqunamantaqa. Ichaqa, marginmanam llamkanchu display: table-cell. Chayhina, Bootstrap kaqman ruwasqaykimanta, fronterakunata hurquyta utaq wakmanta llimp'iyta munanki.

IE8 y fronteras

Internet Explorer 8 mana huk chiqanchasqa ñit'ina huñupi botones kaqpi fronterakunata ruwanchu, llamk'achkan <a>utaq <button>elementokuna kaptinpas. Chayta atipanaykipaqqa sapa botonta huk botonwan wankuy .btn-group.

Astawan yachaykunaykipaq qhaway #12476 .

Con `<a>`elementos

Huk serie .btns nisqakunata p'istuylla .btn-group.btn-group-justified.

Lluqi Chawpi Paña

Lluqi Chawpi

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Enlaces que actúan como botones

Sichus <a>elementokuna botones hina ruwanankupaq llamk'achkanku – p'anqa ukhupi ruwayta qallarichispa, aswan wak qillqaman utaq t'aqaman kunan p'anqa ukhupi puriymanta – huk tupaq role="button".

Con `<button>`elementos

<button>Elementokunawan chiqanchasqa ñit'ina huñukunata llamk'achinaykipaqqa , sapa ñit'inata huk ñit'ina huñupi p'istuykanayki tiyan . Yaqa llapan maskaqkuna mana allintachu CSSniyku <button>elementokunaman chaninchaypaq churanku, ichaqa botón urayk'achiqkuna yanapakuyniykumanta, chaymanta llamk'ayta atiyku.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Mayqin ñit'inatapas llamk'achiy huk urayk'aq menú llamk'achiyta huk ukhupi churaspa chaymanta .btn-groupallin menú markayta quspa.

Plugin nisqamanta dependencia

Botón urayk'achiqkuna urquq plugin Bootstrap kaqpa layaykipi churasqa kananta munanku.

Huklla botón urayk’aqkuna

Huk ñit'inata huk urayk'aq tikrayman tikray wakin qallariy marka tikraykunawan.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Rakiy botón urayk’aqkuna

Chaynallataq, rakisqa ñit'inakuna urayk'achiqkunata ruway kikin marka tikraykunawan, sapaq ñit'inallawan.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Tamaño

Botonkuna urayk'achiqkuna tukuy sayayniyuq botoneswan llamk'anku.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Variación de caída

Taytaman yapaspa elementokuna hawapi urayk'aq menúkunata .dropupllamk'achiy.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Formulario kamachiykunata mast'ariy qillqa utaq ñit'inakunata yapaspa ñawpaq, qhipa utaq iskaynin lado mayqin qillqamanta ruwasqa <input>. Hukwan .input-groupicha hukllaman elementokunata ñawpaqman churanapaq icha yapanapaq .input-group-addonllamk'achiy ..input-group-btn.form-control

Textual `<input>`slla

<select>Kaypi elementokunata ama llamk'achiychu imaraykuchus mana WebKit maskaqkunapi hunt'asqa estiloyuq kayta atinkuchu.

<textarea>Kaypi elementokunata ama llamk'achiychu rowswakin kutikunapi atributon mana respetasqa kasqanrayku.

Yaykuna huñukunapi yanapakuykuna & popoverkuna huk especial churayta munanku

Huk , huk ukhupi elementokunapi yanapakuykunata utaq popovers .input-groupllamk'achkaspa, akllanata container: 'body'mana munasqa efectos secundarios kaqmanta (kayhina elemento aswan ancho wiñaynin chaymanta/utaq muyu k'uchukunata chinkachiy mayk'aq yanapakuypa yuyaychaynin utaq popover llamk'achisqa).

Ama huk componentekunawanqa chaqrukuychu

Ama formulario huñukunata utaq rejilla columna clasekunata chiqapmanta yaykusqa huñukunawan chaqruychu. Aswanpas, yaykusqa huñuta formulario huñu utaq rejillawan tupaq elemento ukhupi nido.

Etiquetas nisqakunata yapaypuni

Pantalla ñawiriqkuna formulariokunaykiwan sasachakuyniyuq kanqanku sichus mana sapa yaykuypaq etiquetata churankichu. Kay yaykusqa huñukunapaq, ima yapasqa etiqueta utaq ruwanakuna yanapaq tecnologiakunaman apachisqa kananpaq qhaway.

Chiqan técnica llamk'achinapaq (rikuna <label>elementokuna, <label>elementokuna pakasqa .sr-onlyclase llamk'achispa, utaq aria-label, aria-labelledby, aria-describedby, titleutaq placeholderatributo llamk'achiynin) chaymanta ima yapasqa willayta apachinapaq necesitanqa hukniray kanqa chiqa laya interfaz widget ruwasqaykimanta. Kay rakipi ejemplokuna huk iskay kimsa yuyaychasqa, caso específico nisqa ruwaykunata qun.

Ejemplo básico

Huk yapayta utaq huk ñit'inata huk yaykuypa iskaynin ladunpi churay. Huk yaykuchiypa iskaynin ladonkunapipas churawaqmi.

Mana huk ladullapi achka yapasqakunata ( .input-group-addonutaq ) yanapaykuchu..input-group-btn

Mana huk yaykuy huñupi achka formulario-controlkunata yanapaykuchu.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Tamaño

Yanapakuy relativo formulario sayay clasekuna .input-groupkikinman chaymanta contenidokuna ukhupi kikinmanta sayayninta tikranqa-mana necesidadchu sapa elementopi formulario control sayay clasekuna yapamanta ruway.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Cajas de verificación y addones de radio

Ima qhaway qututapas icha radio akllanatapas huk yaykusqa huñup yapaynin ukhupi qillqap rantinpi churay.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Addones de botón

Yaykuy huñukunapi botones huk chhika hukniray kanku chaymanta huk yapasqa nivel anidado kaqmanta munanku. En vez de .input-group-addon, necesitarás utilizar .input-group-btnpara envolver los botones. Kayqa mana llamk'achiyta atikuq ñawpaqmanta maskaq estilokunarayku mañasqa.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Botones con desplegables

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Botones segmentados

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Achka botones

Huk yapasqalla sapa laduyuq kayta atikunki chaypas, huk sapalla ukhupi achka ñit'inakunayuq kayta atikunki .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs Bootstrap kaqpi tarikuqkuna qunakusqa markayuq kanku, qallariy .navclase kaqwan, chaymanta rakisqa estadokuna. Sapa estilopura tikranapaq tikraq clasekunata tikray.

Tab paneles kaqpaq navs llamk'achiyta JavaScript tabs plugin kaqninta munan

Tabable áreas kaqwan tablakunapaq, tablakuna JavaScript plugin kaqwan llamk'anayki tiyan . Markaqa yapasqa chaymanta ARIA atributokunatapas mañanqa role– qhaway pluginpa ejemplo marcayninta aswan sut'inchaykunapaq.

Ruway navs llamk'achisqa puriy hina chayayta atikuq

Sichus navs llamk'achkanki huk purina barra qunapaq, ama hina kaspa huk yapayta role="navigation"aswan lógico tayta waqaychanaman chaymanta <ul>, utaq huk <nav>elementota tukuy puriypa muyuriqninpi p'istuy. Ama ruwayta <ul>kikinman yapaychu, kayqa hark'anmanmi yanapaq tecnologiakuna chiqap lista hina willasqa kananpaq.

Pestañas

Reparay chay claseqa clase base nisqatan .nav-tabsnecesitan ..nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pastillas

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pastillas nisqapas verticalmente apilable nisqallanmi. Yapaylla .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Chaninchasqa

Facilmente ruway pestañas utaq pastillas igual anchos de su padre en pantallas más anchos de 768px con .nav-justified. Aswan huch'uy pantallakunapi, nav t'inkikuna pilasqa kachkan.

Chiqanchasqa navbar nav t'inkikuna kunan mana yanapasqachu.

Safari y navs justificados respondedores

v9.1.2 kaqmanta, Safari huk pantayta rikuchin mayqinpichus maskaqniykipa sayayninta horizontal kaqpi tikray pantaykunata ruway pantaykunata chaninchasqa nav kaqpi ruwan chaymanta musuqyachiypi ch'uyanchasqa. Kay pantasqa chaninchasqa nav rikch'anapipas rikuchikunmi .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Mana llamk'achisqa t'inkikuna

Ima componente nav kaqpaqpas (pestañas utaq pastillas), yapay gris t'inkikuna.disabled kaqpaq chaymanta mana efectos hover kaqpaq .

T'inki ruwanakuna mana llamk'achisqachu

Kay claseqa 's rikch'aynintalla tikranqa <a>, mana llamk'aynintachu. Sapanchasqa JavaScript llamk'achiy kaypi t'inkikunata mana llamk'achinaykipaq.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Utilizando los desplegables

Yanapakuy urayk'aq menúkuna huk pisi yapasqa HTML kaqwan chaymanta urayk'aq JavaScript plugin kaqwan .

Pestañas con desplegables

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Pastillas con caídas

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbars kutichiq meta componentes kanku chaymanta llamkanaykipaq utaq kitiykipaq puriy umalliqkuna hina llamk'anku. Paykunaqa urmasqa qallarinku (hinallataq tikranapaq kanku) kuyuchina qhawaykunapi chaymanta horizontal kanku imaynachus tarikuq qhaway punku ancho yapakun.

Chiqanchasqa navbar nav t'inkikuna kunan mana yanapasqachu.

Contenido desbordado

Bootstrap mana yachanchu mayk'a espaciotachus navbar kaqpi contenido necesitan, iskay kaq filapi contenido p'istuyaywan sasachakuykunawan atipankiman. Kayta allichanaykipaqqa kaykunatam ruwawaq:

Navbar imakunap achka kayninta utaq anchunta pisiyachiy.
Wakin navbar imakunata wakin pantalla sayaykunapi pakay kutichiq yanapakuy clasekuna llamk'achispa .
Cambiar el punto en que tu navbar cambia entre modo colapso y horizontal. Chikanchasqata ruway @grid-float-breakpointicha kikiyki willay mast'ariy tapuyniyki yapay.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Navbar markata kikin siq'iykiwan tikray qillqata huk <img>. Imaraykuchus chay .navbar-brandkikin rellenoyuq chaymanta sayayniyuq, wakin CSS siq'iykimanhina llallinayki kanman.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Ukhupi formulario willayta churay .navbar-formallin sayaq chiqanchaypaq chaymanta urmasqa ruwaypaq k'iti qhaway punkukunapi. Chiqanakuy akllanakunata llamk'achiy maypi tiyakun navbar contenido ukhupi tanteanaykipaq.

Huk umakuna hina, .navbar-formcompartin achka su código con .form-inlinevia mixin. Wakin formulario kamachiykuna, yaykusqa huñukuna hina, takyasqa anchokuna huk navbar ukhupi allinta rikuchinapaq mañanman.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Etiquetas nisqakunata yapaypuni

Pantalla ñawiriqkuna formulariokunaykiwan sasachakuyniyuq kanqanku sichus mana sapa yaykuypaq etiquetata churankichu. Kay chiru ukhupi formulariokunapaq, .sr-onlyclaseta llamk'achispa etiquetakunata pakayta atinki. Yanapakuq tecnologiakuna kaqpaq huk etiqueta quypaq aswan huk ruwanakuna kanku, kayhina aria-label, aria-labelledbyutaq titleatributo kaqhina. Sichus mana mayqinpas kaykunamanta kanchu, pantalla ñawiriqkuna placeholderatributo llamk'achiyta atinku, sichus kan, ichaqa reparay placeholderhuk etiquetado ruwanakunap rantinpi llamk'achiyta mana yuyaychasqachu.

Claseta yapay mana .navbar-btna <button>kaqpi tiyaq <form>elementokunaman navbar kaqpi sayaq chawpichaypaq.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

<p class="navbar-text">Signed in as Mark Otto</p>

Runakuna t'inkikuna estándar kaqwan llamk'achkanku mayqinkunachus mana sapa kuti navbar puriy componente ukhupichu kanku, .navbar-linkclaseta llamk'achiy allin llimp'ikunata yapanapaq ñawpaqmanta chaymanta inverso navbar akllanakunapaq.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Nav t'inkikunata, formulariokunata, ñit'inakunata utaq qillqakunata chiqanchay, .navbar-leftutaq .navbar-rightyanapakuy clasekuna llamk'achispa. Iskaynin clasekuna huk CSS float nisqa yapanqa chay nisqa ñanpi. Ejemplopaq, nav t'inkikunata chiqanchaypaq, huk sapaqpi churay chaymanta sapanchasqa <ul>yanapakuy clase churasqa kaqwan.

Kay clasekuna mixin-ed kaqmanta .pull-leftchaymanta .pull-right, ichaqa paykuna alcanceyuq kanku medios tapuykunaman aswan facil hapiypaq navbar componentes kaqmanta dispositivo sayaykunapi.

Yanapakuy .navbar-fixed-topchaymanta huk .containerutaq .container-fluidchawpiman chaymanta pad navbar contenidota yapay chaymanta churay.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Requerido acolchado del cuerpo

Allinchasqa navbar huk willayniykimanta llanthunqa, paddingmana <body>. Kikin chaninchasqaykikunata pruebay utaq uraypi kaq fragmentoykuta llamk'achiy. Yuyaychay: Ñawpaqmanta, navbar 50px sayayniyuq.

body { padding-top: 70px; }

Aswan allinta kayta churaymanta qhipaman Bootstrap CSS ukhumanta.

Yanapakuy .navbar-fixed-bottomchaymanta huk .containerutaq .container-fluidchawpiman chaymanta pad navbar contenidota yapay chaymanta churay.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Requerido acolchado del cuerpo

Allinchasqa navbar huk willayniykimanta llanthunqa, manachus paddinguranpi yapanki <body>. Kikin chaninchasqaykikunata pruebay utaq uraypi kaq fragmentoykuta llamk'achiy. Yuyaychay: Ñawpaqmanta, navbar 50px sayayniyuq.

body { padding-bottom: 70px; }

Aswan allinta kayta churaymanta qhipaman Bootstrap CSS ukhumanta.

Huk hunt'a ancho navbar ruway mayqinchus p'anqawan karuman kuyuchin yapaspa .navbar-static-topchaymanta huk .containerutaq .container-fluidchawpiman chaymanta pad navbar contenidota churay.

Mana .navbar-fixed-*clasekuna hinachu, manan necesitankichu ima acolchadotapas cambianayki chay body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Navbarpa rikchayninta hukchay yapaspa .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

T'antakuna

Kunan kaq p'anqap maypi kayninta huk purina jerarquía ukhupi rikuchiy.

T'aqaqkuna kikinmanta CSS kaqpi yapasqa kanku :beforechaymanta content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Paginación

Quy p'anqa t'inkikuna kitiykipaq utaq ruwanaykipaq achka p'anqakuna p'anqakuna componente kaqwan, utaq aswan sasan pager alternativa kaqwan .

Ñawpaqmanta churasqa paginakuna

Simple paginación inspirada en Rdio, genial para apps y resultados de búsqueda. Hatun bloqueqa sasa pantaymi, facil escalable, hatun ñit'iy áreas nisqakunata qun.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Etiquetar el componente de paginación

Componente paginación huk <nav>elementowan p'istuykusqa kanan tiyan huk puriy t'aqa hina riqsichinapaq pantalla ñawiriqkuna chaymanta wak yanapakuq tecnologiakuna. Chaymanta, imaynachus huk p'anqa aswan huk chayhina puriy t'aqayuqña kanman (kayhina umapi ñawpaq puriy, utaq huk lado barra puriy), allin kanman huk sut'inchayta aria-labelquypaq <nav>mayqinchus propósito kaqta rikuchin. Ejemplopaq, sichus paginakuna componente huk huñu maskana ruwasqakuna ukhupi purinapaq llamk'achisqa, huk allin etiqueta kanman aria-label="Search results pages".

Estados discapacitados y activos

T'inkikuna hukniray circunstanciakunapaq ruwanapaq kanku. .disabledMana ñit'inapaq t'inkikunapaq chaymanta .activekunan p'anqata rikuchinapaq llamk'achiy .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Yuyarichiyku llamk'aq utaq mana llamk'achisqa anclakuna kaqmanta t'inkinaykipaq <span>, utaq anclata qunqay ñawpaq/qhipa flechakuna kaqpi, ñit'iy ruwanakunata hurqunaykipaq munasqa estilokuna waqaychaspa.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Tamaño

¿Aswan hatunchu icha aswan huch’uy paginaciontachu munanki? Añadir .pagination-lgo .pagination-smpara tamaños adicionales.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Pager nisqa

Utqaylla ñawpaq chaymanta qatiq t'inkikuna sasan pagina ruwanakuna k'anchay markawan chaymanta estilokunawan. Allinmi kanman sasan sitiokunapaq blogkuna utaq revistakuna hina.

Ejemplo predeterminado

Ñawpaqmanta, pagerqa t'inkikunata chawpichan.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

T'inkikuna chiqanchasqa

Hukninpiqa, sapa t'inkita kinraykunaman chiqanchayta atinki:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Munasqa mana atiq estado

Pager t'inkikunapas paginamanta general .disabledutilidad claseta llamk'achinku.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Qatina

Ejemplo titulo Musuq

<h3>Example heading <span class="label label-default">New</span></h3>

Variaciones disponibles

Huk etiquetapa rikchayninta tikranaykipaq mayqintapas uraypi rimasqa tikraq clasekunata yapay.

Ñawpaqmanta Primaria Éxito Info Advertencia Peligro

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

¿Toneladas etiquetasniyuqchu kanki?

Ruway sasachakuykuna rikhurinman mayk'aq chunkakuna chiru ukhupi etiquetakuna huk k'iti waqaychana ukhupi kanki, sapa juk kikin inline-blockelementoyuq (huk icono hina). Kayta muyuriq ñanqa churaymi display: inline-block;. Contextopaq, huk ejemplopaqpas, qhaway #13219 .

<span class="badge">Musuq utaq mana ñawirisqa imakuna mana sasachu resaltay huk t'inkikunaman yapaspa , Bootstrap navs chaymanta aswan.

Bandeja de entrada42.

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Kikinmanta urmaykukuq

Mana musuq utaq mana ñawirisqa imakuna kaqtin, insigniakunalla urmanqaku (CSS :emptyakllaq kaqnintakama) mana ima contenido ukhupi kaptin.

Chawpi maskaqpa tupachiynin

Insigniakuna mana kikinmanta urmanqakuchu Internet Explorer 8 kaqpi imaraykuchus :emptyakllaqpaq yanapakuy mana kanchu.

Nav estados activos nisqaman adaptakun

Estilos ruwasqakuna churasqa kanku insigniakuna churanapaq estados activos kaqpi pastilla navegación kaqpi.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Huk llamp'u, flexible componente kaqmanta mayqinchus munasqamanta tukuy qhaway punkuta mast'ariyta atin llave contenidota sitioykipi rikuchinanpaq.

Allin p'unchaw, pacha!

Kayqa huk unidad heroe simple kaq, huk componente simple jumbotron-estilo kaqmanta waqyanapaq extra atención kaqmanta contenido utaq willakuy rikuchisqa kaqman.

Astawan yachaykunaykipaq

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

.containerJumbotron hunt’a ancho kananpaq, hinallataq mana muyu k’uchuyuq kananpaq, llapan s hawapi churay hinaspa aswanpas huk .containerukhupi yapay.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Huk sanu shell hukpaq h1apropiadamente espaciota hawaman chaymanta segmentar secciones de contenido huk p'anqapi. Chay h1's ñawpaqmanta smallelementota llamk'achiyta atin, chaymanta aswan huk componentekuna (yapasqa estilokunawan).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Bootstrap kaqpa rejilla sistemanta mast'ariy huch'uy componente kaqwan, mana sasachu siq'ikuna, videokuna, qillqa chaymanta aswan rejillakuna rikuchinapaq.

Sichus maskachkanki Pinterest hina rikuchiyta uchuy siq'ikuna hukniray sayayniyuq chaymanta/utaq anchoyuq, huk kimsa kaq plugin llamk'achinayki tiyan kayhina Masonry , Isotope , utaq Salvattore .

Ejemplo predeterminado

Ñawpaqmanta, Bootstrap kaqpa uchuy siq'inkuna ruwasqa kanku t'inkisqa siq'ikuna aswan pisi mañasqa markawan rikuchinapaq.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Contenido personalizado

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.

Ñitina Ñitina

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.

Ñitina Ñitina

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.

Ñitina Ñitina

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Quy contextual retroalimentación willakuykunata típico ruwaq ruwaykunapaq makilla kaqniyuq chaymanta flexible willay willakuykunawan.

Ejemplos

Ima qillqatapas chaymanta huk akllana qarquy ñit'inata .alertchaymanta huk tawa contextual clasekunamanta (kayhina, .alert-success) qallariy willaykunapaq p'istuy.

Mana ñawpaqmanta churasqa clase

Alertakuna mana ñawpaqmanta clasekunayuqchu kanku, base chaymanta modificador clasekunalla. Huk ñawpaqmanta gris willayqa mana ancha yuyayniyuqchu, chayrayku huk laya contextual clase kaqnintakama riqsichinayki tiyan. Akllay allin ruwaymanta, infomanta, advertenciamanta utaq peligromanta.

Allinmi! Kay importante alerta mensajeta allinta leerqanki.

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

Manchachiy! Aswan allinmi qan kikiyki qhawarikuy, manan ancha allintachu qhawarikunki.

¡Ay snap! Huk iskay kimsa imakunata tikray hinaspa hukmanta apachiyta kallpanchakuy.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Alertakuna mana chaskiy atina

.alert-dismissibleIma alerta kaqpipas ruway huk akllana chaymanta wichq'ana botón yapaspa .

JavaScript willay plugin nisqatam munan

Tukuy llamk'anapaq, mana saqisqa willaykunapaq, willaykunata JavaScript plugin kaqwan llamk'anayki tiyan .

Manchachiy! Aswan allinmi qan kikiyki qhawarikuy, manan ancha allintachu qhawarikunki.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Llapan dispositivokunapi allin ruwayta qhaway

Aswan allinta llamk'achiy <button>elementota data-dismiss="alert"willay layawan.

Enlaces en alertas

Yanapakuy .alert-linkclaseta llamk'achiy usqhaylla tupaq llimp'i t'inkikuna mayqin willay ukhupi qunapaq.

Allinmi! Kay importante alerta mensajeta allinta leerqanki .

¡Umakuna wichayman! Esta alerta necesita tu atención , pero no es super importante.

Manchachiy! Aswan allinmi qan kikiyki qhawarikuy, manan ancha allintachu qhawarikunki .

¡Ay snap! Huk iskay kimsa imakunata tikray hinaspa hukmanta apachiyta kallpanchakuy.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Huk llamkana puriy utaq ruwaypa puriyninmanta kunan pacha yuyaykunata quy sasan ichaqa flexible ñawpaqman puriy barrakunawan.

Chawpi maskaqpa tupachiynin

Progreso barrakuna CSS3 tikraykunata chaymanta animacionkunata wakin efectosninkuta aypanankupaq llamk'achinku. Kay ruwanakuna mana yanapasqachu kanku Internet Explorer 9 kaqpi chaymanta urayninpi utaq ñawpaq Firefox kaqpi. Opera 12 nisqaqa manam animacionkunata yanapanchu.

Contenido Waqaychasqa Kamachiy (CSP) tupachiy

Sichus web kitiyki huk Contenido Waqaychasqa Kamachiyniyuq (CSP) mayqinchus mana saqinchu style-src 'unsafe-inline', chaymanta mana atiwaqchu llamk'achiyta inline styleatributokuna ñawpaqman puriy barra anchokunata churanapaq imaynachus uraypi ejemploykupi rikuchikun. Huk ruwanakuna anchokuna churanapaq mayqinkunachus sinchi CSPs kaqwan tupaq kanku huk pisi sapanchasqa JavaScript llamk'achiyta (chay churan element.style.width) utaq sapanchasqa CSS clasekuna llamk'achiyta.

Ejemplo básico

Ñawpaqmanta churasqa ñawpaqman puriy barra.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Con etiqueta

Ñawpaqman puriy barra ukhumanta <span>with claseta hurquy, rikukuq pachakmanta huknin rikuchinaykipaq..sr-only

60% nisqa.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Etiqueta qillqa pisi pachakmanta hukninpaqpas ñawirinapaq hina kananpaq min-width, ñawpaqman puriy barraman a yapayta yuyaykuy.

0% nisqa.

2% nisqa.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Alternativas contextuales nisqa

Progreso barrakuna wakin kikin ñit'inata llamk'achinku chaymanta alerta clasekunata sapanchasqa estilokunapaq.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Rayado

Gradiente nisqawanmi huk rayayuq efectota ruwan. Mana IE9 kaqpi chaymanta uraypi tarikunchu.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animado

Yanapay .activea .progress-bar-stripedpara animar las rayas derecha a izquierda. Mana IE9 kaqpi chaymanta uraypi tarikunchu.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Apilasqa

Achka barrakunata hukllaman churay, .progresschaykunata pilanapaq.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Abstracto objeto estilokuna imaymana laya componentekuna ruwanapaq (imayna blog comentarios, Tweets, hukkuna) chaymanta huk lluq'i- utaq paña-alineado siq'ita qillqa contenidowan kuska rikuchin.

Ñawpaqmanta churasqa willaykunata

Ñawpaqmanta willay mast'ariq huk willay imayay (siq'ikuna, video, uyarina) huk willay bloquepa lluq'i utaq paña kaqpi rikuchin.

Medios de comunicación nisqap umalliqnin

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.

Medios de comunicación nisqap umalliqnin

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.

Anidado medios de comunicación umalliq

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.

Medios de comunicación nisqap umalliqnin

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis.

Medios de comunicación nisqap umalliqnin

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Chay clasekuna .pull-leftchaymanta .pull-rightkanku chaymanta ñawpaqta llamk'achisqa karqanku huk parte medios de comunicación componente kaqmanta, ichaqa chay llamk'anapaq v3.3.0 kaqmanta manaña llamk'achisqachu kanku. Paykunaqa yaqa kaqlla kanku .media-leftchaymanta .media-right, salvo que .media-rightdebe ser colocado después de el .media-bodyen el html.

Alineación de medios de comunicación

Chay siq'ikunaqa icha huk willaykunatam pataman, chawpiman icha urayman chiqanchasqa kanman. Ñawpaqmanta churasqa kaqqa patamanta chiqanchasqa kachkan.

Patapi alineado medios de comunicación

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus y magnis disparuriente montes, nascetur ridiculus mus nisqa.

Chawpi chiqanchasqa willay mast’ariqkuna

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus y magnis disparuriente montes, nascetur ridiculus mus nisqa.

Uramanta chiqanchasqa willay mast’ariqkuna

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus y magnis disparuriente montes, nascetur ridiculus mus nisqa.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Lista de medios de comunicación

Huk chhika yapasqa markawan, lista ukhupi willaykunata llamk'achiy atikunki (allin rimay q'ipikuna utaq qillqakuna listakuna).

Medios de comunicación nisqap umalliqnin

Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis.

Anidado medios de comunicación umalliq
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis.

Anidado medios de comunicación umalliq
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis.

Anidado medios de comunicación umalliq
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisque ante sollicitudin commodo nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Lista huñukuna huk flexible chaymanta atiyniyuq componente kanku mana elementokuna sasan listakunallatachu rikuchinapaq, aswanpas complejokuna ruwasqa contenidoyuq.

Ejemplo básico

Aswan sapaq lista huñuqa huk mana kamachisqa listalla lista elementokunayuq, chaymanta allin clasekunayuq. Chaypi ruway qatiq akllanakunawan, utaq kikiyki CSS necesitasqaykimanhina.

Cras justo odio
Dapibus ac nisqa wasipi
Morbi leo risus nisqa
Porta ac consectetur nisqa
Vestibulo en eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Insignias

Insigniakuna componente mayqin lista qutu kaqmanpas yapay chaymanta kikinmanta paña kaqpi churasqa kanqa.

14Cras justo odio
2.Dapibus ac nisqa wasipi
1.Morbi leo risus nisqa

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

T'inkisqa kaqkuna

Lista huñu imakunata t'inkiy lista elementokuna rantipi ancla etiquetakuna llamk'achispa (chaypas huk tayta mama niyta munan huk <div>ranti <ul>). Mana sapa elemento muyuriqpi sapan tayta mamakuna necesitakunchu.

Cras justo odio Dapibus ac nisqa wasipi Morbi leo risus nisqa Porta ac consectetur nisqa Vestibulo en eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Artículos de botón

Lista huñu imakuna lista elementokuna rantipi botones kanman (chaypas huk tayta mama niyta munan huk <div>ranti <ul>). Mana sapa elemento muyuriqpi sapan tayta mamakuna necesitakunchu. Ama .btnkaypi clasekuna estándar nisqakunata llamk'achiychu.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Mana atiq kaqkuna

Hukman yapay grisman .disabledlluqsinanpaq .list-group-itemmana atisqa rikurinanpaq.

Cras justo odio Dapibus ac nisqa wasipi Morbi leo risus nisqa Porta ac consectetur nisqa Vestibulo en eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Clases contextuales nisqa

Contextual clasekunata llamk'achiy lista elementokunata estilopaq, ñawpaqmanta utaq t'inkisqa. También incluye .activeestado.

Dapibus ac nisqa wasipi
Cras tiyay amet nibh libero
Porta ac consectetur nisqa
Vestibulo en eros

Dapibus ac nisqa wasipi Cras tiyay amet nibh libero Porta ac consectetur nisqa Vestibulo en eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Contenido personalizado

Yaqa mayqin HTML ukhupipas yapay, uraypi kaqhina t'inkisqa lista huñukunapaqpas.

Huñupi kaqpa umalliqninta qillqay

Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Maecenas sed diam nisqa risus varius blandit nisqa.

Huñupi kaqpa umalliqninta qillqay

Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Maecenas sed diam nisqa risus varius blandit nisqa.

Huñupi kaqpa umalliqninta qillqay

Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Maecenas sed diam nisqa risus varius blandit nisqa.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Mana sapa kutichu necesario kaptinpas, wakin kutipiqa DOM nisqaykita huk cajaman churanayki tiyan. Chay situacionkunapaq, componente panel nisqapi prueba.

Ejemplo básico

Ñawpaqmanta, tukuy .panelruwan wakin básica frontera chaymanta relleno wakin contenidota hap'inapaq churay.

Ejemplo de panel básico

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel con rubro

Mana sasachakuspalla huk umalliq waqaychanata panelniykiman yapay .panel-heading. Hinallataq mayqin <h1>- <h6>huk .panel-titleclasewan huk ñawpaqmanta ruwasqa umalliq yapanaykipaq churawaq. <h1>Ichaqa - nisqap qillqap sayayninkunaqa , <h6>nisqawanmi llallichisqa kachkan .panel-heading.

Allin t'inkikuna llimp'inapaq, ama hina kaspa t'inkikunata umalliqkunapi churay .panel-title.

Panel en rubro sin título

Contenido del panel

Titulo del panel

Contenido del panel

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel con pie

Botonkunata icha iskay ñiqin qillqakunata .panel-footer. Reparay panelpa chakinkuna mana llimp'ikunata chaymanta fronterakunata herenciata qunkuchu contextual variaciones llamk'achkaspa mana ñawpaq kaqpi kanankupaq ruwasqa kasqankurayku.

Contenido del panel

Panel de pie

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Alternativas contextuales nisqa

Huk componentekuna hina, facilmente huk panel aswan significativo ruway huk contexto particular kaqman mayqin clase estado contextual kaqmanta yapaspa.

Titulo del panel

Contenido del panel

Titulo del panel

Contenido del panel

Titulo del panel

Contenido del panel

Titulo del panel

Contenido del panel

Titulo del panel

Contenido del panel

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Con mesas

.tableHuk panel ukhupi ima mana bordado kaqtapas yapay mana llamkanayuq diseñopaq. Sichus huk kan chayqa .panel-body, huk yapasqa bordeta yapayku tabla pataman t'aqanapaq.

Panelpa umalliqnin

Wakin ñawpaqmanta ruwasqa panel contenido kaypi. Nulla vitae elit libero, huk pharetra augue. Enean lacinia bibendum nisqa mana yurasqa consectetur nisqa. Enean eu leo quam. Pellentesco ornare sem lacinia quam venenatis vestibulo nisqa. Nullam id dolor id nibh ultricies antawakuna ut id elit.

# .	Ñawpa suti	Taytamama suti	Nombre de usuario
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Mana panel kurku kaptinqa, componenteqa panel umalliqmanta tablaman mana hark'asqa kuyun.

Panelpa umalliqnin

# .	Ñawpa suti	Taytamama suti	Nombre de usuario
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Lista huñukunawan

Ima panel ukhupipas hunt'asqa ancho lista huñukunata mana sasachakuspa churay.

Panelpa umalliqnin

Wakin ñawpaqmanta ruwasqa panel contenido kaypi. Nulla vitae elit libero, huk pharetra augue. Enean lacinia bibendum nisqa mana yurasqa consectetur nisqa. Enean eu leo quam. Pellentesco ornare sem lacinia quam venenatis vestibulo nisqa. Nullam id dolor id nibh ultricies antawakuna ut id elit.

Cras justo odio
Dapibus ac nisqa wasipi
Morbi leo risus nisqa
Porta ac consectetur nisqa
Vestibulo en eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Saqiy maskaqkuna video utaq diapositivakuna rikuchiy dimensiones kaqta riqsinankupaq bloque kaqninku ancho kaqninpi huk intrínseca ratio ruwaspa mayqinchus allinta mayqin dispositivo kaqpipas escalanqa.

Kamachiykunaqa chiqanmanta <iframe>, <embed>, <video>, <object>elementokunaman ima churakun; munaspaqa huk sut'i miray clase llamk'achiy .embed-responsive-itemmayk'aq huk atributokunapaq estilo tupachiyta munanki.

Pro-Consejo! Mana s frameborder="0"nisqaykipi churanaykichu tiyan chayta qampaq chinkachisqaykumanjina.<iframe>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Allinta ñawpaqmanta churay

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

¡Qhawariy, huk pukyupin kashani!

<div class="well">...</div>

Clases opcionales nisqa

Control acolchado chaymanta k'uchukuna muyuchisqa iskay clase modificador opcional kaqwan.

¡Qhawariy, hatun pukyupim kachkani!

<div class="well well-lg">...</div>

¡Qhawariy, huk huch’uy pukyupin kashani!

<div class="well well-sm">...</div>

Componentes nisqakuna

Glificones nisqa

Glifos disponibles

Imaynatataq apaykachana

Ama huk componentekunawanqa chaqrukuychu

Ch'usaq elementokunapi llamk'anapaqlla

Icono letra maypi kasqan tikray

Iconos accesibles

Ejemplos

Urmachiykuna

Qatina

Alineación

Ichapas huk churayta necesitanman

.pull-rightMana llamk’achisqa alineación

Umakuna

Rakiq

Menú nisqapi kaqkuna mana llamk’achisqa

Grupos de botones

Tooltips & popovers botón qutukunapi especial churayta munanku

Aseguray allinta rolehinaspa huk etiquetata quy

Ejemplo básico

Barra de herramientas de botón

Tamaño

Nido

Variación vertical nisqa

Justificasqa boton huñukuna

Fronteras nisqakunata hap’iy

IE8 y fronteras

Con <a>elementos

Enlaces que actúan como botones

Con <button>elementos

Botón urayk’aqkuna

Plugin nisqamanta dependencia

Huklla botón urayk’aqkuna

Rakiy botón urayk’aqkuna

Tamaño

Variación de caída

Yaykuy huñukuna

Textual <input>slla

Yaykuna huñukunapi yanapakuykuna & popoverkuna huk especial churayta munanku

Ama huk componentekunawanqa chaqrukuychu

Etiquetas nisqakunata yapaypuni

Ejemplo básico

Tamaño

Cajas de verificación y addones de radio

Addones de botón

Botones con desplegables

Botones segmentados

Achka botones

Navs

Tab paneles kaqpaq navs llamk'achiyta JavaScript tabs plugin kaqninta munan

Ruway navs llamk'achisqa puriy hina chayayta atikuq

Pestañas

Pastillas

Chaninchasqa

Safari y navs justificados respondedores

Mana llamk'achisqa t'inkikuna

T'inki ruwanakuna mana llamk'achisqachu

Utilizando los desplegables

Pestañas con desplegables

Pastillas con caídas

Navbar nisqa

Ñawpaqmanta churasqa navbar

Contenido desbordado

JavaScript plugin nisqatam munan

Urmasqa kuyuchina navbar ruphay puntota tikray

Navbars nisqakunata haykunapaq hina ruway

Imagen de marca

Formas

Dispositivo móvil nisqamanta advertenciakuna

Etiquetas nisqakunata yapaypuni

Botones

Uso específico de contexto

Qillqa

Mana nav nisqa t'inkikuna

Alineación de componentes nisqa

Achka componentekunata pañaman chiqanchay

Pataman allichasqa

Requerido acolchado del cuerpo

Urayman allichasqa

`.pull-right`Mana llamk’achisqa alineación

Aseguray allinta `role`hinaspa huk etiquetata quy

Con `<a>`elementos

Con `<button>`elementos

Textual `<input>`slla