Gabatarwa

Fara da Bootstrap, mafi shaharar tsarin duniya don gina masu amsawa, shafukan farko na wayar hannu, tare da jsDelivr da shafin farawa na samfuri.

Da sauri farawa

Kuna neman ƙara Bootstrap da sauri zuwa aikin ku? Yi amfani da jsDelivr, CDN bude tushen kyauta. Yin amfani da mai sarrafa fakiti ko buƙatar zazzage fayilolin tushen? Shugaban zuwa shafin zazzagewa .

CSS

Kwafi-manna rubutun <link>a cikin naku <head>kafin duk sauran zanen gado don loda CSS ɗin mu.

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

JS

Yawancin abubuwan haɗinmu suna buƙatar amfani da JavaScript don aiki. Musamman, suna buƙatar jQuery , Popper , da namu plugins JavaScript. Muna amfani da ginin siriri na jQuery , amma ana kuma goyan bayan cikakken sigar.

Sanya ɗaya daga cikin waɗannan <script>s kusa da ƙarshen shafukanku, daidai kafin alamar rufewa </body>, don kunna su. jQuery dole ne ya zo da farko, sannan Popper, sannan plugins ɗin mu na JavaScript.

Daure

Haɗa kowane plugin ɗin Bootstrap JavaScript tare da ɗayan mu guda biyu. Dukansu bootstrap.bundle.jskuma bootstrap.bundle.min.jssun haɗa da Popper don kayan aikin mu da popovers, amma ba jQuery ba . Haɗa jQuery da farko, sannan kumin Bootstrap JavaScript. Don ƙarin bayani game da abin da aka haɗa a cikin Bootstrap, da fatan za a duba sashin abubuwan da ke ciki .

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

Na dabam

Idan kun yanke shawarar tafiya tare da bayani daban-daban na rubutun, Popper dole ne ya fara zuwa (idan kuna amfani da kayan aiki ko popovers), sannan kuma plugins ɗin mu na JavaScript.

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

Abubuwan da aka gyara

Ina sha'awar waɗanne sassa ne ke buƙatar jQuery, JavaScript ɗin mu, da Popper? Danna mahaɗin abubuwan nuna abubuwan da ke ƙasa. Idan ba ku da tabbas game da tsarin shafin, ci gaba da karantawa don samfurin shafi na misali.

Nuna abubuwan da ke buƙatar JavaScript

Faɗakarwa don korar
Maɓallai don jujjuya jahohi da aikin akwati/ rediyo
Carousel don duk halaye na zamewa, sarrafawa, da masu nuni
Rushewa don jujjuya ganuwa na abun ciki
Zazzagewa don nunawa da sakawa (kuma yana buƙatar Popper )
Modal don nunawa, sakawa, da halayen gungurawa
Navbar don tsawaita plugin ɗinmu na Rushewa don aiwatar da halayen amsawa
Scrollspy don halayen gungurawa da sabunta kewayawa
Nasihun kayan aiki da popovers don nunawa da sakawa (kuma yana buƙatar Popper )

Samfurin farawa

Tabbatar cewa an saita shafukanku tare da sabbin ƙira da ƙa'idodin haɓakawa. Wannan yana nufin yin amfani da nau'in HTML5 kuma ya haɗa da alamar ra'ayi mai mahimmanci don halayen da suka dace. Haɗa shi duka kuma shafukanku suyi kama da haka:

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

Wannan shine abin da kuke buƙata don buƙatun shafi gabaɗaya. Ziyarci takardun Layout ko misalan mu na hukuma don fara tsara abubuwan da ke cikin rukunin yanar gizon ku da abubuwan da aka gyara.

Muhimmancin duniya

Bootstrap yana amfani da ɗimbin mahimman salo na duniya da saituna waɗanda za ku buƙaci sani lokacin amfani da su, duk waɗanda kusan an keɓance su don daidaita salon giciye. Mu nutse a ciki.

HTML 5 doka

Bootstrap yana buƙatar amfani da nau'in HTML5. Idan ba tare da shi ba, za ku ga wasu salo mai ban sha'awa da ba su cika cika ba, amma gami da hakan bai kamata ya haifar da ɓarna ba.

