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:

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

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.

Tembiecharã ha techapyrã

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

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

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.

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 umi mbo’esyry botón extra rehegua .btn-mini, .btn-small, térã .btn-largeembotuichave hag̃ua.

<div clase = "btn-grupo" > rehegua 
  ...
  <ul class = "menú desplegable-pegua ojeipysóva-derecha" > 
    <!-- menú desplegable joajuha -->
  </ul> rehegua
</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.

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

<div clase = "btn-grupo jeguejy" > 
  <botón clase = "btn" > Ñemboguejy </botón> 
  <botón clase = "btn ñemboguejyha" datokuéra ñembohasa = "mboguejýva" >  
    <span clase = "caret" ></span> rehegua 
  </botón> 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
• Pytyvõ
• Ñemboguejyha
  • Action
  • Another action
  • Something else here
  • Separated link

<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
• Pytyvõ
• Ñemboguejyha
  • Action
  • Another action
  • Something else here
  • Separated link

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

Umi divisor horizontal rehegua

Emoĩ peteĩ divisor horizontal emoheñóivo peteĩ elemento lista vacía clase ndive .divider, péicha:

<ul clase = "nav nav-lista" > 
  ...
  <li clase = "mboja'o" </li> 
  ...
</ul> rehegua

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.

Oñedesvanece umi ficha-pe

Ojejapo hag̃ua umi ficha oñedesvanece, emoĩ .fadepeteĩteĩme .tab-pane.

Oikotevê jQuery plugin

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

Ojehupyty pe javascript →

Tabba rehegua techapyrã

Ojejapo hag̃ua fichakuéra ojehechauka hag̃ua, ejapo peteĩ .tab-paneorekóva ID ijojaha’ỹva opaite vore’ípe g̃uarã ha embojere .tab-content.

Umi ficha oñembohekopyréva akatúa térã asu gotyo g̃uarã, embojere .nav-tabsha .tab-contenten .tabbable.

Marcado recto rehegua

Oipurúvo umi ficha tabla rehegua oikotevẽ peteĩ div envoltura rehegua, peteĩ conjunto de fichas ha peteĩ conjunto de paneles tablables contenido rehegua.

<div class = "tabbable" > <!-- Oñeikotevẽ umi ficha izquierda/derecha-pe g̃uarãnte -->  
  <ul clase = "nav nav-pestañas" > 
    <li clase = "activo" ><a href = "#tab1" data-toggle = "tab" > Aty 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Ñe’ẽmondo 2 </a></li>  
  </ul> rehegua
  <div clase = "pestaña-contenido" > 
    <div clase = "ficha-panel activo" id = "ficha1" >  
      <p> Aime Sección 1-pe. </p>
    </div> rehegua
    <div clase = "ficha-panel" id = "ficha2" >  
      <p> Howdy, aime Sección 2-pe. </p>
    </div> rehegua
  </div> rehegua
</div> rehegua

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

Emohenda navbar jehechaukaha yvate térã iguy gotyo peteĩ clase adicional reheve div okápevévape, .navbar.

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

<div clase = "navbar navbar-yguasu-pegua" > 
  ...
</div> rehegua

Emoĩ jave navbar, nemandu’áke emoĩ hag̃ua cuenta pe área kañymby oĩva iguype. Oñemoĩ 40px térã hetave acolchado rehegua <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

Umi formulario oĩva navbar-pe

Estilo ha emohenda porã hag̃ua peteĩ formulario navbar ryepýpe, emoĩ umi clase oñemohenda porãva ojehechaukaháicha koꞌape. Peteĩ formulario por defecto-pe g̃uarã, emoinge .navbar-formha peteĩva .pull-lefttérã .pull-rightemohenda porã hag̃ua.

<forma clase = "navbar-forma ojeipe'a-izquierda" > 
  < tipo de entrada = "texto" clase = "span2" >  
</form> rehegua

Peteĩ formulario jehekarã oñemboheko porãvévape g̃uarã, emoĩve ha .navbar-searchpe jeikepyre estilo especializado-kuérape g̃uarã navbar-pe.form.search-query

<form class = "navbar-jeporeka ojeipe'a-izquierda" > 
  <input type = "text" class = "jeporeka-porandu" tenda = "Ojeporeka" >   
</form> 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 menú desplegable

Oñemoĩvo umi desplegable ha dropup 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 →

Jehaipyre oĩva navbar-pe

Embojere jehaipyre vore peteĩ <.navbar-text>, jepivegua peteĩ <p>etiqueta-pe oñemboguata porã hag̃ua ha oñembosaꞌy hag̃ua.

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" > Marandukuéra </li> 
</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.

Estado discapacitado opcional rehegua

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

Techapyrã por defecto

Por defecto, pe paginador 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

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

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ĩvape g̃uarã h1oñemohenda porã hag̃ua ha oñembojaꞌo hag̃ua umi sección contenido rehegua peteĩ página-pe. Ikatu oipuru pe elemento h1's default small, avei hetavéva ambue componente (estilo adicional reheve).

<div clase = "página-ñakãrapu'ã" > 
  <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 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ã :

<ul clase = "ta'ãnga'i michĩva" > 
  <li clase = "span3" > rehegua 
    <a href = "#" clase = "ta'ãnga'i michĩva" >  
      <img src = "https://qu.m./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. Oheja 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.m./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 —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.

<div clase = "alerta" > rehegua 
  <botón clase = "mboty" data-dismiss = "alerta" > × </botón>  
  <strong> ¡Ñe’ẽñemi! </strong> Iporãvéva cheque yo self, nde ndaha'éi ojehecha porãitereíva.
</div> rehegua

¡Akã yvate! Umi dispositivo iOS oikotevëva peteî href="#"para el despido de alertas. Ejesareko katuete hese ha atributo dato rehegua umi icono ñemboty ancla rehegua. Ikatu avei reipuru peteĩ <button>elemento orekóva atributo de datos, ore roiporavóva rojapo ore docs-pe g̃uarã. Oipurúvo <button>, remoĩva’erã type="button"térã ne formulariokuéra ndaikatúi remondo.

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" href = "#" > × </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 (ndaipóri IE).

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

Animado rehegua

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

<div class = "progreso progreso-rayado rehegua." 
     activo" > rehegua
  <div clase = "barra" rehegua. 
       estilo = " ipypuku : 40 %; " ></div> 
</div> rehegua

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.

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

Oñemboty icono

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

×

<botón clase = "mboty" > × </botón> rehegua 

Umi tembipuru iOS oikotevẽ peteĩ href="#" umi mba’e ojehúva clic-pe g̃uarã reipuruséramo peteĩ ancla.

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