Decenas de componentes reutilizables oñemopu’ã Bootstrap-pe ome’ẽ hag̃ua navegación, alertas, popovers ha hetave mba’e.
Paginación ultra simplista ha mínimamente estilo oñeinspiráva Rdio-pe, iporãitereíva umi aplicación ha resultado jeheka rehegua. Pe bloque tuicháva hasy ojeheja hag̃ua, ndahasýi ojeescala hag̃ua ha omeꞌe área clic tuicháva.
Umi enlace haꞌehína personalizable ha ombaꞌapo heta circunstancia-pe clase oike porãva ndive. .disabled
umi enlace ndojejapóiva clic-pe .active
g̃uarã ha página ko’áĝaguápe g̃uarã.
Emoĩ peteĩva mokõi clase opcional apytégui emoambue hag̃ua alineación umi enlace paginación rehegua: .pagination-centered
ha .pagination-right
.
Pe componente paginación por defecto haꞌehína flexible ha ombaꞌapo heta variación-pe.
Ojejokua peteĩ <div>
, paginación ha'e peteĩ <ul>
.
- <div clase = "paginación" > rehegua
- <ul> rehegua
- <li><a href = "#" > Ymaguaréva </a></li>
- <li clase = "activo" > rehegua
- <a href = "#" > 1 </a> rehegua
- </li> rehegua
- <li><a href = "#" > 2 </a></li> Ñe’ẽpoty ha ñe’ẽpoty ñemohenda
- < li><a href = "#" > 3 Ñe’ẽpoty ha ñe’ẽpoty ryru
- < li><a href = "#" > 4 Ñe’ẽpoty ha ñe’ẽpoty ryru
- <li><a href = "#" > Oúva </a></li>
- </ul> rehegua
- </div> rehegua
Pe componente pager haꞌehína peteĩ conjunto de enlaces umi implementación paginación simple-pe g̃uarã orekóva marcado tesape ha umi estilo tesapevéva jepe. Iporãiterei umi sitio simple-pe g̃uarã ha’eháicha umi blog térã revista.
Por defecto, pe paginador ocentra umi enlace.
- <ul clase = "pager" > rehegua
- <li> rehegua
- <a href = "#" > Ymaguaréva </a>
- </li> rehegua
- <li> rehegua
- <a href = "#" > Oúva </a>
- </li> rehegua
- </ul> rehegua
Ikatu avei emohenda peteĩteĩva enlace umi lado-pe:
- <ul clase = "pager" > rehegua
- <li clase = "ymaguare" >
- <a href = "#" > Ñe'ẽpoty ha ñe'ẽpoty; Tujavéva </a>
- </li> rehegua
- <li clase = "oúva" >
- <a href = "#" > Ipyahuvéva → </a> rehegua
- </li> rehegua
- </ul> rehegua
Etiquetas rehegua | Marcado rehegua |
---|---|
Upevakuére | <span class="label">Default</span> |
Pyahu | <span class="label label-success">New</span> |
Ñemongyhyje | <span class="label label-warning">Warning</span> |
Momba'eguasu | <span class="label label-important">Important</span> |
Info | <span class="label label-info">Info</span> |
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.
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.
Umi taꞌãngamýi michĩva (yma .media-grid
v1.4 peve) iporãiterei umi taꞌãngamýi térã taꞌãngamýi rejilla-pe g̃uarã, taꞌãngamýi jeheka resultado-pe g̃uarã, mbaꞌerepy ñemurã, cartera ha hetave mbaꞌe. Ikatu ha’e enlace térã contenido estático.
Pe marcado michĩva ha’e simple —peteĩ ul
oguerekóva oimeraẽ número de li
elementos ha’e opa mba’e oñeikotevẽva. Avei ha’e súper flexible, ohejáva oimeraẽichagua contenido orekóva michĩmi hetave marcado-nte ombojere hag̃ua ne contenido.
Ipahápe, componente taꞌãngamýi michĩva oipuru umi clase sistema cuadrícula rehegua oĩmava—haꞌeháicha .span2
térã .span3
—ojesareko hag̃ua taꞌãngamýi dimensión rehe.
Ojeꞌe haguéicha yma, pe marcado oñeikotevẽva taꞌãngamýi michĩvape g̃uarã haꞌehína tesape ha hekopete. Ko’ápe ojehecha pe ñembosako’i ñepyrũrã ta’ãngamýi oñembojoajúvape g̃uarã :
- <ul clase = "ta'ãnga'i michĩva" >
- <li clase = "span3" > rehegua
- <a href = "#" clase = "ta'ãnga'i michĩva" >
- <img src = "https://qu.py.org/260x180" alt = "" >
- </a> rehegua
- </li> rehegua
- ...
- </ul> rehegua
HTML contenido personalizado-pe g̃uarã taꞌãngamýi michĩvape, pe marcado oñemoambue michĩmi. Ojeheja hag̃ua contenido nivel bloque rehegua mamove, rointercambia pe <a>
peteĩ <div>
gusta rehe upéicha:
- <ul clase = "ta'ãnga'i michĩva" >
- <li clase = "span3" > rehegua
- <div clase = "ta'ãnga'i michĩva" >
- <img src = "https://qu.py.org/260x180" alt = "" >
- <h5> Ta’ãngamýi ryru < /h5>
- <p> Ta’ãngamýi ñe’ẽñemi ko’ápe voi... </p>
- </div> rehegua
- </li> rehegua
- ...
- </ul> rehegua
Bootstrap 2 rupive, romohesakãve mbo’esyry base: .alert
rangue .alert-message
. Avei romboguejy pe marcado mínimo oñeikotevẽva—no <p>
oñeikotevẽva por defecto, pe outter añoite <div>
.
Peteĩ componente ipukuvévape g̃uarã sa’ive código reheve, roipe’a pe jehecha diferenciador umi alerta bloque rehegua, marandu oúva hetave acolchado reheve ha típicamente hetave jehaipyre reheve. Avei pe kláse okambia .alert-block
.
Bootstrap oúva peteĩ jQuery plugin tuichaitereíva ndive oipytyvõva marandu ñe’ẽñemi rehegua, omboykévo pya’e ha ndahasýiva.
Embojere ne marandu ha peteĩ icono ñemboty opcional peteĩ div-pe clase simple reheve.
- <div clase = "alerta" > rehegua
- <a clase = "omboty" > × </a>
- <strong> ¡Ñe’ẽñemi! </strong> Iporãvéva cheque yo self, nde ndaha'éi ojehecha porãitereíva.
- </div> rehegua
Embohape pyaꞌe marandu alerta estándar rehegua mokõi clase opcional reheve: .alert-block
hetave acolchado ha control jehaipyre rehegua ha .alert-heading
peteĩ iñakãrapuꞌa ojoajúvape g̃uarã.
Mejor cheque yo self, nde ndaha'éi ojehecha porãitereíva. Nulla vitae elit libero, peteĩ pharetra augue. Ojekuaa avei ko'ã mba'e ojehúva umi mba'e ojejapóva ha ojejapóva.
- <div clase = "alerta alerta-bloqueo" >
- <a clase = "omboty" > × </a>
- <h4 class = "alerta-heading" > Ñe'ẽñemi! </h4> rehegua
- Mejor cheque yo self, nde ndaha'éi...
- </div> rehegua
- <div clase = "alerta alerta-jejavy" >
- ...
- </div> rehegua
- <div clase = "alerta alerta-éxito" >
- ...
- </div> rehegua
- <div clase = "alerta alerta-marandu" >
- ...
- </div> rehegua
Barra de progreso por defecto orekóva gradiente vertical.
- <div clase = "progreso" > rehegua
- <div clase = "barra" rehegua.
- estilo = " ipypuku : 60 %; " ></div>
- </div> rehegua
Oipuru peteĩ gradiente omoheñói hag̃ua peteĩ efecto rayado.
- <div class = "progreso progreso-marandu."
- progreso-rayado" > rehegua
- <div clase = "barra" rehegua.
- estilo = " ipypuku : 20 %; " ></div>
- </div> rehegua
Ogueraha pe techapyrã rayado ha omoingove.
- <div class = "progreso progreso-peligro rehegua."
- progreso-rayado activo" > rehegua
- <div clase = "barra" rehegua.
- estilo = " ipypuku : 40 %; " ></div>
- </div> rehegua
Umi barra progreso rehegua oipuru peteĩva umi clase réra peteĩchagua umi botón ha alerta-icha estilo ojoguávape g̃uarã.
.progress-info
.progress-success
.progress-danger
Ikatu avei emohenda umi archivo LESS ha embojere nde sa’y ha tuichakue tee.
Umi barra de progreso oipuru umi transición CSS3, upévare emohenda ramo dinámicamente ipekue javascript rupive, ombotuichave porãta.
Eipurúramo pe .active
clase, umi nde .progress-striped
barra de progreso omoingovéva umi raya izquierda guive derecha peve.
Umi barra de progreso oipuru CSS3 gradiente, transición ha animación ohupyty hag̃ua opaite efecto orekóva. Ko’ã mba’ekuaarã ndojeguerohorýi IE7-8 térã Firefox versión itujavévape.
Opera ndoipytyvõi umi animación ko’áĝaite.
Eipuru pe ykua petet efecto simple ramo petet elemento rehe ome e hagua chupe petet efecto inserto.
- <div clase = "bueno" >
- ...
- </div> rehegua
Eipuru icono genérico ñemboty rehegua emboyke hag̃ua contenido ha’eháicha modal ha alerta.
- <a clase = "oñemboty" > × </a> rehegua