Isingeniso
Qalisa nge-Bootstrap, uhlaka oludume kakhulu emhlabeni lokwakha amasayithi asabelayo, amaselula okuqala, nge-jsDelivr kanye nekhasi lokuqala lesifanekiso.
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.js
futhi bootstrap.bundle.min.js
kufaka 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-sizing
ivelu yomhlaba wonke ukusuka content-box
ku- border-box
. Lokhu kuqinisekisa padding
ukuthi 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 ::before
futhi ::after
—zonke zizodla ifa elishiwo box-sizing
lokho .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
,#bootstrap
esiteshini. - Usizo lokuqalisa lungatholakala kokuthi Ukuchichima Kwesitaki (umakwe
bootstrap-5
). - Onjiniyela kufanele basebenzise igama elingukhiye
bootstrap
kumaphakheji 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.