Glificones nisqa

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

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

Urmachiykuna

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

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>

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

Ichapas huk churayta necesitanman

Urmachiykuna kikinmanta CSS kaqnintakama churasqa kanku qillqap normal puriynin ukhupi. Kayqa niyta munan urmachiykuna wakin propiedades kaqwan tayta mamakuna kuchusqa kankuman overflowutaq qhaway punkumanta hawapi rikhurinman. Chay asuntokuna rikurimusqanman hina sapallayki allichay.

.pull-rightMana llamk’achisqa alineación

v3.1.0 kaqmanta, .pull-righturayk'aq menúkunapi manaña llamk'achirqaykuchu. Huk menúta paña ladoman churanaykipaqqa .dropdown-menu-right. Navbar kaqpi paña chiqanchasqa nav componentes huk mixin laya kay clase kaqmanta llamk'achinku kikinmanta menú chiqanchaypaq. Chayta mana allinta ruwanaykipaqqa .dropdown-menu-left.

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

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>

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>

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>

Grupos de botones

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

Barra de herramientas de botón

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.

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

Botón urayk’aqkuna

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>

Yaykuy huñukuna

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.

@ .

@ejemplo.com nisqapi

$ .00 nisqa

https://ejemplo.com/users/ nisqapi.
<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

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.

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>

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>

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>

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>

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>

Navbar nisqa

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:

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

JavaScript plugin nisqatam munan

Sichus JavaScript mana llamk'achisqachu chaymanta qhawana punku k'iti kaptinqa navbar urmaykuptin, mana atikunqachu navbar mast'ariyta chaymanta .navbar-collapse.

Kutichiq navbarqa urmachiy plugin Bootstrap kaqpa layaykipi churasqa kananta munan.

Urmasqa kuyuchina navbar ruphay puntota tikray

Navbar sayaq kuyuchina qhawayninman urmaykun mayk'aq qhaway punku aswan k'iti @grid-float-breakpoint, chaymanta mast'arikun sayaq mana kuyuchina qhawayninman mayk'aq qhaway punku aswan pisi @grid-float-breakpointancho kaqpi. Kay tikraqta Aswan pisi pukyuta allichay mayk'aq navbar urmaykun/mast'arikun kamachinapaq. Ñawpaqmanta chaniqa 768px(aswan uchuy "huch'uy" icha "tableta" pantalla).

Navbars nisqakunata haykunapaq hina ruway

Aswan allinta huk <nav>elemento llamk'achiyta utaq, sichus huk aswan genérico elementota llamk'achkanki kayhina huk <div>, huk sapa navbar kaqman yapay role="navigation"sut'imanta riqsichinapaq huk suyu suyu hina yanapakuq tecnologiakuna ruwaqkunapaq.

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

Dispositivo móvil nisqamanta advertenciakuna

Wakin advertenciakuna kanku controles de formulariokuna elementokuna fijo ukhupi dispositivokuna móviles kaqpi llamk'achisqankumanta. Rikuy maskaq yanapakuy qillqaykumanta aswan sut'inchaykunapaq.

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>

Uso específico de contexto

Imaynachus clasekuna botón estándar , .navbar-btnllamk'achiy atikun <a>chaymanta <input>elementokuna. Ichaqa, nitaqmi .navbar-btnnitaq estándar nisqa botón clasekunapas , <a>ukhupi kaq elementokunapi llamk'achinankuchu tiyan .navbar-nav.

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.

Achka componentekunata pañaman chiqanchay

Navbars kunan pacha huk limitacionniyuq kanku achka .navbar-rightclasekunawan. Contenidota allinta espacianapaq, qhipa .navbar-rightelementopi negativo margenta llamk'achinchik. Chay clase llamk'achiq achka elementokuna kaptin, kay margenkuna mana munasqa hinachu llamkan.

Kayta wakmanta watukusunchik mayk'aq chay componente kaqmanta v4 kaqpi qillqayta atisunman.

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>. Kikinpa chanikunata 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, mana paddinguranpi yapankichu <body>. Kikinpa chanikunata 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 churaspa.

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>

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>

Etiquetas

Qatina

Ejemplo titulo Musuq

Ejemplo titulo Musuq

Ejemplo titulo Musuq

Ejemplo titulo Musuq

Ejemplo titulo Musuq
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 .

Insignias

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

Jumbotron nisqa

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>

P'anqap umalliqnin

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>

Miniaturas

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.

100%x200 nisqa

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

100%x200 nisqa

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

100%x200 nisqa

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>

Alertakuna

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.

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

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

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

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

Barras de progreso

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.

60% Hunt'asqa
<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.

40% Hunt'asqa (allin) .
20% Hukllachasqa
60% Hunt'asqa (advertencia) .
80% Hunt'asqa (peligro) .
<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.

40% Hunt'asqa (allin) .
20% Hukllachasqa
60% Hunt'asqa (advertencia) .
80% Hunt'asqa (peligro) .
<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.

45% Hunt'asqa
<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.

35% Hunt'asqa (allin) .
20% Hunt'asqa (advertencia) .
10% Hunt'asqa (peligro) .
<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>

Objeto de medios de comunicación

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 qutu

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.

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

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

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

Paneles

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>

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

Responsable embed nisqa

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>

Pukyukuna

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>