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

<div clase = "btn-grupo" > rehegua 
  <a clase = "btn" href = "#" > 1 </a> rehegua  
  <a mbo’esyry = "btn" href = "#" > 2 </a>  
  <a mbo’esyry = "btn" href = "#" > 3 </a>  
</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ã.

<div clase = "btn-tembipururã" > 
  <div clase = "btn-grupo" > rehegua 
    ...
  </div> rehegua
</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.

Umi desplegable botón rehegua

Eipuru oimeraẽva botón emoñepyrũ hag̃ua peteĩ menú desplegable emoĩvo peteĩ ryepýpe .btn-groupha eme’ẽvo menú marcado hekopete.

¡Akã yvate! Umi botón ñemboguejýva oikotevẽ Bootstrap ñembohekopyre ombaꞌapo hag̃ua.

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.

<div clase = "btn-grupo" > rehegua 
  <a clase = "btn ñemboguejyha" datokuéra ñembohasa = "mboguejýva" href = "#" >   
    Ojejapóva
    <span clase = "caret" ></span> rehegua 
  </a> rehegua
  <ul clase = "menú desplegable" > 
    <!-- menú desplegable joajuha -->
  </ul> rehegua
</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ĩ jeguerahauka 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.

<div clase = "btn-grupo" > rehegua 
  <a clase = "btn" href = "#" > Tembiaporã </a>  
  <a clase = "btn ñemboguejyha" datokuéra ñembohasa = "mboguejýva" href = "#" >   
    <span clase = "caret" ></span> rehegua 
  </a> rehegua
  <ul clase = "menú desplegable" > 
    <!-- menú desplegable joajuha -->
  </ul> rehegua
</div> rehegua

Clase base ipoderosa

Opaite componente nav ko’ápe —pestaña, pastilla ha lista— okomparti peteĩchagua marcado base ha estilo.nav clase rupive .

Araka’épa ojepuruva’erã

Umi ficha ha pastilla iporãiterei umi sección contenido rehegua térã ojeguata hag̃ua umi página contenido ojoajúva apytépe.

Alineación componente rehegua

Oñemohenda hag̃ua umi enlace nav, eipuru umi clase .pull-lefttérã .pull-rightutilidad rehegua. Mokõive mbo’esyry omoĩta peteĩ CSS float dirección oje’évape.

Umi ficha básica rehegua

Egueraha peteĩ regular <ul>de enlaces ha emoĩ .nav-tabs:

• Óga
• Yke
• Marandukuéra

<ul clase = "nav nav-pestañas" > 
  <li clase = "activo" > rehegua 
    <a href = "#" > Ñepyrũrã </a> 
  </li> rehegua
  <li><a href = "#" > ... </a></li> Ñe’ẽpoty ha ñe’ẽpoty ñemohenda 
  <li><a href = "#" > ... </a></li> Ñe’ẽpoty ha ñe’ẽpoty ñemohenda 
</ul> rehegua

Pastillas básicas rehegua

Ejagarra upe HTML peteĩchagua, ha katu eipuru .nav-pillshendaguépe:

• Óga
• Yke
• Marandukuéra

<ul clase = "nav nav-píldoras" > 
  <li clase = "activo" > rehegua 
    <a href = "#" > Ñepyrũrã </a> 
  </li> rehegua
  <li><a href = "#" > ... </a></li> Ñe’ẽpoty ha ñe’ẽpoty ñemohenda 
  <li><a href = "#" > ... </a></li> Ñe’ẽpoty ha ñe’ẽpoty ñemohenda 
</ul> rehegua

Mba'éichapa ojejapo apila 'em

Umi ficha ha pastilla haꞌeháicha horizontal por defecto, emoĩnte peteĩ mokõiha clase, .nav-stacked, ojehechauka hag̃ua verticalmente apilado.

Umi ficha apilado rehegua

• Óga
• Yke
• Marandukuéra

<ul clase = "nav nav-pestañas nav-apilado" > 
  ...
</ul> rehegua

Pastillas apiladas rehegua

• Óga
• Yke
• Marandukuéra

<ul clase = "nav nav-píldoras nav-apilado" > 
  ...
</ul> rehegua

Menú rico ojejapóva ndahasýiva

Umi menú desplegable umi ficha ha pastilla Bootstrap-pe ha’e súper ndahasýiva ha oikotevẽ HTML extra michĩmínte ha peteĩ plugin jQuery ligero.

Ejeho Javascript página-pe emoñe’ẽ hag̃ua kuatiañe’ẽ ñepyrũrã umi desplegable Bootstrap-pe.

Umi ficha orekóva umi desplegable

