Source

Ñemboja

Eikuaa umi principio, estrategia ha técnica orientador ojeporúva oñemopu’ã ha oñeñangareko hag̃ua Bootstrap rehe ikatu hag̃uáicha ndete voi remboheko ha rembohape pya’eve.

Umi página oñepyrũ hag̃ua ome’ẽramo jepe peteĩ jeguata ñepyrũrã proyecto rehegua ha mba’épa oikuave’ẽ, ko kuatiañe’ẽ oñecentra mba’érepa jajapo umi mba’e jajapóva Bootstrap-pe. Omyesakã ñande filosofía omopu’ã haĝua web-pe ikatu haĝuáicha ambue tapicha oaprende ñandehegui, oipytyvõ ñanendive ha ñanepytyvõ ñamehora haĝua.

¿Rehechápa peteĩ mbaʼe noñehenduporãiva, térã ikatu ojejapo porãve? Eipe’a peteĩ número —rovy’aiterei roñomongeta nendive hese.

Mombyky

Ñañembohypýita peteĩteĩ ko’ãvape hetave opa rupi, ha katu peteĩ nivel yvateguápe, péina ápe mba’épa odirigí ñande enfoque.

  • Umi componente ha’eva’erã ombohováiva ha móvil-primero
  • Umi componente oñemopuꞌavaꞌerã peteĩ clase base reheve ha oñembotuichavevaꞌerã umi clase modificador rupive
  • Umi estado componente rehegua iñe’ẽrenduva’erã peteĩ escala índice z común rehegua
  • Ikatu jave, eiporavo peteĩ HTML ha CSS ñemboguata JavaScript-gui
  • Ikatu jave, eipuru umi utilidad umi estilo personalizado ári
  • Ikatu jave, ani emoañete umi mba’e ojejeruréva HTML-pe (mitãnguéra oiporavóva) .

Ombohováiva

Bootstrap estilo ombohováiva oñemopuꞌa ombohovái hag̃ua, peteĩ enfoque oñembohérava jepi móvil-primero . Jaipuru ko ñe’ẽ ñande docs-pe ha tuicha ñaime de acuerdo hendive, ha katu sapy’ánte ikatu ipypukueterei. Ndaha’éiramo jepe opaite componente ombohováimbaiteva’erã Bootstrap-pe, ko enfoque ombohováiva ha’e oñemboguejy hag̃ua CSS ñemboyke oñembohasávo ndéve emoĩ hag̃ua estilokuéra tuichavévo ohóvo jehechaukaha.

Bootstrap tuichakue javeve, rehecha porãvéta kóva ore ñe’ẽmondo ñeporandurãme. Hetavéramo, jaipuru min-widthumi consulta oñepyrũva ojeporu peteĩ punto de ruptura específico-pe ha ogueraha yvate umi punto de ruptura yvatevéva rupive. Techapyrã, peteĩ .d-noneojeporu guive min-width: 0infinito peve. Ambue hendáicha, a .d-md-noneojeaplika punto de ruptura media guive ha yvate gotyo.

Sapyꞌante jaipurúta max-widthpeteĩ componente complejidad inherente oikotevẽ jave. Sapy’ánte, ko’ã ñemboyke hesakãve funcionalmente ha mentalmente oñemboguata ha oipytyvõ hag̃ua ojehai jey rangue funcionalidad núcleo ñande componente-kuéragui. Ñañeha’ã ñamombyky ko enfoque, ha katu jaipurúta sapy’a py’a.

Mbo’esyrykuéra rehegua

Ñande Reboot ykére, peteĩ kuatia estilo normalización navegador kurusu rehegua, opaite ñande estilokuéra oguereko hembipotápe oipuru clase selector ramo. Kóva heꞌise ojeheja hag̃ua umi selector tipo rehegua (techapyrã, input[type="text"]) ha umi clase túva extraño rehegua (techapyrã, .parent .child) ojapóva umi estilo específicoiterei oñemboyke hag̃ua ndahasýiva.

Péicha, umi componente oñemopuꞌavaꞌerã peteĩ clase base reheve oguerekóva umi pares propiedad-valor rehegua común, ndojehejareivaꞌerãva. Por ehémplo, .btnha .btn-primary. Jaipuru .btnopaite estilo ojeporúvape g̃uarã haꞌeháicha display, padding, ha border-width. Upéi jaipuru umi modificador haꞌeháicha .btn-primaryñamoĩve hag̃ua color, fondo-color, border-color, hambaꞌe.

Umi clase modificador ojepuruvaꞌerã oĩ jave añoite heta mbaꞌekuaarã térã mbaꞌekuaarã oñemoambuevaꞌerã heta variante rupi. Umi mohendaha natekotevẽi jepi, upévare eñangareko añetehápe eñongatuha línea código ha ejoko umi ñemboyke natekotevẽiva emoheñóivo. Umi techapyrã porã umi modificador rehegua haꞌehína ñande clase color tema rehegua ha umi variante tamaño rehegua.

umi escala índice z rehegua

Bootstrap-pe oĩ mokõi z-indexescala —elemento peteĩ componente ryepýpe ha umi componente superposición rehegua.

