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.

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

JS

Ebitundu byaffe bingi byetaaga okukozesa JavaScript okusobola okukola. Okusingira ddala, zeetaaga jQuery , Popper , ne JavaScript plugins zaffe. Tukozesa jQuery's slim build , naye enkyusa enzijuvu nayo ewagirwa.

Teeka emu ku <script>s zino wammanga okumpi n’enkomerero y’empapula zo, nga tezinnabaawo ddala </body>akabonero akaggalawo, okuzisobozesa. jQuery erina okusooka okujja, oluvannyuma Popper, n’oluvannyuma JavaScript plugins zaffe.

Omuganda

Muteekemu buli Bootstrap JavaScript plugin n'emu ku bundle zaffe ebbiri. Bombi bootstrap.bundle.jsera nga bootstrap.bundle.min.jsmulimu Popper ku bikozesebwa byaffe ne popovers, naye si jQuery . Sooka oteekemu jQuery, olwo oteekemu Bootstrap JavaScript bundle. Okumanya ebisingawo ku birimu mu Bootstrap, laba ekitundu kyaffe eky'ebirimu .

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

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

Ebitundu ebikola omubiri

Oyagala ebitundu ki ebyetaagisa mu bulambulukufu jQuery, JavaScript yaffe, ne Popper? Nywa ku link ya show components wansi. Bw'oba tokakasa ku nsengeka y'olupapula, sigala ng'osoma olw'ekyokulabirako ekifaananyi 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
Scrollspy okulaba enneeyisa y'okutambula n'okulongoosa mu kutambula
Tooltips ne popovers okulaga n'okuteeka mu kifo (era kyetaagisa Popper ) .

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

Ekyo kyokka kye weetaaga ku byetaago by'olupapula okutwalira awamu. Kyalira Layout docs 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, shrink-to-fit=no">

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 obubaliriddwa, 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-4).
Abakola balina okukozesa ekigambo ekikulu bootstrapku packages ezikyusa oba okwongera ku nkola ya Bootstrap nga zisaasaanya okuyita 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.

CSPs ne SVGs eziteekeddwamu

Ebitundu bya Bootstrap ebiwerako birimu SVG eziteekeddwa mu CSS yaffe okukola sitayiro y’ebitundu obutakyukakyuka era mu ngeri ennyangu mu bulawuzi n’ebyuma. Ku bibiina ebirina ensengeka za CSP enkakali ennyo , twawandiise ebifaananyi byonna ebya SVG zaffe eziteekeddwamu (zonna zikozesebwa okuyita mu background-image) osobole okwetegereza obulungi eby'okulonda byo.

Close button (ekozesebwa mu kulabula ne modals)
Ebibokisi ebikebera eby’enjawulo ne buttons za leediyo
Ebikyusakyusa mu ffoomu
Ebifaananyi ebikakasa foomu
Menyu z’okulonda ez’enjawulo
Ebifuga carousel
Navbar okukyusakyusa obutambi

Okusinziira ku mboozi y’ekitundu , ebimu ku biyinza okukolebwa okukola ku kino mu codebase yo mulimu okukyusa URL n’eby’obugagga ebikuumibwa mu kitundu, okuggyawo ebifaananyi n’okukozesa ebifaananyi ebiri mu layini (tekisoboka mu bitundu byonna), n’okukyusa CSP yo. Okuteesa kwaffe kwe kwekenneenya n’obwegendereza enkola zo ez’ebyokwerinda n’okusalawo ku kkubo erisinga obulungi erigenda mu maaso, bwe kiba kyetaagisa.