Source

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 amewo na femaxee le jsDelivr. Èle package manager zãm alo ehiã be nàwɔ source files ƒe kɔpi? Ta 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.js , kple mía ŋutɔwo ƒe JavaScript ƒe kpeɖeŋutɔwo. Da <script>s siwo gbɔna la ɖe wò axawo ƒe nuwuwu gbɔ, do ŋgɔ na nuwuwu ƒe </body>dzesi la tututu, be woate ŋu awɔ dɔ. Ele be jQuery nava gbã, emegbe Popper.js, eye emegbe míaƒe JavaScript ƒe kpeɖeŋutɔwo.

Míezãa jQuery ƒe slim build , gake wodoa alɔ eƒe akpa bliboa hã.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Àdi be yeanya akpa kawoe hiã jQuery, míaƒe JS, kple Popper.js 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.

Míaƒe bootstrap.bundle.jskple Popperbootstrap.bundle.min.js hã le eme , gake menye jQuery o . Ne èdi nyatakaka bubuwo tso nusiwo le Bootstrap me ŋu la, taflatse kpɔ míaƒe emenyawo ƒe akpaa.

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.js )
  • 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ɔ
  • Dɔwɔnu ƒe aɖaŋuɖoɖowo kple popovers na ɖeɖefia kple teƒeɖoɖo (egahiã Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Ema koe nye nusi nèhiã na axa bliboa ƒe nudidiwo. Yi Layout docs 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 incomplete styling aɖewo, 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 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ɔ.

  • Dze @getbootstrap yome le Twitter dzi .
  • Xlẽ eye nàwɔ nudɔdɔ na The Official Bootstrap Blog .
  • Dzeɖoɖo kple hati Bootstrappers le IRC. Le irc.freenode.netserver 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.