Sarrera

Hasi Bootstrap-ekin, mugikorrentzako lehen gune erantzuleak eraikitzeko munduko esparru ezagunena, jsDelivr eta txantiloiaren hasierako orri batekin.

Hasiera azkarra

Bootstrap zure proiektuari azkar gehitu nahi al diozu? Erabili jsDelivr, doako kode irekiko CDN bat. Pakete-kudeatzaile bat erabiltzen al duzu iturburu-fitxategiak deskargatu behar dituzu? Joan deskarga orrira .

CSS

Kopiatu-itsatsi estilo-orria <link>zure <head>beste estilo-orri guztien aurretik gure CSS kargatzeko.

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

JS

Gure osagai askok JavaScript erabiltzea behar dute funtzionatzeko. Zehazki, jQuery , Popper eta gure JavaScript pluginak behar dituzte. jQueryren slim build erabiltzen dugu , baina bertsio osoa ere onartzen da.

Jarri orri hauetako bat zure <script>orrien amaieran, ixteko </body>etiketaren aurretik, haiek gaitzeko. jQuery izan behar da lehenik, gero Popper eta gero gure JavaScript pluginak.

Sorta

Sartu Bootstrap JavaScript plugin bakoitza gure bi sortekin. Biak bootstrap.bundle.jseta Popperbootstrap.bundle.min.js sartu gure tresna-aholkuetarako eta popover-etarako, baina ez jQuery . Sartu jQuery lehenik, eta ondoren Bootstrap JavaScript sorta. Bootstrap-en sartzen denari buruzko informazio gehiago lortzeko, ikusi gure edukien atala.

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

Bereizi

Scripten soluzio bereiziarekin joatea erabakitzen baduzu, Popper-ek izan behar du lehenik (tresna-aholkuak edo popover-ak erabiltzen ari bazara), eta gero gure JavaScript pluginak.

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

Osagaiak

Jakin-mina duzu zein osagaik behar duten esplizituki jQuery, gure JavaScript eta Popper? Egin klik beheko osagaiak erakutsi estekan. Orrialdearen egiturari buruz ziur ez bazaude, jarraitu irakurtzen adibideko orrialde txantiloi bat lortzeko.

Erakutsi JavaScript behar duten osagaiak

Baztertzeko alertak
Egoerak aldatzeko botoiak eta kontrol-laukia/irratiaren funtzionaltasuna
Diapositiba portaera, kontrol eta adierazle guztietarako karrusela
Tolestu edukiaren ikusgarritasuna aldatzeko
Erakutsi eta kokatzeko goitibehurrak ( Popper ere behar du )
Bistaratzeko, kokatzeko eta korritzeko portaera moduak
Nabigazio-barra gure Tolestu plugina zabaltzeko portaera sentikorra ezartzeko
Scrollspy korritze-portaera eta nabigazio-eguneratzeak lortzeko
Bistaratzeko eta kokatzeko tresna-aholkuak eta popovers ( Popper ere behar da )

Hasierako txantiloia

Ziurtatu orriak diseinu eta garapen estandar berrienekin konfiguratuta dituzula. Horrek esan nahi du HTML5 doctype bat erabiltzea eta ikuspuntuko meta-etiketa bat sartzea, erantzun-jokabide egokietarako. Jarri dena eta zure orriak honela izan beharko lukete:

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

Hori da orriaren eskakizun orokorretarako behar duzun guztia. Bisitatu Diseinuaren dokumentuak edo gure adibide ofizialak zure gunearen edukia eta osagaiak ezartzen hasteko.

Global garrantzitsuak

Bootstrap-ek estilo eta ezarpen global garrantzitsu batzuk erabiltzen ditu, hura erabiltzean kontuan izan behar dituzunak, guztiak ia esklusiboki nabigatzaile gurutzatuen estiloak normalizatzera zuzenduak. Murgil gaitezen.

HTML5 dokumentu mota

