Source

Intshayelelo

Qalisa ngeBootstrap, esona sikhokelo sidumileyo kwihlabathi sokwakha iisayithi eziphendulayo, eziphathwayo zokuqala, ngejsDelivr kunye nephepha lokuqala letemplate.

Ukuqala ngokukhawuleza

Ngaba ujonge ukongeza ngokukhawuleza iBootstrap kwiprojekthi yakho? Sebenzisa i-jsDelivr, ebonelelwe simahla ngabantu base-jsDelivr. Usebenzisa umphathi wepakethe okanye ufuna ukukhuphela iifayile zomthombo? Yiya kwiphepha lokukhuphela.

CSS

Khuphela-ncamathisela isitayile <link>sakho <head>phambi kwawo onke amanye amaphepha ukuze ulayishe iCSS yethu.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Uninzi lwamacandelo ethu afuna ukusetyenziswa kweJavaScript ukusebenza. Ngokukodwa, zifuna i - jQuery , Popper.js , kunye neeplagi zethu zeJavaScript. Beka oku kulandelayo <script>kufutshane nesiphelo samaphepha akho, kanye phambi kwethegi yokuvala </body>, ukuze bakwazi. I-jQuery kufuneka ize kuqala, emva koko i-Popper.js, kunye neeplagi zethu zeJavaScript.

Sisebenzisa i -jQuery's slim build , kodwa inguqulelo epheleleyo nayo iyaxhaswa.

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

Ngaba ufuna ukwazi ukuba zeziphi izinto ezifuna ngokucacileyo i-jQuery, i-JS yethu, kunye ne-Popper.js? Cofa ikhonkco lamacandelo angezantsi. Ukuba awuqinisekanga kwaphela malunga nesakhiwo sephepha ngokubanzi, qhubeka ufunda umzekelo wetemplate yephepha.

Yethu bootstrap.bundle.jskwaye bootstrap.bundle.min.jsiquka iPopper , kodwa hayi i - jQuery . Ngolwazi oluthe kratya malunga nokuba kufakwe ntoni kwi-Bootstrap, nceda ubone icandelo lethu leziqulatho .

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.js )
  • Iimodyuli zokubonisa, ukubeka, kunye nokuziphatha kokuskrola
  • I-Navbar yokwandisa iplagi yethu yokuLahla ukuze kuphunyezwe indlela yokuziphatha ephendulayo
  • Iingcebiso zezixhobo kunye neepopovers zokubonisa kunye nokubeka (ikwafuna iPopper.js )
  • I-Scrollspy yokuziphatha kokuskrola kunye nohlaziyo lokukhangela

Itemplate yokuqalisa

Qinisekisa ukuba amaphepha akho amiselwe ngoyilo lwamva nje kunye nemigangatho yophuhliso. Oko kuthetha ukusebenzisa i-HTML5 doctype kunye nokubandakanya i-meta tag ye-viewport yeendlela zokuziphatha ezifanelekileyo zokuphendula. Yidibanise yonke kwaye amaphepha akho kufuneka ajongeke ngolu hlobo:

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

Yiloo nto kuphela oyifunayo kwiimfuno zephepha ngokubanzi. Ndwendwela amaxwebhu oYilo okanye imizekelo yethu esemthethweni ukuqalisa ukubeka umxholo wesayithi yakho kunye nezixhobo.

Iiglobals ezibalulekileyo

I-Bootstrap isebenzisa isitayile esibalulekileyo sehlabathi kunye noseto oya kufuneka ukuba ulumkele xa uyisebenzisa, zonke eziphantse zibe zilungiselelwe ngokukodwa ukwenziwa kwesiqhelo kwezitayile zebrawuza . Masingene ngaphakathi.

HTML5 doctype

I-Bootstrap ifuna ukusetyenziswa kwe-HTML5 doctype. Ngaphandle kwayo, uya kubona isitayile esimnandi esingaphelelanga, kodwa ukubandakanya akufuneki kubangele naziphi na iihiccups.

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

Ungawubona umzekelo wale nto kwi template yokuqalisa .

Ubungakanani bebhokisi

Ukufumana ukulinganisa okuthe ngqo kwi-CSS, sitshintsha box-sizingixabiso lehlabathi ukusuka content-boxkwi border-box. Oku kuqinisekisa paddingukuba abuchaphazeli 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-- ::afterzonke ziya kudla ilifa box-sizingokukhankanyiweyo .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.

  • Landela @getbootstrap kwi-Twitter .
  • Funda kwaye ubhalise kwiBlog ye-Bootstrap esemthethweni .
  • Thetha nabanye ooBootstrappers kwi-IRC. Kumncedisi irc.freenode.net, ##bootstrapkwitshaneli.
  • Uncedo lokuphumeza lunokufunyanwa kwi-Stack Overflow (iphawulwe bootstrap-4).
  • Abaphuhlisi kufuneka basebenzise igama elingundoqo bootstrapkwiipakethe ezitshintsha 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.