Glificones rehegua

Umi glifo ojeguerekóva

Oike 250 glifo ári formato fuente-pe Glyphicon Halflings ñemohendahágui. Glyphicons Halflings normalmente ndojeguerekói gratis, ha katu ijapohare ojapo disponible Bootstrap-pe g̃uarã gratis. Aguyjevete hag̃ua, rojerure mante remoĩ hag̃ua peteĩ enlace jey Glyphicons -pe ikatu jave.

  • glifíco glifíco-asterisco rehegua
  • glyphicon glyphicon-plus rehegua
  • glifíco glifíco-euro rehegua
  • glyphicon glyphicon-eur rehegua
  • glifíco glifíco-menos rehegua
  • glyphicon glyphicon-arai rehegua
  • glifíco glifíco-sobre rehegua
  • glyphicon glyphicon-lápiz rehegua
  • glifíco glifico-vidrio rehegua
  • glyphicon glyphicon-música rehegua
  • glyphicon glyphicon-jeheka
  • glifíco glifíco-korasõ
  • glyphicon glyphicon-mbyjajere
  • glyphicon glyphicon-mbyja-vacío
  • glyphicon glyphicon-puruhára
  • glyphicon glyphicon-película rehegua
  • glifíco glifíco-ha-tuichavéva
  • glifíco glifíco-th rehegua
  • glyphicon glyphicon-ha-lista rehegua
  • glyphicon glyphicon-ok rehegua
  • glyphicon glyphicon-ojepe’a
  • glyphicon glyphicon-pe oñembotuichave hag̃ua
  • glyphicon glyphicon-oñembotuichave hag̃ua
  • glifíco glifíco-off rehegua
  • glyphicon glyphicon-señal rehegua
  • glyphicon glyphicon-diente rehegua
  • glyphicon glyphicon-basura rehegua
  • glifíco glifíco-hogar rehegua
  • glyphicon glyphicon-archivo rehegua
  • glifíco glifíco-tiempo rehegua
  • glifíco glifíco-tape rehegua
  • glyphicon glyphicon-mboguejy-alt
  • glyphicon glyphicon-emboguejy hag̃ua
  • glyphicon glyphicon-jeguerahauka
  • glyphicon glyphicon-pegua kuatiañe’ẽ
  • glyphicon glyphicon-juego-círculo rehegua
  • glifíco glifíco-repetición rehegua
  • glyphicon glyphicon-mbopyahu
  • glyphicon glyphicon-lista-alt rehegua
  • glifíco glifíco-bloqueo rehegua
  • glyphicon glyphicon-poyvi rehegua
  • glyphicon glyphicon-auriculares rehegua
  • glyphicon glyphicon-volumen-oñembogueva’ekue
  • glyphicon glyphicon-volumen-abajo rehegua
  • glyphicon glyphicon-volumen-up rehegua
  • glyphicon glyphicon-qrcódigo rehegua
  • glyphicon glyphicon-código de barras rehegua
  • glyphicon glyphicon-etiqueta rehegua
  • glyphicon glyphicon-etiquetas rehegua
  • glifíco glifíco-kuatiahaipyre
  • glyphicon glyphicon-marka rehegua
  • glyphicon glyphicon-impresión rehegua
  • glyphicon glyphicon-cámara rehegua
  • glyphicon glyphicon-fuente rehegua
  • glifíco glifíco-pegua
  • glyphicon glyphicon-cursivo rehegua
  • glyphicon glyphicon-jehaipyre-yvate
  • glyphicon glyphicon-jehaipyre-ancho rehegua
  • glyphicon glyphicon-alinea-izquierda rehegua
  • glyphicon glyphicon-alinea-centro rehegua
  • glyphicon glyphicon-alinea-derecha rehegua
  • glyphicon glyphicon-alinea-ohustifikávo
  • glyphicon glyphicon-lista rehegua
  • glyphicon glyphicon-indent-izquierda rehegua
  • glyphicon glyphicon-indent-derecha rehegua
  • glyphicon glyphicon-hova-tiempo-video rehegua
  • glyphicon glyphicon-ta'angamýi
  • glyphicon glyphicon-mapa-marcador rehegua
  • glyphicon glyphicon-oñemohenda
  • glifíco glifícon-tinta rehegua
  • glyphicon glyphicon-edición rehegua
  • glyphicon glyphicon-emboja’o
  • glyphicon glyphicon-check rehegua
  • glyphicon glyphicon-momýi
  • glyphicon glyphicon-paso-tapykue gotyo
  • glyphicon glyphicon-pya’e-tapykue gotyo
  • glifíco glifíco-tapykue gotyo
  • glifíco glifíco-juego rehegua
  • glyphicon glyphicon-pausa rehegua
  • glyphicon glyphicon-jejoko rehegua
  • glyphicon glyphicon-tenonde gotyo
  • glyphicon glyphicon-pya’e tenonde gotyo
  • glyphicon glyphicon-paso-tenonde gotyo
  • glyphicon glyphicon-oñemosẽ
  • glyphicon glyphicon-chevrón-izquierda rehegua
  • glifíco glifico-chevrón-derecha rehegua
  • glyphicon glyphicon-plus-signo rehegua
  • glyphicon glyphicon-menos-signo rehegua
  • glyphicon glyphicon-oipe’a-signo
  • glyphicon glyphicon-ok-signo rehegua
  • glyphicon glyphicon-porandu-señal
  • glyphicon glyphicon-info-signo rehegua
  • glyphicon glyphicon-pegua pantalla
  • glyphicon glyphicon-oipe’a-círculo
  • glyphicon glyphicon-ok-círculo rehegua
  • glifíco glifico-ban-círculo rehegua
  • glyphicon glyphicon-flecha-izquierda rehegua
  • glyphicon glyphicon-flecha-derecha rehegua
  • glifíco glifíco-flecha-yvate gotyo
  • glifíco glifíco-flecha-abajo rehegua
  • glyphicon glyphicon-compartir-alt rehegua
  • glyphicon glyphicon-ombotuichave-henyhẽva
  • glyphicon glyphicon-ombotuichave-michĩ
  • glyphicon glyphicon-signo-exclamación rehegua
  • glifíco glifíco-jopói rehegua
  • glifíco glifico-hogue
  • glifíco glifíco-tata rehegua
  • glyphicon glyphicon-tesa ojepe’áva
  • glyphicon glyphicon-tesa-mboty
  • glyphicon glyphicon-señal de advertencia rehegua
  • glifíco glifico-plano rehegua
  • glyphicon glyphicon-calendario rehegua
  • glyphicon glyphicon-aleatorio rehegua
  • glyphicon glyphicon-comentario rehegua
  • glifíco glifíco-imán rehegua
  • glifíco glifíco-chevron-up rehegua
  • glifíco glifico-chevron-abajo rehegua
  • glyphicon glyphicon-retweet rehegua
  • glyphicon glyphicon-carrito de compras rehegua
  • glyphicon glyphicon-carpeta-mboty rehegua
  • glyphicon glyphicon-carpeta-ojepe’áva
  • glyphicon glyphicon-ombotuichave-vertical
  • glifíco glifico-ombotuichave-horizontal
  • glifíco glifíco-hdd rehegua
  • glifíco glifíco-bullhorn rehegua
  • glifíco glifíco-campana rehegua
  • glyphicon glyphicon-certificado rehegua
  • glifíco glifíco-pulgares-yvate rehegua
  • glyphicon glyphicon-pulgares-abajo rehegua
  • glyphicon glyphicon-po-derecha rehegua
  • glyphicon glyphicon-mano-izquierda rehegua
  • glifíco glifíco-po-yvate gotyo
  • glifíco glifíco-po-yvate gotyo
  • glyphicon glyphicon-círculo-flecha-derecha rehegua
  • glyphicon glyphicon-círculo-flecha-izquierda rehegua
  • glyphicon glyphicon-círculo-flecha-yvate gotyo
  • glyphicon glyphicon-círculo-flecha-abajo rehegua
  • glifíco glifíco-globo rehegua
  • glyphicon glyphicon-llave rehegua
  • glyphicon glyphicon-tembiapokuéra
  • glyphicon glyphicon-filtro rehegua
  • glyphicon glyphicon-maletín rehegua
  • glyphicon glyphicon-pantalla completa rehegua
  • glyphicon glyphicon-tablero de instrumentos rehegua
  • glyphicon glyphicon-kuatiahaipyre rehegua
  • glyphicon glyphicon-korasõ-vacío
  • glyphicon glyphicon-joaju rehegua
  • glyphicon glyphicon-teléfono rehegua
  • glifíco glifíco-pushpin rehegua
  • glyphicon glyphicon-usd rehegua
  • glifíco glifíco-gbp rehegua
  • glyphicon glyphicon-clase rehegua
  • glyphicon glyphicon-oñemohenda-alfabeto rupive
  • glyphicon glyphicon-oñemohenda-alfabeto rupive-alt
  • glyphicon glyphicon-oñemohenda-orden-pe
  • glyphicon glyphicon-oñemohenda-orden-pe-alt
  • glyphicon glyphicon-omohenda-atributo-kuéra rupive
  • glyphicon glyphicon-oñemohenda-atributo-kuéra rupive-alt
  • glyphicon glyphicon-ojehecha’ỹva
  • glyphicon glyphicon-oñembotuichave
  • glyphicon glyphicon-oñemboguejy-yvýpe
  • glyphicon glyphicon-oñembyai-pe
  • glyphicon glyphicon-pe ojeike hag̃ua
  • glyphicon glyphicon-flash rehegua
  • glyphicon glyphicon-osẽ haguã
  • glyphicon glyphicon-ventana-pyahu rehegua
  • glyphicon glyphicon-registro rehegua
  • glyphicon glyphicon-ñañongatu
  • glyphicon glyphicon-ojepe’áva
  • glyphicon glyphicon-pe oñeñongatuva’ekue
  • glyphicon glyphicon-importación rehegua
  • glyphicon glyphicon-export rehegua
  • glyphicon glyphicon-omondo
  • glyphicon glyphicon-disquete-disquete rehegua
  • glyphicon glyphicon-disquete-oñongatuva’ekue
  • glyphicon glyphicon-disquete-ojepe’a
  • glyphicon glyphicon-disquete-ñongatu
  • glyphicon glyphicon-disquete-ojepe’áva
  • glyphicon glyphicon-tarjeta de crédito rehegua
  • glifico glifico-mbohasáva
  • glyphicon glyphicon-cubiertos rehegua
  • glyphicon glyphicon-akãrapu’ã
  • glyphicon glifíco-pe oñembohysýiva
  • glyphicon glyphicon-auricular rehegua
  • glyphicon glyphicon-teléfono-alt rehegua
  • glifíco glifíco-torre rehegua
  • glyphicon glyphicon-estadísticas rehegua
  • glyphicon glyphicon-sd-vídeo rehegua
  • glyphicon glyphicon-hd-vídeo rehegua
  • glyphicon glyphicon-subtítulos rehegua
  • glyphicon glyphicon-sonido-estereo rehegua
  • glifíco glifíco-sonido-dolby rehegua
  • glifíco glifíco-sonido-5-1 rehegua
  • glifíco glifíco-sonido-6-1 rehegua
  • glifíco glifíco-sonido-7-1 rehegua
  • glyphicon glyphicon-marka-derecho de autor rehegua
  • glyphicon glyphicon-marca-registro rehegua
  • glyphicon glyphicon-arai-mboguejy
  • glyphicon glyphicon-arai-jeguerahauka
  • glyphicon glyphicon-yvyra-conífera rehegua
  • glyphicon glyphicon-yvyra-hogue ho’áva
  • glyphicon glyphicon-cd rehegua
  • glyphicon glyphicon-ñongatu-archivo rehegua
  • glyphicon glyphicon-archivo-ojepe’áva
  • glyphicon glyphicon-nivel-pegua yvate gotyo
  • glyphicon glyphicon-copia rehegua
  • glifíco glifíco-pasta rehegua
  • glyphicon glyphicon-alerta rehegua
  • glyphicon glyphicon-ecualizador rehegua
  • glifíco glifíco-rey
  • glifíco glifico-reina rehegua
  • glifíco glifíco-peón rehegua
  • glyphicon glyphicon-obispo rehegua
  • glyphicon glyphicon-caballero rehegua
  • glifícono glifíco-fórmula-bébé rehegua
  • glyphicon glyphicon-tenda rehegua
  • glyphicon glyphicon-pizarra rehegua
  • glifíco glifíco-cama rehegua
  • glyphicon glyphicon-manzana rehegua
  • glifíco glifico-borrado rehegua
  • glifícon glifico-reloj de arena rehegua
  • glyphicon glyphicon-lámpara rehegua
  • glifíco glifíco-duplicado rehegua
  • glifíco glifíco-alcancía rehegua
  • glyphicon glyphicon-tijera rehegua
  • glyphicon glyphicon-bitcoin rehegua
  • glyphicon glyphicon-btc rehegua
  • glifíco glifíco-xbt rehegua
  • glifíco glifico-yen rehegua
  • glyphicon glyphicon-jpy rehegua
  • glifíco glifíco-rublo rehegua
  • glifíco glifíco-frotamiento rehegua
  • glifíco glifíco-escala rehegua
  • glyphicon glyphicon-hielo-lolly rehegua
  • glyphicon glyphicon-hielo-lolly-sabor
  • glifíco glifíco-educación rehegua
  • glyphicon glyphicon-opción-horizontal rehegua
  • glyphicon glyphicon-opción-vertical rehegua
  • glyphicon glyphicon-menú-hamburguesa rehegua
  • glyphicon glyphicon-modal-ventana rehegua
  • glifícono glifico-aceite rehegua
  • glifíco glifico-grano rehegua
  • glyphicon glyphicon-gafas de sol rehegua
  • glyphicon glyphicon-jehaipyre-tuichaha
  • glyphicon glyphicon-jehaipyre-color
  • glyphicon glyphicon-jehaipyre-fondo rehegua
  • glyphicon glyphicon-objeto-alinea-yvate rehegua
  • glyphicon glyphicon-objeto-alinea-yvýpe
  • glyphicon glyphicon-objeto-alinea-horizontal rehegua
  • glyphicon glyphicon-objeto-alinea-izquierda rehegua
  • glyphicon glyphicon-objeto-alineación-vertical rehegua
  • glyphicon glyphicon-objeto-alinea-derecha rehegua
  • glyphicon glyphicon-triángulo-derecha rehegua
  • glyphicon glyphicon-triángulo-izquierda rehegua
  • glyphicon glyphicon-triángulo-yvy gotyo
  • glyphicon glyphicon-triángulo-yvategua
  • glyphicon glyphicon-consola rehegua
  • glyphicon glyphicon-superíndice rehegua
  • glyphicon glyphicon-suskrito rehegua
  • glyphicon glyphicon-menú-izquierda rehegua
  • glyphicon glyphicon-menú-derecha rehegua
  • glyphicon glyphicon-menú-yvýpe
  • glyphicon glyphicon-menú-pegua