<!doctype html>
<html lang="en">
  ...
</html>

Meta tag mai amsawa

Bootstrap an haɓaka wayar hannu da farko , dabarun da a cikinta muke haɓaka lamba don na'urorin hannu da farko sannan mu haɓaka abubuwan da suka dace kamar yadda ya cancanta ta amfani da tambayoyin kafofin watsa labarai na CSS. Don tabbatar da ma'ana mai kyau da taɓa zuƙowa ga duk na'urori, ƙara alamar ra'ayi mai amsawa zuwa ga <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Kuna iya ganin misalin wannan a aikace a cikin samfuri mai farawa .

Girman akwatin

Don ƙarin girman kai tsaye a cikin CSS, muna canza box-sizingƙimar duniya daga content-boxzuwa border-box. Wannan yana tabbatar paddingda baya shafar faɗin ƙididdiga na ƙarshe na wani kashi, amma yana iya haifar da matsala tare da wasu software na ɓangare na uku kamar Google Maps da Google Custom Search Engine.

A wani lokaci da ba kasafai kana buƙatar soke shi ba, yi amfani da wani abu kamar haka:

.selector-for-some-widget {
  box-sizing: content-box;
}

Tare da snippet na sama, abubuwan gida-ciki har da abubuwan da aka ƙirƙira ta hanyar ::beforekuma ::after- duk za su gaji ƙayyadaddun box-sizingdon haka .selector-for-some-widget.

Ƙara koyo game da samfurin akwatin da girman girman a CSS Tricks .

Sake yi

Don ingantacciyar ma'anar mai lilo ta giciye, muna amfani da Sake yi don gyara rashin daidaituwa a tsakanin masu bincike da na'urori yayin samar da ƙarin sake saiti na ra'ayi zuwa abubuwan HTML gama gari.

Al'umma

Ci gaba da kasancewa da zamani kan ci gaban Bootstrap kuma isa ga al'umma da waɗannan albarkatu masu taimako.

Karanta kuma ku yi rajista zuwa Bulogin Bootstrap na hukuma .
Yi taɗi tare da 'yan'uwan Bootstrappers a cikin IRC. A kan irc.libera.chatuwar garken, a cikin #bootstraptashar.
Ana iya samun taimakon aiwatarwa a Stack Overflow (tagged bootstrap-4).
Masu haɓakawa yakamata su yi amfani da kalmar maɓalli bootstrapakan fakiti waɗanda ke canzawa ko ƙara zuwa ayyukan Bootstrap yayin rarraba ta npm ko hanyoyin isarwa makamantan don iyakar ganowa.

Hakanan kuna iya bin @getbootstrap akan Twitter don sabbin tsegumi da bidiyoyin kiɗa masu ban mamaki.

CSPs da shigar SVGs

Abubuwan abubuwan Bootstrap da yawa sun haɗa da shigar SVGs a cikin CSS ɗinmu zuwa salon abubuwan da aka gyara akai-akai kuma cikin sauƙi a cikin masu bincike da na'urori. Ga ƙungiyoyi masu tsauraran saitunan CSP , mun tattara duk misalan SVGs ɗin mu (dukkan su ana amfani da su ta hanyar background-image) don haka za ku iya ƙarin nazarin zaɓuɓɓukanku.

Maɓallin rufewa (amfani da faɗakarwa da tsari)
Akwatunan bincike na al'ada da maɓallan rediyo
Siffar maɓalli
Gumakan tabbatar da tsari
Zaɓin menu na al'ada
Gudanar da Carousel
Maɓallin kunna Navbar

Dangane da tattaunawar al'umma , wasu zaɓuɓɓuka don magance wannan a cikin naku codebase sun haɗa da maye gurbin URLs tare da kadarorin gida, cire hotuna da yin amfani da hotunan layi (ba zai yiwu ba a duk abubuwan da aka gyara), da kuma gyara CSP ɗin ku. Shawarar mu ita ce a bita a hankali kan manufofin tsaro da yanke shawara kan hanya mafi kyau ta gaba, idan ya cancanta.