in English

Moñepyrũmby

Eñepyrũ Bootstrap ndive, pe marco ojekuaavéva ko yvy ape ári omopuꞌa hag̃ua umi tenda ombohováiva, móvil-pe g̃uarã, jsDelivr ha peteĩ plantilla ñepyrũha página reheve.

Ñepyrũ pya’e

¿Reheka remoĩ pya’e hag̃ua Bootstrap nde proyecto-pe? Eipuru jsDelivr, peteĩ CDN código abierto rehegua isãsóva. Eipurúvo peteĩ paquete mohendaha térã tekotevẽ remboguejy umi archivo fuente? Eho pe páhina de descargas -pe .

CSS rehegua

Emboguejy-pega pe kuatia’atâ <link>nde kuatia’atýpe <head>opaite ambue kuatia’atâ mboyve ekargávo ñande CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS rehegua

Heta ñande componente oikotevẽ JavaScript jepuru ombaꞌapo hag̃ua. Específicamente, oikotevẽ hikuái jQuery , Popper , ha ñande JavaScript plugins tee. Roipuru jQuery slim build , ha katu oñepytyvõ avei versión henyhẽva.

Emoĩ peteĩva ko’ã <script>s</body> nde página paha ypýpe, etiqueta ñemboty mboyvemi , emboguata hag̃ua. jQuery oúta raẽ, upéi Popper, ha upéi ñande JavaScript mboajepyréva.

Ejapo

Emoinge opaite Bootstrap JavaScript mboajepyréva peteĩ ore mokõi paquete ndive. Mokõivéva bootstrap.bundle.jsha bootstrap.bundle.min.jsoike Popper ore tembipuru’i ha popovers-pe g̃uarã, ha katu ndaha’éi jQuery . Emoinge jQuery raẽ, upéi peteĩ Bootstrap JavaScript ryru. Ojeikuaave hag̃ua mba’épa oike Bootstrap-pe, ehecha ore mba’ekuaarã vore.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Mboja'o

Edesidi ramo reho hag̃ua solución scripts añónte ndive, Popper oúva’erã tenonderã (reiporúramo tembipuru’i ñe’ẽmondo térã popovers), ha upéi ore JavaScript plugins.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Umi componente rehegua

¿Reikuaase mba’e componente-pa oikotevẽ explícitamente jQuery, ñande JavaScript ha Popper? Emboguejy pe enlace ohechauka componentes iguýpe. Ndereikóiramo seguro página estructura rehegua, emoñe’ẽ meme 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 plugin omoañetévo teko ombohováiva
  • Scrollspy desplazamiento reko ha jeguata ñembopyahu rehegua
  • Tembipururã ñe’ẽmondo ha popovers ojehechauka ha oñemohenda hag̃ua (oikotevẽ avei Popper ) .

Plantilla de inicio

Ejesareko eguereko hag̃ua nde páginakuéra oñembosako’íva umi estándar diseño ha desarrollo rehegua ipyahuvéva reheve. Upéva heꞌise ojepuruha peteĩ doctype HTML5 ha oike hag̃ua peteĩ meta etiqueta viewport-pegua umi teko ombohovái porãvape g̃uarã. Emoĩmbaite oñondive ha nde páhinakuéra ojehechava’erã péicha:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Upéva ha’e opa mba’e reikotevẽva umi mba’e ojejeruréva página general-pe g̃uarã. Eike umi kuatiañe’ẽ Diseño rehegua térã ore techapyrã oficial -pe eñepyrũ hag̃ua emohenda nde tenda contenido ha componente-kuéra.

Umi global iñimportánteva

Bootstrap oipuru peteĩ po’i estilo ha ñemboheko iñimportánteva global tekotevẽtava reikuaa reipuru jave, opaite umíva haimete oñemboheko peteĩchaite oñemboheko hag̃ua normalización estilo navegador kurusu rehegua. Jañembohypýi pype.

HTML5 kuatiahaipyre

Bootstrap oikotevẽ ojepuru HTML5 doctype. Hese’ỹre, rehecháta algún estilo incompleto funky, ha katu oikehápe ndojapóiva’erã mba’eveichagua hipo considerable.

<!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 oñembotuichave hag̃ua opaite tembipururã, emoĩ meta etiqueta ombohováiva jehechaukaha nde <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Ikatu rehecha techapyrã ko mba’e rehegua tembiaporãme plantilla ñepyrũrãme .

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 ára ha ára 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 .
  • 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-4).
  • 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.

CSP ha SVG oñemboguapýva

Heta Bootstrap mba’e’oka oguereko SVG oñemboguapýva ñande CSS-pe oñemboguapy hag̃ua mba’e’oka peteĩcha ha ndahasýiva kundahára ha tembipuru’i rupi. Umi organización orekóva CSP ñemboheko mbaretevévape g̃uarã , rohai kuatiáre opaite instancia ore SVG oñemboguapýva rehegua (opavave ojeporúva background-image) rupive ikatu hag̃uáicha ehesa’ỹijo porãve ne opción.

Oñemopyendáva komunida ñomongeta rehe , oĩ opción embohovái hag̃ua kóva nde código base-pe voi oikehápe emyengovia umi URL umi mba’ekuaarã oñemboguapýva tetãme, eipe’a ta’ãngamýi ha eipuru ta’ãngamýi línea ryepýpe (ndaikatúi opaite componente-pe), ha emoambue nde CSP. Ore recomendación ha’e ehesa’ỹijo porã nde política seguridad rehegua ha edesidi peteĩ tape iporãvéva tenonde gotyo, tekotevẽramo.