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.
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.html
Wɔ 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-sizing
asixɔxɔ tso content-box
yi border-box
. Esia kpɔa egbɔ be padding
mekpɔ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 ::before
kple ::after
—wo katã anyi nusiwo wogblɔ box-sizing
na ema .selector-for-some-widget
la 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.chat
server la dzi, le#bootstrap
channel 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
bootstrap
le 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.