Andamio ári, umi elemento HTML básico oñemboguapy ha oñembotuichave umi clase extensible reheve omeꞌe hag̃ua peteĩ jehecha ha ñeñandu pyahu, peteĩchagua.
Pe cuadrícula tipográfica tuichakue oñemopyenda mokõi variable Less rehe ñande variables.less archivo-pe: @baseFontSize
ha @baseLineHeight
. Peteĩha haꞌehína base font-size ojeporúva opaite rupi ha mokõiha haꞌehína base line-height.
Jaipuru umi variable, ha michĩmi matemática, jajapo hag̃ua umi margen, acolchado ha línea-altura opaite ñande tipo rehegua ha hetave mbaꞌe.
Nullam quis risus eget urna mollis ornare vel eu leo rehegua. Cum sociis natoque penatibus ha magnis umi montes parturiente, nascetur ridiculus mus. Nullam id dolor id nibh ultrices mba'yrumýi rehegua.
Ejapo peteĩ párrafo ojehecharamovéva remoĩvo .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor rehegua. Duis mollis, est ndaha'éiva commodo luctus rehegua.
Mba'e rehegua | Jeporu rehegua | Poravokuaa |
---|---|---|
<strong> |
Oñemomba'eguasu haguére peteî fragmento de texto orekóva importante | Avave |
<em> |
Oñemomba’eguasu haguére peteĩ jehaipyre pehẽngue estrés reheve | Avave |
<abbr> |
Omboty umi abreviatura ha acrónimo ohechauka hag̃ua versión oñembotuicháva hover-pe | Oike atributo opcional .initialism clase umi abreviatura tuichávape g̃uarã. |
<address> |
Ojeguereko haguã marandu oñemboja haguã ijypykuéra hi’aguĩvévape térã tembiapo retepy pukukue rehe | Eñongatu formato emohu’ãvo opaite línea rehegua<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum masa justo oguapy amet risus. Maecenas faucibus mollis interdum rehegua. Nulla vitae elit libero, peteĩ pharetra augue.
Ñe’ẽñemi: Eñeñandu porãke eipuru hag̃ua <b>
ha <i>
HTML5-pe, ha katu ijeporu iñambue’imi. <b>
oje’ese ojehechauka haguã ñe’ẽ térã ñe’ẽjoaju ombohasa’ỹre importancia adicional ha <i>
katu hetavehápe ñe’ẽ, término técnico, hamba’e rehegua.
Ko’ápe oĩ mokõi techapyrã mba’éichapa <address>
ikatu ojeporu pe etiqueta:
Umi abreviatura orekóva title
atributo oguereko peteĩ borde inferior punteado tesape ha peteĩ cursor pytyvõrã hover-pe. Péva ome'ê usuario-kuérape indicación extra peteî mba'e ojehechaukáta hover-pe.
Emoĩ pe initialism
clase peteĩ abreviatura-pe embohetave hag̃ua armonía tipográfica omeꞌevo chupe peteĩ jehaipyre michĩvéva michĩmi.
HTML ha’e pe mba’e iporãvéva mbujape oñembojy guive.
Peteĩ ñe’ẽ atributo ñemombyky ha’e attr .
Mba'e rehegua | Jeporu rehegua | Poravokuaa |
---|---|---|
<blockquote> |
Elemento nivel bloque rehegua oñecita hag̃ua contenido ambue fuente-gui | Oñemoĩve .pull-left ha .pull-right mbo’esyry opción flotada-pe g̃uarã |
<small> |
Elemento opcional oñembojoapy hag̃ua peteĩ citación ombohováiva puruhára, jepivegua peteĩ haihára orekóva tembiapo réra | Emoĩ pe <cite> título térã fuente réra jerére |
Oñemoĩ hag̃ua peteĩ vore bloque rehegua, embojere <blockquote>
oimeraẽ HTML comilla ramo. Umi cita recta-pe g̃uarã romomarandu peteĩ <p>
.
Emoĩ peteĩ elemento opcional <small>
ecita hag̃ua nde fuente ha rehupytýta peteĩ em dash —
henondépe estilo rehegua.
- <bloqueo rehegua>
- <p> Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante venenatis. </p> rehegua
- <michĩ> Peteĩ tapicha herakuã guasúva </michĩ>
- </blockquote> rehegua
Umi blockquote por defecto oñemboheko péicha:
Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante venenatis.
Alguien famoso en Cuerpo de trabajo
Ojepyso hag̃ua nde blockquote akatúa gotyo, emoĩve class="pull-right"
:
Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante venenatis.
Alguien famoso en Cuerpo de trabajo
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
¡Akã yvate! Umi lista descripción horizontal ombotýta umi término ipukuetereíva oike hag̃ua columna izquierda ñemyatyrõme text-overflow
. Umi jehechaukaha ijyvyku’ivévape, oñemoambuéta hikuái pe ñemohenda apilado por defecto-pe.
Embojere umi fragmento código rehegua línea ryepýpe <code>
.
- Techapyrã , < código> vore </ código > ojejokuava’erã línea ryepýpe ramo .
Eipuru <pre>
heta línea código rehegua. Ejesareko ekañy hag̃ua oimeraẽva corchete ángulo rehegua oĩva código-pe ojejapo porã hag̃ua.
<p>Tembiecharã jehaipyre ko’ápe...</p>
- <pre> rehegua
- <p>Tembiecharã jehaipyre ko’ápe...</p>
- </pre> rehegua
Ñe’ẽñemi: Eñongatu katuete código <pre>
etiqueta ryepýpe hi’aguĩvéva ijasu gotyo ikatuháicha; omoĩta opaite ficha.
Ikatu opcionalmente emoĩve .pre-scrollable
mbo’esyry omoĩtava peteĩ max-height 350px ha ome’ẽtava peteĩ barra de desplazamiento eje y rehegua.
Ejagarra peteĩchagua <pre>
elemento ha emoĩ mokõi clase opcional renderización oñembotuichave hag̃ua.
- <p> Jehaipyre techapyrã ko’ápe... </p>
- <pre clase = "impresión iporãva."
- linenums" > rehegua
- <p>Tembiecharã jehaipyre ko’ápe...</p>
- </pre> rehegua
Emboguejy google-code-prettify ha ehecha readme mba’éichapa ojepuru.
Mbohéra | Techaukaha |
---|---|
<table> |
Elemento de envoltura ojehechauka hag̃ua datokuéra peteĩ formato tabular-pe |
<thead> |
Elemento mbaꞌeryru rehegua umi vore iñakãrapuꞌa vore rehegua ( <tr> ) oñembohéra hag̃ua umi vore vore rehegua |
<tbody> |
Elemento mbaꞌeryru rehegua umi vore vore rehegua ( <tr> ) oĩva cuadro retepýpe |
<tr> |
Elemento mbaꞌeryru rehegua peteĩ conjunto celda tabla rehegua ( <td> térã <th> ) ojehechaukáva peteĩ fila-pe |
<td> |
Célula de tabla por defecto rehegua |
<th> |
Célula de cuadro especial umi etiqueta columna (térã fila, odependéva alcance ha colocación rehe) rehegua Ojepuruvaꞌerã a ryepýpe <thead> |
<caption> |
Ñemombeꞌupy térã ñemombyky mbaꞌepa oguereko pe cuadro, koꞌetevéramo ideprovéchova umi omoñeꞌeva pantalla-pe g̃uarã |
- <mesa> rehegua
- <akã>
- <tr> rehegua
- <th> ... </th> rehegua
- <th> ... </th> rehegua
- </tr> rehegua
- </thead> rehegua
- <tete rehegua>
- <tr> rehegua
- <td> ... </td> rehegua
- <td> ... </td> rehegua
- </tr> rehegua
- </tbody> rehegua
- </tabla> rehegua
Téra | Mbo'ehakoty | Techaukaha |
---|---|---|
Upevakuére | Avave | Ndaipóri estilo, columna ha fila-nte |
Pererĩva | .table |
Línea horizontal añoite umi fila apytépe |
Oñembojyva’ekue | .table-bordered |
Ombojere umi esquina ha omoĩve frontera okápe |
Cebra-raya rehegua | .table-striped |
Omoĩve fondo color gris tesape umi fila impar-pe (1, 3, 5, etc) . |
Oñecondensáva | .table-condensed |
Oikytĩ acolchado vertical mbytépe, 8px guive 4px peve, opaite td ha th elemento ryepýpe |
Umi cuadro ojejapo ijeheguiete estilo mbovymi borde reheve añoite ikatu hag̃uáicha ojelee ha oñemantene estructura. 2.0 reheve, .table
oñeikotevẽ pe clase.
- < clase de mesa = "tabla" >
- ...
- </tabla> rehegua
# Ñemby | Téra peteĩha | Terajoapy | Tembipuru puruhára réra |
---|---|---|---|
1. 1.1 | Marcos | Otto rehegua | @mdo rehegua |
2. 2.1 | Jacob | Thornton rehegua | @ñandy |
3.1 | Larry rehegua | pe Guyra | @twitter-pe |
Ejepy’amongeta’imi nde mesakuéra ndive remoĩvo zebra-rayado —pemoĩnte pe .table-striped
clase.
Ñembohysýi: Umi cuadro rayado oipuru :nth-child
CSS jeporavoha ha ndojeguerekói IE7-IE8-pe.
- < clase de mesa = "tabla tabla-rayada" >
- ...
- </tabla> rehegua
# Ñemby | Téra peteĩha | Terajoapy | Tembipuru puruhára réra |
---|---|---|---|
1. 1.1 | Marcos | Otto rehegua | @mdo rehegua |
2. 2.1 | Jacob | Thornton rehegua | @ñandy |
3.1 | Larry rehegua | pe Guyra | @twitter-pe |
Oñemoĩ umi borde mesa tuichakue jerére ha umi esquina redondeada ojejapo hag̃ua estética.
- < clase de mesa = "tabla tabla-pegua" >
- ...
- </tabla> rehegua
# Ñemby | Téra peteĩha | Terajoapy | Tembipuru puruhára réra |
---|---|---|---|
1. 1.1 | Marcos | Otto rehegua | @mdo rehegua |
Marcos | Otto rehegua | @getbootstrap rehegua | |
2. 2.1 | Jacob | Thornton rehegua | @ñandy |
3.1 | Larry pe Guyra | @twitter-pe |
Ejapo nde mesakuéra ijyvyku’ivéva emoĩvo .table-condensed
mbo’esyry eikytĩ hag̃ua acolchado celda mesa rehegua mbytépe (8px guive 4px peve).
- < clase de mesa = "tabla cuadro-condensado" >
- ...
- </tabla> rehegua
# Ñemby | Téra peteĩha | Terajoapy | Tembipuru puruhára réra |
---|---|---|---|
1. 1.1 | Marcos | Otto rehegua | @mdo rehegua |
2. 2.1 | Jacob | Thornton rehegua | @ñandy |
3.1 | Larry pe Guyra | @twitter-pe |
Eñeñandu líbre embojoaju hag̃ua oimeraẽva umi mbo’esyry mesa rehegua rehupyty hag̃ua iñambuéva jehecha reiporúvo oimeraẽva umi mbo’esyry ojeguerekóva.
- <table class = "tabla tabla-rayado mesa-mbotyha mesa-condensado" >
- ...
- </tabla> rehegua
Héra tee | |||
---|---|---|---|
# Ñemby | Téra peteĩha | Terajoapy | Tembipuru puruhára réra |
1. 1.1 | Marcos | Otto rehegua | @mdo rehegua |
2. 2.1 | Jacob | Thornton rehegua | @ñandy |
3.1 | Larry pe Guyra | @twitter-pe |
Pe mba’e iporãvéva umi formulario rehegua Bootstrap-pe ha’e opaite ne entrada ha control ojehecha porãiterei noimportái mba’éichapa remopu’ã ne marcado-pe. Noñeikotevẽi HTML superfluo, ha katu rome’ẽ umi pa’ũ umi oikotevẽvape g̃uarã.
Umi diseño ikomplikadovéva oúva clase sucinta ha escalable reheve estilo ha evento jejopy ndahasýivape g̃uarã, upévare reime cubierto opaite paso-pe.
Bootstrap oúva pytyvõ reheve irundyichagua formulario ñemohendarã:
Opaichagua formulario ñemohenda oikotevẽ peteĩ ñemoambue marca-pe g̃uarã, ha katu umi control ijeheguiete opyta ha oñekomporta peteĩcha.
Bootstrap formulario-kuéra oguereko estilo opaite formulario base control-kuérape g̃uarã haꞌeháicha entrada, textarea ha jeporavo rehaꞌarõva. Ha katu avei oúva heta componente personalizado reheve haꞌeháicha entrada oñembojoapýva ha oñembojoajúva ha pytyvõ umi lista de casilla de verificación rehegua.
Umi estado haꞌeháicha error, advertencia ha éxito oike peteĩteĩva tipo de control formulario rehegua. Avei oike umi estilo umi control discapacitado-pe g̃uarã.
Bootstrap omeꞌe marcado ha estilo isãsóva irundy estilo formulario web jepiguápe g̃uarã.
Téra | Mbo'ehakoty | Techaukaha |
---|---|---|
Vertical (oñemoĩva’ekue) . | .form-vertical (noñeikotevẽi) . |
Etiquetas apiladas, alineadas izquierda-pe umi control ári |
En línea rehegua | .form-inline |
Etiqueta alineada izquierda-pe ha umi control bloque-pegua estilo compacto-pe g̃uarã |
Jeheka | .form-search |
Entrada de texto extra-redondeado peteĩ estética típica jeporeka rehegua |
Ipekuévo | .form-horizontal |
Embotyryry umi etiqueta alineada izquierda, derecha gotyo peteĩ línea-pe umi control ndive |
Umi por defecto iñarandu ha ligero ndorekóiva marcado extra.
- <forma clase = "bueno" >
- <etiqueta> Etiqueta réra </etiqueta>
- <input type = "text" class = "span3" tenda = "Ehai peteĩ mba'e..." >
- <span class = "help-block" > Techapyrã jehaipyre pytyvõrã nivel bloque rehegua ko’ápe. </span> rehegua
- <etiqueta clase = "jehechaukaha" >
- <input type = "checkbox" > Che jesareko
- </etiqueta> rehegua
- <botón tipo = "omondo" clase = "btn" > Omondo </botón>
- </form> rehegua
Oñemoĩve .form-search
pe formulario ha .search-query
pe input
.
- <form class = "bueno formulario-jeporeka" >
- <input type = "text" class = "jeike-medio jeporeka-porandu" >
- <botón tipo = "omondo" clase = "btn" > Jeporeka </botón>
- </form> rehegua
Oñembojoapy oñembojegua .form-inline
hagua alineación vertical ha espaciado umi control formulario rehegua.
- < clase de forma = "bueno forma-en línea" >
- <input type = "text" clase = "input-michĩ" tenda = "Email" >
- <input type = "contraseña" clase = "input-michĩ" tenda = "Ñe'ẽñemi" >
- <etiqueta clase = "jehechaukaha" >
- <input type = "checkbox" > Nemandu'áke cherehe
- </etiqueta> rehegua
- <botón tipo = "omondo" clase = "btn" > Eike </botón>
- </form> rehegua
Ojehechauka akatúape opaite umi control formulario por defecto roipytyvõva. Ko'ápe oime lista de balas:
Oñemeꞌevo yvategua techapyrã formulario ñemohenda, koꞌape oĩ pe marcado ojoajúva peteĩha entrada ha control aty ndive. Umi .control-group
, .control-label
, ha .controls
mbo’esyry opaite oñeikotevẽ estilo-pe g̃uarã.
- <forma clase = "forma-horizontal" >
- <campo ñemohenda>
- <leyenda> Ñe’ẽñemi jehaipyre </leyenda>
- <div clase = "control-grupo" > rehegua
- <etiqueta clase = "control-label" para = "input01" > Jehaipyre jeike </etiqueta>
- <div clase = "controles" > rehegua
- < tipo de entrada = "texto" clase = "entrada-xlarge" id = "entrada01" >
- <p class = "help-block" > Oipytyvõva pytyvõ jehaipyre </p>
- </div> rehegua
- </div> rehegua
- </fieldset> rehegua
- </form> rehegua
Bootstrap oguereko estilokuéra kundahára oipytyvõva oñembohapéva ha disabled
estado-kuérape g̃uarã. Roipe’a Webkit ñepyrũrã outline
ha romoĩ peteĩ box-shadow
hendaguépe :focus
.
Avei oike ipype umi estilo validación rehegua ojejavy, advertencia ha éxito rehegua. Eipuru hag̃ua, emoĩ pe mbo’esyry jejavy rehegua ijerére .control-group
.
- <camposet rehegua
- class = "jejavy control-grupo rehegua" >
- ...
- </fieldset> rehegua
Umi aty jeike rehegua —jehaipyre oñembojoapýva térã oñembojoapýva reheve— omeꞌe peteĩ tape ndahasýiva omeꞌe hag̃ua hetave contexto ne jeikekuérape g̃uarã. Umi techapyrã tuicháva oike @ signo Twitter puruhára rérape g̃uarã térã $ viru rehegua.
v1.4 peve, Bootstrap oikotevẽkuri marcado extra umi casilla de verificación ha radio jerére oñembojeheꞌa hag̃ua. Ko’áğa, ha’e peteĩ cuestión simple ojerrepeti haĝua pe <label class="checkbox">
ombojeguáva pe <input type="checkbox">
.
Avei oñepytyvõ umi casilla de verificación en línea ha umi radio. Oñembojoapy mante .inline
oimeraẽva .checkbox
térã .radio
ha rejapopa.
Oipuru hag̃ua umi entrada prepend térã append peteĩ forma en línea-pe, katuete emoĩ pe .add-on
ha input
peteĩ línea-pe, espacio’ỹre.
Oñemoĩ hag̃ua ñe’ẽñemi pytyvõrã ne formulario jeikekuérape g̃uarã, emoinge ñe’ẽñemi pytyvõrã línea-pe orekóva <span class="help-inline">
térã peteĩ jehaipyre pytyvõha bloque orekóva <p class="help-block">
elemento jeike rire.
Opaite ikóna jajapo rangue peteĩ mba’ejerure ambuéva, ñambyaty peteĩ sprite-pe —peteĩ ta’ãngamýi aty peteĩ vore’ípe oipurúva CSS omoĩ hag̃ua ta’ãngamýi background-position
. Kóva ha’e pe método roiporúva Twitter.com-pe ha omba’apo porã oréve ĝuarã.
Opaite icono mbo’esyry oñemboguapy mboyve .icon-
téra espaciado ha alcance hekopete g̃uarã, ojoguaiterei ñande ambue componente-kuérape. Péicha oipytyvõta ani hag̃ua ojoavy ambue erramiénta ndive.
Glyphicons ome’ẽ oréve jepuru Halflings oñemohendava’ekue ore tembipuru’i código abierto-pe rome’ẽ aja peteĩ enlace ha crédito ko’ápe docs-pe. Epensamína rejapo hag̃ua avei upéicha umi ne projéktope.
Bootstrap oipuru peteĩ <i>
etiqueta opaite icono-pe g̃uarã, ha katu ndorekói hikuái clase de caso —peteĩ prefijo oñembojaꞌopyréva añoite. Eipuru hag̃ua, emoĩ ko kódigo haimete oimeraẽ hendápe:
- <i clase = "ikóna-jeporeka" </i>
Oĩ avei estilo ojeguerekóva umi icono invertido (morotĩ)-pe g̃uarã, ojejapóva listo peteĩ clase extra reheve:
- <i clase = "ikóna-jeheka icono-morotĩ" ></i>
Oĩ 140 mbo’esyry reiporavo hag̃ua nde iconokuérape g̃uarã. Emoĩnte peteĩ <i>
etiqueta umi clase oike porãva reheve ha reñemohenda. Ikatu rejuhu lista henyhẽva sprites.less -pe térã ko’ápe voi ko kuatiaroguépe.
¡Akã yvate! Eipuru jave jehaipyre vore ykére, umi botón térã nav enlace-peguáicha, eñangareko eheja hag̃ua peteĩ espacio <i>
etiqueta rire espaciado hekopete hag̃ua.
Umi icono tuichaiterei, ha katu moõpa oiporúta peteĩva? Ko’ápe oĩ mbovymi temiandu:
Esencialmente, oimeraẽ hendápe ikatuhápe remoĩ peteĩ <i>
etiqueta, ikatu remoĩ peteĩ icono.
Eipuru umíva umi botón, botón aty peteĩ tembipuru’i ryrúpe g̃uarã, jeguata térã formulario jeike prependido-pe g̃uarã.