Source

Daminɛ kuma

A daminɛ ni Bootstrap ye, n’o ye diɲɛ kɔnɔ sigikafɔ ye min ka di kosɛbɛ walasa ka jaabiw, mobili-fɔlɔ-yɔrɔw jɔ, ni jsDelivr ani jatebɔ daminɛ ɲɛ ye.

Daminɛ teliya la

Aw b’a fɛ ka Bootstrap fara aw ka porozɛ kan joona wa? Baara kɛ ni jsDelivr ye, min dira fu mɔgɔw fɛ jsDelivr kan. Baara kɛ ni pake ɲɛmɔgɔ ye walima i mago bɛ ka source files telesarse wa? I ɲɛsin telesarseliw yɔrɔ ma.

CSS ye

Copy-paste stylesheet <link>in your ka <head>kɔn stylesheet tɔw bɛɛ ɲɛ walasa k’an ka CSS doni.

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

JS ye

An ka yɔrɔ caman bɛ JavaScript baara de wajibiya walasa ka baara kɛ. Kɛrɛnkɛrɛnnenya la, u bɛ jQuery , Popper.js , ani an yɛrɛ ka JavaScript plugins de wajibiya. Aw bɛ nin <script>s ninnu bila aw ka ɲɛw laban kɛrɛfɛ, ka kɔn dakun dakun ɲɛ yɛrɛ </body>, walasa u ka se ka baara kɛ. jQuery ka kan ka na fɔlɔ, o kɔfɛ Popper.js, o kɔfɛ an ka JavaScript plugins.

An bɛ baara Kɛ ni jQuery ka slim build ye , nka a dafalen fana bɛ Dɛmɛ.

<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>

Aw b’a fɛ k’a dɔn ko yɔrɔ jumɛnw bɛ jQuery, an ka JS, ani Popper.js de wajibiya k’a jɛya? Show components yɔrɔ digi min bɛ duguma. N’i ​​dalen t’a la hali dɔɔnin ɲɛw jɔcogo bɛɛ lajɛlen na, i ka to ka kalan kɛ walasa ka misali ɲɛw jatebɔcogo dɔ sɔrɔ.

An ka bootstrap.bundle.jsani Popperbootstrap.bundle.min.js fana sen bɛ o la , nka jQuery tɛ . Walasa ka kunnafoni wɛrɛw sɔrɔ fɛnw kan minnu bɛ Bootstrap kɔnɔ, aw ye an ka kɔnɔkow yɔrɔ lajɛ.

Yɔrɔ minnu bɛ JavaScript wajibiya, olu jira
  • Kɔlɔsili minnu bɛ kɛ ka ɲɛsin baara bilali ma
  • Butɔnw ka toggling states ani checkbox/arajo baarakɛcogo
  • Carousel ka ɲɛsin slide kɛcogo bɛɛ ma, controles ani indicateurs
  • Collapse walasa ka kɔnɔkow yecogo caman wuli
  • Dropdowns jirali ni jɔyɔrɔfalen kama (a fana bɛ Popper.js de wajibiya )
  • Modaliw minnu bɛ kɛ ka jirali, u jɔyɔrɔ jira ani ka sɛrɛkili kɛcogo jira
  • Navbar ka an ka Collapse plugin janya walasa ka jaabi kɛcogo waleya
  • Baarakɛminɛnw ni popovers jirali ni jɔyɔrɔko (a fana bɛ Popper.js de wajibiya )
  • Scrollspy ye scroll kɛcogo ani navigation kurayali ye

Modèle de démarrage

Aw ye aw jija k’aw ka ɲɛw sigi sen kan ni dilancogo ni yiriwali sariya kura ye. O kɔrɔ ye ka baara Kɛ ni HTML5 doctype ye ani ka viewport meta tag Dòn a la walasa ka jaabi kɛcogo ɲumanw Kɛ. Aw bɛ a bɛɛ fara ɲɔgɔn kan ani aw ka ɲɛw ka kan ka kɛ nin cogo la:

<!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>

O dɔrɔn de ye i mago bɛ ɲɛ bɛɛ lajɛlen wajibiyalenw na. Aw ye taa Layout docs walima an ka misali ofisiyaliw lajɛ walasa k’i ka site web kɔnɔkow ni a yɔrɔw labɛncogo daminɛ.

