Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
in English

Isingeniso

Qalisa nge-Bootstrap, uhlaka oludume kakhulu emhlabeni lokwakha amasayithi asabelayo, amaselula okuqala, nge-jsDelivr kanye nekhasi lokuqala lesifanekiso.

Kuleli khasi

Ukuqala okusheshayo

Ingabe ufuna ukwengeza ngokushesha i-Bootstrap kuphrojekthi yakho? Sebenzisa i-jsDelivr, i-CDN yomthombo ovulekile wamahhala. Usebenzisa umphathi wephakheji noma udinga ukulanda amafayela omthombo? Yiya ekhasini lokulanda .

CSS

Kopisha-namathisela ishidi lesitayela <link>ngaphambi <head>kwawo wonke amanye amashidi esitayela ukuze ulayishe i-CSS yethu.

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

JS

Izingxenye zethu eziningi zidinga ukusetshenziswa kwe-JavaScript ukuze zisebenze. Ngokukhethekile, zidinga ama-plugin ethu e-JavaScript kanye ne- Popper . Beka okukodwa kwalokhu okulandelayo<script> eduze nasekupheleni kwamakhasi akho, ngaphambi nje kwethegi yokuvala ,</body> ukuze uwanike amandla.

Inqwaba

Faka yonke i-plugin ye-Bootstrap JavaScript nokuncika ngeyodwa yezinqwaba zethu ezimbili. Kokubili bootstrap.bundle.jsfuthi bootstrap.bundle.min.jskufaka phakathi i - Popper yamathiphu ethu wamathuluzi nama-popover. Ukuze uthole ulwazi olwengeziwe mayelana nokuthi yini efakwe ku-Bootstrap, sicela ubheke ingxenye yethu yokuqukethwe .

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

Hlukanisa

Uma unquma ukuhamba nesixazululo esihlukile seskripthi, i-Popper kufanele ize kuqala (uma usebenzisa izeluleko zamathuluzi noma ama-popover), bese kuba ama-plugin ethu e-JavaScript.

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

Amamojula

Uma usebenzisa <script type="module">, sicela ubhekisele ekusebenziseni kwethu i-Bootstrap njengengxenye yemojula .

Izingxenye

Ufuna ukwazi ukuthi yiziphi izingxenye ezidinga ngokusobala i-JavaScript yethu ne-Popper? Chofoza isixhumanisi sezingxenye zombukiso ngezansi. Uma ungaqiniseki nhlobo mayelana nesakhiwo sekhasi elijwayelekile, qhubeka ufunda ukuze uthole isifanekiso sekhasi eliyisibonelo.

Bonisa izingxenye ezidinga i-JavaScript
  • Izexwayiso zokucashisa
  • Izinkinobho zokuguqula izimo nokusebenza kwebhokisi/umsakazo
  • I-Carousel yakho konke ukuziphatha kwamaslayidi, izilawuli, nezinkomba
  • Goqa ukuze uguqule ukubonakala kokuqukethwe
  • Okwehliswayo kokuboniswa nokubeka (kudinga futhi i- Popper )
  • Amamodeli okubonisa, ukuma, nokuziphatha kokuskrola
  • Ibha ye-Navbar yokwelula i-plugin yethu Yokugoqa ukuze usebenzise indlela yokusabela
  • Ama-offcanvases okubonisa, ukuma, nokuziphatha kokuskrola
  • Amathosti okubonisa nokucashisa
  • Amathuluzi nama-popover okubonisa nokubeka (kudinga futhi i- Popper )
  • I-Scrollspy ngokuziphatha kokuskrola nezibuyekezo zokuzulazula

Isifanekiso sokuqala

Qiniseka ukuthi unamakhasi akho asethwe ngedizayini yakamuva nezindinganiso zokuthuthuka. Lokho kusho ukusebenzisa i-HTML5 doctype kanye nokufaka i-meta tag yembobo yokubuka ngokuziphatha okufanele kokuphendula. Kuhlanganise konke futhi amakhasi akho kufanele abukeke kanje:

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

