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.
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-path
ha/térã @icon-font-name
umi 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-only
mbo’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-label
atributo 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-only
jehaipyre adicional ombohasa hag̃ua ko pista umi tecnología oipytyvõva puruhárape.
Jejavy: 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 .dropup
tú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-right
peteĩ .dropdown-menu
a 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 overflow
propiedades térã ojehechauka okápe umi límite jehechaukahagui. Embohovái ko’ã mba’e ndejehegui heñói jave.
Alineación .pull-right
ndojeporúiva
v3.1.0 guive, roñemboyke .pull-right
umi 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>
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ĩ .disabled
peteĩ <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 .
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, role
tekotevẽ 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ĩ role
atributo hekopete. Umi techapyrã oñemeꞌevaꞌekuépe koꞌape, jaipuru , ha katu ikatu avei ojeporu umi aria-label
alternativa haꞌeháicha .aria-labelledby
Tembiecharã básico
Embojere peteĩ serie de botón orekóva .btn
en .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.
Asu
Mbyte
Akatúa
Asu
Mbyte
Akatúa
Asu
Mbyte
Akatúa
Asu
Mbyte
Akatúa
<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-group
ambue ryepýpe .btn-group
reipotáramo umi menú desplegable oñembojeheꞌa peteĩ serie de botón reheve.
1. 1.1
2. 2.1
Ñemboguejyha
<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.
Votõ
Votõ
Ñemboguejyha
Votõ
Votõ
Ñemboguejyha
Ñemboguejyha
Ñemboguejyha
<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: -1px
ojepuru oñembojeheꞌa hag̃ua umi rembeꞌe ojeipeꞌa rangue. Ha katu, margin
ndoikó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 .btn
s 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"
.
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>
Eipuru oimeraẽva botón emoñepyrũ hag̃ua peteĩ menú desplegable emoĩvo peteĩ ryepýpe .btn-group
ha 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.
Upevakuére
Tenondeguáva
Ñesẽporã
Info
Ñemongyhyje
Ñemongyhyje
<!-- 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.
Upevakuére
Toggle Ñemboguejyha
Tenondeguáva
Toggle Ñemboguejyha
Ñesẽporã
Toggle Ñemboguejyha
Info
Toggle Ñemboguejyha
Ñemongyhyje
Toggle Ñemboguejyha
Ñemongyhyje
Toggle Ñemboguejyha
<!-- 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 .dropup
tú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-group
peteĩ .input-group-addon
térã .input-group-btn
ndive emoĩ mboyve térã emoĩ hag̃ua elemento peteĩva .form-control
rehe .
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 rows
noñ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).
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-addon
té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>
Emoĩ umi clase de tamaño relativo formulario rehegua .input-group
ijehegui 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>
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 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-btn
rembojere 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 -->
<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 -->
<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>
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 .nav
clase 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 role
atributo 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-tabs
clase oikotevẽha pe .nav
clase 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-pills
hendagué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>
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 por defecto 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:
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-breakpoint
mba’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-breakpoint
ipypuku. 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>
Imagen de marca rehegua
Emyengovia navbar marca nde ta’ãngamýi rehe emoambuévo jehaipyre peteĩ <img>
. Pe .navbar-brand
oguerekó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-form
alineació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-form
okomparti heta icódigo orekóva .form-inline
ví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ã.
Oñemoĩ .navbar-btn
clase 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-btn
ikatu ojeporu <a>
ha <input>
elemento-kuéra rehe. Ha katu, .navbar-btn
ni umi mbo’esyry botón estándar ndojeporúiva’erã umi <a>
elemento oĩvare .navbar-nav
.
Maranduhai
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>
Umi enlace ndaha’éiva nav
Tapichakuérape g̃uarã oipurúva enlace estándar noĩriva componente navegación regular navbar ryepýpe, eipuru .navbar-link
mbo’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>
Alineación componente rehegua
Emohenda nav joajuha, formulario, botón térã jehaipyre, eipurúvo umi clase .navbar-left
térã .navbar-right
utilidad 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-left
ha .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-right
mbo’esyry reheve. Jaipuru hagua espacio hekopete contenido rehegua, jaipuru margen negativo .navbar-right
elemento 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.
Oñemohenda yvate gotyo
Emoĩ .navbar-fixed-top
ha emoinge peteĩ .container
térã .container-fluid
centro 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 padding
yvate 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 .
Oñemohenda iguy gotyo
Emoĩ .navbar-fixed-bottom
ha emoinge peteĩ .container
térã .container-fluid
centro 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 padding
remoĩ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 .
Yvate estático rehegua
Ejapo peteĩ navbar ipypukukue pukukue ojedesplazáva mombyry página ndive emoĩvo .navbar-static-top
ha emoinge peteĩ .container
térã .container-fluid
mbyté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>
Navbar oñembojere va’ekue
Emoambue navbar jehecha emoĩvo .navbar-inverse
.
<nav class= "navbar navbar-inverse" >
...
</nav>
Ehechauka moõpa oĩ pe páhina koꞌag̃agua peteĩ jerarquía jeguatarã ryepýpe.
Umi separador oñembojoapy ijeheguiete CSS-pe :before
ha rupive content
.
<ol class= "breadcrumb" >
<li><a href= "#" > Home</a></li>
<li><a href= "#" > Library</a></li>
<li class= "active" > Data</li>
</ol>
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 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" > « </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" > » </span>
</a>
</li>
</ul>
</nav>
Estado discapacitado ha activo rehegua
Umi enlace ha’e personalizable circunstancia iñambuévape g̃uarã. Eipuru .disabled
umi enlace ndojehecháivape g̃uarã ha .active
ehechauka 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" > « </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" > « </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-lg
térã .pagination-sm
umi 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>
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>
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" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
Estado discapacitado opcional rehegua
Umi enlace pager oipuru avei .disabled
clase utilidad general paginación guive.
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous disabled" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
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 .
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.
<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 :empty
jeporavoha rupive) ndaipóriramo mba’ekuaarã hyepýpe.
Navegador kurusu rehegua joaju
Umi insignia ndojeitymo’ãi ijeheguiete Internet Explorer 8-pe ofaltágui chupe pytyvõ :empty
selector-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 jumbotrón ipypuku henyhëva, ha esquina redondeada ÿre, ñamoí opaite .container
s okaháre ha upéva rangue ñamoí petet .container
hyepype.
<div class= "jumbotron" >
<div class= "container" >
...
</div>
</div>
Peteĩ shell simple peteĩvape g̃uarã h1
oñemohenda porã hag̃ua ha oñembojaꞌo hag̃ua umi sección contenido rehegua peteĩ página-pe. Ikatu oipuru pe h1
's small
elemento 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.
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.
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 .alert
ha 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ẽ 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" > ...</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-dismissible
botón opcional ha emboty.
×
Ñ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" > × </span></button>
<strong> Warning!</strong> Better check yourself, you're not looking too good.
</div>
Umi enlace oĩva umi alerta-pe
Eipuru .alert-link
clase 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>
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 style
atributo 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.
<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-only
clase barra de progreso ryepýgui ehechauka hag̃ua peteĩ porcentaje ojehecháva.
<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-width
pe barra de progreso-pe.
<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ã.
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.
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 .active
hag̃ua .progress-bar-striped
umi 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 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>
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.
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.
<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-left
ha .pull-right
avei oĩ ha ojepuruvaꞌekue yma componente medio rehegua, ha katu ndojepuruvéima upe jepururã v3.3.0 guive. Haꞌekuéra ojoja haimete .media-left
ha -pe .media-right
, ndahaꞌeiramo .media-right
oñemoĩvaꞌerãva rire .media-body
pe html-pe.
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.
<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>
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ã).
<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ẽva elemento aty lista rehegua ha oñemohenda ijeheguiete akatúape.
14 rehegua Cras justo odio rehegua
2. 2.1 Dapibus ac facilisis rehegua
1. 1.1 Morbi 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 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 .btn
clase estándar ko’ápe.
Cras justo odio rehegua
Dapibus ac facilisis rehegua
Morbi leo risus rehegua
Porta ac consectetur rehegua
Vestibulo en eros rehegua
<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ĩ .disabled
peteĩ .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 .active
estado-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>
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 .panel
mbaꞌe ojapóva haꞌehína omoĩ peteĩ frontera básica ha acolchado oguereko hag̃ua algún contenido.
<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-title
mbo’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.
<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 .table
peteĩ 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>
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-item
embojoajusé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>