Source

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, jsDelivr-ko jendeak doan eskaintzen duena. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Gure osagai askok JavaScript erabiltzea behar dute funtzionatzeko. Zehazki, jQuery , Popper.js eta gure JavaScript pluginak behar dituzte. Jarri honako hauek <script>zure orrien amaieran, ixteko </body>etiketa baino lehen, haiek gaitzeko. jQuery izan behar da lehenik, gero Popper.js, eta gero gure JavaScript pluginak.

jQueryren slim build erabiltzen dugu , baina bertsio osoa ere onartzen da.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

Gure bootstrap.bundle.jseta Popperbootstrap.bundle.min.js barne , baina ez jQuery . Bootstrap-en sartzen denari buruzko informazio gehiago lortzeko, ikusi gure edukien atala.

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
  • Bistaratzeko eta kokatzeko goitibehurrak ( Popper.js ere behar du )
  • Bistaratzeko, kokatzeko eta korritzeko portaera moduak
  • Nabigazio-barra gure Tolestu plugina zabaltzeko portaera sentikorra ezartzeko
  • Bistaratzeko eta kokatzeko tresna-aholkuak eta popovers ( Popper.js ere behar da )
  • Scrollspy korritze portaeraren eta nabigazioaren eguneratzeetarako

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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 doctype erabiltzea eskatzen du. Hori gabe, estilo osagabe funky batzuk ikusiko dituzu, baina barnean ez luke oztopo 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-zoompena 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 zabaleran 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.

  • Jarraitu @getbootstrap Twitter-en .
  • Irakurri eta harpidetu The Official Bootstrap Blogera .
  • Txateatu IRCko Bootstrapper-ekin. irc.freenode.netZerbitzarian, 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.