Ukuze uthole izinyathelo ezilandelayo, vakashela amadokhumenti Esakhiwo noma izibonelo zethu ezisemthethweni ukuze uqale ukubeka okuqukethwe kwesayithi lakho nezingxenye.

Ama-globals abalulekile

I-Bootstrap isebenzisa izitayela nezilungiselelo zomhlaba ezimbalwa ezibalulekile ozodinga ukuzazi lapho uyisebenzisa, zonke ezihloselwe ngokukhethekile ukwenziwa kwezitayela zesiphequluli esihlukile. Asicwilise phakathi.

HTML5 idokhumenti

I-Bootstrap idinga ukusetshenziswa kwe-HTML5 doctype. Ngaphandle kwaso, uzobona isitayela esingaphelele esijabulisayo, kodwa ukusihlanganisa akufanele kubangele noma yikuphi ukuphazamiseka okukhulu.

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

I-meta tag ephendulayo

I-Bootstrap ithuthukiswa iselula kuqala , isu lapho sithuthukisa khona ikhodi yamadivayisi eselula kuqala bese sikhulisa izingxenye njengoba kudingeka sisebenzisa imibuzo yemidiya ye-CSS. Ukuze uqinisekise ukunikezwa okufanele nokusondeza kokuthinta kuwo wonke amadivayisi, engeza imetagi ye-viewport yokubuka ephendulayo ku- <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Ungabona isibonelo salokhu sisebenza kusifanekiso sokuqala .

Ubukhulu bebhokisi

Ukuze uthole ukulinganisa okuqondile okwengeziwe ku-CSS, sishintsha box-sizingivelu yomhlaba wonke ukusuka content-boxku- border-box. Lokhu kuqinisekisa paddingukuthi akuthinti ububanzi bokugcina obubaliwe bento, kodwa kungabangela izinkinga ngesofthiwe yenkampani yangaphandle njenge-Google Amamephu kanye ne-Google Custom Search Engine.

Ezimweni ezingavamile lapho udinga ukuyibhala ngaphezulu, sebenzisa into efana nalena elandelayo:

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

Ngamazwibela angenhla, izakhi ezibekwe esidlekeni—okuhlanganisa nokuqukethwe okukhiqiziwe ::beforefuthi ::after—zonke zizodla ifa elishiwo box-sizinglokho .selector-for-some-widget.

Funda kabanzi mayelana nemodeli yebhokisi nokulinganisa ku-CSS Tricks .

Qalisa kabusha

Ngokunikezwa okuthuthukisiwe kwesiphequluli esiphambene, sisebenzisa u- Reboot ukuze ulungise ukungahambisani kuzo zonke iziphequluli namadivayisi kuyilapho sinikeza ukusetha kabusha okunemibono ethe xaxa ezintweni ezivamile ze-HTML.

Umphakathi

Hlala unolwazi lwakamuva mayelana nokuthuthukiswa kwe-Bootstrap futhi ufinyelele umphakathi ngalezi zinsiza eziwusizo.

  • Funda futhi ubhalisele Ibhulogi Ye-Bootstrap Esemthethweni .
  • Xoxa nozakwethu be-Bootstrappers ku-IRC. Kuseva irc.libera.chat, #bootstrapesiteshini.
  • Usizo lokuqalisa lungatholakala kokuthi Ukuchichima Kwesitaki (umakwe bootstrap-5).
  • Onjiniyela kufanele basebenzise igama elingukhiye bootstrapkumaphakheji ashintsha noma engeza ekusebenzeni kwe-Bootstrap lapho esabalalisa nge- npm noma izindlela zokulethwa ezifanayo ukuze kutholakale okuphezulu.

Ungakwazi futhi ukulandela u-@getbootstrap ku-Twitter ukuze uthole inhlebo yakamuva namavidiyo omculo amangalisayo.