Bootstrap-ek HTML5 dokumentu-tipoa erabiltzea eskatzen du. Hori gabe, estilo osagabe funky batzuk ikusiko dituzu, baina barnean ez luke inolako traba handirik eragin beharko.

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

Meta etiketa sentikorra

Bootstrap mugikorrerako lehenik garatzen da , gailu mugikorretarako kodea optimizatzen dugun estrategia bat, eta gero osagaiak eskalatzen ditugu behar den moduan CSS multimedia kontsultak erabiliz. Gailu guztien errendatze egokia eta ukipen-zoomatzea bermatzeko, gehitu erantzuneko ikuspegia meta-etiketa zure <head>.

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

Hasierako txantiloian ekintza honen adibide bat ikus dezakezu .

Kutxa-tamaina

CSS-n tamaina zuzenagoa izateko, box-sizingbalio globala izatera content-boxaldatuko dugu border-box. Horrek ziurtatzen paddingdu ez duela elementu baten azken kalkulatutako zabalerari eragiten, baina arazoak sor ditzake hirugarrenen software batzuekin, adibidez, Google Maps eta Google Custom Search Engine.

Gainditu behar duzun kasu bakanetan, erabili honelako zerbait:

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

Goiko zatiarekin, habiaraturiko elementuek —eta bidez sortutako edukia barne— ::beforehorretarako ::afterzehaztutakoa heredatuko box-sizingdute .selector-for-some-widget.

Lortu informazio gehiago kutxa-ereduari eta tamainari buruz CSS Tricks-en .

Berrabiarazi

Arakatzaileen artean errendatzeko hobekuntzarako, Berrabiarazi erabiltzen dugu arakatzaile eta gailuen arteko inkoherentziak zuzentzeko, HTML elementu arruntei berrezartze apur bat iritzi gehiago emanez.

Komunitatea

Egon zaitez Bootstrap-en garapenaren berri eta jarri komunitateari baliabide lagungarri hauekin.

Irakurri eta harpidetu The Official Bootstrap Blogera .
Txateatu IRCko Bootstrapper-ekin. irc.libera.chatZerbitzarian, kanalean #bootstrap.
Inplementaziorako laguntza Stack Overflow-en aurki daiteke (etiketatuta bootstrap-4).
bootstrapGaratzaileek Bootstrap-en funtzionaltasuna aldatzen edo gehitzen duten paketeetan erabili beharko lukete gako -hitza npm edo antzeko bidalketa-mekanismoen bidez banatzean, aurkikuntzarik handiena lortzeko.

Twitterren @getbootstrap ere jarraitu dezakezu azken esamesak eta musika-bideo ikaragarriak ikusteko.

CSPak eta txertatutako SVGak

Bootstrap-eko hainbat osagaik SVG txertatuak barne hartzen dituzte gure CSSan, osagaiak modu koherentean eta errazean diseinatzeko, arakatzaile eta gailu guztietan. CSP konfigurazio zorrotzagoak dituzten erakundeentzat, gure SVG kapsulatuen instantzia guztiak dokumentatu ditugu (guztiak ) bidez aplikatzen dira, background-imagezure aukerak sakonago berrikusi ahal izateko.

Itxi botoia (alerta eta modaletan erabiltzen da)
Kontrol-lauki pertsonalizatuak eta irrati-botoiak
Forma-etengailuak
Inprimakiak baliozkotzeko ikonoak
Aukeraketa menu pertsonalizatuak
Karruselaren kontrolak
Nabigazio-barra aldatzeko botoiak

Komunitateko elkarrizketan oinarrituta , hau zure kode-basean zuzentzeko aukera batzuk honako hauek dira: URLak lokalean ostatatutako aktiboekin ordezkatzea, irudiak kentzea eta lerroko irudiak erabiltzea (ez da posible osagai guztietan) eta zure CSP aldatzea. Gure gomendioa zure segurtasun-politikak arretaz berrikustea eta aurrera egiteko biderik onena erabakitzea da, behar izanez gero.