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

Fara da Bootstrap

Bootstrap kayan aiki ne mai ƙarfi, cike da fasali na gaba. Gina wani abu - daga samfuri zuwa samarwa - a cikin mintuna.

A wannan shafi

Da sauri farawa

Fara ta haɗa da CSS na shirye-shiryen Bootstrap da JavaScript ta CDN ba tare da buƙatar kowane matakan ginawa ba. Duba shi a aikace tare da wannan Bootstrap CodePen demo .


  1. Ƙirƙiri sabon index.htmlfayil a tushen aikin ku. Haɗa <meta name="viewport">alamar kuma don kyakkyawar amsawa a cikin na'urorin hannu.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. Haɗa Bootstrap's CSS da JS. Sanya <link>alamar a cikin <head>CSS ɗin mu, da kuma <script>tambarin gunkin JavaScript ɗin mu (ciki har da Popper don sakawa zazzagewa, poppers, da kayan aiki) kafin rufewa </body>. Ƙara koyo game da hanyoyin haɗin yanar gizon mu na CDN .

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

    Hakanan zaka iya haɗawa da Popper da JS ɗin mu daban. Idan baku yi shirin amfani da zazzagewa ba, popovers, ko tukwici na kayan aiki, adana wasu kilobytes ta ban haɗa da Popper ba.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

  3. Sannu Duniya! Bude shafin a cikin burauzar da kuka zaba don ganin shafinku na Bootstrapped. Yanzu zaku iya fara gini tare da Bootstrap ta hanyar ƙirƙirar shimfidar ku , ƙara abubuwa da yawa , da amfani da misalan mu na hukuma .

Kamar yadda ake tunani, ga manyan hanyoyin haɗin yanar gizon mu na CDN.

Bayani URL
CSS https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

Hakanan zaka iya amfani da CDN don ɗauko kowane ƙarin ginin mu da aka jera a cikin Shafin Abubuwan ciki .

Matakai na gaba

JS abubuwan

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 plugins ɗinmu na Rushewa da Offcanvas don aiwatar da ɗabi'un amsawa
  • Navs tare da plugin ɗin Tab don jujjuya fatun abun ciki
  • Wuraren waje don nunawa, sakawa, da halayen gungurawa
  • Scrollspy don halayen gungurawa da sabunta kewayawa
  • Toasts don nunawa da korarwa
  • Nasihun kayan aiki da popovers don nunawa da sakawa (kuma yana buƙatar Popper )

Muhimmancin duniya

Bootstrap yana amfani da ɗimbin mahimman salo da saituna na duniya, waɗanda kusan 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. Ba tare da shi ba, za ku ga wasu salo mai ban sha'awa da rashin cikawa.

<!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 cikin aiki a cikin saurin 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

Kasance da sabuntawa akan ci gaban Bootstrap kuma isa ga al'umma da waɗannan albarkatu masu taimako.

  • Karanta kuma ku yi rajista zuwa Bulogin Bootstrap na hukuma .
  • Tambayi kuma bincika Tattaunawar GitHub .
  • 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.