Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
in English

Bootstrap irraa jalqabi

Bootstrap meeshaa fuulduraa humna guddaa qabu, kan amaloota hedduu qabudha. Waan kamiyyuu—prototype irraa kaasee hanga oomishaatti—daqiiqaa keessatti ijaari.

Fuula kana irratti

Saffisaan jalqabuu

Tarkaanfiiwwan ijaarsaa kamiyyuu osoo hin barbaachisin CSS fi JavaScript Bootstrap oomishaaf qophaa'e karaa CDN dabaluudhaan jalqabi. Bootstrap CodePen demo kanaan qabatamaan ilaalaa .


  1. index.htmlHundee piroojektii kee keessatti faayilii haaraa uumi . Meeshaalee moobaayilaa keessatti amala deebii sirrii<meta name="viewport"> ta'eef akkasumas mallattoo hammachiisi .

    <!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. Bootstrap's CSS fi JS dabali. Mallattoo CSS keenyaaf <link>keessa kaa'i , fi mallattoo baandaa JaavaScript keenyaaf (Popper dabalatee bakka bu'oota, poppers, fi gorsa meeshaa) cufamuu dura . Waa'ee hidhannoo CDN keenyaa caalaatti baradhu .<head><script></body>

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

    Akkasumas Popper fi JS keenya addaan baasuu dandeessu. Yoo dropdowns, popovers, ykn tooltips fayyadamuuf hin karoorfanne, Popper hin daballee kiiloobaayitii tokko tokko qusadhu.

    <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. Akkam jirtu addunyaa! Fuula Bootstrapped keessan ilaaluuf fuula browser filattan keessaa bani. Amma Bootstrap wajjin ijaaruu jalqabuu dandeessa , haala mataa keetii uumuudhaan , qaamolee kudhanootaan lakkaa'aman dabaluudhaan , fi fakkeenyota ofiisaa keenya fayyadamuun .

Akka wabiitti, hidhannoowwan CDN keenya jalqabaa kunooti.

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

Akkasumas ijaarsa dabalataa keenya fuula Qabiyyee keessatti tarreeffame kamiyyuu fiduuf CDN fayyadamuu dandeessa .

Tarkaanfiiwwan itti aanan

Qaamolee JS

Qaamolee kamtu ifatti JavaScript fi Popper keenya barbaada? Link show components jedhu armaan gadii cuqaasaa. Yoo waa'ee caasaa fuula waliigalaa tasumaa mirkanaa'aa hin taane, unkaa fuula fakkeenyaaf dubbisuu itti fufi.

Qaamolee JaavaScript barbaadan agarsiisi
  • Akeekkachiisa hojii irraa ari'amuu
  • Qabduu haalata jijjiiruu fi sanduuqa filannoo/hojii raadiyoo
  • Kaarooseelii amala islaayidii, too'annoo fi agarsiistota hundaaf
  • Mul'achuu qabiyyee jijjiiruuf kuffisi
  • Dropdowns agarsiisuu fi bakka kaa'uuf (akkasumas Popper barbaada ) .
  • Moodaalota agarsiisa, iddoo, fi amala tarree
  • Navbar amala deebii kennuu hojiirra oolchuuf pilaagiinii keenya Collapse fi Offcanvas dheeressuuf
  • Navs kan Tab plugin waliin foddaa qabiyyee jijjiiruuf
  • Offcanvases agarsiisuuf, iddoo kaa'uu fi amala tarreef
  • Amala qaxxaamuraa fi fooyya'iinsa navigeeshiniif Scrollspy
  • Toostii agarsiisuu fi hojii irraa ari'uuf
  • Tooltips fi popovers agarsiisuu fi bakka itti kaa'uuf (akkasumas Popper barbaada ) .

Globals barbaachisoo ta'an

Bootstrap akkaataa fi qindaa'inoota addunyaa barbaachisoo muraasa fayyadama, isaan hundi jechuun ni danda'ama gara idileessuu akkaataa qaxxaamuraa biraawzariitti kan qophaa'anidha. Mee keessa haa cuuphamnu.

Gosa doktii HTML5

Bootstrap fayyadama HTML5 doctype barbaada. Isa malee, styling funky fi guutuu hin taane tokko tokko ni argita.

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

Meeta tag deebii kan kennu

Bootstrap is developed mobile first , tooftaa nuti jalqaba koodii meeshaalee moobaayilaa fooyyessuu fi sana booda gaaffii miidiyaa CSS fayyadamuun akka barbaachisummaa isaatti qaamolee guddisuu. Meeshaalee hundaaf agarsiisa sirrii fi guddisuu tuquu mirkaneessuuf, mallattoo meetaa buufata ilaalchaa deebii kennu gara keetti dabali <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Fakkeenya kanaa hojiidhaan jalqaba ariifataa keessatti arguu dandeessu .

Sanduuqa-saayizii gochuu

CSS keessatti safara qajeelaa ta'eef, box-sizinggatii waliigalaa irraa content-boxgara jijjiirra border-box. Kunis paddingbal'ina xumuraa shallagame elementii tokkoo irratti dhiibbaa akka hin qabne mirkaneessa, garuu sooftiweerii qaama sadaffaa tokko tokko kan akka Google Maps fi Google Custom Search Engine irratti rakkoo uumuu danda'a.

Yeroo hin baramnetti irra darbuu qabdutti, waan akka armaan gadii fayyadami:

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

Cuqqaa armaan olii waliin, qaamolee man'ee—qabiyyee karaa ::beforefi uumame dabalatee —hundi isaanii kan sanaaf ::afterifteessame ni dhaalu .box-sizing.selector-for-some-widget

Waa'ee moodeela saanduqaa fi safara CSS Tricks irratti caalaatti baradhu .

Irra deebi'ii jalqabi

Agarsiisa qaxxaamuraa-browsarii fooyya'eef, Reboot fayyadamnee wal-hinsimne biraawzarootaa fi meeshaalee hunda keessatti sirreessuuf yeroo xiqqoo yaada dabalataa elementoota HTML beekamoo ta'aniif kennina.

Hawaasa

Misooma Bootstrap yeroo yeroon hordofaa fi qabeenya gargaaru kanaan hawaasa bira ga’aa.

  • The Official Bootstrap Blog dubbisaa fi subscribe godhaa .
  • Marii GitHub keenya gaafadhaa qoradhaa .
  • IRC keessatti Bootstrappers waliin haasa'aa. irc.libera.chatServer irratti, chaanaalii #bootstrapkeessatti.
  • Gargaarsi hojiirra oolmaa Stack Overflow (tagged ) irratti argamuu danda'a bootstrap-5.
  • Developers jecha furtuu bootstrappaakeejiiwwan dalagaa Bootstrap fooyyessanii ykn dabalan irratti yeroo karaa npm ykn mala geejjibaa walfakkaataa raabsan argannoo guddaa argachuuf fayyadamuu qabu.

Akkasumas oduu haaraa fi viidiyoo muuziqaa ajaa'ibaa argachuuf @getbootstrap Twitter irratti hordofuu dandeessu .