Source

Seensa

Bootstrap, addunyaa irratti marsariitiiwwan deebii kennan, mobaayila jalqabaa ijaaruuf baay'ee beekamaa ta'e, jsDelivr fi fuula jalqabaa unkaa wajjin jalqabi.

Saffisaan jalqabuu

Bootstrap daftee pirojektii keessanitti dabaluu barbaadduu? jsDelivr fayyadamaa, kan bilisaan namoota jsDelivr irratti argamaniin kenname. Geggeessaa paakeejii fayyadamuu moo faayiloota madda buufachuu barbaadduu? Gara fuula downloads jedhutti qajeela.

CSS jedhamuun beekama

CSS keenya fe'uuf akkaataa barruulee biroo hunda duratti barruu akkaataa <link>gara keetti waraabii-maxxansi .<head>

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

JS jedhamuun beekama

Qaamonni keenya baay'een isaanii hojjechuuf fayyadama JaavaScript barbaadu. Addatti, isaan jQuery , Popper.js , fi pilaaginoota JaavaScript mataa keenyaa barbaadu. S armaan gadii <script>naannoo dhuma fuula keetii, sirriitti </body>mallattoo cufiinsaa dura kaa'i, isaan dandeessisuuf. jQuery dursee dhufuu qaba, achiis Popper.js, achiis plugins JavaScript keenya.

Nu jQuery's slim build fayyadamna , garuu version guutuus ni deeggara.

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

Qaamolee kamtu ifatti jQuery, JS keenya, fi Popper.js 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
  • Agarsiisuu fi bakka kaa'uuf kan gadi bu'an (akkasumas Popper.js barbaada ) .
  • Moodaalota agarsiisa, iddoo, fi amala tarree
  • Navbar amala deebii kennuu hojiirra oolchuuf plugin keenya Collapse dheeressuuf
  • Gorsa meeshaalee fi popovers agarsiisuu fi bakka itti kaa'uuf (akkasumas Popper.js barbaada ) .
  • Amala qaxxaamuraa fi fooyya'iinsa navigeeshiniif Scrollspy

Unka jalqabaa

Fuulonni keessan ulaagaalee dizaayinii fi misoomaa haaraa ta’aniin akka qophaa’an mirkaneeffadhaa. Kana jechuun gosa doktii HTML5 fayyadamuu fi amala deebii sirrii ta'eef mallattoo meetaa buufata ilaalchaa hammachuu jechuudha. Hundaa walitti qabdee fuula kee akkas fakkaachuu qaba:

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

Ulaagaalee fuula waliigalaadhaaf kan si barbaachisu kana qofa. Qabiyyee fi qaamolee marsariitii keetii diriirsuu jalqabuuf docs Haalata ykn fakkeenyota keenya ofiisaa daawwadhu .

Globals barbaachisoo ta'an

Bootstrap akkaataa fi qindaa'inoota addunyaa barbaachisoo muraasa yeroo fayyadamtu beekuu qabdan qacara, 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, funky incomplete styling tokko tokko ni argitu, garuu dabalatee hiccups guddaa fiduu hin qabu.

<!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 tuqaalee guddisuu mirkaneessuuf, mallattoo meetaa buufata ilaalchaa deebii kennu gara keetti dabali <head>.

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

Fakkeenya kanaa gochaan unkaa jalqabaa keessatti arguu dandeessa .

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

  • Twitter irratti @getbootstrap hordofaa .
  • The Official Bootstrap Blog dubbisaa fi subscribe godhaa .
  • IRC keessatti Bootstrappers waliin haasa'aa. irc.freenode.netServer irratti, chaanaalii ##bootstrapkeessatti.
  • Gargaarsi hojiirra oolmaa Stack Overflow (tagged ) irratti argamuu danda'a bootstrap-4.
  • Developers jecha furtuu paakeejiiwwan yeroo karaa npm ykn mala geejjibaa walfakkaataa bootstrapraabsan dalagaa Bootstrap fooyyessanii ykn dabalan irratti fayyadamuu qabu argannoo guddaa argachuuf.

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