Trɔ yi nya veviwo gbɔ Trɔ yi docs navigation gbɔ
in English

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.

Le axa sia dzi

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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.jskple 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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ɔ
  • Offcanvases hena ɖeɖefia, teƒeɖoɖo, kple agbalẽxatsaxatsa ƒe nuwɔna
  • 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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-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-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.