• Óga
• Yke
• Ñemboguejyha
  • Ojejapóva
  • Ambue tembiapo
  • Ambue mba’e ko’ápe
  • Enlace ojeseparáva

<ul clase = "nav nav-pestañas" > 
  <li clase = "mboguejýva" > 
    <a clase = "mboguejýva-mbohasáva". 
       data-toggle = "mboguejýva".
       href = "#" > Ñe'ẽ guarani
        Ñemboguejyha
        <b clase = "caret" ></b> rehegua 
      </a> rehegua
    <ul clase = "menú desplegable" > 
      <!-- joajuha -->
    </ul> rehegua
  </li> rehegua
</ul> rehegua

Pastillas orekóva gota

• Óga
• Yke
• Ñemboguejyha
  • Ojejapóva
  • Ambue tembiapo
  • Ambue mba’e ko’ápe
  • Enlace ojeseparáva

<ul clase = "nav nav-píldoras" > 
  <li clase = "mboguejýva" > 
    <a clase = "mboguejýva-mbohasáva". 
       data-toggle = "mboguejýva".
       href = "#" > Ñe'ẽ guarani
        Ñemboguejyha
        <b clase = "caret" ></b> rehegua 
      </a> rehegua
    <ul clase = "menú desplegable" > 
      <!-- joajuha -->
    </ul> rehegua
  </li> rehegua
</ul> rehegua

Navegación estilo aplicación rehegua

Umi lista Nav omeꞌe peteĩ tape isãsóva ha ndahasýiva oñemopuꞌa hag̃ua aty nav joajuha rehegua iñakãrapuꞌa opcional reheve. Ojepuru porãve hikuái umi barra lateral-pe Finder-icha OS X-pe.

Estructuralmente, oñemopu’ã hikuái umi estilo nav núcleo-pe umi ficha ha pastilla-icha, upévare jeporu ha personalización ha’e recto.

Umi icono reheve

Umi lista Nav ndahasýi avei oñeequipa hag̃ua umi icono reheve. Emoĩ <i>etiqueta hekopete clase ndive ha reñemohenda.

Tembiecharã nav lista

Ejagarra peteĩ lista umi enlace rehegua ha emoĩve class="nav nav-list":

<ul clase = "nav nav-lista" > 
  <li clase = "nav-akãrapu'ã" > 
    Lista iñakãrapu’ãva
  </li> rehegua
  <li clase = "activo" > rehegua 
    <a href = "#" > Ñepyrũrã </a> 
  </li> rehegua
  <li> rehegua
    <a href = "#" > Aranduka’i </a> 
  </li> rehegua
  ...
</ul> rehegua

Techapyrã umi icono reheve

Peteĩchagua techapyrã, ha katu <i>etiqueta reheve umi icono-pe g̃uarã.

<ul clase = "nav nav-lista" > 
  ...
  <li> rehegua
    <a href = "#" > Ñe'ẽpoty ha ñe'ẽpoty 
      <i clase = "ikóna-aranduka" ></i> 
      Arandukarenda
    </a> rehegua
  </li> rehegua
  ...
</ul> rehegua

Mba'épa oike ipype

Emoingove ne fichakuéra peteĩ plugin isãsóva reheve embohasa hag̃ua contenido apytépe umi ficha rupive. Bootstrap ombojoaju umi ficha tabbable irundy estilo-pe: yvate (por defecto), akatúa, iguy ha asu.

Oñemoambuévo ijapytépekuéra ndahasýi ha oikotevẽnte oñemoambue sa’ieterei marcado.

Tabba rehegua techapyrã

Ojejapo hag̃ua umi ficha ojejapokuaa hag̃ua, embojere pe .nav-tabsambue div-pe clase reheve .tabbable.

jQuery jeporupyre jeporupyre

Opaite ficha tabbable oñemombarete ore jQuery plugin ligero rupive. Emoñe’ẽve mba’éichapa ikatu remoingove umi ficha tabbable javascript docs página-pe.

Ojehupyty pe javascript →

Umi ficha oĩva iguype

Embojere HTML ñemohenda ha emoĩ peteĩ mbo’esyry emoĩ hag̃ua fichakuéra iguype.

<div class = "pestañas-iguýpe" > 
  <div clase = "pestaña-contenido" > 
    ...
  </div> rehegua
  <ul clase = "nav nav-pestañas" > 
    ...
  </ul> rehegua
</div> rehegua

Umi ficha oĩva ijasu gotyo

Embohasa pe clase emoĩ hag̃ua umi ficha ijasu gotyo.

