Umi componente rehegua

Decenas de componentes reutilizables oñemopu’ã Bootstrap-pe ome’ẽ hag̃ua navegación, alertas, popovers ha hetave mba’e.

Umi aty botón rehegua

Eipuru umi botón aty embojoaju hag̃ua heta botón oñondive peteĩ componente compuesto ramo. Emopu’ã chupekuéra peteĩ serie <a>térã <button>elemento reheve.

Ikatu avei embojoaju umi conjunto de <div class="btn-group">en a <div class="btn-toolbar">umi proyecto complejo-vévape g̃uarã.

Tembiecharã marcado rehegua

Ko’ápe ojehecha mba’éichapa HTML oheka peteĩ botón aty estándar oñemopu’ãva’ekue umi botón etiqueta anclaje reheve:

  1. <div clase = "btn-grupo" > rehegua
  2. <a clase = "btn" href = "#" > 1 </a> rehegua
  3. <a mbo’esyry = "btn" href = "#" > 2 </a>
  4. <a mbo’esyry = "btn" href = "#" > 3 </a>
  5. </div> rehegua

Ha peteĩ tembipuru’i ryru reheve heta aty’ípe g̃uarã:

  1. <div clase = "btn-tembipururã" >
  2. <div clase = "btn-grupo" > rehegua
  3. ...
  4. </div> rehegua
  5. </div> rehegua

Caja de verificación ha umi sabor radio rehegua

Umi botón aty ikatu avei ombaꞌapo radio ramo, peteĩ botón añoite ikatuhápe ombaꞌapo, térã umi casilla de verificación, ikatuhápe ombaꞌapo oimeraẽva mboajepyréva. Ehecha Javascript kuatiañe’ẽ upévarã.

Ojehupyty pe javascript »


Akã yvate gotyo

CSS umi botón aty’ípe g̃uarã oĩ peteĩ vore añóntepe, button-groups.less.

Tembiecharã marcado rehegua

Ojogua peteĩ botón aty’ípe, ore marcado oipuru marcado botón jepivegua, ha katu peteĩ po’i ñembojoapy reheve omoporãve hag̃ua estilo ha oipytyvõ hag̃ua Bootstrap jQuery plugin desplegable.

  1. <div clase = "btn-grupo" > rehegua
  2. <a clase = "btn ñemboguejyha" datokuéra ñembohasa = "mboguejýva" href = "#" >
  3. Ojejapóva
  4. <span clase = "caret" ></span> rehegua
  5. </a> rehegua
  6. <ul clase = "menú desplegable" >
  7. <!-- menú desplegable joajuha -->
  8. </ul> rehegua
  9. </div> rehegua

Umi botón ñemboja’o rehegua

Oñemopuꞌa umi estilo aty botón rehegua ha marcado rehe, ikatu jajapo peteĩ botón ñembojaꞌo pyaꞌete. Umi botón oñembojaꞌovaꞌekue oguereko peteĩ tembiaporã estándar ijasu gotyo ha peteĩ jere desplegable akatúape umi enlace contextual reheve.

Tembiecharã marcado rehegua

Roñembotuichave umi botón desplegable normal rehegua omeꞌe hag̃ua mokõiha acción botón rehegua ombaꞌapóva peteĩ gatillo desplegable aparte ramo.

  1. <div clase = "btn-grupo" > rehegua
  2. <a clase = "btn" href = "#" > Tembiaporã </a>
  3. <a clase = "btn ñemboguejyha" datokuéra ñembohasa = "mboguejýva" href = "#" >
  4. <span clase = "caret" ></span> rehegua
  5. </a> rehegua
  6. <ul clase = "menú desplegable" >
  7. <!-- menú desplegable joajuha -->
  8. </ul> rehegua
  9. </div> rehegua

Paginación multicon-página rehegua

Araka’épa ojepuruva’erã

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 página estatal rehegua

Umi enlace haꞌehína personalizable ha ombaꞌapo heta circunstancia-pe clase oike porãva ndive. .disabledumi enlace ndojejapóiva clic-pe .activeg̃uarã ha página ko’áĝaguápe g̃uarã.