Mba’éichapa ojeporu

Mbaꞌeporã rehegua, opaite ikóna oikotevẽ peteĩ clase base ha peteĩ clase icono rehegua. Eipuru hag̃ua, emoĩ ko kódigo haimete oimeraẽ hendápe. Eheja katuete peteĩ espacio icono ha jehaipyre apytépe rembojehe’a porã hag̃ua.

Ani reñembojehe'a ambue componente ndive

Umi clase icono rehegua ndaikatúi oñembojoaju directamente ambue componente ndive. Ndojeporúivaꞌerã ambue clase ndive peteĩ elemento rehe. Upéva rangue, emoĩ peteĩ anidado <span>ha emoĩ umi clase icono rehegua <span>.

Ojepuru hag̃uánte umi elemento vacío rehe

Umi clase icono rehegua ojepuruvaꞌerã umi elemento ndorekóiva contenido jehaipyre ha ndorekóiva elemento mitã rehe añoite.

Oñemoambuévo icono fuente ñemohenda

Bootstrap oimoꞌa umi vore vore icono rehegua oĩtaha ../fonts/kundahárape, oñembojoajúvo umi vore CSS oñembohekopyréva rehe. Oñemonguꞌe térã oñembohéra jey umi vore vore heꞌise oñembopyahu hag̃ua CSS peteĩva mbohapy hendáicha:

  • Emoambue @icon-font-pathha/térã @icon-font-nameumi mbaꞌekuaarã oĩva fuente Less archivos-pe.
  • Eipuru opción URL relativo ome’ẽva compilador Less.
  • Emoambue url()tapekuéra CSS oñembohekopyrévape.

