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, 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS jedhamuun beekama

Qaamonni keenya baay'een isaanii hojjechuuf fayyadama JaavaScript barbaadu. Addatti, isaan jQuery , Popper , fi pilaaginoota JaavaScript mataa keenyaa barbaadu. Nu jQuery's slim build fayyadamna , garuu version guutuus ni deeggara.

S armaan gadii keessaa tokko<script> naannoo dhuma fuula keetii, sirriitti mallattoo cufiinsaa dura kaa'i </body>, isaan dandeessisuuf. jQuery dursee dhufuu qaba, achiis Popper, achiis JavaScript plugins keenya.

Hidhaa

Bootstrap JavaScript plugin hunda bundle keenya lamaan keessaa tokko waliin hammachiisi. Lamaanuu bootstrap.bundle.jsfi Popperbootstrap.bundle.min.js dabalata meeshaalee keenyaa fi popovers, garuu jQuery miti . Dura jQuery dabali, sana booda Bootstrap JavaScript bundle dabali. Odeeffannoo dabalataa waa'ee maaltu Bootstrap keessatti hammatame argachuuf, maaloo kutaa qabiyyee keenya ilaalaa.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Qaamolee

Qaamolee kamtu ifatti jQuery, JavaScript keenya, fi Popper barbaada? Link show components jedhu armaan gadii cuqaasaa. Yoo waa'ee caasaa fuula 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
Amala qaxxaamuraa fi fooyya'iinsa navigeeshiniif Scrollspy
Tooltips fi popovers agarsiisuu fi bakka itti kaa'uuf (akkasumas Popper barbaada ) .

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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 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, 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.

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

CSPwwanii fi SVGwwan uumaman

Qaamonni Bootstrap hedduun SVGwwan CSS keenya keessatti uumaman of keessatti qabatu qaamolee wal irraa hin cinne fi salphaatti biraawzarootaa fi meeshaalee hunda irratti akkaataa itti godhu. Dhaabbilee qindeessoota CSP ciccimoo ta'aniif , fakkeenyota hunda SVGwwan keenya uumaman galmeessineerra (hunduu karaa background-image) akka ati filannoowwan kee gadi fageenyaan ilaaluu dandeessa.

Qabduu cufi (akeekkachiisaa fi moodaalota keessatti fayyadama) .
Sanduuqawwan filannoo fi qaree raadiyoo amala
Jijjiirraa unkaa
Mallattoolee mirkaneessuu unkaa
Menuuwwan filadhu amala
To'annoo kaarooseelii
Qabduu jijjiirraa Navbar

Based on community conversation , filannoowwan tokko tokko kana kuusdeetaa koodii mataa kee keessatti furuuf URLwwan qabeenya naannootti keessummeefameen bakka buusuu, fakkiiwwan haquu fi fakkiiwwan sarara keessaa fayyadamuu (qaamolee hunda keessatti hin danda'amu), fi CSP kee fooyyessuu of keessatti qabatu. Yaadni keenya imaammata nageenyaa ofii keessanii of eeggannoodhaan ilaaluu fi yoo barbaachisaa ta’e karaa gaarii fuulduratti ta’u murteessuudha.