Alineación flexible rehegua

Emoĩ peteĩva mokõi clase opcional apytégui emoambue hag̃ua alineación umi enlace paginación rehegua: .pagination-centeredha .pagination-right.

Marcado rehegua

Ojejokua peteĩ <div>, paginación ha'e peteĩ <ul>.

  1. <div clase = "paginación" > rehegua
  2. <ul> rehegua
  3. <li><a href = "#" > Ymaguaréva </a></li>
  4. <li clase = "activo" > rehegua
  5. <a href = "#" > 1 </a> rehegua
  6. </li> rehegua
  7. <li><a href = "#" > 2 </a></li> Ñe’ẽpoty ha ñe’ẽpoty ñemohenda
  8. < li><a href = "#" > 3 Ñe’ẽpoty ha ñe’ẽpoty ryru
  9. < li><a href = "#" > 4 ​​Ñe’ẽpoty ha ñe’ẽpoty ryru
  10. <li><a href = "#" > Oúva </a></li>
  11. </ul> rehegua
  12. </div> rehegua

Pager Umi enlace pya’e mboyvegua ha oúvape g̃uarã

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

Techapyrã por defecto

Por defecto, pe paginador ocentra umi enlace.

  1. <ul clase = "pager" > rehegua
  2. <li> rehegua
  3. <a href = "#" > Ymaguaréva </a>
  4. </li> rehegua
  5. <li> rehegua
  6. <a href = "#" > Oúva </a>
  7. </li> rehegua
  8. </ul> rehegua

Umi enlace alineado rehegua

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

  1. <ul clase = "pager" > rehegua
  2. <li clase = "ymaguare" >
  3. <a href = "#" > Ñe'ẽpoty ha ñe'ẽpoty; Tujavéva </a>
  4. </li> rehegua
  5. <li clase = "oúva" >
  6. <a href = "#" > Ipyahuvéva → </a> rehegua
  7. </li> rehegua
  8. </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>

Umi ta’ãngamýi ñepyrũrã

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.

Tuichaiterei ojejapokuaa

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.

    Ojejapóva Ojejapóva

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

    Ojejapóva Ojejapóva

Mba’érepa ojepuru ta’anga michĩva