Eipuru oimeraẽva opción okonvenivéva ne configuración desarrollo específico-pe.

Umi icono ojeikekuaahápe

Umi versión moderna tecnología oipytyvõva oikuaaukáta contenido omoheñóiva CSS, avei umi caracter específico Unicode. Ani hag̃ua osẽ salida oñehaꞌarõꞌeỹva ha oñembotavyva umi pantalla moñeꞌerãme (particularmente ojepuru jave umi icono decoración-rã añoite), ñañomi aria-hidden="true"atributo reheve.

Eipurúramo peteĩ techaukaha embohasa hag̃ua he’iséva (ndaha’éi elemento decorativo ramo añoite), eñangareko ko he’iséva oñembohasa hag̃ua avei umi tecnología oipytyvõvape – techapyrãramo, emoinge contenido adicional, oñeñomiva’ekue ojehechaháicha .sr-onlymbo’esyry ndive.

Emoheñóiramo control-kuéra ndorekóiva ambue jehaipyre (ha’eháicha peteĩ <button>oguerekóva peteĩ techaukaha añoite), akóinte eme’ẽva’erã contenido alternativo ehechakuaa hag̃ua mba’épa pe control rembipota, ikatu hag̃uáicha oguereko sentido umi oiporúvape umi tecnología oipytyvõva. Ko kásope, ikatu emoĩ peteĩ aria-labelatributo control-pe voi.

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

Tembiecharã

Eipuru umíva umi botón, botón aty peteĩ tembipuru’i ryrúpe g̃uarã, jeguata térã formulario jeike prependido-pe g̃uarã.

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

Peteĩ icono ojeporúva peteĩ alerta -pe ombohasa hag̃ua ha’eha peteĩ marandu jejavy rehegua, oguerekóva .sr-onlyjehaipyre adicional ombohasa hag̃ua ko pista umi tecnología oipytyvõva puruhárape.

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

Umi desplegable rehegua

Menú oñembohasáva, contextual ojehechauka hag̃ua umi lista enlace rehegua. Ojejapo interactivo JavaScript plugin desplegable ndive .

Embojere pe desplegable gatillo ha menú desplegable ryepýpe .dropdown, térã ambue elemento odeclaráva position: relative;. Upéi emoĩve pe menú HTML.

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

Umi menú desplegable ikatu oñemoambue oñembotuichave hag̃ua yvate gotyo (yvýpe rangue) oñembojoapývo .dropuptúvape.

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

Por defecto, peteĩ menú desplegable oñemohenda ijeheguiete 100% yvate guive ha ituvakuéra akatúa gotyo. Emoĩ .dropdown-menu-rightpeteĩ .dropdown-menua derecha gotyo emohenda pe menú desplegable.

Ikatu oikotevẽ posicionamiento adicional

Umi desplegable oñemohenda ijeheguiete CSS rupive kuatia flujo normal ryepýpe. Kóva he’ise umi desplegable ikatu oñeikytĩ tuvakuéra orekóva ciertas overflowpropiedades térã ojehechauka okápe umi límite jehechaukahagui. Embohovái ko’ã mba’e ndejehegui heñói jave.

Alineación .pull-rightndojeporúiva

v3.1.0 guive, roñemboyke .pull-rightumi menú desplegable-pe. Oñemohenda hag̃ua akatúa gotyo peteĩ menú, eipuru .dropdown-menu-right. Umi componente nav oñemohenda porãva akatúa gotyo navbar-pe oipuru peteĩ versión mixin ko mboꞌepy rehegua oñemohenda hag̃ua ijeheguiete menú. Oñemboyke hag̃ua, eipuru .dropdown-menu-left.

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

Emoĩ peteĩ iñakãrapuꞌa emoĩ hag̃ua etiqueta umi tembiaporã vore oimeraẽva menú desplegable-pe.

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

Emoĩ peteĩ divisor ojesepara hag̃ua serie de enlace peteĩ menú desplegable-pe.

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

Emoĩ .disabledpeteĩ <li>-pe pe desplegable-pe embogue hag̃ua pe enlace.

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

Umi aty botón rehegua

Embojoaju peteĩ serie de botón oñondive peteĩ línea-pe pe botón aty ndive. Emoĩve radio JavaScript opcional ha jeikoha estilo vore rehegua ore mboajepyréva mboajepyréva reheve .

Tembipururã ñe’ẽñemi & popovers umi botón aty’ípe oikotevẽ ñemboheko especial

Eipurúvo tembipuru’i ñe’ẽñemi térã popovers umi elemento oĩva peteĩ ryepýpe .btn-group, emombe’uva’erã opción container: 'body'ani hag̃ua ojejapo umi efecto secundario ndojeipotavéiva (ha’eháicha pe elemento okakuaa tuichavéva ha/térã operde umi iesquina redondeada oñemboguata jave tembipuru’i ñe’ẽmondo térã popover).

Ejeasegura hekopete roleha eme’ẽ peteĩ etiqueta

Ikatu hag̃uáicha umi tecnología oipytyvõva – haꞌeháicha umi pantalla moñeꞌerã – ombohasa hag̃ua oñemboatyha peteĩ serie de botón, roletekotevẽ oñemeꞌe peteĩ atributo hekopete. Umi botón aty’ípe g̃uarã, kóva ha’éta role="group", umi tembipuru’i ryru katu oguerekova’erã peteĩ role="toolbar".

Peteĩ excepción haꞌehína umi aty oguerekóva peteĩ control añoite (techapyrãramo umi aty botón ojehustifikáva oguerekóva <button>elemento) térã peteĩ desplegable.

Avei, umi aty ha tembipuru ryru oñemeꞌevaꞌerã peteĩ etiqueta hesakãva, hetavégui umi tecnología oipytyvõva ambue hendáicha nomoherakuãmoꞌãigui, jepémo oĩ roleatributo hekopete. Umi techapyrã oñemeꞌevaꞌekuépe koꞌape, jaipuru , ha katu ikatu avei ojeporu umi aria-labelalternativa haꞌeháicha .aria-labelledby

Tembiecharã básico

Embojere peteĩ serie de botón orekóva .btnen .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>

Tembipururã ryru botón rehegua

Ombojoaju umi conjunto de <div class="btn-group">en a <div class="btn-toolbar">umi componente complejovévape g̃uarã.

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

Dimensionamiento rehegua

Emoĩ rangue mbo’esyry mboajepyréva botón rehegua opaite botón peteĩ atýpe, emoĩnte .btn-group-*peteĩteĩme .btn-group, oikehápe oñembohysýi jave heta aty.




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

Nidación rehegua

Emoĩ peteĩ .btn-groupambue ryepýpe .btn-groupreipotáramo umi menú desplegable oñembojeheꞌa peteĩ serie de botón reheve.

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

Ejapo peteĩ conjunto de botón ojehechauka verticalmente apilado rangue horizontalmente. Umi botón ñemboja’o ñemboguejy ndojeguerohorýi ko’ápe.

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

Umi aty botón rehegua ojehustifikáva

Jajapo petet aty botón rehegua ojepyso hagua tuicha jojape oñemosarambi hagua ituvakuéra ipekue tuichakue. Avei ombaꞌapo umi botón ñemboguejyha ndive botón aty ryepýpe.

Omanehávo umi frontera

Ojeguerekógui HTML ha CSS específico ojeporúva ojehustifika hag̃ua umi botón (haꞌehína display: table-cell), oñembohetave mokõi jey umi frontera oĩva ijapytépe kuéra. Umi botón aty jepiguápe, margin-left: -1pxojepuru oñembojeheꞌa hag̃ua umi rembeꞌe ojeipeꞌa rangue. Ha katu, marginndoikói display: table-cell. Upéicha rupi, ojesarekóva ne ñemboheko Bootstrap-pe, ikatu eipe’ase térã embojere umi rembe’y.

IE8 ha umi frontera