Duniya bɛɛ lajɛlen nafamaw

Bootstrap bɛ baara Kɛ ni diɲɛ cogoyaw ni sigicogo nafama damadɔ ye minnu bɛna Kɛ i ka kan k’u Dɔn n’i bɛ baara Kɛ n’a ye, minnu bɛɛ bɛ Taa ‘ɲɛ k’u ɲɛsin cross browser cogoyaw normalisation ma. An ka dive ka don.

HTML5 sɛbɛn suguya

Bootstrap bɛ HTML5 doctype baara de wajibiya. Ni a tɛ, i bɛ funky incomplete styling dɔw ye, nka n'a farala a kan, o man kan ka kɛ sababu ye ka hiccups caman sɔrɔ.

<!doctype html>
<html lang="en">
  ...
</html>

Meta tag min bɛ jaabi di

Bootstrap is developed mobile first , o ye fɛɛrɛ ye min kɔnɔ an bɛ kode ɲɛnabɔ mobili minɛnw kama fɔlɔ ka sɔrɔ ka yɔrɔw bonya i n’a fɔ a mago bɛ cogo min na ni CSS media ɲininkaliw ye. Walasa ka ɲɛfɔli kɛcogo ɲuman ni magali zoom kɛcogo ɲuman sɔrɔ minɛnw bɛɛ la, i ka jaabi jiracogo meta tag fara i ka <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

aw bɛ se ka o misali dɔ ye wale la daminɛsɛbɛn kɔnɔ .

Box-sizing (box-sizing) ye

Walasa ka bonya tilennen caman sɔrɔ CSS kɔnɔ, an bɛ diɲɛ box-sizingnafa caman wuli ka bɔ content-boxka taa border-box. O b’a to paddinga tɛ nɔ bila fɛn dɔ janya jatebɔlen laban na, nka a bɛ se ka gɛlɛyaw lase mɔgɔ wɛrɛw ka porogaramu dɔw ma i n’a fɔ Google Maps ani Google Custom Search Engine.

Ni a man teli ka kɛ aw mago bɛ a la ka tɛmɛ a kan, aw bɛ baara kɛ ni fɛn dɔ ye i n’a fɔ nin fɛn ninnu:

.selector-for-some-widget {
  box-sizing: content-box;
}

Ni sanfɛla yɔrɔ in ye, fɛn minnu bɛ sigi sen kan—o la, kunnafoni minnu bɛ sɔrɔ via ::beforeani ::after— olu bɛɛ bɛna ciyɛn ta kofɔlenw box-sizingye o kama .selector-for-some-widget.

Aw ye kunnafoni wɛrɛw sɔrɔ kɛsu modɛli ni a bonya kan CSS Tricks kan .

Segin ka baara kɛ

Walasa ka cross-browser rendering ɲɛ ka taa a fɛ, an bɛ Reboot kɛ walasa ka bɛnbaliyakow latilen navigatɛriw ni minɛnw kɔnɔ k’a sɔrɔ an bɛ hakilinaw lasegincogo dɔw di HTML yɔrɔ caman na.

Sigida

Aw ka to kunnafoni na Bootstrap yiriwali kan ani ka se sigidamɔgɔw ma ni nin dɛmɛnanw ye.

  • Aw ye tugu @getbootstrap kɔ Twitter kan .
  • Aw ye The Official Bootstrap Blog kalan ani ka aw tɔgɔ sɛbɛn .
  • Baro kɛ ni Bootstrapper ɲɔgɔnw ye IRC kɔnɔ. irc.freenode.netServer kan, kanal ##bootstrapkɔnɔ.
  • Waleya dɛmɛ bɛ se ka sɔrɔ Stack Overflow (tagged bootstrap-4) yɔrɔ la.
  • Dabɔbagaw ka kan ka baara Kɛ ni daɲɛ koloma bootstrapye pakew kan minnu bɛ Bootstrap baarakɛcogo Lakodɔn walima k’a Fàra a kan n’u bɛ tila-tila npm fɛ walima o ɲɔgɔnna fɛnw lasecogo fɛ walasa ka se ka Sɔrɔ kosɛbɛ.

Aw bɛ se fana ka tugu @getbootstrap kɔ Twitter kan walasa ka kumakan labanw ni dɔnkilida videyo kabakomaw sɔrɔ.