Seensa

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

Fuula kana irratti

Saffisaan jalqabuu

Bootstrap daftee pirojektii keessanitti dabaluu barbaadduu? jsDelivr, CDN madda banaa bilisaa fayyadami. 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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS jedhamuun beekama

Qaamonni keenya baay'een isaanii hojjechuuf fayyadama JaavaScript barbaadu. Addatti ammoo, isaanis JavaScript plugins mataa keenyaa fi Popper barbaadu . S armaan gadii keessaa tokko<script> naannoo dhuma fuula keetii, sirriitti mallattoo cufiinsaa dura kaa'i </body>, isaan dandeessisuuf.

Hidhaa

Bootstrap JavaScript plugin fi hirkattummaa hunda bundle keenya lamaan keessaa tokko waliin hammachiisi. Lamaanuu bootstrap.bundle.jsfi Popperbootstrap.bundle.min.js dabalatee tooltipps fi popovers keenyaaf. Odeeffannoo dabalataa waa'ee maaltu Bootstrap keessatti hammatame argachuuf, maaloo kutaa qabiyyee keenya ilaalaa.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Adda baasuu

Yoo furmaata iskiriiptii adda addaa wajjin deemuuf murteessite, Popper dursee dhufuu qaba (yoo gorsa meeshaalee ykn popovers fayyadamaa jirta ta'e), achiis pilaaginoota JaavaScript keenya.

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

Moojuulota

Yoo fayyadamtan <script type="module">, maaloo kutaa moojuulii Bootstrap fayyadamuu keenya ilaalaa.

Qaamolee

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 plugin keenya Collapse dheeressuuf
Toostii agarsiisuu fi hojii irraa ari'uuf
Tooltips fi popovers agarsiisuu fi bakka itti kaa'uuf (akkasumas Popper 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">

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

Tarkaanfiiwwan itti aanuuf, qabiyyee fi qaamolee marsariitii keetii diriirsuu jalqabuuf , galmeewwan 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 argita, 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 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 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.

The Official Bootstrap Blog dubbisaa fi subscribe godhaa .
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 .