Internet Explorer 8 ndojapói umi rembe’y umi botón rehegua peteĩ botón aty ojehustifikávape, taha’e oĩva <a>térã umi <button>elemento. Ojere hag̃ua upéva rehe, embojere káda botón ambuépe .btn-group.

Ehecha #12476 reikuaave hag̃ua.

Umi <a>elemento reheve

Embojere mante petet serie .btns rehegua .btn-group.btn-group-justified.

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

Umi enlace oactúava botón ramo

Umi <a>elemento ojeporúramo ombaꞌapo hag̃ua botón ramo – omoñepyrũvo funcionalidad página ryepýpe, ojeguata rangue ambue kuatia térã sección-pe página koꞌag̃agua ryepýpe – oñemeꞌevaꞌerã avei chupekuéra peteĩ role="button".

Umi <button>elemento reheve

Eipuru hag̃ua umi botón aty ojehustifikáva <button>elemento reheve, embojereva’erã peteĩteĩva botón peteĩ botón aty’ípe . Hetave kundahára ndoiporúi hekopete ñande CSS ojehustifika hag̃ua <button>elemento-kuérape, ha katu roipytyvõgui umi botón desplegable, ikatu ñamba’apo upéva rehe.

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

Umi desplegable botón rehegua

Eipuru oimeraẽva botón emoñepyrũ hag̃ua peteĩ menú desplegable emoĩvo peteĩ ryepýpe .btn-groupha eme’ẽvo menú marcado hekopete.

Plugin rehegua dependencia

Umi botón ñemboguejy oikotevẽ pe plugin desplegable oike hag̃ua nde versión Bootstrap-pe.

Umi desplegable peteĩ botón rehegua

Embojere peteĩ botón peteĩ toggle desplegable-pe oguerekóva algunos cambios básicos marcado rehegua.

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

Umi botón ñemboja’o rehegua

Upéicha avei, ejapo umi botón oñembojaꞌovaꞌekue peteĩchagua ñemoambue marca rehegua reheve, peteĩ botón añónte reheve añoite.

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

Dimensionamiento rehegua

Umi botón desplegable ombaꞌapo umi botón opaichagua tuichakue ndive.

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

Emoñepyrũ umi menú desplegable elementokuéra ári emoĩvo .dropuptúvape.

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

Umi aty jeike rehegua

Embotuichave umi control formulario rehegua emoĩvo jehaipyre térã botón mboyve, rire térã mokõive ykére oimeraẽva jehaipyre rehegua <input>. Eipuru .input-grouppeteĩ .input-group-addontérã .input-group-btnndive emoĩ mboyve térã emoĩ hag̃ua elemento peteĩva .form-controlrehe .

Textual <input>s añoite

Ejehekýi eipuru <select>elemento ko’ápe ndaikatúigui oñembohekopaite umi kundahára WebKit-pe.

Ejehekýi eipuru <textarea>elemento ko’ápe rowsnoñemomba’emo’ãigui iñatributo amo hapópe.

Umi tembipuru’i ñe’ẽñemi & popovers umi aty jeike rehegua oikotevẽ ñemboheko especial

Eipurúvo tembipuru’i ñe’ẽñemi térã popovers umi elemento oĩva peteĩ ryepýpe .input-group, emombe’uva’erã opción container: 'body'ani hag̃ua ojejapo umi efecto secundario ndojeipotavéiva (ha’eháicha pe elemento okakuaa tuichavéva ha/térã operde umi iesquina redondeada oñemboguata jave tembipuru’i ñe’ẽmondo térã popover).

Ani reñembojehe'a ambue componente ndive

Ani rembojeheꞌa umi aty formulario rehegua térã umi clase columna cuadrícula rehegua directamente umi aty entrada rehegua ndive. Upéva rangue, emohenda pe aty jeikerã formulario aty ryepýpe térã elemento ojoajúva cuadrícula rehe.

Akóinte emoĩve umi etiqueta

Umi pantalla omoñe’ẽva oguerekóta apañuãi ne formulario-kuéra ndive neremoĩriramo peteĩ etiqueta opaite entrada-pe g̃uarã. Ko’ã grupo de entrada-pe g̃uarã, ojeasegura oñembohasa hag̃ua oimeraẽ etiqueta térã funcionalidad adicional umi tecnología oipytyvõvape.

Pe técnica ojeporútava hekopete (elemento ojehecháva <label>, <label>elemento kañymby ojeporúvo .sr-onlymbo’esyry, térã aria-label, aria-labelledby, aria-describedby, titletérã placeholderatributo jepuru) ha mba’e marandu ambuévapa tekotevẽta oñembohasa iñambuéta ojesarekóta mba’eichagua widget interfaz reheguáre. Umi techapyrã oĩva ko atype ome’ẽ mbovymi enfoque oñesugeríva, káso específico-pe.

Tembiecharã básico

Emoĩ peteĩ add-on térã botón peteĩ entrada mokõive lado-pe. Ikatu avei remoĩ peteĩva mokõive lado peteĩ entrada rehe.

Ndoroipytyvõi heta ñembojoapy ( .input-group-addontérã .input-group-btn) peteĩ lado-pe.

Ndoroipytyvõi heta formulario-control peteĩ entrada aty’ípe.

@ .

@techapyrã.com

$ rehegua .00 rehegua

https://techapyrã.com/usuers/
<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>

Dimensionamiento rehegua

Emoĩ umi clase de tamaño relativo formulario rehegua .input-groupijehegui ha umi contenido oĩva hyepýpe oñembotuichave ijeheguiete—natekotevẽi ojejapo jey umi clase tamaño control formulario rehegua peteĩteĩva elemento rehe.

@ .

@ .

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

Umi cuadro de verificación ha umi addón radio rehegua

Emoĩ oimeraẽva casilla de verificación térã opción radio rehegua peteĩ grupo de entrada addon ryepýpe jehaipyre rangue.

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

Umi addons de botón rehegua

Umi botón oĩva umi grupo de entrada-pe iñambue’imi ha oikotevẽ peteĩ nivel extra de anidación. , rangue .input-group-addon, tekotevẽta reipuru .input-group-btnrembojere hag̃ua umi botón. Kóva oñeikotevẽ umi kundahára estilo por defecto rupive ndaikatúiva oñemboyke.

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

Umi botón orekóva umi desplegable

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

Umi botón segmentado rehegua

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

Heta botón rehegua

Ikatu ramo jepe reguereko peteĩ ñembojoapy añoite peteĩ lado-pe, ikatu reguereko heta botón peteĩ ryepýpe .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 rehegua

Umi Nav ojeguerekóva Bootstrap-pe oguereko marcado oñemboja’óva, oñepyrũva .navclase base-gui, avei estado oñemboja’óva. Embohasa umi mbo’esyry modificador rehegua emoambue hag̃ua peteĩteĩva estilo apytépe.

Oipurúvo navs umi panel ficha rehegua oikotevẽ JavaScript tabs plugin

Umi ficha oguerekóva área ficha rehegua, reipuruva’erã umi ficha JavaScript plugin . Pe marcado oikotevẽta avei roleatributo adicional ha ARIA – ehecha pe plugin techapyrã marcado rehegua reikuaave hag̃ua.

Ejapo umi nav ojeporúva navegación ramo ojeikekuaa hag̃ua

Eipurúramo navs eme’ẽ hag̃ua peteĩ barra de navegación, eñangareko emoĩ peteĩ role="navigation"mba’e’oka túva lógicovévape <ul>, térã embojere peteĩ <nav>elemento jeguata tuichakue jerére. Ani remoĩ pe rol pe <ul>ijehegui, péva ojokótagui oñemoherakuã haguã lista añetéva ramo umi tecnología oipytyvõva rupive.

Ñañamindu’u pe .nav-tabsclase oikotevẽha pe .navclase base.

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

Ejagarra upe HTML peteĩchagua, ha katu eipuru .nav-pillshendaguépe:

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

Umi pastilla ha’e avei verticalmente apilable. Oñembojoapy mante .nav-stacked.

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

Ejapo pyaꞌete umi ficha térã pastilla peteĩchagua ituvakuéra ipekue reheve umi pantalla ipypukuvévape 768px-gui .nav-justified. Umi pantalla michĩvévape, umi enlace nav oñembojoaju.

Umi enlace navbar nav ojehustifikáva ndojeguerohorýi ko’áĝaite.

