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
glyphicon glyphicon-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 ndoguerekóiva contenido jehaipyre ha ndorekóiva elemento mitã rehe añoite.

Oñemoambuévo icono fuente ñemohenda

Bootstrap oimoꞌa umi vore 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.

Emoinge peteĩ dirección de correo electrónico añeteguáva

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

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

Tembiecharã

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>

Alineación rehegua

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.

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

Akãrapu’ã

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>

Divisor rehegua

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>

Umi mba’e menúpegua oñemboykéva

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>

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 `role`ha 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ã 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>

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

Ejapo petet aty botón rehegua ojepyso hagua tuicha jojape oñemosarambi hagua ituvakuéra ipypukukue tuichakue javeve. 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.

Asu Mbyte Akatúa

Asu Mbyte

<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 umi <button>elemento-pe, 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>

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>

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

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

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.

Fichas rehegua

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

Pastillas rehegua

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 apilable verticalmente. Oñembojoapy mante .nav-stacked.

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

Ojehustifikáva

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>

Umi enlace oñemboykéva

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>

Oipurúvo umi desplegable

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 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ñembohekokuaa) 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 reike mba’e’apo’ỹme contenido envoltura mokõiha fila-pe. Resolusiona hag̃ua ko mbaʼe ikatu rejapo:

Emboguejy umi mba’e navbar rehegua mbovy térã ipekue.
Eñomi peteĩva umi mba’e’oka navbar rehegua peteĩ pantalla tuichakuépe eipurúvo umi clase utilidad ombohováiva .
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.

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

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

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>

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.

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-kuéra discapacitado ha activo-kuéra

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 mboyve ha oúva umi implementación paginación simple 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 pager ocentra umi enlace.

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

Umi enlace alineado rehegua

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>

Tembiecharã

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 .

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ñembyaíta rei (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>

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

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>

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.

Ehekáramo Pinterest-icha ñembohasa ta’ãngamýi michĩva ijyvate ha/térã ipypuku iñambuéva, tekotevẽta reipuru peteĩ mbohapýha mboajepyréva ha’eháicha Masonería , Isótopo 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.

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õ

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õ

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>

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.

Japo porã! Relee porã ko mensáhe de alerta iñimportánteva.

¡Akã yvate! Ko alerta oikotevẽ nde atención, ha katu ndaha’éi súper importante.

Ñemongyhyje! Iporãve rejejesareko, nderehechaporãiete.

¡Oh snap! Emoambue mbovymi mba’e yvate ha eñeha’ã emondo jey.

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

Ñemongyhyje! Iporãve rejejesareko, nderehechaporãiete.

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

Umi enlace oĩva umi alerta-pe

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

Japo porã! Relee porã ko marandu alerta iñimportánteva .

¡Akã yvate! Ko alerta oikotevẽ ne atención , ha katu ndaha’éi súper importante.

Ñemongyhyje! Iporãve rejejesareko, nderehechaporãiete .

¡Oh snap! Emoambue mbovymi mba’e yvate ha eñeha’ã emondo jey.

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

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

<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 ojelee hag̃ua jepe porcentaje michĩvape g̃uarã, ehecha emoĩve peteĩ min-widthbarra 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ã.

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

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

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

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

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>

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ẽ elemento lista aty 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 rendaguépe (upéva he’ise avei peteĩ túva peteĩ túva <div>rangue <ul>). Natekotevẽi tuvakuéra individual káda elemento jerére.

Cras justo odio rehegua Dapibus ac facilisis rehegua Morbi leo risus rehegua Porta ac consectetur rehegua Vestibulo en eros rehegua

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

Cras justo odio rehegua Dapibus ac facilisis rehegua Morbi leo risus rehegua Porta ac consectetur rehegua Vestibulo en eros rehegua

<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

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.

Emoĩ lista elemento aty rehegua rubro

Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Maecenas sed diam eget risus varius blandit rehegua.

Emoĩ lista elemento aty rehegua rubro

Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Maecenas sed diam eget risus varius blandit rehegua.

Emoĩ lista elemento aty rehegua rubro

Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Maecenas sed diam eget risus varius blandit rehegua.

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

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>

Panel orekóva ipype

Embojere umi botón térã jehaipyre mokõiha rehegua .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

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

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>

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>

Umi componente rehegua

Glificones rehegua

Umi glifo ojeguerekóva

Mba’éichapa ojeporu

Ani reñembojehe'a ambue componente ndive

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

Oñemoambuévo icono fuente ñemohenda

Umi icono ojeikekuaahápe

Tembiecharã

Umi desplegable rehegua

Tembiecharã

Alineación rehegua

Ikatu oikotevẽ posicionamiento adicional

Alineación .pull-rightndojeporúiva

Akãrapu’ã

Divisor rehegua

Umi mba’e menúpegua oñemboykéva

Umi aty botón rehegua

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

Ejeasegura hekopete roleha eme’ẽ peteĩ etiqueta

Tembiecharã básico

Tembipururã ryru botón rehegua

Dimensionamiento rehegua

Nidación rehegua

Variación vertical rehegua

Umi aty botón rehegua ojehustifikáva

Omanehávo umi frontera

IE8 ha umi frontera

Umi <a>elemento reheve

Umi enlace oactúava botón ramo

Umi <button>elemento reheve

Umi desplegable botón rehegua

Plugin rehegua dependencia

Umi desplegable peteĩ botón rehegua

Umi botón ñemboja’o rehegua

Dimensionamiento rehegua

Variación de caída rehegua

Umi aty jeike rehegua

Textual <input>s añoite

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

Ani reñembojehe'a ambue componente ndive

Akóinte emoĩve umi etiqueta

Tembiecharã básico

Dimensionamiento rehegua

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

Umi addons de botón rehegua

Umi botón orekóva umi desplegable

Umi botón segmentado rehegua

Heta botón rehegua

Navs rehegua

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

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

Fichas rehegua

Pastillas rehegua

Ojehustifikáva

Safari ha ombohováiva justificado navs

Umi enlace oñemboykéva

Enlace funcionalidad noñeimpactáiva

Oipurúvo umi desplegable

Umi ficha orekóva umi desplegable

Pastillas orekóva gota

Navbar rehegua

Navbar por defecto rehegua

Contenido ojedesbordáva

Oikotevẽ JavaScript ñembojoapy

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

Ejapo umi navbar ojeikekuaa hag̃ua

Imagen de marca rehegua

Umi formulario rehegua

Umi advertencia dispositivo móvil rehegua

Akóinte emoĩve umi etiqueta

Umi botón rehegua

Jeporu contexto rehegua

Maranduhai

Umi enlace ndaha’éiva nav

Alineación componente rehegua

Oñemohenda porãvo heta componente

Oñemohenda yvate gotyo

Oñeikotevẽ acolchado corporal rehegua

Oñemohenda iguy gotyo

Alineación `.pull-right`ndojeporúiva

Ejeasegura hekopete `role`ha eme’ẽ peteĩ etiqueta

Umi `<a>`elemento reheve

Umi `<button>`elemento reheve

Textual `<input>`s añoite