Kpɔkplɔyiɖeme
Dze egɔme kple Bootstrap, xexeame ƒe ɖoɖo si ame geɖe lɔ̃na wu hena nyatakakadzraɖoƒe siwo ɖoa nya ŋu, siwo nye asitelefon gbãtɔwo tutu, kple jsDelivr kple template gɔmedzedze ƒe axa.
Dze egɔme kaba
Èle didim be yeatsɔ Bootstrap akpe ɖe yeƒe dɔa ŋu kabaa? Zã jsDelivr, si nye CDN si woate ŋu azã faa. Èle package manager zãm alo ehiã be nàwɔ source files ƒe kɔpi? Yi axa si nye nusiwo woɖe tso kɔmpiuta dzi la dzi .
CSS ƒe ƒuƒoƒo
Copy-de stylesheet <link>
la ɖe wò <head>
do ŋgɔ na stylesheets bubuawo katã me be nàtsɔ míaƒe CSS la ade eme.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
JS
Míaƒe akpa geɖe hiã be woazã JavaScript hafi woate ŋu awɔ dɔ. Etɔxɛe la, wohiã mía ŋutɔwo ƒe JavaScript ƒe kpeɖeŋutɔ kple Popper . Da s siwo gbɔna la dometɔ ɖeka ɖe<script>
wò axawo ƒe nuwuwu lɔƒo, do ŋgɔ na nuwuwu ƒe </body>
dzesi la tututu, be wòawɔ dɔ.
Babla
De Bootstrap JavaScript ƒe kpeɖeŋutɔ ɖesiaɖe kple ŋuɖoɖo ɖe míaƒe babla eveawo dometɔ ɖeka ŋu. Wo ame evea siaa bootstrap.bundle.js
kple Popperbootstrap.bundle.min.js
hã le eme na míaƒe dɔwɔnuwo ƒe aɖaŋuɖoɖowo kple popovers. Ne èdi nyatakaka bubuwo tso nusiwo le Bootstrap me ŋu la, taflatse kpɔ míaƒe emenyawo ƒe akpaa.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
To vovo
Ne ètso nya me be yeayi kple ŋɔŋlɔdzesiwo ƒe kuxia gbɔkpɔnu vovovowo la, ele be Popper nava gbã (ne èle dɔwɔnu ƒe aɖaŋuɖoɖowo alo popovers zãm), eye emegbe míaƒe JavaScript ƒe kpeɖeŋutɔwo.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Modulewo ƒe ƒuƒoƒo
Ne èzã <script type="module">
, taflatse kpɔ míaƒe Bootstrap zazã abe module ƒe akpa ene.
Nusiwo le eme
À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 plugin keke ɖe enu be wòawɔ nuwɔna si ɖoa nya ŋu la ŋudɔ
- 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 ) .
- Scrollspy na agbalẽxatsaxatsa ƒe nuwɔna kple mɔfiame yeyewo
Gɔmedzedze ƒe nɔnɔmetata
Kpɔ egbɔ be yeɖo yeƒe axawo kple atsyã kple ŋgɔyiyi ƒe dzidzenu yeyetɔwo. Ema fia be woazã HTML5 doctype eye woatsɔ viewport meta tag ade eme hena nuwɔna siwo ɖoa nya ŋu nyuie. Tsɔ wo katã ƒo ƒui eye wò axawo nanɔ ale:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
Ne èdi afɔɖeɖe siwo kplɔe ɖo la, yi Layout docs alo míaƒe kpɔɖeŋu siwo le se nu be nàdze wò nyatakakadzraɖoƒea ƒe nyatakakawo kple eƒe akpa aɖewo ɖoɖo gɔme.
Xexeame katã ƒe agbalẽ veviwo
Bootstrap zãa xexeame katã ƒe atsyã vevi aɖewo kple ɖoɖo siwo ahiã be nànya ne èle ezãm, 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ɔ funky aɖewo siwo mede blibo o ƒe atsyã, gake ne wotsɔe kpe ɖe eŋu la, mele be wòahe hiccups gã aɖeke vɛ 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 le dɔwɔwɔ me le gɔmedzedze ƒe nɔnɔmetata 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 .
- 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.