Safari ha ombohováiva justificado navs

v9.1.2 guive, Safari ohechauka peteĩ mba’e’oka oñembotuichavehápe ne kundahára horizontalmente omoheñói jejavy ñembohasa rehegua nav ojehustifikávape oñembogueva’ekue oñembopyahu jave. Ko mba’e’oka ojehechauka avei techapyrã nav ojehustifikávape .

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

Oimeraẽva componente nav-pe g̃uarã (pestaña térã pastilla), emoĩve enlace gris .disabled-pe g̃uarã ha ndaipóri efecto hover .

Enlace funcionalidad noñeimpactáiva

Ko mbo’esyry omoambuéta pe <a>'s jehechauka añoite, ndaha’éi ifuncionalidad. Eipuru JavaScript jeporupyre embogue hag̃ua joajuha ko’ápe.

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

Emoĩve menú desplegable orekóva HTML michĩmi extra ha umi desplegable JavaScript plugin .

Umi ficha orekóva umi desplegable

<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 orekóva gota

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

Navbar ha’e umi meta componente ombohováiva oservíva iñakãrapu’ã jeguatarã ramo ne purupyrã térã tenda’ípe g̃uarã. Oñepyrũ oñembyai (ha oñembohasakuaa) umi jehechauka móvil-pe ha oiko chuguikuéra horizontal oñembohetavévo pe jehechaukaha ipekue ojeguerekóva.

Umi enlace navbar nav ojehustifikáva ndojeguerohorýi ko’áĝaite.

Contenido ojedesbordáva

Bootstrap ndoikuaáigui mboy espaciopa oikotevẽ pe contenido oĩva nde navbar-pe, ikatu rejuhúkuri mba’e’apopyrã contenido oñembojoajúva mokõiha vore’ípe. Resolusiona hag̃ua ko mbaʼe ikatu rejapo:

  1. Emboguejy umi mba’e navbar rehegua mbovy térã ipekue.
  2. Eñomi peteĩva umi mba’e’oka navbar rehegua peteĩ pantalla tuichakuépe eipurúvo umi clase utilidad ombohováiva .
  3. Emoambue pe punto nde navbar oñembohasahápe modo colapso ha horizontal apytépe. Emohenda pe @grid-float-breakpointmba’e’oka térã emoĩ nde porandu medio rehegua.

Oikotevẽ JavaScript ñembojoapy

JavaScript oñemboykéramo ha jehechaukaha ijyvyku’ieterei ikatu hag̃uáicha pe navbar oñehundi, ndaikatumo’ãi oñembotuichave pe navbar ha ojehecha umi mba’e oĩva .navbar-collapse.

Pe navbar ombohováiva oikotevẽ pe plugin ñemboguejy rehegua oike hag̃ua nde versión Bootstrap-pe.

Omoambuévo punto de ruptura navbar móvil oñembyaíva

Pe navbar oñehundi ijehecha móvil vertical-pe pe jehechaukaha ijyvykuꞌevéramo @grid-float-breakpoint, ha oñembotuichave ijehechaukaha horizontal ndahaꞌeiva móvil-pe pe jehechaukaha oĩ jave por lo menos @grid-float-breakpointipypuku. Emohenda ko mba’e’oka Sa’ive fuente-pe econtrola hag̃ua araka’épa oñehundi/oñembotuichave navbar. Pe valor por defecto ha’e 768px(pe pantalla "michĩvéva" térã "tableta" michĩvéva).

Ejapo umi navbar ojeikekuaa hag̃ua

Eipuru katuete peteĩ <nav>elemento térã, eipurúramo peteĩ elemento genéricovéva haꞌeháicha peteĩ <div>, emoĩ peteĩ role="navigation"opaite navbar-pe ehechakuaa hag̃ua hesakã porãme haꞌeha peteĩ región señal umi oiporúvape g̃uarã umi tecnología oipytyvõva.

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

Emyengovia navbar marca nde ta’ãngamýi rehe emoambuévo jehaipyre peteĩ <img>. Pe .navbar-brandoguerekógui imbohysýi ha ijyvate, ikatu tekotevẽ rembogue peteĩ CSS nde ta’ãngamýire.

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

Emoĩ contenido formulario ryepýpe .navbar-formalineación vertical hekopete ha comportamiento oñembyaíva umi jehechaukaha estrecho-pe. Eipuru umi opción alineación rehegua edesidi hag̃ua moõpa oiko navbar contenido ryepýpe.

Peteĩ heads up ramo, .navbar-formokomparti heta icódigo orekóva .form-inlinevía mixin. Oĩ control formulario rehegua, umi grupo entrada-icha, ikatu oikotevẽ umi ancho fijo ojehechauka porã hag̃ua peteĩ navbar ryepýpe.

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

Umi advertencia dispositivo móvil rehegua

Oĩ algunas advertencias ojeporúva rehegua umi control formulario rehegua umi elemento fijo ryepýpe umi dispositivo móvil-pe. Ehecha ore kuatiañe’ẽ pytyvõrã kundahára rehegua reikuaa hag̃ua mba’ekuaarã.

Akóinte emoĩve umi etiqueta

Umi pantalla omoñe’ẽva oguerekóta apañuãi ne formulario-kuéra ndive neremoĩriramo peteĩ etiqueta opaite entrada-pe g̃uarã. Koꞌã formulario inline-pe g̃uarã, ikatu emokañy umi etiqueta eipurúvo .sr-onlymboꞌepy. Oĩ ambue método alternativo oñemeꞌe hag̃ua peteĩ etiqueta umi tecnología oipytyvõvape g̃uarã, haꞌeháicha pe aria-label, aria-labelledbytérã titleatributo. Ndaipóriramo peteĩva koꞌãvagui, umi pantalla omoñeꞌeva ikatu orecurri oipuru hag̃ua placeholderatributo, oĩramo, ha katu eñatendéke ndojeporúiha placeholderambue método etiquetado rehegua ñemyengoviarã.

Oñemoĩ .navbar-btnclase umi <button>elemento ndoikóiva a <form>-pe oñecentra hag̃ua verticalmente navbar-pe.

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

Jeporu contexto rehegua

Umi clase botón estándar -icha , .navbar-btnikatu ojeporu <a>ha <input>elemento-kuéra rehe. Ha katu, .navbar-btnni umi mbo’esyry botón estándar ndojeporúiva’erã umi <a>elemento oĩvare .navbar-nav.

Embojere jehaipyre vore peteĩ elemento-pe .navbar-text, jepivegua peteĩ <p>etiqueta-pe oñemboguata porã hag̃ua ha sa’y.

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

Tapichakuérape g̃uarã oipurúva enlace estándar noĩriva componente navegación regular navbar ryepýpe, eipuru .navbar-linkmbo’esyry emoĩ hag̃ua umi sa’y hekopete umi opción navbar por defecto ha inverso-pe g̃uarã.

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

Emohenda nav joajuha, formulario, botón térã jehaipyre, eipurúvo umi clase .navbar-lefttérã .navbar-rightutilidad rehegua. Mokõive mbo’esyry omoĩta peteĩ CSS float dirección oje’évape. Techapyrã, oñemohenda hag̃ua umi enlace nav, emoĩ peteĩ aparte <ul>-pe pe clase utilidad rehegua ojeporúva ndive.

Ko’ã mbo’esyry ha’e ha’e versión mixin-ed .pull-leftha .pull-right, ha katu oñemboheko umi ñeporandu medio rehegua oñemboguata hag̃ua ndahasýi hag̃ua umi componente navbar rehegua tembipuru tuichakue rupi.

Oñemohenda porãvo heta componente

Umi Navbar ko’áĝa oguereko peteĩ limitación heta .navbar-rightmbo’esyry reheve. Jaipuru hagua espacio hekopete contenido rehegua, jaipuru margen negativo .navbar-rightelemento paha rehe. Oĩ jave heta elemento oipurúva upe clase, koꞌã márgen nombaꞌapói oñehaꞌarõháicha.

Jahecha jeýta ko mbaꞌe ikatu vove jahai jey upe componente v4-pe.

Emoĩ .navbar-fixed-topha emoinge peteĩ .containertérã .container-fluidcentro ha pad navbar contenido-pe.

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

