Okwanjula

Tandika ne Bootstrap, enkola esinga okwettanirwa mu nsi yonna ey’okuzimba emikutu egy’okuddamu, egy’okusooka ku ssimu, ne jsDelivr n’olupapula olutandika template.

Ku muko guno

Okutandika amangu

Oyagala kwongera mangu Bootstrap ku pulojekiti yo? Kozesa jsDelivr, CDN ey'obwereere ey'ensonda enzigule. Okukozesa package manager oba weetaaga okuwanula fayiro z'ensibuko? Yolekera omuko gw'ebintu ebiwanulwa .

CSS

Koppa-teeka stylesheet <link>mu yo <head>nga sitayiro endala zonna tezinnabaawo okutikka CSS yaffe.

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

JS

Ebitundu byaffe bingi byetaaga okukozesa JavaScript okusobola okukola. Okusingira ddala, zeetaaga JavaScript plugins zaffe ne Popper . Teeka emu ku <script>s zino wammanga okumpi n’enkomerero y’empapula zo, nga tezinnabaawo ddala </body>akabonero akaggalawo, okuzisobozesa.

Omuganda

Muteekemu buli Bootstrap JavaScript plugin n'okwesigamira n'ekimu ku bundle zaffe ebbiri. Bombi bootstrap.bundle.jsera nga bootstrap.bundle.min.jsmulimu Popper ku bikozesebwa byaffe ne popovers. Okumanya ebisingawo ku birimu mu Bootstrap, laba ekitundu kyaffe eky'ebirimu .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Okwawula

Bw’oba osazeewo okugenda n’ekizibu ky’ebiwandiiko eby’enjawulo, Popper erina okusooka (bw’oba okozesa ebikozesebwa oba popovers), n’oluvannyuma JavaScript plugins zaffe.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Module eziyitibwa Modules

Bw’oba okozesa <script type="module">, nsaba otunule mu kitundu kyaffe eky’okukozesa Bootstrap nga modulo .

Ebitundu ebikola omubiri

Oyagala ebitundu ki ebyetaagisa mu bulambulukufu JavaScript yaffe ne Popper? Nywa ku link ya show components wansi. Bw'oba nga tokakasa n'akatono ku nsengeka y'olupapula olw'awamu, sigala ng'osoma olw'ekyokulabirako ky'ekipande ky'olupapula.

Laga ebitundu ebyetaagisa JavaScript

Okulabula ku kugobwa
Buttons for toggling states ne checkbox/enkola ya leediyo
Carousel ku nneeyisa zonna eza slide, ebifuga, n'ebiraga
Collapse for okukyusakyusa okulabika kw'ebirimu
Dropdowns okulaga n'okuteeka mu kifo (era kyetaagisa Popper ) .
Modals ez'okulaga, okuteeka mu kifo, n'enneeyisa y'okuzingulula
Navbar olw'okugaziya plugin yaffe eya Collapse okuteeka mu nkola enneeyisa ey'okuddamu
Offcanvases okulaga, okuteeka, n'enneeyisa y'okuzingulula
Toasts ez’okwolesa n’okugoba
Tooltips ne popovers okulaga n'okuteeka mu kifo (era kyetaagisa Popper ) .
Scrollspy okulaba enneeyisa y'okutambula n'okulongoosa mu kutambula

Ekifaananyi ky’okutandika

Kakasa nti empapula zo ziteekeddwateekeddwa n’emitendera egy’omulembe egy’okukola dizayini n’okukulaakulanya. Ekyo kitegeeza okukozesa HTML5 doctype n'okussaamu viewport meta tag olw'enneeyisa entuufu ey'okuddamu. Byonna biteeke wamu era empapula zo zirina okufaanana bwe ziti:

<!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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Okufuna emitendera egiddako, genda ku biwandiiko bya Layout oba ebyokulabirako byaffe ebitongole okutandika okuteekawo ebirimu n’ebitundu by’omukutu gwo.

Ensi yonna enkulu

Bootstrap ekozesa omukono gw’emisono egy’ensi yonna egy’omugaso n’ensengeka z’ogenda okwetaaga okumanya ng’ogikozesa, byonna kumpi bigendereddwamu ddala okutereeza emisono gya cross browser. Katubuuke mu.

Ekika ky’ekiwandiiko ekya HTML5

Bootstrap yeetaaga okukozesa HTML5 doctype. Awatali yo, ojja kulaba funky incomplete styling, naye okugiteekamu tesaana kuleeta hiccups yonna nnene.

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

Meta tag eddamu

Bootstrap is developed mobile first , enkola mwe tusooka okulongoosa code y’ebyuma ebikozesebwa ku ssimu n’oluvannyuma ne tulinnyisa ebitundu nga bwe kyetaagisa nga tukozesa CSS media queries. Okukakasa okulaga obulungi n'okukwata ku zooming ku byuma byonna, yongera ku responsive viewport meta tag ku <head>.

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

Osobola okulaba ekyokulabirako kya kino mu bikolwa mu kifaananyi ky'okutandika .

Okukola obunene bw’ebibokisi

Okusobola okufuna obunene obutereevu mu CSS, tukyusa box-sizingomuwendo gw'ensi yonna okuva content-boxku border-box. Kino kikakasa paddingnti tekikosa bugazi bwa elementi obusembayo obubalirirwa, naye kiyinza okuleeta obuzibu ku pulogulaamu ezimu ez’ekibiina eky’okusatu nga Google Maps ne Google Custom Search Engine.

Ku mulundi ogutatera kubaawo gw’olina okugisuula, kozesa ekintu nga kino wammanga:

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

Nga tulina ekitundu waggulu, ebintu ebiteekeddwa mu kisenge —nga mw’otwalidde n’ebikoleddwa ebikoleddwa okuyita mu ::beforene ::after—byona bijja kusikira ebyogerwako box-sizingolw’ekyo .selector-for-some-widget.

Manya ebisingawo ku box model ne sizing ku CSS Tricks .

Ddamu okutandika

Okusobola okulongoosa mu kulaga okusalako-browser, tukozesa Reboot okutereeza obutakwatagana mu bulawuzi n’ebyuma byonna ate nga tuwa okuddamu okuteekebwawo okw’endowooza okusingawo katono ku bintu ebya bulijjo ebya HTML.

Ekyaalo

Sigala ng’omanyi enkulaakulana ya Bootstrap era otuukirire abantu b’omukitundu n’ebikozesebwa bino ebiyamba.

Soma era wewandiise ku The Official Bootstrap Blog .
Chat ne banno aba Bootstrappers mu IRC. Ku irc.libera.chatseva, mu #bootstrapmukutu.
Obuyambi bw'okussa mu nkola buyinza okusangibwa ku Stack Overflow (tagged bootstrap-5).
Abakola balina okukozesa ekigambo ekikulu bootstrapku package ezikyusa oba okwongera ku nkola ya Bootstrap nga basaasaanya nga bayita mu npm oba enkola ezifaananako bwe zityo ez’okutuusa okusobola okuzuula okusingawo.

Osobola n'okugoberera @getbootstrap ku Twitter okufuna olugambo olusembyeyo ne vidiyo z'ennyimba eziwuniikiriza.