Umi taꞌãngamýi michĩva (yma .media-gridv1.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.

Marcado simple ha flexible rehegua

Pe marcado michĩva ha’e simple —peteĩ uloguerekóva oimeraẽ número de lielementos 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.

Oipuru umi columna cuadrícula tuichakue

Ipahápe, componente taꞌãngamýi michĩva oipuru umi clase sistema cuadrícula rehegua oĩmava—haꞌeháicha .span2térã .span3—ojesareko hag̃ua taꞌãngamýi dimensión rehe.

Pe marcado rehegua

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

  1. <ul clase = "ta'ãnga'i michĩva" >
  2. <li clase = "span3" > rehegua
  3. <a href = "#" clase = "ta'ãnga'i michĩva" >
  4. <img src = "https://qu.py.org/260x180" alt = "" >
  5. </a> rehegua
  6. </li> rehegua
  7. ...
  8. </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:

  1. <ul clase = "ta'ãnga'i michĩva" >
  2. <li clase = "span3" > rehegua
  3. <div clase = "ta'ãnga'i michĩva" >
  4. <img src = "https://qu.py.org/260x180" alt = "" >
  5. <h5> Ta’ãngamýi ryru < /h5>
  6. <p> Ta’ãngamýi ñe’ẽñemi ko’ápe voi... </p>
  7. </div> rehegua
  8. </li> rehegua
  9. ...
  10. </ul> rehegua

Hetave techapyrã

Ehecháke opaite ne opción opaichagua clase cuadrícula rehegua ojeguerekóva ndéve g̃uarã reheve. Ikatu avei rembojehe’a ha rembojoaju opaichagua tuichakue.

Umi mba’e’apopyrã ligero

Ojehai jey clase base rehegua

Bootstrap 2 rupive, romohesakãve mbo’esyry base: .alertrangue .alert-message. Avei romboguejy pe marcado mínimo oñeikotevẽva—no <p>oñeikotevẽva por defecto, pe outter añoite <div>.

Marandu alerta rehegua peteĩva

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.


Oho porãiterei javascript ndive

Bootstrap oúva peteĩ jQuery plugin tuichaitereíva ndive oipytyvõva marandu ñe’ẽñemi rehegua, omboykévo pya’e ha ndahasýiva.

Ojehupyty pe plugin »

Umi alerta techapyrãva

Embojere ne marandu ha peteĩ icono ñemboty opcional peteĩ div-pe clase simple reheve.

× Ñemongyhyje! Mejor cheque yo self, nde ndaha'éi ojehecha porãitereíva.
  1. <div clase = "alerta" > rehegua
  2. <a clase = "omboty" > × </a>
  3. <strong> ¡Ñe’ẽñemi! </strong> Iporãvéva cheque yo self, nde ndaha'éi ojehecha porãitereíva.
  4. </div> rehegua

Embohape pyaꞌe marandu alerta estándar rehegua mokõi clase opcional reheve: .alert-blockhetave acolchado ha control jehaipyre rehegua ha .alert-headingpeteĩ iñakãrapuꞌa ojoajúvape g̃uarã.

×

Ñemongyhyje!

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.

  1. <div clase = "alerta alerta-bloqueo" >
  2. <a clase = "omboty" > × </a>
  3. <h4 class = "alerta-heading" > Ñe'ẽñemi! </h4> rehegua
  4. Mejor cheque yo self, nde ndaha'éi...
  5. </div> rehegua

Alternativa contextual rehegua Oñemoĩve umi clase opcional oñemoambue hag̃ua peteĩ alerta connotación

Javy térã peligro

× ¡Oh snap! Emoambue mbovymi mba’e yvate ha eñeha’ã emondo jey.
  1. <div clase = "alerta alerta-jejavy" >
  2. ...
  3. </div> rehegua

Ñesẽporã

× Japo porã! Relee porã ko mensáhe de alerta iñimportánteva.
  1. <div clase = "alerta alerta-éxito" >
  2. ...
  3. </div> rehegua

Marandu

× ¡Akã yvate! Ko alerta oikotevẽ nde atención, ha katu ndaha’éi súper importante.
  1. <div clase = "alerta alerta-marandu" >
  2. ...
  3. </div> rehegua

Techapyrã ha marcado

Pererĩva

Barra de progreso por defecto orekóva gradiente vertical.

  1. <div clase = "progreso" > rehegua
  2. <div clase = "barra" rehegua.
  3. estilo = " ipypuku : 60 %; " ></div>
  4. </div> rehegua

Rayado rehegua

Oipuru peteĩ gradiente omoheñói hag̃ua peteĩ efecto rayado.

  1. <div class = "progreso progreso-marandu."
  2. progreso-rayado" > rehegua
  3. <div clase = "barra" rehegua.
  4. estilo = " ipypuku : 20 %; " ></div>
  5. </div> rehegua

Animado rehegua

Ogueraha pe techapyrã rayado ha omoingove.

  1. <div class = "progreso progreso-peligro rehegua."
  2. progreso-rayado activo" > rehegua
  3. <div clase = "barra" rehegua.
  4. estilo = " ipypuku : 40 %; " ></div>
  5. </div> rehegua

Opción ha kundahára pytyvõ

Umi kolór adicional

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.

Hapykuere

Umi barra de progreso oipuru umi transición CSS3, upévare emohenda ramo dinámicamente ipekue javascript rupive, ombotuichave porãta.

Eipurúramo pe .activeclase, umi nde .progress-stripedbarra de progreso omoingovéva umi raya izquierda guive derecha peve.

Navegador pytyvõ

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.

Ykuakuéra

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

¡Emañamína, aime peteĩ ykuápe!
  1. <div clase = "bueno" >
  2. ...
  3. </div> rehegua

Oñemboty icono

Eipuru icono genérico ñemboty rehegua emboyke hag̃ua contenido ha’eháicha modal ha alerta.

×

  1. <a clase = "oñemboty" > × </a> rehegua