Qalisa nge-Bootstrap

I-Bootstrap iyikhithi yamathuluzi engaphambili enamandla, egcwele izici. Yakha noma yini-kusuka ku-prototype kuya ekukhiqizweni-ngamaminithi.

Kuleli khasi

Ukuqala okusheshayo

Qalisa ngokufaka i-CSS elungele ukukhiqiza ye-Bootstrap ne-JavaScript nge-CDN ngaphandle kwesidingo sanoma yiziphi izinyathelo zokwakha. Ibone isebenza ngale demo ye-Bootstrap CodePen .

Dala ifayela elisha index.htmlkumpande yephrojekthi yakho. Faka <meta name="viewport">umaka kanye nokuziphatha okufanele kokuphendula kumadivayisi eselula.

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

Faka i-CSS ye-Bootstrap ne-JS. Beka <link>ithegi ku- <head>CSS yethu, kanye <script>nethegi yenqwaba yethu ye-JavaScript (okuhlanganisa i-Popper yokubeka okokwehlayo, ama-popper, namathiphu wamathuluzi) ngaphambi kokuvalwa </body>. Funda kabanzi mayelana nezixhumanisi zethu ze- CDN .

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

Ungakwazi futhi ukufaka i- Popper kanye ne-JS yethu ngokuhlukana. Uma ungahlelile ukusebenzisa okwehliswayo, ama-popvers, noma izeluleko zamathuluzi, yonga amakhilobhayithi athile ngokungafaki i-Popper.

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

Sawubona Mhlaba! Vula ikhasi esipheqululini sakho ozikhethele sona ukuze ubone ikhasi lakho le-Bootstrapped. Manje ungaqala ukwakha nge-Bootstrap ngokwakha esakho isakhiwo , wengeze inqwaba yezingxenye , futhi usebenzise izibonelo zethu ezisemthethweni .

Izixhumanisi ze-CDN

Njengereferensi, nazi izixhumanisi zethu eziyinhloko ze-CDN.

Incazelo	I-URL
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`

Ungasebenzisa futhi i-CDN ukuze ulande noma yiziphi ezinye izakhiwo zethu ezengeziwe ezisohlwini lwekhasi Lokuqukethwe .

Izinyathelo ezilandelayo

Funda okwengeziwe mayelana nezilungiselelo ezibalulekile zomhlaba jikelele ezisetshenziswa yi-Bootstrap.
Funda mayelana nokuthi yini efakwe ku-Bootstrap esigabeni sokuqukethwe kanye nohlu lwezingxenye ezidinga i-JavaScript ngezansi.
Udinga amandla engeziwe? Cabangela ukwakha nge-Bootstrap ngokufaka amafayela omthombo ngomphathi wephakheji .
Ufuna ukusebenzisa i-Bootstrap njengemojula nge- <script type="module">? Sicela ubhekisele ekusebenziseni kwethu i-Bootstrap njengengxenye yemojuli .

Izingxenye ze-JS

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
I-Navbar yokwelula ama-plugin ethu okugoqa kanye ne-Offcanvas ukuze kusetshenziswe ukuziphatha okusabelayo
I-Navs nge-plugin ye-Tab yokuguqula amafasitelana wokuqukethwe
Ama-offcanvases okubonisa, ukuma, nokuziphatha kokuskrola
I-Scrollspy ngokuziphatha kokuskrola nezibuyekezo zokuzulazula
Amathosti okubonisa nokucashisa
Amathuluzi nama-popover okubonisa nokubeka (kudinga futhi i- Popper )

Ama-globals abalulekile

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

HTML5 idokhumenti

I-Bootstrap idinga ukusetshenziswa kwe-HTML5 doctype. Ngaphandle kwayo, uzobona isitayela esihlekisayo nesingaphelele.

<!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 ekusebenzeni ekuqaleni okusheshayo .

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 .
Buza futhi uhlole Izingxoxo zethu ze-GitHub .
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.