Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
in English

Intshayelelo

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

Kweli phepha

Ukuqala ngokukhawuleza

Ngaba ujonge ukongeza ngokukhawuleza iBootstrap kwiprojekthi yakho? Sebenzisa i-jsDelivr, umthombo ovulekileyo we-CDN wasimahla. 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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Uninzi lwamacandelo ethu afuna ukusetyenziswa kweJavaScript ukusebenza. Ngokukodwa, zifuna ezethu iiplagi zeJavaScript kunye nePopper . Beka enye yezi zilandelayo kufutshane nesiphelo <script>samaphepha akho, kanye phambi kwethegi yokuvala </body>, ukuze zikwazi.

Inyanda

Bandakanya yonke iplagi ye-Bootstrap yeJavaScript kunye nokuxhomekeka kwenye yeenyanda zethu ezimbini. Zombini bootstrap.bundle.jskwaye bootstrap.bundle.min.jszibandakanya iPopper kwiingcebiso zethu zezixhobo kunye neepopovers. Ngolwazi oluthe kratya malunga nokuba kufakwe ntoni kwi-Bootstrap, nceda ubone icandelo lethu leziqulatho .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Yahlula

Ukuba uthatha isigqibo sokuhamba nesisombululo seskripthi esahlukileyo, iPopper kufuneka ize kuqala (ukuba usebenzisa i-tooltips okanye i-popovers), kwaye ke iiplagi zethu zeJavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Iimodyuli

Ukuba uyasebenzisa <script type="module">, nceda ubhekisele ekusebenziseni kwethu i-Bootstrap njengecandelo lemodyuli .

Amacandelo

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 iplagi yethu yokuLahla ukuze kuphunyezwe indlela yokuziphatha ephendulayo
  • I-offcanvases yokubonisa, ukubeka, kunye nokuziphatha kokuskrola
  • Iithowusti zokubonisa kunye nokugxotha
  • Iingcebiso zezixhobo kunye neepopovers zokubonisa kunye nokubeka (ikwafuna iPopper )
  • 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">

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ngamanyathelo alandelayo, ndwendwela uYilo lwamaxwebhu 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">

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

  • Funda kwaye ubhalise kwiBlog ye-Bootstrap esemthethweni .
  • Thetha nabanye ooBootstrappers kwi-IRC. Kumncedisi irc.libera.chat, #bootstrapkwitshaneli.
  • Uncedo lokuphumeza lunokufumaneka kwi-Stack Overflow (iphawulwe bootstrap-5).
  • Abaphuhlisi kufuneka basebenzise igama elingundoqo bootstrapkwiipakethe 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.