Tandika ne Bootstrap

Bootstrap ye kitabo kya maanyi, ekijjudde ebikozesebwa mu maaso. Zimba ekintu kyonna —okuva ku prototype okutuuka ku production —mu ddakiika ntono.

Ku muko guno

Okutandika amangu

Tandika ng'ossaamu CSS ne JavaScript eya Bootstrap eyeetegefu okukola ng'oyita mu CDN nga tekyetaagisa mitendera gyonna egy'okuzimba. Laba mu nkola ne Bootstrap CodePen demo eno .

Tonda fayiro empya index.htmlmu kikolo kya pulojekiti yo. Teekamu <meta name="viewport">tag nga bwe kiri ku nneeyisa entuufu ey’okuddamu mu byuma ebikozesebwa ku ssimu.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Mulimu CSS ne JS eza Bootstrap. Teeka <link>tag mu <head>for ya CSS yaffe, ne <script>tag ya JavaScript bundle yaffe (nga mw'otwalidde Popper okuteeka ebifo ebigwa, poppers, n'ebikozesebwa) nga tonnaggalawo </body>. Manya ebisingawo ku nkolagana zaffe eza CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Osobola n'okussaamu Popper ne JS yaffe okwawukana. Bw’oba toteekateeka kukozesa dropdowns, popovers, oba tooltips, kekkereza kilobytes ezimu nga tossaamu Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Mwasuze mutya ensi! Ggulawo omuko mu browser yo gy’oyagala okulaba omuko gwo ogwa Bootstrapped. Kati osobola okutandika okuzimba ne Bootstrap ng'okola layout yo , n'ogattako ebitundu amakumi , n'okukozesa ebyokulabirako byaffe ebitongole .

Ebiyungo bya CDN

Nga reference, wano waliwo enkolagana zaffe eza CDN enkulu.

Okunnyonnyola	URL ya URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Osobola n'okukozesa CDN okuleeta ekintu kyonna ku bizimbisibwa byaffe eby'enjawulo ebiragiddwa mu lupapula lw'Ebirimu .

Emitendera egiddako

Soma katono ku nteekateeka ezimu enkulu ez'obutonde bw'ensi yonna Bootstrap z'ekozesa.
Soma ku birimu mu Bootstrap mu kitundu kyaffe eky’ebirimu n’olukalala lw’ebitundu ebyetaagisa JavaScript wansi.
Oyagala amaanyi amalala katono? Lowooza ku kuzimba ne Bootstrap ng'ossaamu fayiro z'ensibuko ng'oyita mu package manager .
Onoonya okukozesa Bootstrap nga module nga <script type="module">? Nsaba otunule mu kukozesa kwaffe Bootstrap nga ekitundu kya module.

Ebitundu bya JS

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 plugins zaffe eza Collapse ne Offcanvas okussa mu nkola enneeyisa eziddamu
Navs ne Tab plugin okukyusa ebipande ebirimu
Offcanvases okulaga, okuteeka, n'enneeyisa y'okuzingulula
Scrollspy okulaba enneeyisa y'okutambula n'okulongoosa mu kutambula
Toasts ez’okwolesa n’okugoba
Tooltips ne popovers okulaga n'okuteeka mu kifo (era kyetaagisa Popper ) .

Ensi yonna enkulu

Bootstrap ekozesa omukono gw’emisono n’ensengeka enkulu ez’ensi yonna, nga zonna kumpi zigendereddwamu nnyo okuzza emisono gya cross browser mu mbeera eya bulijjo. Katubuuke mu.

Ekika ky’ekiwandiiko ekya HTML5

Bootstrap yeetaaga okukozesa HTML5 doctype. Awatali yo, ojja kulaba sitayiro ezimu eza funky ate nga tezituukiridde.

<!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 ntandikwa ey'amangu .

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 .
Buuza era weetegereza Ebiteeso byaffe ebya GitHub .
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.