Source

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, ewereddwa ku bwereere abantu ku jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Ebitundu byaffe bingi byetaaga okukozesa JavaScript okusobola okukola. Okusingira ddala, zeetaaga jQuery , Popper.js , ne JavaScript plugins zaffe. Teeka <script>s zino wammanga okumpi n’enkomerero y’empapula zo, nga tezinnabaawo ddala </body>tag eggalawo, okuzisobozesa. jQuery erina okusooka okujja, oluvannyuma Popper.js, n’oluvannyuma JavaScript plugins zaffe.

Tukozesa jQuery's slim build , naye enkyusa enzijuvu nayo ewagirwa.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Oyagala ebitundu ki ebyetaagisa mu bulambulukufu jQuery, JS yaffe, ne Popper.js? 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.

Yaffe bootstrap.bundle.jsera nga bootstrap.bundle.min.jsmulimu Popper , naye si jQuery . Okumanya ebisingawo ku birimu mu Bootstrap, laba ekitundu kyaffe eky'ebirimu .

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.js )
Modals ez'okulaga, okuteeka mu kifo, n'enneeyisa y'okuzingulula
Navbar olw'okugaziya plugin yaffe eya Collapse okuteeka mu nkola enneeyisa ey'okuddamu
Tooltips ne popovers okulaga n'okuteeka mu kifo (era kyetaagisa Popper.js )
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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

Goberera @getbootstrap ku mukutu gwa Twitter .
Soma era wewandiise ku The Official Bootstrap Blog .
Chat ne banno aba Bootstrappers mu IRC. Ku irc.freenode.netseva, 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.