Dze egɔme kple Bootstrap

Bootstrap nye dɔwɔnu sẽŋu aɖe si me wowɔa nu geɖe le le ŋgɔgbe. Tu nusianu—tso eƒe kpɔɖeŋu dzi va ɖo ewɔwɔ dzi—le aɖabaƒoƒo ʋɛ aɖewo ko me.

Le axa sia dzi

Dze egɔme kaba

Dze egɔme to Bootstrap ƒe CSS kple JavaScript si le klalo na ewɔwɔ la dede eme to CDN dzi evɔ mahiã be woawɔ xɔtutu ƒe afɔɖeɖe aɖeke o. Kpɔe le nuwɔna me kple Bootstrap CodePen ƒe wɔwɔfia sia .

index.htmlWɔ faɛl yeye le wò dɔa ƒe ke me. De <meta name="viewport">tag la hã eme be wòawɔ nu nyuie le asitelefonwo me.

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

De Bootstrap ƒe CSS kple JS hã eme. Da <link>dzesidea <head>ɖe míaƒe CSS la me, kple <script>dzesidenu na míaƒe JavaScript babla la (si me Popper hã le hena teƒeɖoɖo ƒe nusiwo le tsia dzi, poppers, kple dɔwɔnu ƒe aɖaŋuɖoɖowo) hafi nàwu enu </body>. Srɔ̃ nu geɖe tso míaƒe CDN ƒe kadodowo ŋu .

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

Àte ŋu atsɔ Popper kple míaƒe JS hã ade eme ɖe vovo. Ne mèɖoe be yeazã dropdowns, popovers, alo dɔwɔnu ƒe aɖaŋuɖoɖowo o la, dzra kilobyte aɖewo ɖo to Popper matsɔmatsɔ de eme me.

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

Mido gbe nam, xexeame! Ʋu axa si le wò browser si nètia me be nàkpɔ wò Bootstrapped ƒe axaa. Fifia àteŋu adze xɔtutu gɔme kple Bootstrap to wò ŋutɔ wò ɖoɖowɔwɔ , akpa gbogbo aɖewo tsɔtsɔ kpee , kple míaƒe kpɔɖeŋu siwo dziɖuɖua na la zazã me .

CDN ƒe kadodowo

Abe nufiame ene la, míaƒe CDN ƒe kadodo veviwoe nye esi.

Nuɖᴐɖᴐ	URL ƒe ŋkɔ
CSS ƒe ƒuƒoƒo	`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`

Àte ŋu azã CDN la hã atsɔ axɔ míaƒe xɔtuɖoɖo bubu siwo woŋlɔ ɖe Emenyawo ƒe axaa dzi la dometɔ ɖesiaɖe .

Afɔɖeɖe siwo kplɔe ɖo

Xlẽ nu geɖe tso xexeame katã ƒe nɔnɔme ƒe ɖoɖo vevi aɖewo siwo Bootstrap zãna ŋu vie.
Xlẽ nu tso nusiwo le Bootstrap me ŋu le míaƒe emenyawo ƒe akpaa dzi kple akpa siwo hiã JavaScript ƒe xexlẽdzesiwo le ete.
Èhiã ŋusẽ geɖe wu viea? Bu xɔtutu kple Bootstrap ŋu to dzɔtsoƒe faɛlwo dede eme to package manager dzi .
Èle didim be yeazã Bootstrap abe module ene kple <script type="module">? Taflatse kpɔ míaƒe Bootstrap zazã abe module ƒe akpa ene.

JS ƒe akpa aɖewo

Àdi be yeanya akpa kawoe hiã míaƒe JavaScript kple Popper tẽea? Zi show components ƒe kadodo si le ete la dzi. Ne mèka ɖe axa ƒe ɖoɖo bliboa dzi kura o la, yi edzi nànɔ nu xlẽm hena kpɔɖeŋu axa ƒe nɔnɔmetata.

Fia akpa siwo hiã JavaScript

Nuxlɔ̃amewo le dɔmeɖeɖe ŋu
Buttons na toggling nɔnɔmewo kple checkbox/radio ƒe dɔwɔwɔ
Carousel na slide nuwɔnawo katã, dziɖuɖuwo, kple dzesiwo
Collapse na tɔtrɔ le emenyawo ƒe dzedzeme ŋu
Dropdowns na ɖeɖefia kple teƒeɖoɖo (egahiã Popper ) .
Mɔnuwo na ɖeɖefia, teƒeɖoɖo, kple agbalẽxatsaxatsa ƒe nuwɔna
Navbar ɖe míaƒe Collapse kple Offcanvas ƒe kpeɖeŋutɔwo keke ɖe enu be woawɔ nuwɔna siwo ɖoa nya ŋu la ŋudɔ
Navs kple Tab plugin na tɔtrɔ le emenyawo ƒe akpawo ŋu
Offcanvases hena ɖeɖefia, teƒeɖoɖo, kple agbalẽxatsaxatsa ƒe nuwɔna
Scrollspy na agbalẽxatsaxatsa ƒe nuwɔna kple mɔfiame yeyewo
Toasts hena eɖeɖefia kple eɖeɖe ɖa
Dɔwɔnu ƒe aɖaŋuɖoɖowo kple popovers hena ɖeɖefia kple teƒeɖoɖo (egahiã Popper ) .