Oñeikotevẽ acolchado corporal rehegua

Pe navbar oñemboguapyva’ekue ombojehe’áta ambue ne mba’ekuaarã rehe, ndaha’éiramo remoĩva paddingyvate gotyo <body>. Eñeha’ã nde mba’ekuaarã tee térã eipuru ore pehẽngue iguýpe. Ñe’ẽñemi: Por defecto, pe navbar oguereko 50px ijyvate.

body { padding-top: 70px; }

Ejesareko emoinge hag̃ua kóva Bootstrap CSS apytu’ũ rire .

Emoĩ .navbar-fixed-bottomha emoinge peteĩ .containertérã .container-fluidcentro ha pad navbar contenido-pe.

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

Oñeikotevẽ acolchado corporal rehegua

Pe navbar oñemboguapyva’ekue oñemoĩta ambue ne mba’ekuaarã rehe, ndaha’éiramo paddingremoĩva <body>. Eñeha’ã nde mba’ekuaarã tee térã eipuru ore pehẽngue iguýpe. Ñe’ẽñemi: Por defecto, pe navbar oguereko 50px ijyvate.

body { padding-bottom: 70px; }

Ejesareko emoinge hag̃ua kóva Bootstrap CSS apytu’ũ rire .

Ejapo peteĩ navbar ipypukukue pukukue ojedesplazáva mombyry página ndive emoĩvo .navbar-static-topha emoinge peteĩ .containertérã .container-fluidmbytépe ha pad navbar contenido.

Ndojoguái umi .navbar-fixed-*clase-pe, natekotevẽi remoambue mba’eveichagua acolchado pe body.

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

Emoambue navbar jehecha emoĩvo .navbar-inverse.

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

Pan ra’ỹi

Ehechauka moõpa oĩ pe páhina koꞌag̃agua peteĩ jerarquía jeguatarã ryepýpe.

Umi separador oñembojoapy ijeheguiete CSS-pe :beforeha rupive content.

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

Paginación rehegua

Eme’ẽ enlace paginación rehegua nde sitio térã aplicación-pe g̃uarã componente paginación heta página reheve, térã alternativa paginador isensíllova .

Paginación por defecto rehegua

Paginación simple inspirada Rdio-pe, iporãitereíva umi aplicación ha resultado de búsqueda-pe g̃uarã. Pe bloque tuicháva hasy ojeheja hag̃ua, ndahasýi ojeescala hag̃ua ha omeꞌe área clic tuicháva.

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

Etiquetado componente paginación rehegua

Pe componente paginación rehegua ojejokuavaꞌerã peteĩ <nav>elemento-pe ojehechakuaa hag̃ua haꞌeha peteĩ sección navegación rehegua umi lector pantalla rehegua ha ambue tecnología oipytyvõvape g̃uarã. Avei, peteĩ páhina oiméne oguerekómagui hetave peteĩ ko’ãichagua jeguatarã vore (ha’eháicha jeguata tenondegua iñakãrapu’ãme, térã peteĩ jeguata barra lateral), iporã oñeme’ẽ peteĩ ñemombe’urã aria-labelohechaukáva <nav>mba’épa hembipotápe. Techapyrã, ojeporúramo componente paginación rehegua ojeguata hag̃ua peteĩ conjunto de resultados de búsqueda apytépe, peteĩ etiqueta oñemohenda porãva ikatu haꞌe aria-label="Search results pages".

Estado discapacitado ha activo rehegua

Umi enlace ha’e personalizable circunstancia iñambuévape g̃uarã. Eipuru .disabledumi enlace ndojehecháivape g̃uarã ha .activeehechauka hag̃ua pe páhina koʼag̃agua.

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

Ro’e porã embohasa hag̃ua umi anclaje activo térã oñemboykéva <span>, térã eheja rei hag̃ua ancla umi flecha mboyvegua/oúva kásope, eipe’a hag̃ua clic funcionalidad eñongatu aja umi estilo oñeha’ãva.

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

Dimensionamiento rehegua

¿Fansia paginación tuichavéva térã michĩvéva? Oñemoĩve .pagination-lgtérã .pagination-smumi tamaño adicional-pe g̃uarã.

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

Enlace pya’e mboyvegua ha oúva umi implementación paginación simple-pe g̃uarã orekóva marcado tesape ha estilo-kuéra. Iporãiterei umi sitio simple-pe g̃uarã ha’eháicha umi blog térã revista.

Techapyrã por defecto

Por defecto, pe paginador ocentra umi enlace.

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

Ikatu avei emohenda peteĩteĩva enlace umi lado-pe:

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

Estado discapacitado opcional rehegua

Umi enlace pager oipuru avei .disabledclase utilidad general paginación guive.

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

Tembiecharã

Tembiecharã rubro Ipyahúva

Tembiecharã rubro Ipyahúva

Tembiecharã rubro Ipyahúva

Tembiecharã rubro Ipyahúva

Tembiecharã rubro Ipyahúva
Tembiecharã rubro Ipyahúva
<h3>Example heading <span class="label label-default">New</span></h3>

Umi variación ojeguerekóva

Emoĩ oimeraẽva umi clase modificador oñemombeꞌuva iguýpe emoambue hag̃ua peteĩ etiqueta jehechauka.

Por defecto Primaria Éxito Info Advertencia Peligro rehegua
<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>

¿Oguerekópa tonelada de etiquetas?

Umi problema renderización rehegua ikatu heñói oguerekóramo docena etiqueta en línea peteĩ mbaꞌeryru ijyvykuꞌi ryepýpe, peteĩteĩva oguerekóva elemento imbaꞌeteéva inline-block(peteĩ icono-icha). Pe tape ojeréva ko mba'ére ha'e ñemboguapy display: inline-block;. Contexto ha techapyrã, ehecha #13219 .

Insignia-kuéra rehegua

Emomba’eguasu pya’e umi mba’e pyahu térã noñemoñe’ẽiva emoĩvo peteĩ <span class="badge">umi enlace-pe, Bootstrap navs ha hetave mba’e.

Bandeja de entrada rehegua42 rehegua

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

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

Ojeity ijehegui

Ndaipóri jave mba’e pyahu térã noñemoñe’ẽiva, umi insignia oñemboguejýta (CSS :emptyjeporavoha rupive) ndaipóriramo mba’ekuaarã hyepýpe.

Navegador kurusu rehegua joaju

Umi insignia ndojeitymo’ãi ijeheguiete Internet Explorer 8-pe ofaltágui chupe pytyvõ :emptyselector-pe g̃uarã.

Ojeadapta umi estado nav activo-pe

Umi estilo incorporado oike oñemoî haguã insignia estado activo-pe umi navegación píldora-pe.

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

Jumbotrón rehegua

Peteĩ componente ligero, flexible ikatúva opcionalmente ombohape jehechaukaha tuichakue ohechauka hag̃ua contenido clave nde sitio-pe.

Maitei, mundo!

Kóva ha’e peteĩ unidad héroe simple, peteĩ componente simple estilo jumbotron-pegua ohenói haĝua atención extra contenido térã información destacada-pe.

Eikuaave hag̃ua

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

Jajapo hagua pe jumbotrón ipypuku henyhëva, ha esquina redondeada ÿre, ñamoí opaite .containers okaháre ha upéva rangue ñamoí petet .containerhyepype.

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

Página iñakãrapu’ãva

Peteĩ shell simple peteĩvape g̃uarã h1oñemohenda porã hag̃ua ha oñembojaꞌo hag̃ua umi sección contenido rehegua peteĩ página-pe. Ikatu oipuru pe h1's smallelemento por defecto, avei hetavéva ambue componente (estilo adicional reheve).

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

Ta’ãngamýi michĩva

Embotuichave Bootstrap sistema cuadrícula rehegua componente taꞌãngamýi michĩva reheve ohechauka hag̃ua ndahasýi hag̃ua cuadrícula taꞌãngamýi, video, jehaipyre ha hetave mbaꞌe rehegua.

Rehekáramo Pinterest-icha ñembohasa ta’ãngamýi michĩva ijyvate ha/térã ipypuku iñambuéva, tekotevẽta reipuru peteĩ mbohapýha mba’e’oka ha’eháicha Masonry , Isotope , térã Salvattore .

Techapyrã por defecto

