Hasi Bootstrap-ekin

Bootstrap funtzionalitatez betetako frontend-tresna indartsua da. Eraiki edozer gauza —prototipotik hasi eta ekoizpenera— minututan.

Orrialde honetan

Hasiera azkarra

Hasi Bootstrap-en ekoizpenerako prest dagoen CSS eta JavaScript CDN bidez barne hartzen, inolako eraikuntza-urratsik beharrik gabe. Ikus ezazu praktikan Bootstrap CodePen demo honekin .

Sortu index.htmlfitxategi berri bat zure proiektuaren erroan. Sartu <meta name="viewport">etiketa gailu mugikorretan erantzun egokia izateko.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Sartu Bootstrap-en CSS eta JS. Jarri <link>etiketa <head>gure CSSrako, eta <script>gure JavaScript sortaren etiketa (goigabeak, popper-ak eta argibideak kokatzeko Popper barne) itxi aurretik </body>. Lortu informazio gehiago gure CDN estekei buruz .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Popper eta gure JS bereizita ere sar ditzakezu . Ez baduzu goitibehitza, popover edo tresna-aholkuak erabiltzeko asmorik, gorde kilobyte batzuk Popper ez sartuz.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Kaixo Mundua! Ireki orria nahi duzun arakatzailean zure Bootstrapped orria ikusteko. Orain Bootstrap-ekin eraikitzen has zaitezke zure diseinua sortuz, dozenaka osagai gehituz eta gure adibide ofizialak erabiliz .

CDN estekak

Erreferentzia gisa, hona hemen gure CDN esteka nagusiak.

Deskribapena	URLa
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

CDN-a ere erabil dezakezu Edukien orrian ageri diren gehigarri guztiak eskuratzeko .

Hurrengo urratsak

Irakurri pixka bat gehiago Bootstrap-ek erabiltzen dituen ingurune globalaren ezarpen garrantzitsu batzuei buruz .
Irakurri Bootstrap-en sartzen denari buruz gure edukien atalean eta behean JavaScript behar duten osagaien zerrenda.
Potentzia pixka bat gehiago behar duzu? Kontuan izan Bootstrap-ekin eraikitzea iturburu-fitxategiak pakete-kudeatzailearen bidez sartuta .
Bootstrap modulu gisa erabili nahi <script type="module">duzu? Mesedez, ikusi Bootstrap modulu gisa erabiltzen dugun atala.

JS 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 Collapse eta Offcanvas pluginak zabaltzeko jokabide sentikorrak ezartzeko
Navs Tab pluginarekin edukiaren panelak aldatzeko
Erakutsi, kokatzea eta korritzeko portaera oihaletatik kanpo
Scrollspy korritze-portaera eta nabigazio-eguneratzeak lortzeko
Bistaratzeko eta baztertzeko brindisak
Bistaratzeko eta kokatzeko tresna-aholkuak eta popovers ( Popper ere behar da )

Global garrantzitsuak

Bootstrap-ek estilo eta ezarpen global garrantzitsu batzuk erabiltzen ditu, guztiak ia esklusiboki arakatzaileen arteko estiloen normalizaziora zuzenduta . Murgil gaitezen.

HTML5 dokumentu mota

Bootstrap-ek HTML5 dokumentu-tipoa erabiltzea eskatzen du. Hori gabe, estilo funky eta osatugabe batzuk ikusiko dituzu.

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

Honen adibide bat martxan ikus dezakezu hasiera azkarrean .

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 eguneratuta Bootstrap-en garapenari buruz eta jarri komunitateari baliabide lagungarri hauekin.

Irakurri eta harpidetu The Official Bootstrap Blogera .
Galdetu eta arakatu gure GitHub Eztabaidak .
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.