Eñepyrũ Bootstrap ndive

Bootstrap haꞌehína peteĩ tembipururã tenondegua ipuꞌakapáva, oguerekóva mbaꞌeporã. Emopu’ã oimeraẽ mba’e —prototipo guive producción peve— minuto-pe.

Ko páhinape

Ñepyrũ pya’e

Eñepyrũ emoĩvo Bootstrap CSS ha JavaScript oñembosako’íva producción-pe g̃uarã CDN rupive tekotevẽ’ỹre mba’eveichagua tembiaporã ñemopu’ãrã. Ehecha práctica-pe ko Bootstrap CodePen demostración ndive .

Ejapo peteĩ index.htmlvore pyahu nde proyecto rapópe. Emoinge <meta name="viewport">etiqueta avei teko porã ombohovái hag̃ua umi tembipuru móvil-pe.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Oike Bootstrap CSS ha JS-pe. Emoĩ <link>etiqueta <head>ore CSS-pe g̃uarã, ha <script>etiqueta ore JavaScript paquete-pe g̃uarã (oikehápe Popper emohenda hag̃ua umi desplegable, popper ha tembipuru’i ñe’ẽmondo) oñemboty mboyve </body>. Eikuaave ore CDN joajuhakuéra rehegua .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Ikatu avei remoĩ Popper ha ore JS peteĩteĩ. Ndereplaneairamo reipuru hag̃ua umi desplegable, popover térã tembipuru’i ñe’ẽmondo, eñongatu unos kuánto kilobyte ani hag̃ua emoĩ Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Maitei, mundo! Eipe’a pe páhina nde kundahára reiporavóvape rehecha hag̃ua ne páhina Bootstrapped. Ko’áĝa ikatu eñepyrũ emopu’ã Bootstrap ndive emoheñóivo nde diseño tee , emoĩvo docena componente ha eipuru ore techapyrã oficial .

Umi enlace CDN rehegua

Referencia ramo, ko’ápe oĩ ore enlace CDN tenondegua.

Techaukaha	URL rehegua
CSS rehegua	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS rehegua	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Ikatu avei reipuru CDN regueru hag̃ua oimeraẽva ore ñemopu’ã ambuéva oĩva Contenido página -pe .

Umi tembiapo oúva

Emoñe’ẽve michĩmi umi ñemboheko iñimportánteva tekoha global rehegua Bootstrap oipurúva.
Emoñe’ẽ mba’épa oike Bootstrap-pe ore contenido vore’ípe ha umi componente lista oikotevẽva JavaScript iguýpe.
¿Reikotevẽpa michĩmive poder? Ejepy’amongeta emopu’ãvo Bootstrap ndive emoĩvo umi vore ypykue paquete mohendaha rupive .
¿Reheka reipuru hag̃ua Bootstrap peteĩ módulo ramo <script type="module">? Ehechamína ore jepuru Bootstrap peteĩ módulo vore ramo.

JS componente-kuéra rehegua

¿Reikuaase mba’e componente-pa oikotevẽ explícitamente ñande JavaScript ha Popper? Emboguejy pe enlace ohechauka componentes iguýpe. Ndereikóiramo mba’eveichavérõ seguro pe página estructura general rehegua, esegi emoñe’ẽ peteĩ plantilla página techapyrãme g̃uarã.

Ehechauka umi componente oikotevẽva JavaScript

Alerta oñemosê haguã
Umi botón oñembohasa hag̃ua estado ha casilla de verificación/radio funcionalidad
Carrusel opaite diapositiva reko, control ha indicador-kuérape g̃uarã
Oñemboty oñembohasa hag̃ua visibilidad contenido rehegua
Umi desplegable ojehechauka ha oñemohenda hag̃ua (oikotevẽ avei Popper ) .
Modal ojehechauka, oñemohenda ha ojeguata hag̃ua jepokuaa
Navbar ombohape haguére ore Collapse ha Offcanvas plugins omoañetévo teko ombohováiva
Navs orekóva Tab plugin oñemoambue hag̃ua umi contenido vore
Offcanvases ojehechauka hag̃ua, oñemboguapy ha ojeguata hag̃ua jepokuaa
Scrollspy desplazamiento reko ha jeguata ñembopyahu rehegua
Brindis ojehechauka ha oñemboyke haguã
Tembipururã ñe’ẽmondo ha popovers ojehechauka ha oñemohenda hag̃ua (oikotevẽ avei Popper ) .