Por defecto, Bootstrap taꞌãngamýi michĩva ojejapo ohechauka hag̃ua taꞌãngamýi ojoajúva michĩvéva marcado oñeikotevẽva reheve.

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

Contenido personalizado rehegua

Peteĩ marcado extra reheve, ikatu oñembojoapy oimeraẽichagua contenido HTML rehegua haꞌeháicha iñakãrapuꞌa, párrafo térã botón taꞌãngamýi michĩvape.

100%x200 rehegua

Etiqueta de miniatura rehegua

Cras justo odio, dapibus ac facilisis en, egestas eget quam rehegua. Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

Votõ Votõ

100%x200 rehegua

Etiqueta de miniatura rehegua

Cras justo odio, dapibus ac facilisis en, egestas eget quam rehegua. Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

Votõ Votõ

100%x200 rehegua

Etiqueta de miniatura rehegua

Cras justo odio, dapibus ac facilisis en, egestas eget quam rehegua. Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

Votõ Votõ

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

Alerta rehegua

Ome’ẽ marandu ñe’ẽñemi contextual rehegua umi tembiaporã típico oiporúvape g̃uarã umi puñado marandu alerta rehegua ojeguerekóva ha ijyvytu’ỹva reheve.

Tembiecharã

Embojere oimeraẽva jehaipyre ha peteĩ botón de despido opcional .alertha peteĩva umi irundy clase contextual-gui (techapyrã, .alert-success) marandu alerta básica-pe g̃uarã.

Ndaipóri clase por defecto

Umi alerta ndorekói clase por defecto, clase base ha modificador añoite. Peteĩ alerta gris por defecto ndoguerekói hetaiterei sentido, upévare oñeikotevẽ emombe’u peteĩ tipo clase contextual rupive. Eiporavo éxito, info, advertencia térã peligro-gui.

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

Umi alerta ojedesestimava’erã

Emopu’ã oimeraẽ alerta rehe emoĩvo peteĩ .alert-dismissiblebotón opcional ha emboty.

Oikotevẽ JavaScript ñe’ẽmondo ñemboheko

Oñemba’apo porã hag̃ua, ñe’ẽmondo oñemboykéva, reipuruva’erã ñe’ẽmondo JavaScript plugin .

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

Ojeasegura teko porã opaite tembipuru’i rupi

Eipuru katuete pe <button>elemento data-dismiss="alert"atributo dato rehegua ndive.

Eipuru .alert-linkclase utilidad rehegua eme’ẽ pya’e hag̃ua enlace color ojoajúva oimeraẽ alerta ryepýpe.

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

Ome’ẽ ñe’ẽñemi ára ha ára mba’éichapa oho peteĩ tembiaporã térã tembiaporã umi barra de progreso simple ha katu flexible reheve.

Navegador kurusu rehegua joaju

Umi barra de progreso oipuru CSS3 jehaipyre ha taꞌãngamýi ohupyty hag̃ua peteĩva umi efecto orekóva. Ko’ã mba’ekuaarã ndojeguerohorýi Internet Explorer 9 ha iguýpe térã Firefox versión itujavévape. Opera 12 ndoipytyvõi umi animación.

Política de Seguridad de Contenido (CSP) rehegua joaju

Nde página web oguerekóramo peteĩ Política de Seguridad de Contenido (CSP) ndohejáiva style-src 'unsafe-inline', upéicharamo ndaikatumo’ãi reipuru styleatributo en línea emohenda hag̃ua barra de progreso ipekue ojehechaukaháicha ore techapyrãme iguýpe. Umi tape ambuéva oñemboguapy hag̃ua umi ipekue oñemohenda porãva CSP estricto ndive oike ojepuru hag̃ua JavaScript jeporupyre michĩmi (omohendava element.style.width) térã ojepuru hag̃ua CSS mboꞌepy jeporupyre.

Tembiecharã básico

Barra de progreso por defecto rehegua.

60% Oñemohu’ã
<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>

Etiqueta reheve

Eipeꞌa pe <span>con .sr-onlyclase barra de progreso ryepýgui ehechauka hag̃ua peteĩ porcentaje ojehecháva.

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

Ojeasegura hag̃ua pe etiqueta jehaipyre opyta hag̃ua ojelee hag̃ua jepe porcentaje michĩvape g̃uarã, ehecha emoĩ hag̃ua peteĩ min-widthpe barra de progreso-pe.

0% rehegua .
2% rehegua .
<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>

Umi alternativa contextual rehegua

Umi barra progreso rehegua oipuru peteĩva umi botón ha alerta clase peteĩchagua umi estilo ojoajúvape g̃uarã.

40% Oñemohu'ã (éxito) .
20% Oñemohu’ã
60% Oñemohu'ã (advertencia) .
80% Completo (peligro) rehegua .
<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 rehegua

Oipuru peteĩ gradiente omoheñói hag̃ua peteĩ efecto rayado. Ndojeguerekói IE9 ha iguýpe.

40% Oñemohu'ã (éxito) .
20% Oñemohu’ã
60% Oñemohu'ã (advertencia) .
80% Completo (peligro) rehegua .
<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 rehegua

Oñemoĩve oñemoingove .activehag̃ua .progress-bar-stripedumi raya derecha guive izquierda peve. Ndojeguerekói IE9 ha iguýpe.

45% Oñemohu’ã
<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>

Oñemboja’o

Ñamoĩ heta barra peteĩme .progressñamoĩ hag̃ua apila.

35% Oñemohu'ã (éxito) .
20% Oñemohu'ã (advertencia) .
10% Completo (peligro) rehegua .
<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 medios de comunicación rehegua

Umi estilo objeto abstracto rehegua oñemopuꞌa hag̃ua opaichagua componente (haꞌeháicha comentario blog rehegua, Tweet, ha mbaꞌe) ohechaukáva peteĩ taꞌãngamýi oñembohekopyréva izquierda térã derecha gotyo contenido textual ykére.

Medio de comunicación por defecto rehegua

Pe medio por defecto ohechauka peteĩ mbaꞌekuaarã medio rehegua (taꞌãngamýi, video, audio) peteĩ bloque contenido rehegua akatúa térã asu gotyo.

Rubro de medios de comunicación rehegua

Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua. Fusce condimentum nunc ac nisi fringilla vulputada rehegua. Donec lacinia congue felis rehegua faucibus-pe.

Rubro de medios de comunicación rehegua

Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua. Fusce condimentum nunc ac nisi fringilla vulputada rehegua. Donec lacinia congue felis rehegua faucibus-pe.

Encabezado de medios anidados rehegua

Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua. Fusce condimentum nunc ac nisi fringilla vulputada rehegua. Donec lacinia congue felis rehegua faucibus-pe.

Rubro de medios de comunicación rehegua

Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua.

Rubro de medios de comunicación rehegua

Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua.
<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>

Umi mboꞌepy .pull-leftha .pull-rightavei oĩ ha ojepuruvaꞌekue yma componente medio rehegua, ha katu ndojepuruvéima upe jepururã v3.3.0 guive. Haꞌekuéra ojoja haimete .media-leftha -pe .media-right, ndahaꞌeiramo .media-rightoñemoĩvaꞌerãva rire .media-bodype html-pe.

Alineación medios de comunicación rehegua

Umi taꞌãngamýi térã ambue medio ikatu oñemohenda yvate, mbytépe térã iguy gotyo. Pe por defecto ha’e alineado yvate gotyo.

Umi medio de comunicación alineado yvate gotyo

Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua. Fusce condimentum nunc ac nisi fringilla vulputada rehegua. Donec lacinia congue felis rehegua faucibus-pe.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo ​​rehegua. Cum sociis natoque penatibus ha magnis umi montes parturiente, nascetur ridiculus mus.

Umi medio de comunicación alineado mbytépe

Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua. Fusce condimentum nunc ac nisi fringilla vulputada rehegua. Donec lacinia congue felis rehegua faucibus-pe.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo ​​rehegua. Cum sociis natoque penatibus ha magnis umi montes parturiente, nascetur ridiculus mus.

Umi medio alineado inferior rehegua

Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua. Fusce condimentum nunc ac nisi fringilla vulputada rehegua. Donec lacinia congue felis rehegua faucibus-pe.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo ​​rehegua. Cum sociis natoque penatibus ha magnis umi montes parturiente, nascetur ridiculus mus.

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

