Qalisa ngeBootstrap
I-Bootstrap sisixhobo esinamandla, esipakishwe ngaphambili. Yakha nantoni na-ukusuka kwiprototype ukuya kwimveliso-ngemizuzu.
Ukuqala ngokukhawuleza
Qalisa ngokubandakanya i-Bootstrap elungele imveliso ye-CSS kunye neJavaScript nge-CDN ngaphandle kwesidingo sawo nawaphi na amanyathelo okwakha. Yibone xa usebenza nale Bootstrap CodePen demo .
-
Yenza ifayile entsha
index.html
kwingcambu yeprojekthi yakho. Bandakanya<meta name="viewport">
ithegi kunye nokuziphatha okufanelekileyo kokuphendula kwizixhobo eziphathwayo.<!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>
-
Bandakanya i-CSS ye-Bootstrap kunye ne-JS. Beka
<link>
ithegi kwi-<head>
CSS yethu, kunye<script>
nethegi yethu yeJavaScript bundle (kubandakanya iPopper yokubeka indawo eyehlayo, iipopu, kunye neengcebiso zesixhobo) phambi kokuvalwa</body>
. Funda ngakumbi malunga namakhonkco ethu e-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>
Ungabandakanya iPopper kunye neJS yethu ngokwahlukeneyo. Ukuba awucwangcisi ukusebenzisa i-dropdowns, popovers, okanye itooltips, gcina ezinye iikhilobhayithi ngokungaquki iPopper.
<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>
-
Molo Lizwe! Vula iphepha kwisikhangeli sakho ozikhethileyo ukuze ubone iphepha lakho le-Bootstrapped. Ngoku ungaqala ukwakha ngeBootstrap ngokwenza eyakho uyilo , ukongeza amacandelo amaninzi , kunye nokusebenzisa imizekelo yethu esemthethweni .
Amakhonkco e-CDN
Njengereferensi, nazi amakhonkco ethu aphambili e-CDN.
Inkcazo | 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 kwakhona i-CDN ukulanda naluphi na ulwakhiwo lwethu olongezelelweyo oludweliswe kwiphepha leMixholo .
Amanyathelo alandelayo
-
Funda ngakumbi malunga nolunye useto olubalulekileyo lwemekobume yehlabathi olusetyenziswa yiBootstrap.
-
Funda malunga nokubandakanywa kwiBootstrap kwicandelo lethu lemixholo kunye noluhlu lwamacandelo afuna iJavaScript engezantsi.
-
Ngaba ufuna amandla angakumbi? Cinga ngokwakha ngeBootstrap ngokubandakanya iifayile zomthombo ngokusebenzisa umphathi wepakethe .
-
Ujonge ukusebenzisa iBootstrap njengemodyuli ene
<script type="module">
? Nceda ubhekisele ekusebenziseni kwethu i-Bootstrap njengecandelo lemodyuli .
Amacandelo e-JS
Ngaba unomdla wokuba zeziphi izinto ezifuna ngokucacileyo iJavaScript yethu kunye nePopper? Cofa ikhonkco lamacandelo angezantsi. Ukuba awuqinisekanga kwaphela malunga nesakhiwo sephepha ngokubanzi, qhubeka ufunda umzekelo wetemplate yephepha.
Bonisa amalungu afuna iJavaScript
- Izaziso zokugxotha
- Amaqhosha okuguqula iimeko kunye nokukhangela ibhokisi/umsebenzi werediyo
- I-Carousel yazo zonke izilayidi zokuziphatha, ulawulo, kunye nezalathi
- Ukugoqa ukuze uguqule ukubonakala komxholo
- Ukwehla kokubonisa kunye nokubeka (ikwafuna iPopper )
- Iimodyuli zokubonisa, ukubeka, kunye nokuziphatha kokuskrola
- I-Navbar yokwandisa iiplagi zethu zokuLahla kunye ne-Offcanvas ukuphumeza ukuziphatha okuphendulayo
- I-Navs nge-Tab plugin yokuguqula iipaneli zomxholo
- I-offcanvases yokubonisa, ukubeka, kunye nokuziphatha kokuskrola
- I-Scrollspy yokuziphatha kokuskrola kunye nohlaziyo lokukhangela
- Iithowusti zokubonisa kunye nokugxotha
- Iingcebiso zezixhobo kunye neepopovers zokubonisa kunye nokubeka (ikwafuna iPopper )
Iiglobals ezibalulekileyo
I-Bootstrap isebenzisa isitayile esibalulekileyo sehlabathi kunye noseto, zonke eziphantse zibe zilungiselelwe ngokukodwa ukuqheleka kwezitayile zebrawuza. Masingene ngaphakathi.
HTML5 doctype
I-Bootstrap ifuna ukusetyenziswa kwe-HTML5 doctype. Ngaphandle kwayo, uya kubona isitayile esimnandi nesingaphelelanga.
<!doctype html>
<html lang="en">
...
</html>
Isabele meta tag
I-Bootstrap iphuhliswa ngeselfowuni kuqala , isicwangciso apho silungiselela ikhowudi yezixhobo eziphathwayo kuqala kwaye emva koko sinyuse amacandelo njengoko kuyimfuneko kusetyenziswa imibuzo yemidiya yeCSS. Ukuqinisekisa unikezelo olululo kunye nokuchukumisa ukusondeza kuzo zonke izixhobo, yongeza i-meta tag ephendulayo kwindawo yakho <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Unokubona umzekelo wale nto kwisenzo kwisiqalo esikhawulezayo .
Ubungakanani bebhokisi
Ukufumana ukulinganisa okuthe ngqo kwi-CSS, sitshintsha box-sizing
ixabiso lehlabathi ukusuka content-box
kwi border-box
. Oku kuqinisekisa padding
ukuba akuchaphazeli ububanzi obubaliweyo bokugqibela bento, kodwa kunokubangela iingxaki ngesoftware yomntu wesithathu efana neeMephu zikaGoogle kunye neNjini yokuKhangela kaGoogle.
Ngezihlandlo ezinqabileyo kufuneka uyihoxise, sebenzisa into efana nale ilandelayo:
.selector-for-some-widget {
box-sizing: content-box;
}
Ngolu lwazi lungasentla, izinto ezibekwe kwindlwane-kuquka umxholo owenziweyo nge ::before
-- ::after
zonke ziya kudla ilifa box-sizing
okukhankanyiweyo .selector-for-some-widget
.
Funda ngakumbi malunga nemodeli yebhokisi kunye nokulinganisa kwiCSS Tricks .
Qalisa kwakhona
Kunikezelo oluphuculweyo lwesikhangeli esinqamlezayo, sisebenzisa ukuQalisa kwakhona ukulungisa ukungangqinelani kwizikhangeli zonke kunye nezixhobo ngelixa sibonelela ngokusetha kwakhona okunoluvo olungakumbi kwizinto eziqhelekileyo zeHTML.
Uluntu
Hlala usexesheni kuphuhliso lweBootstrap kwaye ufikelele kuluntu ngezi zixhobo ziluncedo.
- Funda kwaye ubhalise kwiBlog ye-Bootstrap esemthethweni .
- Buza kwaye ujonge iingxoxo zethu zeGitHub .
- Thetha nabanye ooBootstrappers kwi-IRC. Kumncedisi
irc.libera.chat
,#bootstrap
kwitshaneli. - Uncedo lokuphumeza lunokufunyanwa kwi-Stack Overflow (iphawulwe
bootstrap-5
). - Abaphuhlisi kufuneka basebenzise igama elingundoqo
bootstrap
kwiipakethe eziguqula okanye zongeza kumsebenzi we-Bootstrap xa usasazwa nge- npm okanye iindlela zonikezelo ezifanayo zokufumana okuphezulu.
Unokulandela @getbootstrap kwi-Twitter ngentlebendwane yamva nje kunye neevidiyo zomculo ezothusayo.