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.

Umi tembiapo iporãvéva

Ro’e porã ko’ã ñe’ẽmondo ojepuru hag̃ua botón aty ha tembipuru’i ryru:

  • Akóinte eipuru peteĩchagua elemento peteĩ botón aty’ípe, <a>térã <button>.
  • Ani rembojehe’a umi botón iñambuéva sa’y rehegua peteĩ botón aty’ípe.
  • Eipuru umi icono jehaipyre ári térã hendaguépe, ha katu katuete emoĩ alt ha título jehaipyre oĩháme.

Umi aty Botón ojoajúva orekóva desplegable (ehecha iguýpe) oñehenóivaꞌerã peteĩteĩ ha akóinte oikevaꞌerã peteĩ caret desplegable ohechauka hag̃ua jepokuaa oñehaꞌarõva.

Techapyrã por defecto

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. <botón clase = "btn" > 1 </botón> rehegua
  3. <botón clase = "btn" > 2 </botón> rehegua
  4. <botón clase = "btn" > 3 </botón> rehegua
  5. </div> rehegua

Tembipuru’i ryru techapyrã

Ombojoaju umi conjunto de <div class="btn-group">en a <div class="btn-toolbar">umi componente complejovévape 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 »

Umi desplegable umi botón aty’ípe

¡Akã yvate! Umi botón oguerekóva desplegable oñembojeguavaꞌerã peteĩteĩ ijehegui .btn-grouppeteĩ ryepýpe peteĩ .btn-toolbarñembohasa hekopete hag̃ua.

Umi desplegable botón rehegua

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

Ombaꞌapo opaite botón tuichakue ndive

Umi botón desplegable omba’apo oimeraẽ tamaño-pe. nde botón tuichakue .btn-large, .btn-small, térã .btn-mini.

Oikotevê javascript

Umi botón ñemboguejýva oikotevẽ Bootstrap ñembohekopyre ombaꞌapo hag̃ua.

Oĩ kásope —móvil-icha— umi menú desplegable oñembohapéta pe jehechaukaha okaháre. Tekotevẽ resolve pe alineación nde po rupive térã javascript jeporupyre reheve.


Umi botón ñemboja’o rehegua

Tembiecharã ha techapyrã

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ĩ jeguerahauka desplegable akatúape umi enlace contextual reheve.

Tuichakuéra

Eipuru pe clase de botón extra .btn-mini, .btn-small, térã embotuichave .btn-largehag̃ua.

  1. <div clase = "btn-grupo" > rehegua
  2. ...
  3. <ul class = "menú desplegable-pegua ojeipysóva-derecha" >
  4. <!-- menú desplegable joajuha -->
  5. </ul> rehegua
  6. </div> rehegua

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. <botón clase = "btn" > Tembiaporã </botón>
  3. <botón clase = "btn ñemboguejyha" datokuéra ñembohasa = "mboguejýva" >
  4. <span clase = "caret" ></span> rehegua
  5. </botón> rehegua
  6. <ul clase = "menú desplegable" >
  7. <!-- menú desplegable joajuha -->
  8. </ul> rehegua
  9. </div> rehegua

Umi menú ojeityva’ekue

Umi menú desplegable ikatu avei oñembohasa iguy guive yvate gotyo oñembojoapývo peteĩ mbo’esyry añoite túva pya’e .dropdown-menu. Ombojere jeýta pe dirección .caretha omoĩjeýta menú ijeheguiete oho hag̃ua iguy guive yvate gotyo yvate gotyo rangue.

  1. <div clase = "btn-grupo jeguejy" >
  2. <botón clase = "btn" > Ñemboguejy </botón>
  3. <botón clase = "btn ñemboguejyha" datokuéra ñembohasa = "mboguejýva" >
  4. <span clase = "caret" ></span> rehegua
  5. </botón> 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 ñemohenda
  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.

Estado discapacitado opcional rehegua

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

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>
Ñesẽporã <span class="label label-success">Success</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>
Inverso rehegua <span class="label label-inverse">Inverse</span>

Upéva rehegua

Umi insignia haꞌehína componente michĩ ha isensíllova ojehechauka hag̃ua peteĩ indicador térã conteo de algún tipo. Ojejuhu jepi umi cliente correo electrónico-pe Mail.app-icha térã umi aplicación móvil-pe umi notificación push-pe g̃uarã.

Umi clase ojeguerekóva

Téra Tembiecharã Marcado rehegua
Upevakuére 1. 1.1 <span class="badge">1</span>
Ñesẽporã 2. 2.1 <span class="badge badge-success">2</span>
Ñemongyhyje 4 rehegua <span class="badge badge-warning">4</span>
Jejavy 6 rehegua <span class="badge badge-error">6</span>
Info 8 rehegua <span class="badge badge-info">8</span>
Inverso rehegua 10 rehegua <span class="badge badge-inverse">10</span>

Unidad héroe rehegua

Bootstrap ome’ẽ peteĩ componente ligero, flexible hérava unidad héroe ohechauka hag̃ua contenido nde sitio-pe. Omba’apo porã umi sitio marketing ha contenido ipohýivape.

Marcado rehegua

Embojere nde contenido peteĩ divlike-pe upéicha:

  1. <div clase = "unidad-héroe" >
  2. <h1> Ñe’ẽmondo </h1>
  3. <p> Ñe’ẽñemi </p>
  4. <p> rehegua
  5. <a clase = "btn btn-primaria btn-tuicha" >
  6. Eikuaave hag̃ua
  7. </a> rehegua
  8. </p> rehegua
  9. </div> rehegua

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

Página iñakãrapu’ãva

Peteĩ shell simple peteĩ h1to appropratiely espacio ha segmentación sección contenido peteĩ página-pe g̃uarã. Ikatu oipuru pe elemento h1's default small, avei hetavéva ambue componente (estilo adicional reheve).

  1. <div clase = "página-ñakãrapu'ã" >
  2. <h1> Tembiecharã página iñakãrapu’ãva </h1>
  3. </div> rehegua

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 ojepersonalizakuaa

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 umi 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.m./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. Oheja 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.m./260x180" alt = "" >
  5. <h5> Etiqueta de ta’ãngamýi michĩva </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 por defecto ligero rehegua

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 okapegua 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" data-dismiss = "alerta" > × </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 ko'ã árape.

  1. <div clase = "alerta alerta-bloqueo" >
  2. <a clase = "omboty" data-dismiss = "alerta" > × </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ẽ ne 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 (ndaipóri IE).

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

Animado rehegua

Ogueraha techapyrã rayado ha omoingove (ndaipóri IE).

  1. <div class = "progreso progreso-rayado rehegua."
  2. 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 botón ha alerta clase peteĩchagua umi estilo ojoajúvape g̃uarã.

Barras de rayas rehegua

Ojogua umi color sólido-pe, roguereko variada barra de progreso rayada.

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-9 térã Firefox versión itujavévape.

Opera ha IE 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