Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

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.

Nin ɲɛ in kan

Daminɛ teliya la

Aw b’a fɛ ka Bootstrap fara aw ka porozɛ kan joona wa? Baara kɛ ni jsDelivr ye, o ye CDN da wulilen ye fu. Baara kɛ ni pake ɲɛmɔgɔ ye walima i mago bɛ ka source files telesarse wa? Aw bɛ taa telesarse yɔrɔ la .

CSS ye

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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ɛ an yɛrɛ ka JavaScript plugins ni Popper de wajibiya . Aw bɛ nin <script>s ninnu dɔ bila aw ka ɲɛ laban kɛrɛfɛ, ka kɔn dakun dakun ɲɛ yɛrɛ </body>, walasa k’u kɛ.

Fɔrifɛ

Bootstrap JavaScript plugin ni dependency bɛɛ lajɛlen don an ka bundle fila dɔ la kelen na. O fila bɛɛ bootstrap.bundle.jsani Popperbootstrap.bundle.min.js fana sen bɛ o la an ka baarakɛminɛnw ni popovers kama. 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ɛ.

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

Ka fara

N'i y'a Лini ka Taa ni scripts danfaralenw ɲɛnabɔli ye, Popper ka kan ka Nà fɔlɔ (n'i bɛ baara Kɛ ni baarakɛminɛnw walima popovers ye), o kɔ fɛ an ka JavaScript plugins.

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

Module (Module).

Ni aw bɛ baara kɛ ni <script type="module">, aw bɛ an ka baara kɛ ni Bootstrap ye i n’a fɔ module yɔrɔ lajɛ.

A yɔrɔw

Aw b’a fɛ k’a dɔn ko yɔrɔ jumɛnw bɛ an ka JavaScript ni Popper de wajibiya k’a jɛya wa? 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ɔ.

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 walasa ka jira ani ka bila (o fana bɛ Popper 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
  • Offcanvases minnu bɛ kɛ ka jira, ka u bila yɔrɔ la, ani ka scroll kɛcogo jira
  • Tositiw jirali ni bɔli kama
  • Baarakɛminɛnw ni popovers jirali ni jɔyɔrɔfalen (o fana bɛ Popper 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">

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

Walasa ka fɛɛrɛ nataw sɔrɔ, i ka 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'i y'a fara 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">

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 The Official Bootstrap Blog kalan ani ka aw tɔgɔ sɛbɛn .
  • Baro kɛ ni Bootstrapper ɲɔgɔnw ye IRC kɔnɔ. irc.libera.chatServer kan, kanal #bootstrapkɔnɔ.
  • Waleya dɛmɛ bɛ se ka sɔrɔ Stack Overflow (tagged bootstrap-5) 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ɔ.