<div clase = "pestañas-izquierda" > 
  <ul clase = "nav nav-pestañas" > 
    ...
  </ul> rehegua
  <div clase = "pestaña-contenido" > 
    ...
  </div> rehegua
</div> rehegua

Umi ficha oĩva akatúape

Embohasa pe clase emoĩ hag̃ua umi ficha akatúape.

<div clase = "pestañas-derecha" > 
  <ul clase = "nav nav-pestañas" > 
    ...
  </ul> rehegua
  <div clase = "pestaña-contenido" > 
    ...
  </div> rehegua
</div> rehegua

Andamio de Navbar rehegua

Pe navbar oikotevẽ mbovymi divs añoite oñemohenda porã hag̃ua ojehechauka hag̃ua estático térã fijo.

<div clase = "barra de nav" > rehegua 
  <div clase = "navbar-pypegua" > 
    <div clase = "mba'yru" > 
      ...
    </div> rehegua
  </div> rehegua
</div> rehegua

Oñemohenda navbar

Ojejapo hag̃ua navbar oñemboguapy hag̃ua jehechaukaha yvate gotyo, emoĩve .navbar-fixed-topdiv okápevévape, .navbar.

<div clase = "navbar navbar-oñemohenda-yvate gotyo" > 
  ...
</div> rehegua

Nde CSS-pe, tekotevẽta avei remoĩ cuenta pe superposición omoheñóiva remoĩvo 40px térã hetave relleno nde <body>. Emoĩ katuete kóva Bootstrap CSS núcleo rire ha CSS ombohováiva opcional mboyve.

Marca réra

Peteĩ enlace simple ohechauka hag̃ua ne marca térã proyecto réra oikotevẽ peteĩ etiqueta anclaje añoite.

<a clase = "marca" href = "#" >  
  Proyecto réra
</a> rehegua

Formulario de búsqueda rehegua

Umi formulario jeheka rehegua ohupyty estilo personalizado navbar-pe .navbar-searchclase ndive. Oike .pull-lefttérã .pull-rightpe ári formoñemohenda hag̃ua.

<form class = "navbar-jeporeka ojeipe'a-izquierda" > 
  <input type = "text" class = "jeporeka-porandu" tenda = "Ojeporeka" >   
</forma> rehegua

Variación ombohováiva opcional rehegua

Ojesarekóva mboýpa oĩ nde barra yvateguápe, ikatu remboguata umi opción ombohováiva. Upevarã, embojere ne nav contenido peteĩ div oguerekóvape, .nav-collapse.collapse, ha emoĩ pe navbar botón toggle, .btn-navbar.

<div clase = "barra de nav" > rehegua 
  <div clase = "navbar-pypegua" > 
    <div clase = "mba'yru" > 
 
      <!-- .btn-navbar ojepuru ñembohasa ramo navbar mbaꞌekuaarã oñemboguevaꞌekue rehegua -->
      <a clase = "btn btn-navbar" dato-toggle = "oñemboguejy" dato-target = ".nav-oñemboguejy" >   
        <span clase = "ikóna-barra" ></span> 
        <span clase = "ikóna-barra" ></span> 
        <span clase = "ikóna-barra" ></span> 
      </a> rehegua
 
      <!-- Eheja katuete pe marca okápe reipotáramo ojehechauka -->
      <a class = "marca" href = "#" > Tembiaporã réra </a>  
 
      <!-- Opa mba’e reipotáva oñeñomi 940px térã sa’ive, emoĩ ko’ápe ryepýpe -->
      <div clase = "nav-ñemboguejy" > 
        <!-- .nav, .navbar-jeporeka, .navbar-forma, ha mba’e -->
      </div> rehegua
 
    </div> rehegua
  </div> rehegua
</div> rehegua

Nav enlaces rehegua

Umi mba’e Nav rehegua ndahasýi oñembojoapy hag̃ua umi lista noñeordenáiva rupive.

<ul clase = "nav" > rehegua 
  <li clase = "activo" > rehegua 
    <a href = "#" > Ñepyrũrã </a> 
  </li> rehegua
  <li><a href = "#" > Ñembojoajuha </a></li> 
  <li><a href = "#" > Ñembojoajuha </a></li> 
</ul> rehegua

Ikatu emoĩve divisor nde enlace nav-pe peteĩ elemento lista vacía ha peteĩ clase simple reheve. Emoĩnte ko mba’e umi joajuha apytépe:

<ul clase = "nav" > rehegua 
  ...
  <li clase = "divisor-vertical" </li> rehegua 
  ...
</ul> rehegua

Alineación componente rehegua

