Source

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.

Ñepyrũ pya’e

¿Reheka remoĩ pya’e hag̃ua Bootstrap nde proyecto-pe? Eipuru jsDelivr, ome’ẽva gratis umi tapicha jsDelivr-pe. 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS rehegua

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

Roipuru jQuery slim build , ha katu oñepytyvõ avei versión henyhẽva.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

¿Reikuaase mba’e componente-pa oikotevẽ explícitamente jQuery, ñande JS ha Popper.js? 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 mba’e’oka ojehechauka ha oñemohenda hag̃ua (oikotevẽ avei Popper.js ) .
  • Modal ojehechauka, oñemohenda ha ojeguata hag̃ua jepokuaa
  • Navbar ombohape haguére ore Collapse plugin omoañetévo teko ombohováiva
  • Tembipururã ñe’ẽmondo ha popovers ojehechauka ha oñemohenda hag̃ua (oikotevẽ avei Popper.js ) .
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Upéva añoite reikotevẽ 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 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.

  • Emoirũ @getbootstrap-pe Twitter-pe .
  • Emoñe’ẽ ha eñemboguapy The Official Bootstrap Blog -pe .
  • Oñomongeta iñirũnguéra Bootstrappers ndive IRC-pe. irc.freenode.netServidor-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.