Xexeame katã ƒe agbalẽ veviwo

Bootstrap zãa xexeame katã ƒe atsyã vevi aɖewo kple ɖoɖowo, siwo katã kloe nye esiwo wotu ɖe cross browser ƒe atsyãwo ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu ŋu. Mina míaƒu tsi ɖe eme.

HTML5 ƒe nuŋlɔɖi ƒe ƒomevi

Bootstrap bia be woazã HTML5 doctype. Ema manɔmee la, àkpɔ atsyã aɖewo siwo nye funky eye womede blibo o.

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

Meta tag si ɖoa nya ŋu

Bootstrap is developed mobile first , aɖaŋu si me míewɔa kɔdawo nyuie wu na asitelefonwo gbã eye emegbe míedzia akpawo ɖe edzi alesi wòhiãe to CSS media biabiawo zazã me. Be nàkpɔ egbɔ be woɖe egɔme nyuie eye nèka asi nu ŋu nyuie na mɔ̃awo katã la, tsɔ nukpɔkpɔ ƒe meta tag si ɖoa nya ŋu la kpe ɖe wò <head>.

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

Àte ŋu akpɔ esia ƒe kpɔɖeŋu aɖe le dɔwɔwɔ me le gɔmedzedze kaba me .

Aɖaka ƒe lolome

Ne èdi be yeakpɔ lolome tẽ wu le CSS me la, míetrɔa xexeame katã ƒe box-sizingasixɔxɔ tso content-boxyi border-box. Esia kpɔa egbɔ be paddingmekpɔa ŋusẽ ɖe akpa aɖe ƒe kekeme mamlɛtɔ si wobu akɔntae dzi o, gake ate ŋu ahe kuxiwo vɛ na ame etɔ̃lia ƒe kɔmpiuta dɔwɔɖoɖo aɖewo abe Google Maps kple Google Custom Search Engine ene.

Le ɣeyiɣi si mebɔ o si me wòle be nàɖe asi le eŋu me la, zã nane abe esiawo ene:

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

Le akpa si le etame me la, nusiwo wotsɔ ƒo ƒui—siwo dometɔ aɖewoe nye nyatakaka siwo wowɔ to ::beforekple ::after—wo katã anyi nusiwo wogblɔ box-sizingna ema .selector-for-some-widgetla dome .

Srɔ̃ nu geɖe tso aɖaka ƒe kpɔɖeŋu kple lolome ŋu le CSS Tricks .

Gbugbɔ dze egɔme

Be míana cross-browser gɔmeɖeɖe nanyo ɖe edzi la, míezãa Reboot tsɔ ɖɔa masɔmasɔwo ɖo le web-browserwo kple mɔ̃wo dzi esime míele HTML ƒe akpa siwo bɔ la ƒe tɔtrɔ siwo me susu le vie wu nam.

Hatsotso

Miyi edzi mianya nu tso Bootstrap ƒe ŋgɔyiyi ŋu eye miatsɔ dɔwɔnu siawo siwo akpe ɖe ame ŋu la aɖo nutoa me tɔwo gbɔ.

Xlẽ eye nàwɔ nudɔdɔ na The Official Bootstrap Blog .
Bia míaƒe GitHub Dzeɖoɖowo eye nàdzro wo me .
Dzeɖoɖo kple hati Bootstrappers le IRC. Le irc.libera.chatserver la dzi, le #bootstrapchannel la me.
Woateŋu akpɔ dɔwɔwɔ ƒe kpekpeɖeŋu le Stack Overflow (tagged bootstrap-5).
Ele be dɔwɔlawo nazã nya vevi la bootstraple agbalẽvi siwo trɔa asi le Bootstrap ƒe dɔwɔwɔ ŋu alo kpena ɖe eŋu ne wole mamam to npm alo mɔ̃ mawo tɔgbe dzi hena nusiwo ŋu woke ɖo wu.

Àteŋu adze @getbootstrap hã yome le Twitter dzi hena nyatoƒoetoto yeyewo kple hadzidzi video dziŋɔwo.