Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
in English

Sarrera

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

Orrialde honetan

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

JS

Gure osagai askok JavaScript erabiltzea behar dute funtzionatzeko. Zehazki, gure JavaScript pluginak eta Popper behar dituzte . Jarri orri hauetako bat zure <script>orrien amaieran, ixteko </body>etiketaren aurretik, haiek gaitzeko.

Sorta

Sartu Bootstrap JavaScript plugin eta menpekotasun guztiak gure bi sortekin. Biak bootstrap.bundle.jseta Popperbootstrap.bundle.min.js sartu gure tresna-aholkuetarako eta popover-etarako. Bootstrap-en sartzen denari buruzko informazio gehiago lortzeko, ikusi gure edukien atala.

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

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

Moduluak

Erabiltzen baduzu <script type="module">, begiratu Bootstrap modulu gisa erabiltzen dugun atala.

Osagaiak

Jakin-mina duzu zein osagaik behar dute esplizituki gure JavaScript eta Popper-ek? Egin klik beheko osagaiak erakutsi estekan. Orrialdearen egitura orokorrari buruz batere ziur ez bazaude, jarraitu irakurtzen adibide-orriaren txantiloi bat.

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
  • Erakutsi, kokatzea eta korritzeko portaera oihaletatik kanpo
  • Bistaratzeko eta baztertzeko brindisak
  • Bistaratzeko eta kokatzeko tresna-aholkuak eta popovers ( Popper ere behar da )
  • Scrollspy korritze-portaera eta nabigazio-eguneratzeak lortzeko

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

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

Hurrengo urratsak ikusteko, 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">

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 Google Maps eta Google Custom Search Engine bezalako hirugarrenen software batzuekin.

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-5).
  • 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.