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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor rehegua. Duis mollis, est no comodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit rehegua. Donec sed odio dui.
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 opcional title jehaipyre oñembotuichá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ã eipuru hag̃ua <b>
ha <i>
HTML5-pe, ha katu ijeporu iñambue’imi. <b>
he’ise 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 ojejapo estilo jehaipyre tuicháva reheve ha peteĩ borde inferior punteado tesape reheve. Avei oguereko hikuái peteĩ cursor pytyvõrã hover-pe upéicha umi puruhára oguereko indicación extra peteĩ mba’e ojehechaukáta hover-pe.
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 ñepyrũrã 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>
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 | Ñe'ẽ |
---|---|---|---|
1. 1.1 | Marcos | Otto rehegua | CSS rehegua |
2. 2.1 | Jacob | Thornton rehegua | Javascript rehegua |
3 rehegua | Estudio rehegua | Dent rehegua | HTML rehegua |
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 | Ñe'ẽ |
---|---|---|---|
1. 1.1 | Marcos | Otto rehegua | CSS rehegua |
2. 2.1 | Jacob | Thornton rehegua | Javascript rehegua |
3 rehegua | Estudio rehegua | Dent rehegua | HTML rehegua |
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 | Ñe'ẽ |
---|---|---|---|
1. 1.1 | Marcos Otto rehegua | CSS rehegua | |
2. 2.1 | Jacob | Thornton rehegua | Javascript rehegua |
3 rehegua | Estudio rehegua | Dent rehegua | |
3 rehegua | Brosef rehegua | Stalin rehegua | HTML rehegua |
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 | Ñe'ẽ |
---|---|---|---|
1. 1.1 | Marcos | Otto rehegua | CSS rehegua |
2. 2.1 | Jacob | Thornton rehegua | Javascript rehegua |
3 rehegua | Estudio rehegua | Dent rehegua | HTML rehegua |
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-pe oñembohysýiva mesa-condensado" >
- ...
- </tabla> rehegua
# Ñemby | Téra peteĩha | Terajoapy | Ñe'ẽ |
---|---|---|---|
1. 1.1 | Marcos | Otto rehegua | CSS rehegua |
2. 2.1 | Jacob | Thornton rehegua | Javascript rehegua |
3 rehegua | Estudio rehegua | Dent rehegua | HTML rehegua |
4 rehegua | Brosef rehegua | Stalin rehegua | HTML rehegua |
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 |
v2.0 rupive, jaguereko ñepyrũrã tesape ha iñaranduvéva umi estilo formulario-pe g̃uarã. Ndaipóri marcado extra, umi control de formulario-nte.
- <forma clase = "bueno" >
- <etiqueta> Etiqueta réra </etiqueta>
- <input type = "text" class = "span3" tenda = "Ehai peteĩ mba'e..." >
- <span class = "help-inline" > Ñe’ẽñemi pytyvõrã ojoajúva ! </span> rehegua
- <etiqueta clase = "jehechaukaha" >
- <input type = "checkbox" > Che jesareko
- </etiqueta> rehegua
- <botón tipo = "omondo" clase = "btn" > Omondo </botón>
- </forma> rehegua
Ohechaukávo umi estilo WebKit ñepyrũrã, emoĩnte .form-search
umi tenda jeheka redondeado extra-pe g̃uarã.
- <form class = "bueno formulario-jeporeka" >
- <input type = "text" class = "jeike-medio jeporeka-porandu" >
- <botón tipo = "omondo" clase = "btn" > Jeporeka </botón>
- </forma> rehegua
Umi entrada ha'e nivel bloque oñepyrü haguã. Ha -pe g̃uarã .form-inline
, .form-horizontal
jaipuru inline-block.
- < 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" >
- <botón tipo = "omondo" clase = "btn" > Tereho </botón>
- </forma> rehegua
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 oñeikotevẽpaite estilo-pe g̃uarã.
- <forma clase = "forma-horizontal" >
- <campo ñemohenda>
- <leyenda> Ñe’ẽñemi jehaipyre </leyenda>
- <div clase = "control-grupo" > rehegua
- <etiqueta clase = "control-etiqueta" 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
- </forma> rehegua
Ojehechauka ijasu gotyo opaite umi control formulario por defecto roipytyvõva. Ko'ápe oime lista de balas:
v1.4 peve, Bootstrap formulario estilo por defecto oipuru pe diseño horizontal. Bootstrap 2 rupive, roipeꞌa upe jejopy roguereko hag̃ua iñaranduvéva, escalable por defecto oimeraẽva formulario-pe g̃uarã.
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'ágã, ha'e peteî cuestión simple ojerepeti haguã <label class="checkbox">
pe 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.
Emoĩ hag̃ua ñe’ẽñemi pytyvõrã ne formulario jeikekuérape g̃uarã, emoĩ ñe’ẽñemi pytyvõrã línea-pegua ndive <span class="help-inline">
térã peteĩ jehaipyre pytyvõrã bloque orekóva <p class="help-block">
elemento jeike rire.
:after
. Umi docs-pe, jahechauka peteĩ fondo color pytã sa’yju hover-pe jahechauka hag̃ua icono tuichakue.
Opaite techaukaha jajapo rangue peteĩ mbaꞌejerure ambuéva, ñambyaty peteĩ sprite-pe —peteĩ taꞌãngamýi aty peteĩ vore ryepýpe oipurúva CSS omoĩ hag̃ua taꞌãngamýi hendivebackground-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.
v2.0.1 ndive, roiporavo roipuru hag̃ua peteĩ <i>
etiqueta opaite ore icono-kuérape 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ĩ 120 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.
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ã.