Oñemohenda hag̃ua peteĩ nav, formulario jeheka térã jehaipyre, eipuru umi clase .pull-lefttérã .pull-rightutilidad rehegua. Mokõive mbo’esyry omoĩta peteĩ CSS float dirección oje’évape.

Oñemoĩvo umi desplegable

Oñemoĩvo umi desplegable nav-pe ha’e súper simple, ha katu oikotevẽ ojepuru ñande javascript plugin .

<ul clase = "nav" > rehegua 
  <li clase = "mboguejýva" > 
    <a href = "#" rehegua. 
          clase = "mboguejýva-toggle".
          data-toggle = "mboguejýva" >
          Mba'erepy
          <b clase = "caret" ></b> rehegua 
    </a> rehegua
    <ul clase = "menú desplegable" > 
      ...
    </ul> rehegua
  </li> rehegua
</ul> rehegua

Ojehupyty pe javascript →

Mba’érepa ojeporu umíva

Breadcrumb jeguata ojepuru peteĩ tape ramo ojehechauka hag̃ua puruhárape moõpa oĩ peteĩ app térã peteĩ tenda ryepýpe, ha katu ndaha’éi jeguata tenondeguarã. Eñongatu ijeporu escaso ha sucinto ikatu haguãicha osẽ porãve.

Tembiecharã

Peteĩ techapyrã añoite ojehechaukáva ikatuháicha ojehechauka heta páhina rupi.

• Óga

• Tenonderã / .
• Arandukarenda

• Tenonderã / .
• Biblioteca / Ñemby .
• Marandurenda

Marcado rehegua

HTML ha’e nde lista estándar noñeordenáiva umi enlace reheve.

<ul clase = "mbujape rykue" > 
  <li> rehegua
    <a href = "#" > Óga </a> <span mbo’esyry = "mboja’o” > / </span>   
  </li> rehegua
  <li> rehegua
    <a href = "#" > Aranduka’i </a> <span mbo’esyry = "mboja’o” > / </span>   
  </li> rehegua
  <li clase = "activo" > rehegua 
    <a href = "#" > Marandukuéra </a> 
  </li> rehegua
</ul> 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.

Tembiecharã

Pe componente paginación por defecto haꞌehína flexible ha ombaꞌapo heta variación-pe.

Marcado rehegua

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 ñemohenda 
    <li><a href = "#" > Oúva </a></li> 
  </ul> rehegua
</div> rehegua

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 pager ocentra umi enlace.

• Mboyvegua
• Ag̃ui

<ul clase = "pager" > rehegua 
  <li> rehegua
    <a href = "#" > Ymaguaréva </a> 
  </li> rehegua
  <li> rehegua
    <a href = "#" > Oúva </a> 
  </li> rehegua
</ul> rehegua

Umi enlace alineado rehegua

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

• ← Tujavéva
• Ipyahuvéva →

<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

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:

<div clase = "unidad-héroe" > 
  <h1> Ñe’ẽmondo </h1>
  <p> Ñe’ẽñemi </p>
  <p> rehegua
    <a clase = "btn btn-primaria btn-tuicha" > 
      Eikuaave hag̃ua
    </a> rehegua
  </p> rehegua
</div> rehegua

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

<div clase = "página-haeder" > 
  <h1> Tembiecharã página iñakãrapu’ãva </h1>
</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 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ã :

<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> Etiqueta de ta’ãngamýi michĩva </h5>
      <p> Ta’ãngamýi ñe’ẽñemi ko’ápe voi... </p>
    </div> rehegua
  </li> rehegua
  ...
</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.

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— <p>noñeikotevẽi 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 tuicháva reheve 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.

<div clase = "alerta" > rehegua 
  <a clase = "omboty" data-dismiss = "alerta" > × </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-blockhetave acolchado ha control jehaipyre rehegua ha .alert-headingpeteĩ iñakãrapuꞌa ojoajúvape g̃uarã.

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

Javy térã peligro

<div clase = "alerta alerta-jejavy" > 
  ...
</div> rehegua

Ñesẽporã

<div clase = "alerta alerta-éxito" > 
  ...
</div> rehegua

Marandu

<div clase = "alerta alerta-marandu" > 
  ...
</div> rehegua

Pererĩva

Barra de progreso por defecto orekóva gradiente vertical.

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

Rayado 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

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

<div clase = "bueno" > 
  ...
</div> rehegua

Insignia-kuéra rehegua

Eipuru peteĩ insignia peteĩ elemento rehe peteĩ conteo noñemoñe’ẽivape g̃uarã térã peteĩ indicador simple ramo.

<span clase = "insignia" > 3 </div> rehegua 

Oñemboty icono

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

×

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