in English

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, umthombo ovulekileyo we-CDN wasimahla. Usebenzisa umphathi wepakethe okanye ufuna ukukhuphela iifayile zomthombo? Yiya kwiphepha lokukhuphela .

CSS

Khuphela-uncamathisele 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Uninzi lwamacandelo ethu afuna ukusetyenziswa kweJavaScript ukusebenza. Ngokukodwa, bafuna i - jQuery , iPopper , kunye neeplagi zethu zeJavaScript. Sisebenzisa i -jQuery's slim build , kodwa inguqulelo epheleleyo nayo iyaxhaswa.

Beka enye yezi zilandelayo kufutshane nesiphelo <script>samaphepha akho, kanye phambi kwethegi yokuvala </body>, ukuze zikwazi. I-jQuery kufuneka ize kuqala, emva koko iPopper, kunye neeplagi zethu zeJavaScript.

Inyanda

Bandakanya yonke iplagi ye-Bootstrap JavaScript kunye nenye yeenqwaba zethu ezimbini. Zombini bootstrap.bundle.jskwaye bootstrap.bundle.min.jszibandakanya iPopper kwiingcebiso zethu zezixhobo kunye neepopovers, kodwa hayi i - jQuery . Bandakanya i-jQuery kuqala, emva koko i-Bootstrap JavaScript bundle. Ngolwazi oluthe kratya malunga nokuba kufakwe ntoni kwi-Bootstrap, nceda ubone icandelo lethu leziqulatho .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Amacandelo

Ngaba unomdla wokuba zeziphi izinto ezifuna ngokucacileyo i-jQuery, iJavaScript yethu, kunye nePopper? Cofa ikhonkco lamacandelo angezantsi. Ukuba awuqinisekanga malunga nolwakhiwo lwephepha, 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-Scrollspy yokuziphatha kokuskrola kunye nohlaziyo lokukhangela
  • Iingcebiso zezixhobo kunye neepopovers zokubonisa kunye nokubeka (ikwafuna iPopper )

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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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.

  • Funda kwaye ubhalise kwiBlog ye-Bootstrap esemthethweni .
  • Thetha nabanye ooBootstrappers kwi-IRC. Kumncedisi irc.libera.chat, #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.

CSPs kunye nee-SVG ezizinzisiweyo

Izinto ezininzi ze-Bootstrap zibandakanya ii-SVG ezizinzisiweyo kwi-CSS yethu ukwenza isimbo samalungu ngokungaguqukiyo kwaye ngokulula kuzo zonke izikhangeli kunye nezixhobo. Kwimibutho enoqwalaselo olungqongqo lweCSP , sibhale yonke imizekelo yee-SVG zethu ezizinzisiweyo (zonke zisetyenziswa kusetyenziswa background-image) ukuze ukwazi ukuphonononga ngokucokisekileyo ukhetho lwakho.

Ngokusekwe kwincoko yasekuhlaleni , ezinye iinketho zokulungisa oku kweyakho ikhowudi iquka ukutshintsha ii-URL ngempahla ebanjwe ekuhlaleni, ukususa imifanekiso kunye nokusebenzisa imifanekiso engaphakathi (akunakwenzeka kuwo onke amacandelo), kunye nokuguqula i-CSP yakho. Isindululo sethu kukuphonononga ngononophelo imigaqo-nkqubo yakho yokhuseleko kwaye uthathe isigqibo ngeyona ndlela iphambili, ukuba kuyimfuneko.