Etiam porta sem malesuada magna mollis euismod rehegua. Maecenas faucibus mollis interdum rehegua. Morbi leo risus, porta ac consectetur ac, vestibulo oĩva eros-pe.
Bootstrap haꞌehína peteĩ tembipururã Twitter-gui ojejapóva oñepyrũ hag̃ua webapp ha ñanduti renda ñemoheñói.
Oike ipype CSS ha HTML base tipografía rehegua, formulario, botón, cuadro, cuadrícula, jeguata ha hetave mbaꞌe.
Alerta Nerd: Bootstrap oñemopuꞌa Less reheve ha ojejapo ombaꞌapo hag̃ua okápe okẽgui oguerekóva iñakãme umi navegador moderno.
Ñepyrũ pya’eve ha ndahasýi hag̃ua, ekopia mante ko ñe’ẽmondo nde página web-pe.
¿Peteĩ fan oiporúva Menos? Ndaipóri problema, clonar mante pe repo ha emoĩ ko’ã línea:
Emboguejy, fork, pull, archivo mba’e’apopy ha hetave mba’e Bootstrap repo oficial ndive Github-pe.
Twitter ára iñepyrũme, umi ingeniero oipuru haimete oimeraẽ biblioteca oikuaáva ombohovái hag̃ua umi mba’e ojejeruréva front-end-pe. Bootstrap oñepyrũ ombohovái ramo umi desafío opresentáva ha desarrollo pya’e oñembopya’e Twitter peteĩha Hackweek aja.
Heta ingeniero Twitter-pegua pytyvõ ha ñe’ẽñemi rupive, Bootstrap tuicha okakuaa oike hag̃ua ndaha’éi estilo básico añónte, ha katu umi patrón diseño front-end elegante ha duraderovéva.
Emoñe’ẽve dev.twitter.com-pe ›
Bootstrap oñeha’ã ha oñepytyvõ umi kundahára ko’ag̃agua tuichavévape Chrome, Safari, Internet Explorer ha Firefox-icha.
Bootstrap oúva hekopete CSS oñembohekopyréva, oñemboheko’ỹva ha techapyrã plantilla reheve.
Pe sistema cuadrícula por defecto oñemeꞌeva Bootstrap pehẽngue ramo haꞌehína peteĩ cuadrícula 940px ipypuku 16 columna rehegua. Ha'e peteî sabor popular sistema de rejilla 960, pero ndorekóiva margen/acolchado adicional lado izquierdo ha derecho-pe.
Ohechaukaháicha koꞌape, ikatu ojejapo peteĩ diseño básico mokõi "columna" reheve, peteĩteĩva oñemosarambíva peteĩ papapy umi 16 columna fundamental rodefinivaꞌekue ore sistema cuadrícula rehegua. Ehecha umi techapyrã oĩva ko’ápe reikuaave hag̃ua mba’eichagua ñemoambue.
- <div clase = "fila" > rehegua
- <div clase = "span6 vorekuéra" >
- ...
- </div> rehegua
- <div clase = "span10 vorekuéra" >
- ...
- </div> rehegua
- </div> rehegua
Pe ñemohenda ha isãsóva 940px tuichakue, oñecentráva haimete oimeraẽva ñanduti renda térã página ome’ẽva peteĩ <div.container>
.
- <tete> rehegua
- <div clase = "mba'yru" >
- ...
- </div> rehegua
- </body> rehegua
Peteĩ estructura página fluida alternativa, flexible orekóva min- ha max-ancho ha peteĩ barra lateral izquierda-pegua. Tuicha mba’e umi aplicación ha docs-pe g̃uarã.
- <tete> rehegua
- <div clase = "mba'yru-líquido" >
- <div clase = "barra lateral" > rehegua
- ...
- </div> rehegua
- <div clase = "contenido" > rehegua
- ...
- </div> rehegua
- </div> rehegua
- </body> rehegua
Peteĩ jerarquía tipográfica estándar emohenda hag̃ua nde página web.
Pe cuadrícula tipográfica tuichakue oñemopyenda mokõi variable Less rehe ñande vore preboot.less-pe: @basefont
ha @baseline
. 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.
Oipurúvo énfasis, dirección, & abreviatura
<strong>
<em>
<address>
<abbr>
Umi etiqueta de énfasis ( <strong>
ha <em>
) ojepuruvaʼerã ohechauka hag̃ua iñimportanteveha térã oñembotuichaveha peteĩ palávra térã fráse oñembojojávo ikopia ijerére. Eipuru <strong>
iñimportanteha ha rembotuicha <em>
hag̃ua estrés .
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.
Ñembohysýi: Oĩ porã gueteri ojepuru <b>
ha <i>
etiqueta HTML5-pe ha natekotevẽi ojehai estilo negrita ha cursiva, peteĩteĩva (jepémo oĩramo peteĩ elemento semánticovéva, eipuru). <b>
oje’ese ojehechauka haguã ñe’ẽ térã ñe’ẽjoaju oñembohasa’ỹre importancia adicional, ha katu <i>
ha’e hetave ñe’ẽme g̃uarã, término técnico, hamba’e.
Pe <address>
elemento ojepuru marandu oñemboja hag̃ua ijypykuéra hiꞌaguĩvévape g̃uarã, térã tembiapo retepy tuichakue. Péicha ojehecha:
Ñembohysýi: Káda línea <address>
peteĩvape oñemohuꞌavaꞌerã peteĩ línea-break ( <br />
) reheve térã oñembojere peteĩ etiqueta nivel de bloque-pe (techapyrã, <p>
) oñemohenda porã hag̃ua contenido.
Ñe’ẽ mbyky ha ñe’ẽjoajurãme g̃uarã, eipuru <abbr>
etiqueta ( <acronym>
ndojepuruvéima HTML5 -pe ). Emoĩ pe formulario taquigrafía etiqueta ryepýpe ha emohenda peteĩ título téra completo-pe g̃uarã.
<blockquote>
<p>
<small>
Oñemoĩ hag̃ua peteĩ blockquote, embojere <blockquote>
ha <p>
emoĩ <small>
etiqueta. Eipuru <small>
elemento ecita hag̃ua nde fuente ha rehupytýta peteĩ em guión —
henondépe.
Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante venenatis dapibus posuere velit aliquet rehegua.
Dr. Julio Hibbert rehegua
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Umi mesa tuichaiterei mba’e —heta mba’épe ĝuarã. Umi cuadro tuicháva katu, oikotevẽ peteĩ mborayhu marcado rehegua michĩmi ideprovécho, escalable ha ojelee hag̃ua (nivel código-pe). Koʼápe oĩ unos kuánto konsého ñaipytyvõ hag̃ua.
Akóinte embojere ne vore iñakãrapuꞌa peteĩ <thead>
jerarquía haꞌe hag̃ua <thead>
> <tr>
> <th>
.
Ojogua umi vore iñakãrapu’ãvape, opaite ne kundaha retepy mba’ekuaarã oñembojeguava’erã peteĩ <tbody>
upéicha ne jerarquía ha’e <tbody>
> <tr>
> <td>
.
Opaite cuadro ojeestilavaꞌerã ijeheguiete umi frontera esencial reheve añoite ikatu hag̃uáicha ojelee ha oñemantene estructura. Natekotevẽi oñembojoapy clase térã atributo extra.
# Ñemby | Téra peteĩha | Terajoapy | Ñe'ẽ |
---|---|---|---|
1. 1.1 | Peteĩva | Peteĩ | inglés |
2. 2.1 | Joe-pe | Sixpack rehegua | inglés |
3.1 | Estudio rehegua | Dent rehegua | Código rehegua |
- <mesa> rehegua
- ...
- </tabla> rehegua
Ejepy’amongeta’imi nde mesakuéra ndive remoĩvo zebra-rayado —pemoĩnte pe .zebra-striped
clase.
# Ñemby | Téra peteĩha | Terajoapy | Ñe'ẽ |
---|---|---|---|
1. 1.1 | Peteĩva | Peteĩ | inglés |
2. 2.1 | Joe-pe | Sixpack rehegua | inglés |
3.1 | Estudio rehegua | Dent rehegua | Código rehegua |
Ñembohysýi: Zebra-striping haꞌehína peteĩ ñembotuichave ohóvo ndojeguerekóiva umi kundahára itujavévape g̃uarã IE8 ha iguýpeguáicha.
- < clase de mesa = "rayado cebra" >
- ...
- </tabla> rehegua
Jaipyhývo techapyrã mboyvegua, ñamoporãve ñande tablakuéra mbaꞌeporã ñameꞌevo tembiaporã ñemohendarã jQuery ha Tablesorter plugin rupive. Emboguejy oimeraẽva vore iñakãrapuꞌa emoambue hag̃ua ñemohenda.
# Ñemby | Téra peteĩha | Terajoapy | Ñe'ẽ |
---|---|---|---|
1. 1.1 | Nde | Peteĩ | inglés |
2. 2.1 | Joe-pe | Sixpack rehegua | inglés |
3.1 | Estudio rehegua | Dent rehegua | Código rehegua |
- <script src = "js/jporandu/jquery.tablesorter.min.js" ></script> rehegua
- <guio > rehegua
- $ ( tembiaporã () { .
- $ ( "tabla#ordenTablaTechapyrã" ). tablesorter ({ lista de ordenación : [[ 1 , 0 ]] });
- });
- </script> rehegua
- < clase de mesa = "rayado cebra" >
- ...
- </tabla> rehegua
Opaite formulario-pe oñemeꞌe estilo por defecto opresenta hag̃ua peteĩ tape ojelee ha ojeescala hag̃ua. Oñemeꞌe estilo ojeike hag̃ua jehaipyre, lista jeporavorã, área de texto, radio botón ha casilla de verificación ha botón.
Emoĩve .form-stacked
ne formulario HTML-pe ha reguerekóta etiqueta ijyvyku’i ári ha’e rangue ijasu gotyo. Kóva ombaꞌapo porãiterei ne formulariokuéra mbyky ramo térã reguerekóramo mokõi columna insumo rehegua umi formulario ipohýivevape g̃uarã.
Convención ramo, ojepuru umi botón tembiaporãme g̃uarã ojepuru aja umi enlace mbaꞌekuérape g̃uarã. Techapyrã, "Emboguejy" ikatu ha'e peteĩ mboajepyréva ha "mba'apo nda'aréi ojejapóva" ikatu ha'e peteĩ joajuha.
Opaite botón por defecto peteĩ estilo gris tesape rehegua, ha katu ikatu ojeporu heta clase funcional estilo color iñambuévape g̃uarã. Ko’ã clase-pe oike peteĩ .primary
clase hovy, peteĩ .info
clase hovy sa’yju, peteĩ clase verde .success
ha peteĩ .danger
clase pytã. Avei, pe rodamiento umi estilo propio ha’e fácil peasy.
Umi estilo botón rehegua ikatu ojeporu oimeraẽ mbaꞌe rehe pe .btn
ojejapóva reheve. Jepiveguáicha eipuruséta koꞌãva <a>
, <button>
, ha eiporavo <input>
elemento-kuérape añoite. Péicha ojehecha:
¿Reipotaiterei umi botón tuichavéva térã michĩvéva? ¡Eguereko upévape!
Umi botón noĩriva activo térã oñemboykéva app peteĩ térã ambue mba’ére, eipuru estado desactivado. Upéva ha'e .disabled
enlace-kuérape guarã ha :disabled
para<button>
elemento-pe g̃uarã.
div.alert-message
Marandu peteĩ línea rehegua ojehechauka hag̃ua mbaꞌeichaitépa osẽ vai, ikatuha osẽ térã osẽ porã peteĩ tembiapo. Particularmente útil umi formulario-pe guarã.
div.alert-message.block-message
Umi marandu oikotevẽvape g̃uarã oñemyesakã’imi, jaguereko alertas estilo párrafo rehegua. Ko’ãva iporãiterei oñembopupu hag̃ua marandu jejavy ipukuvéva rehegua, oñemomarandu hag̃ua peteĩ puruhárape peteĩ tembiaporã pendiente rehegua, térã oñepresenta hag̃uánte marandu oñembotuichave hag̃ua página-pe.
Umi modal —ñe’ẽmondo térã tesape’a— iporãiterei umi tembiaporã contextual-pe g̃uarã umi situación iñimportantehápe oñeñangareko contexto fondo rehegua.
Peteĩ tete porã...
Twipsies ha’e súper útil oipytyvõ haĝua peteĩ usuario confundido ha oapunta haĝua chupekuéra dirección correcta-pe.
Lorem ipsum dólar oguapy amet illo error ipsum veritatis aut is iste perspiciatis iste voluptas natus illo cuasi odit aut natus consecuntur consecuntur, aut natus illo voluptatem odit perspiciatis laudantium re doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam arquitecto explicabo oguapy haguã cuasi fugit fugit, totam doloremque unde sunt sed dicta quae acusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis cuasi quae.
Eipuru popovers eme’ẽ hag̃ua marandu subtextual peteĩ página-pe oityvyro’ỹre diseño.
Etiam porta sem malesuada magna mollis euismod rehegua. Maecenas faucibus mollis interdum rehegua. Morbi leo risus, porta ac consectetur ac, vestibulo oĩva eros-pe.
Bootstrap oñemopuꞌa Preboot ndive , peteĩ paquete código abierto mixin ha variable rehegua ojeporútava Less ndive ndive , peteĩ CSS preprocesador pyaꞌeve ha ndahasýi hag̃ua web ñemoheñói.
Ehecháke mba’éichapa roipuru Preboot Bootstrap-pe ha mba’éichapa ikatu reipuru reiporavóramo remongu’e hag̃ua Less nde proyecto oúvape.
Eipuru ko jeporavopyre eipurupaite hag̃ua Bootstrap mba’ekuaarã Less, mixins ha nesting CSS-pe javascript rupive ne kundahárape.
- <link rel = "hoja de estilo/menos" href = "mbovyvéva/bootstrap.less" media = "opavave" />
- <script src = "js/menos-1.1.3.min.js" ></script> rehegua
¿Ndereñandúipa pe solución .js rehegua? Eñeha’ã pe aplicación Less Mac térã eipuru Node.js embojoaju hag̃ua emosarambi jave ne código.
Ko’ápe oĩ umi mba’e ojehecharamovéva umi mba’e oikeva’ekue Twitter Bootstrap-pe Bootstrap ryepýpe. Ejesareko Bootstrap página web térã Github proyecto página-pe emboguejy ha eikuaave hag̃ua.
Umi variable oĩva Sa’ive-pe iporãiterei oñeñangareko ha oñembopyahu hag̃ua ne CSS akãrasy’ỹre. Emoambueséramo peteĩ valor color térã peteĩ valor ojeporúva jepi, embopyahu peteĩ hendápe ha reñemohenda.
- // Enlaces rehegua
- @enlaceColor : #8b59c2 rehegua;
- @linkColorHover : iñypytũ ( @linkColor , 10 );
- // Grises rehegua
- @morotĩ : #000;
- @gris Pytũmby : ohesape ( @morotĩ , 25 %);
- @gris : ohesape ( @morotĩ , 50 %);
- @grisTesape : ohesape ( @morotĩ , 70 %);
- @grisLighter : ombohesapéva ( @morotĩ , 90 %);
- @morotĩ : #fff ;
- // Colores de Acento rehegua
- @hovy : #08b5fb rehegua;
- @verde : #46a546 rehegua;
- @rojo : # 9d261d rehegua;
- @hovy : # ffc40d rehegua;
- @ naranja : # f89406 rehegua;
- @rosa : # c3325f rehegua;
- @ púrpura : # 7a43b6;
- // Cuadrícula de línea base rehegua
- @fonte base : 13px ;
- @ línea base : 18px ;
Less omeꞌe avei ambue estilo ñe’ẽñemi rehegua CSS /* ... */
ñe’ẽjoaju jepivegua ári.
- // Kóva ha'e peteĩ comentario
- /* Kóva ha'e avei peteĩ comentario */
Mixins haꞌehína básicamente incluido térã parcial CSS-pe g̃uarã, ohejáva ndéve embojoaju peteĩ bloque código peteĩme. Ha’ekuéra iporãiterei umi propiedad prefijo ñemuhárape g̃uarã ha’eháichabox-shadow
, gradiente kurusu navegador rehegua, pila de fuente ha hetave mba’e. Iguýpe oĩ peteĩ techapyrã umi mixin oikeva’ekue Bootstrap ndive.
- #fonte { Ñe'ẽ guarani .
- . taquigrafía ( @peso : normal , @tamaño : 14px , @líneaAltura : 20px ) {
- font - tuichakue : @size ;
- font - ipohýi : @pohýi ;
- línea - yvate : @lineHeight ;
- } rehegua .
- . sans - serif ( @pohýi : normal , @tamaño : 14px , @líneaAltura : 20px ) {
- fuente - familia : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - tuichakue : @size ;
- font - ipohýi : @pohýi ;
- línea - yvate : @lineHeight ;
- } rehegua .
- . serif ( @peso : normal , @tamaño : 14px , @líneaAltura : 20px ) {
- font - familia : "Georgia" , Tiempos Nuevo Romano , Tiempos , sans - serif ;
- font - tuichakue : @size ;
- font - ipohýi : @pohýi ;
- línea - yvate : @lineHeight ;
- } rehegua .
- . monospace ( @pohýi : normal , @ tamaño : 12px , @líneaAltura : 20px ) {
- font - familia : "Mónaco" , Mensajero Ipyahúva , monoespacio ;
- font - tuichakue : @size ;
- font - ipohýi : @pohýi ;
- línea - yvate : @lineHeight ;
- } rehegua .
- } rehegua .
- #gradiente rehegua { .
- . horizontal ( @Color de inicio : #555, @Color de fin: #333) {
- fondo - color : @endColor ;
- fondo - repetición : repetición - x ;
- fondo - imagen : - khtml - gradiente ( lineal , yvate gotyo ijasu gotyo , yvate gotyo ijasu gotyo , ( @startColor ) guive ( @endColor ) peve ); // Ñe’ẽñemi
- fondo - ta'anga : -moz - lineal - gradiente ( izquierda , @ñepyrũColor , @endColor ) ; // FF 3.6+ rehegua
- fondo - imagen : -ms - lineal - gradiente ( izquierda , @color de ñepyrũ , @Color paha ); // IE10 rehegua
- fondo - imagen : - webkit - gradiente ( lineal , yvate gotyo ijasu gotyo , yvate gotyo ijakatúa gotyo , sa'y - jejopy ( 0 %, @startColor ), sa'y - jejopy ( 100 %, @endColor )); // Safari 4+, Cromo 2+ rehegua
- fondo - ta'anga : - webkit - lineal - gradiente ( izquierda , @ñepyrũColor , @endColor ); // Safari 5.1+, Cromo 10+ rehegua
- fondo - imagen : -o - lineal - gradiente ( izquierda , @color de inicio , @color final ); // Ópera 11.10 rehegua
- fondo - imagen : lineal - gradiente ( izquierda , @color de inicio , @Color paha ); // Le estándar rehegua
- } rehegua .
- . vertical ( @Color de inicio : #555, @Color de fin: #333) {
- fondo - color : @endColor ;
- fondo - repetición : repetición - x ;
- fondo - imagen : - khtml - gradiente ( lineal , izquierda yvate , izquierda iguy , guive ( @startColor ), guive ( @endColor )); // Ñe’ẽñemi
- fondo - imagen : - moz - lineal - gradiente ( @Ñepyrũ Sa'y , @Opa Sa'y ); // FF 3.6+ rehegua
- fondo - imagen : - ms - lineal - gradiente ( @Color de inicio , @Color paha ); // IE10 rehegua
- fondo - imagen : - webkit - gradiente ( lineal , izquierda yvate , izquierda yvy gotyo , color - parada ( 0 %, @startColor ), color - parada ( 100 %, @endColor )); // Safari 4+, Cromo 2+ rehegua
- fondo - imagen : - webkit - lineal - gradiente ( @Ñepyrũ Sa'y , @Opa Sa'y ); // Safari 5.1+, Cromo 10+ rehegua
- fondo - imagen : - o - lineal - gradiente ( @Color de inicio , @Color paha ); // Ópera 11.10 rehegua
- fondo - ta'anga : lineal - gradiente ( @ñepyrũha sa'y , @ paha sa'y ); // Pe estándar
- } rehegua .
- . direccional ( @Color de inicio : #555, @Color de fin: #333, @deg: 45deg) {
- ...
- } rehegua .
- . vertical - mbohapy - sa'y ( @Color de inicio : #00b3ee, @Color mbytépe: #7a43b6, @colorStop: 50%, @Sa'y paha: #c3325f) {
- ...
- } rehegua .
- } rehegua .
Eñemboja ha ejapo michĩmi matemática egenera hag̃ua umi mixin flexible ha ipoderósova pe oĩva iguýpeguáicha.
- // Rejilla rehegua
- @rejillaColumnas : 16 ;
- @rejillaColumna Ancho : 40px ;
- @rejillaGutterAncho : 20px ;
- @sitio Ancho : ( @Columnas de rejilla * @Columnas de rejilla Ancho ) + ( @RejillaGutterAncho * ( @Columnas de rejilla - 1 ));
- // Sistema de Rejilla rehegua
- . mba’yru { .
- ancho : @sitio Ancho ;
- margen : 0 auto rehegua ;
- . ñemyatyrõ hesakãva ();
- } rehegua .
- . columnas ( @columnSpan : 1 ) { Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.
- ancho : ( @rejillaColumnaAncho * @columnaSpan ) + ( @rejillaGutterAncho * ( @columnaSpan - 1 ));
- } rehegua .
- . desplazamiento ( @columnaOffset : 1 ) { .
- margen - izquierda : ( @rejillaColumnaAncho * @columnaOffset ) + ( @rejillaGutterAncho * ( @columnaOffset - 1 )) + @extraSpace ;
- } rehegua .