Source

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, wanda jama'a suka bayar kyauta a jsDelivr. Yin amfani da mai sarrafa fakiti ko buƙatar zazzage fayilolin tushen? Je 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Yawancin abubuwan haɗinmu suna buƙatar amfani da JavaScript don aiki. Musamman, suna buƙatar jQuery , Popper.js , da namu plugins JavaScript. Sanya waɗannan <script>s kusa da ƙarshen shafukanku, dama kafin alamar rufewa </body>, don kunna su. jQuery dole ne ya fara zuwa, sannan Popper.js, sannan kuma plugins ɗin mu na JavaScript.

Muna amfani da ginin siriri na jQuery , amma ana kuma goyan bayan cikakken sigar.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Ina sha'awar waɗanne abubuwa ne ke buƙatar jQuery, JS ɗinmu, da Popper.js 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.js )
  • Modal don nunawa, sakawa, da halayen gungurawa
  • Navbar don tsawaita plugin ɗinmu na Rushewa don aiwatar da halayen amsawa
  • Nasihun kayan aiki da popovers don nunawa da sakawa (kuma yana buƙatar Popper.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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.

  • Bi @getbootstrap akan Twitter .
  • Karanta kuma ku yi rajista zuwa Bulogin Bootstrap na hukuma .
  • Yi taɗi tare da 'yan'uwan Bootstrappers a cikin IRC. A kan irc.freenode.netuwar 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.