Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

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.

A wannan shafi

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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

Yawancin abubuwan haɗinmu suna buƙatar amfani da JavaScript don aiki. Musamman, suna buƙatar plugins na mu na JavaScript da Popper . Sanya ɗaya daga cikin waɗannan <script>s kusa da ƙarshen shafukanku, daidai kafin alamar rufewa </body>, don kunna su.

Daure

Haɗa kowane plugin ɗin Bootstrap JavaScript da dogaro tare da ɗayan mu guda biyu. Dukansu bootstrap.bundle.jskuma bootstrap.bundle.min.jssun haɗa da Popper don tukwicinmu na kayan aikinmu da popovers. 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/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Modules

Idan kuna amfani <script type="module">, da fatan za a koma zuwa ta amfani da Bootstrap azaman sashin module .

Abubuwan da aka gyara

Kuna son sanin waɗanne sassa ne ke buƙatar JavaScript da Popper ɗin mu a sarari? Danna mahaɗin abubuwan nuna abubuwan da ke ƙasa. Idan kwata-kwata ba ku da tabbas game da tsarin shafi na gaba ɗaya, 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
  • Toasts don nunawa da korarwa
  • Nasihun kayan aiki da popovers don nunawa da sakawa (kuma yana buƙatar Popper )
  • Scrollspy don halayen gungurawa da sabunta kewayawa

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

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Don matakai na gaba, ziyarci takaddun Layout ko misalan mu na hukuma don fara tsara abubuwan da ke cikin rukunin yanar gizon ku da abubuwan haɗin gwiwa.

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

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-5).
  • Masu haɓakawa yakamata suyi amfani da kalmar maɓalli bootstrapakan fakiti waɗanda ke canzawa ko ƙarawa zuwa ayyukan Bootstrap lokacin 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.