Peteĩ marcado extra reheve, ikatu reipuru medio lista ryepýpe (iporãva umi rosca de comentarios térã umi lista de artículos-pe g̃uarã).

  • Rubro de medios de comunicación rehegua

    Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua.

    Encabezado de medios anidados rehegua

    Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua.

    Encabezado de medios anidados rehegua

    Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua.

    Encabezado de medios anidados rehegua

    Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin commodo rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua.
<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>

Aty lista rehegua

Umi aty lista rehegua haꞌehína peteĩ componente iñasãiva ha ipuꞌakapáva ojehechauka hag̃ua ndahaꞌei umi elemento lista simple añónte, ha katu umi complejo orekóva contenido personalizado.

Tembiecharã básico

Pe lista aty iñimportantevéva haꞌehína peteĩ lista noñeordenaivaꞌekue añoite oguerekóva umi mbaꞌe lista rehegua, ha umi clase hekopete. Emopu’ã hi’ári umi opción oúva reheve, térã nde CSS tee oñeikotevẽháicha.

  • Cras justo odio rehegua
  • Dapibus ac facilisis rehegua
  • Morbi leo risus rehegua
  • Porta ac consectetur rehegua
  • Vestibulo en eros rehegua
<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>

Insignia-kuéra rehegua

Emoĩ componente insignia rehegua oimeraẽva elemento aty lista rehegua ha oñemohenda ijeheguiete akatúape.

  • 14 reheguaCras justo odio rehegua
  • 2. 2.1Dapibus ac facilisis rehegua
  • 1. 1.1Morbi leo risus rehegua
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Umi mba’e oñembojoajúva

Embojoaju umi mba’e’oka lista aty rehegua eipurúvo etiqueta ancla rehegua umi mba’e lista rehegua rangue (upéva he’ise avei peteĩ túva peteĩ túva <div>rangue <ul>). Natekotevẽi tuvakuéra individual káda elemento jerére.

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

Umi mba’e ojejapóva botón rehegua

Umi mba’e aty lista rehegua ikatu ha’e botón umi mba’e lista rehegua rangue (upéva he’ise avei peteĩ túva peteĩ túva <div>rangue <ul>). Natekotevẽi tuvakuéra individual káda elemento jerére. Ani reipuru umi .btnclase estándar ko’ápe.

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

Umi mba’e ojejokóva

Emoĩ .disabledpeteĩ .list-group-item-pe embojegua hag̃ua gris-pe ojehechauka hag̃ua oñemboykéva.

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

Umi mbo’esyry contextual rehegua

Eipuru umi clase contextual estilo hag̃ua umi elemento lista rehegua, por defecto térã oñembojoajúva. Avei oike .activeestado-pe.

  • Dapibus ac facilisis rehegua
  • Cras oguapy amet nibh libero
  • Porta ac consectetur rehegua
  • Vestibulo en eros rehegua
<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 rehegua

Emoĩ haimete oimeraẽ HTML hyepýpe, jepe umi lista aty oñembojoajúvape g̃uarã pe oĩva iguýpeguáicha.

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

Natekotevẽiramo jepe jepi, sapy’ánte tekotevẽ remoĩ nde DOM peteĩ caja-pe. Umi situación-pe g̃uarã, eñeha’ã componente panel rehegua.

Tembiecharã básico

Por defecto, opa .panelmbaꞌe ojapóva haꞌehína omoĩ peteĩ frontera básica ha acolchado oguereko hag̃ua algún contenido.

Panel básico techapyrã
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel orekóva rubro

Emoĩ pyaꞌe peteĩ mbaꞌeryru iñakãrapuꞌa rehegua nde panel-pe .panel-heading. Ikatu avei emoinge oimeraẽva <h1>- <h6>peteĩ .panel-titlembo’esyry reheve emoĩ hag̃ua peteĩ iñakãrapu’ã oñembosako’iva’ekue mboyve. Ha katu, umi letra tuichakue <h1>- <h6>rehegua oñemboyke .panel-heading.

Oñemoĩ porã hag̃ua enlace, emoĩ katuete umi enlace umi rubro ryepýpe .panel-title.

Panel rubro sin título rehegua
Contenido panel rehegua

Panel título rehegua

Contenido panel rehegua
<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>

Embojere umi botón térã jehaipyre mokõiha .panel-footer. Ñañamindu’u umi panel pypegua ndoheredáiha umi sa’y ha rembe’y ojepuru jave umi variación contextual ndoje’éigui oĩ hag̃ua primer plano-pe.

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

Umi alternativa contextual rehegua

Ambue componente-icha, ndahasýi ejapo peteĩ panel heꞌiséva peteĩ contexto particular-pe emoĩvo oimeraẽva umi clase estado contextual rehegua.

Panel título rehegua

Contenido panel rehegua

Panel título rehegua

Contenido panel rehegua

Panel título rehegua

Contenido panel rehegua

Panel título rehegua

Contenido panel rehegua

Panel título rehegua

Contenido panel rehegua
<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>

Mesakuéra reheve

Oñemoĩ oimeraẽva ndaha’éiva frontera .tablepeteĩ panel ryepýpe peteĩ diseño sin costura-pe g̃uarã. Oĩramo peteĩ .panel-body, ñamoĩ peteĩ borde extra cuadro yvate gotyo ojesepara hag̃ua.

Panel rubro rehegua

Oĩ contenido panel por defecto ko’ápe. Nulla vitae elit libero, peteĩ pharetra augue. Enea lacinia bibendum nulla sed consectetur rehegua. Eneano eu leo ​​quam rehegua. Pelentesco ornare sem lacinia quam venenatis vestibulo rehegua. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

# Ñemby Téra peteĩha Terajoapy Tembipuru puruhára réra
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry rehegua pe Guyra @twitter-pe
<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>

Ndaipóriramo panel retepy, componente oñemonguꞌe panel iñakãgui ambuépe oñembotapykueꞌeỹre.

Panel rubro rehegua
# Ñemby Téra peteĩha Terajoapy Tembipuru puruhára réra
1. 1.1 Marcos Otto rehegua @mdo rehegua
2. 2.1 Jacob Thornton rehegua @ñandy
3.1 Larry rehegua pe Guyra @twitter-pe
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Umi aty lista rehegua ndive

Emoinge pyaꞌete umi aty lista ipypukukue rehegua oimeraẽ panel ryepýpe.

Panel rubro rehegua

Oĩ contenido panel por defecto ko’ápe. Nulla vitae elit libero, peteĩ pharetra augue. Enea lacinia bibendum nulla sed consectetur rehegua. Eneano eu leo ​​quam rehegua. Pelentesco ornare sem lacinia quam venenatis vestibulo rehegua. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

  • Cras justo odio rehegua
  • Dapibus ac facilisis rehegua
  • Morbi leo risus rehegua
  • Porta ac consectetur rehegua
  • Vestibulo en eros rehegua
<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>

Embed ombohováiva

Eheja umi kundahárape ohechakuaa hag̃ua video térã diapositiva jehechaukaha dimensión oñemopyendáva ibloque oguerekóva ipypuku rehe omoheñóivo peteĩ relación intrínseca oescala porãtava oimeraẽ tembipuru’ípe.

Umi regla ojeporu directamente <iframe>, <embed>, <video>, ha <object>elemento-kuérape; opcionalmente eipuru peteĩ clase descendiente explícita .embed-responsive-itemembojoajuséramo estilo ambue atributo-pe g̃uarã.

¡Pro-Consejo! Natekotevẽi remoinge frameborder="0"nde <iframe>s-pe romboykévo upéva ndéve g̃uarã.

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

Ykuakuéra

Por defecto porã

Eipuru pe ykua petet efecto simple ramo petet elemento rehe ome e hagua chupe petet efecto inserto.

¡Emañamína, aime peteĩ ykuápe!
<div class="well">...</div>

Umi clase opcional rehegua

Control acolchado ha esquina redondeada orekóva mokõi clase modificador opcional.

¡Emañamína, aime peteĩ ykua tuichávape!
<div class="well well-lg">...</div>
¡Emañamína, aime peteĩ ykua michĩvape!
<div class="well well-sm">...</div>