Umi global iñimportánteva

Bootstrap oipuru peteĩ pokõi estilo ha ñemboheko global iñimportánteva, opaite umíva haimete oñemboheko peteĩchaite umi estilo navegador kurusu rehegua normalización gotyo. Jañembohypýi pype.

HTML5 kuatiahaipyre

Bootstrap oikotevẽ ojepuru HTML5 doctype. Hese’ỹre, rehecháta algún estilo funky ha incompleto.

<!doctype html>
<html lang="en">
  ...
</html>

Etiqueta meta ombohováiva

Bootstrap oñembosako’i móvil raẽ , peteĩ estrategia ñamohenda porãhápe código umi tembipuru’i móvil-pe g̃uarã raẽ ha upéi ñamomba’eguasu componente tekotevẽháicha jaipurúvo umi consulta medios CSS rehegua. Ojeasegura hag̃ua ojejapo porã ha ojejapo hag̃ua zoom toque opaite tembipuru’ípe g̃uarã, emoĩ meta etiqueta ombohováiva jehechaukaha nde <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Ikatu rehecha techapyrã ko mba'e rehegua tembiaporãme ñepyrũ pya'épe .

Caja-tamaño rehegua

CSS-pe oñembotuichave hag̃ua hekopete, rombohasa pe box-sizingvalor global- content-boxgui border-box. Kóva oasegura paddingndoafectái ancho computado paha peteî elemento, pero ikatu omoheñói apañuãi algunos software mbohapýha ha'eháicha Google Maps ha Google Custom Search Engine.

Pe ocasión ndahetáivape tekotevẽva remboyke, eipuru peteĩ mbaʼe koʼãichagua:

.selector-for-some-widget {
  box-sizing: content-box;
}

Pe pehẽngue yvategua reheve, umi elemento oñembohysýiva —oikehápe contenido oñembohekopyréva ::beforeha rupive ::after—opavave ohereda va’erã pe oje’éva box-sizingupévape g̃uarã .selector-for-some-widget.

Eikuaave modelo caja ha tamaño rehegua CSS Tricks -pe .

Ñepyrũ jey

Oñemoporãve hag̃ua kundahára kurusu ñembohasa, roipuru Reboot romohenda hag̃ua mba’e’apo’ỹ kundahára ha tembipuru’i apytépe rome’ẽ aja michĩmi jegueru jey temiandu rehegua umi elemento HTML jepiguápe.

Avarekoha

Epyta eñemomarandu Bootstrap ñemoheñói rehe ha eñemboja komunida-pe ko’ã mba’e oipytyvõva reheve.

Emoñe’ẽ ha eñemboguapy The Official Bootstrap Blog -pe .
Eporandu ha ehesa’ỹijo ore GitHub Ñemongetakuéra .
Oñomongeta iñirũnguéra Bootstrappers ndive IRC-pe. irc.libera.chatServidor-pe, canal #bootstrap-pe.
Ikatu ojejuhu pytyvõ implementación rehegua Stack Overflow-pe (etiquetado bootstrap-5).
Umi moheñóiharakuéra oipuruvaꞌerã ñeꞌepykuaa bootstrapumi paquete omoambuéva térã omoĩva Bootstrap rembiaporãme omosarambívo npm térã mecanismo ñemeꞌe ojoguáva rupive ojejuhu hag̃ua máximo.

Ikatu avei resegui @getbootstrap-pe Twitter -pe reikuaa haĝua umi chismo ipyahuvéva ha umi video musical iporãitereíva.