Umi elemento componente rehegua

  • Oĩ componente Bootstrap-pe oñemopuꞌava elemento oñembojoajúva reheve ani hag̃ua mokõi frontera oñemoambueꞌeỹre bordermbaꞌekuaarã. Techapyrã, botón aty, entrada aty ha paginación.
  • Ko'ã componente okomparti peteî z-indexescala estándar de 0a través 3.
  • 0ha’e ñepyrũrã (ñepyrũrã), 1ha’e :hover, 2ha’e :active/ .active, ha 3ha’e :focus.
  • Ko enfoque ojoaju ore ñeha’arõva’ekue puruhára prioridad ijyvatevéva rehe. Peteĩ elemento oñembohapéramo, oĩ jehecha ha puruhára resa renondépe. Umi elemento activo ha e mokõiha ijyvatevéva ohechaukágui estado. Hover haꞌehína mbohapyha ijyvatevéva ohechaukágui puruhára rembipota, ha katu haimete oimeraẽ mbaꞌe ikatu ojehover.

Umi componente ojejapóva superposición rehegua

Bootstrap oguereko heta componente ombaꞌapóva peteĩ superposición ramo peteĩichagua. Kóvape oike, orden ijyvatevévape z-index, umi desplegable, navbar fijo ha pegajoso, modal, tembipuru’i ñe’ẽmondo ha popovers. Ko'ã componente oreko escala propia z-indexoñepyrüva 1000. Ko papapy ñepyrũrã haꞌehína aleatorio ha oservi peteĩ buffer michĩva ramo ore estilo ha ne proyecto estilo personalizado apytépe.

Káda componente superposición ombohetave z-indexmichĩmi ivalór péicha umi principio UI común rehegua oheja umi elemento oñembohapéva térã ojeipysóva puruhárape opyta hag̃ua jehecha opaite jave. Techapyrã, peteĩ modal haꞌehína kuatia ñemboty (techapyrã, ndaikatúi rejapo ambue tembiaporã ndahaꞌeiramo modal rembiaporã), upévare ñamoĩ upéva ñande navbar ári.

Eikuaave ko mba’ére ore z-indexpágina diseño rehegua .

HTML ha CSS JS ári

Ikatu jave, jahai porãve HTML ha CSS JavaScript ári. En general, HTML ha CSS niko osẽ porãve ha ojeikekuaa hetave tapicha opaite nivel de experiencia iñambuévape. HTML ha CSS avei ipya’eve ne kundahárape JavaScript-gui, ha ne kundahára generalmente ome’ẽ tuicha mba’e’apopyrã ndéve g̃uarã.

Ko principio ha’e ñande primera clase JavaScript API ha’e dataatributos. Natekotevẽi rehai haimete mba’eveichagua JavaScript reipuru hag̃ua ore JavaScript mboajepyréva; upéva rangue, ehai HTML. Emoñe’ẽve ko mba’ére ore página JavaScript jehechaukarãme .

Ipahápe, ñande estilokuéra omopu’ã umi comportamiento fundamental umi elemento web común rehegua. Ikatu jave, roipuru porãve pe kundahára ome’ẽva. Techapyrã, ikatu emoĩ peteĩ .btnmbo’esyry haimete oimeraẽ elemento rehe, ha katu hetavéva elemento nome’ẽi mba’eveichagua valor semántico térã funcionalidad navegador rehegua. Upévare upéva rangue, jaipuru <button>s ha <a>s.

Upéicha avei ojejapo umi componente ikomplikadovévape g̃uarã. Ikatu ramo jepe jahai ñande propio plugin validación formulario rehegua ñamoĩ hag̃ua clase peteĩ elemento túvape oñemopyendáva peteĩ entrada estado rehe, upéicha rupi oheja ñandéve ñamoĩ estilo jehaipyre heꞌi pytã, jaipuru porãve umi :valid/ :invalidpseudo-elementos opaite kundahára omeꞌeva ñandéve.

Utilidades rehegua

Umi clase utilidad rehegua —yma pytyvõhára Bootstrap 3-pe— haꞌehína peteĩ aliado ipuꞌakapáva oñembohovái hag̃ua CSS hinchazón ha página rembiapo vai. Peteĩ clase utilidad rehegua haꞌe jepi peteĩ joaju propiedad-valor rehegua peteĩva, iñambueꞌỹva ojehechaukáva peteĩ clase ramo (techapyrã, .d-blockohechauka display: block;). Imba’ekuaarã tenondegua ha’e jepuru pya’e ojehai aja HTML ha oñemboty CSS jeporupyre rehai hag̃ua.

Específicamente CSS jeporupyre rehegua, umi purupyrã ikatu oipytyvõ oñembohovái hag̃ua vore tuichakue oñembohetavéva omboguejývo ne pares propiedad-valor rehegua ojejapo jeyvéva peteĩ clase-pe. Kóva ikatu oreko efecto dramático escala-pe umi nde proyecto-kuérape.

HTML flexible rehegua

Ndaikatúiramo jepe jepi, roñeha’ã ani hag̃ua roĩ dogmáticoiterei ore HTML rembijerure componente-kuérape g̃uarã. Péicha, roñecentra umi clase peteĩvape ore selector CSS-pe ha roñeha’ã ro’evita umi selector mitãnguéra pya’e ( >). Kóva ome’ẽ ndéve hetave flexibilidad ne ñemboguatarã ha oipytyvõ ore CSS isãsove ha sa’ive específico.