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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Míaƒe akpa geɖe hiã be woazã JavaScript hafi woate ŋu awɔ dɔ. Etɔxɛe la, wohiã jQuery , Popper , kple mía ŋutɔwo ƒe JavaScript ƒe kpeɖeŋutɔwo. Míezãa jQuery ƒe slim build , gake wodoa alɔ eƒe akpa bliboa hã.

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ɔ. Ele be jQuery nava gbã, emegbe Popper, eye emegbe míaƒe JavaScript ƒe kpeɖeŋutɔwo.

Babla

De Bootstrap JavaScript ƒe kpeɖeŋutɔ ɖesiaɖe ɖe míaƒe babla eveawo dometɔ ɖeka ŋu. Wo ame evea siaa bootstrap.bundle.jskple Popperbootstrap.bundle.min.js hã le eme na míaƒe dɔwɔnu ƒe aɖaŋuɖoɖowo kple popovers, gake menye jQuery o. De jQuery gbã, emegbe Bootstrap JavaScript ƒe babla. 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Nusiwo le eme

Àdi be yeanya akpa kawoe hiã jQuery, 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 dzi 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ɔ
Scrollspy na agbalẽxatsaxatsa ƒe nuwɔna kple mɔfiame yeyewo
Dɔwɔnu ƒe aɖaŋuɖoɖowo kple popovers hena ɖeɖefia kple teƒeɖoɖo (egahiã Popper ) .

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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ema koe nye nusi nèhiã na axa bliboa ƒe nudidiwo. Yi Ðoɖowɔɖi ƒe nuŋlɔɖiwo alo míaƒe kpɔɖeŋu siwo dziɖuɖua ɖo la dzi 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, shrink-to-fit=no">

À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-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 .
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-4).
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ɔ̃ siwo sɔ kplii dzi hena nusiwo ŋu woate ŋu ake ɖo wu.

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

CSPwo kple SVG siwo wotsɔ de eme

Bootstrap ƒe akpa geɖewo de SVG siwo wotsɔ de míaƒe CSS me be woawɔ akpawo ƒe atsyã ɣesiaɣi eye wòanɔ bɔbɔe le web-browserwo kple mɔ̃wo dzi. For organizations with more strict CSP configurations , míeŋlɔ míaƒe SVG siwo wotsɔ de eme ƒe kpɔɖeŋuwo katã ɖi (siwo katã wozãa wo to background-image) ale be nàte ŋu alé ŋku ɖe wò tiatiawɔblɔɖewo ŋu nyuie wu.

Close button (wozãnɛ le nuxlɔ̃amewo kple modals me) .
Aɖaka siwo wowɔ ɖe ɖoɖo nu kple radio ƒe dzesiwo
Fome ƒe tɔtrɔwo
Kpeɖodzinyawo ƒe dzesiwo
Menu siwo nèwɔ ɖe ɖoɖo nu
Carousel dzi ɖuɖuwo
Navbar ƒe ʋuƒo siwo wotsɔna trɔa asi le nu ŋu

Based on community conversation , tiatia aɖewo siwo nàwɔ atsɔ akpɔ esia gbɔ le wò ŋutɔ wò codebase me dometɔ aɖewoe nye be nàɖɔli URL-awo kple nunɔamesi siwo nèxɔ le mia gbɔ, nɔnɔmetataawo ɖeɖeɖa kple nɔnɔmetata siwo le fli me zazã (manya wɔ le akpaawo katã me o), kple asitɔtrɔ le wò CSP ŋu. Míaƒe aɖaŋuɖoɖoe nye be nàlé ŋku ɖe wò ŋutɔ wò dedienɔnɔ ŋuti ɖoɖowo ŋu nyuie eye nàtso nya me le mɔ nyuitɔ si dzi nàto ayi ŋgɔ ŋu, ne ehiã.