Source

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, ehlinzekwe mahhala ngabantu bakwa-jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Izingxenye zethu eziningi zidinga ukusetshenziswa kwe-JavaScript ukuze zisebenze. Ngokukhethekile, zidinga i- jQuery , Popper.js , kanye nama-plugin ethu e-JavaScript. Beka okulandelayo <script>ngasekugcineni kwamakhasi akho, ngaphambi nje </body>kwethegi yokuvala, ukuze uwanike amandla. I-jQuery kufanele ize kuqala, bese i-Popper.js, bese kuba ama-plugin ethu e-JavaScript.

Sisebenzisa i -jQuery's slim build , kodwa inguqulo ephelele nayo iyasekelwa.

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

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

Eyethu bootstrap.bundle.jsfuthi bootstrap.bundle.min.jsifaka i- Popper , kodwa hhayi i- jQuery . Ukuze uthole ulwazi olwengeziwe mayelana nokuthi yini efakwe ku-Bootstrap, sicela ubheke ingxenye yethu yokuqukethwe .

Bonisa izingxenye ezidinga i-JavaScript
  • Izexwayiso zokucashisa
  • Izinkinobho zokuguqula izifunda kanye nokusebenza kwebhokisi/umsakazo
  • I-Carousel yakho konke ukuziphatha kwamaslayidi, izilawuli, nezinkomba
  • Goqa ukuze uguqule ukubonakala kokuqukethwe
  • Okwehliswayo kokuboniswa nokubeka (kudinga futhi i-Popper.js )
  • Amamodeli okubonisa, ukuma, nokuziphatha kokuskrola
  • Ibha ye-Navbar yokwelula i-plugin yethu Yokugoqa ukuze usebenzise indlela yokusabela
  • Amathiphu wamathuluzi nama-popover okubonisa nokubeka (kudinga futhi i-Popper.js )
  • 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, 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>

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.

  • Landela @getbootstrap ku-Twitter .
  • Funda futhi ubhalisele Ibhulogi Ye-Bootstrap Esemthethweni .
  • Xoxa nozakwethu be-Bootstrappers ku-IRC. Kuseva irc.freenode.net, ##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.