Ejupi contenido principal-pe Eike docs jeguatahápe
in English

Moñepyrũmby

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

Ko páhinape

Ñ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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS rehegua

Heta ñande componente oikotevẽ JavaScript jepuru ombaꞌapo hag̃ua. Específicamente, oikotevẽ hikuái ñande JavaScript plugins ha Popper . Emoĩ peteĩva ko’ã <script>s</body> nde página paha ypýpe, etiqueta ñemboty mboyvemi , emboguata hag̃ua.

Ejapo

Emoinge opaite Bootstrap JavaScript mboajepyréva ha dependencia peteĩ ore mokõi paquete ndive. Mokõivéva bootstrap.bundle.jsha bootstrap.bundle.min.jsoike Popper ore tembipururã ñe’ẽmondo ha popovers-pe g̃uarã. Ojeikuaave hag̃ua mba’épa oike Bootstrap-pe, ehecha ore mba’ekuaarã vore.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Módulo-kuéra rehegua

Oipurúramo <script type="module">, ehecha ore jepuru Bootstrap peteĩ módulo vore ramo.

Umi componente 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 plugin omoañetévo teko ombohováiva
  • Offcanvases ojehechauka hag̃ua, oñemboguapy ha ojeguata hag̃ua jepokuaa
  • Brindis ojehechauka ha oñemboyke haguã
  • Tembipururã ñe’ẽmondo ha popovers ojehechauka ha oñemohenda hag̃ua (oikotevẽ avei Popper ) .
  • Scrollspy desplazamiento reko ha jeguata ñembopyahu rehegua

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">

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Umi tembiaporã oúvape g̃uarã, eike umi kuatiañe’ẽ Diseño rehegua térã ore techapyrã oficial -pe eñepyrũ hag̃ua emohenda nde tenda mba’ekuaarã 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">

Ikatu rehecha peteĩ 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-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.