in English

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

JS

Izingxenye zethu eziningi zidinga ukusetshenziswa kwe-JavaScript ukuze zisebenze. Ngokukhethekile, zidinga i- jQuery , i- Popper , nama-plugin ethu e-JavaScript. Sisebenzisa i -jQuery's slim build , kodwa inguqulo ephelele nayo iyasekelwa.

Beka okukodwa kwalokhu okulandelayo<script> eduze nasekupheleni kwamakhasi akho, ngaphambi nje kwethegi yokuvala ,</body> ukuze uwanike amandla. I-jQuery kufanele ize kuqala, bese i-Popper, bese kuba ama-plugin ethu e-JavaScript.

Inqwaba

Faka yonke i-plugin ye-Bootstrap JavaScript nenye yezinqwaba zethu ezimbili. Kokubili bootstrap.bundle.jsfuthi bootstrap.bundle.min.jskufaka phakathi i - Popper yamathiphu ethu wamathuluzi nama-popover, kodwa hhayi i - jQuery . Faka i-jQuery kuqala, bese kuba inqwaba ye-Bootstrap JavaScript. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Izingxenye

Ufuna ukwazi ukuthi yiziphi izingxenye ezidinga ngokusobala i-jQuery, i-JavaScript yethu, ne-Popper? Chofoza isixhumanisi sezingxenye zombukiso ngezansi. Uma ungaqiniseki ngesakhiwo sekhasi, qhubeka ufunda ukuze uthole isibonelo sesifanekiso sekhasi.

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
I-Scrollspy ngokuziphatha kokuskrola nezibuyekezo zokuzulazula
Amathuluzi nama-popover okubonisa nokubeka (kudinga futhi i- Popper )

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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Yilokho kuphela okudingayo kuzo zonke izidingo zekhasi. 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, shrink-to-fit=no">

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-4).
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.

Ama-CSP nama-SVG ashumekiwe

Izingxenye ezimbalwa ze-Bootstrap zifaka phakathi ama-SVG ashumekiwe ku-CSS yethu ukuze enze izingxenye zesitayela ngokungashintshi futhi kalula kuzo zonke iziphequluli namadivayisi. Ezinhlanganweni ezinokucushwa okuqine kakhulu kwe - CSP , sibhale zonke izenzakalo zama-SVG ethu ashumekiwe (wonke asetshenziswa ngokusebenzisa background-image) ukuze ubuyekeze ngokucophelela izinketho zakho.

Inkinobho yokuvala (esetshenziswa ezixwayiso namamodeli)
Amabhokisi okuhlola angokwezifiso nezinkinobho zomsakazo
Ukushintshwa kwefomu
Izithonjana zokuqinisekisa zefomu
Khetha amamenyu ngokwezifiso
Izilawuli ze-carousel
Izinkinobho zokuguqula ibha ye-Navbar

Ngokusekelwe engxoxweni yomphakathi , ezinye izinketho zokubhekana nalokhu ku-codebase yakho siqu zihlanganisa ukufaka esikhundleni sama-URL amafa aphethwe endaweni, ukususa izithombe nokusebenzisa izithombe ezingaphakathi komugqa (akunakwenzeka kuzo zonke izingxenye), kanye nokulungisa i-CSP yakho. Isincomo sethu ukuthi ubuyekeze ngokucophelela izinqubomgomo zakho zokuphepha futhi unqume indlela engcono kakhulu eya phambili, uma kunesidingo.