A daminɛ ni Bootstrap ye

Bootstrap ye baarakɛminɛn barikama ye, min falen bɛ fɛnw na minnu bɛ ɲɛfɛ. Aw bɛ fɛn o fɛn jɔ—k’a ta prototype la ka se a dilanni ma—miniti damadɔ kɔnɔ.

Nin ɲɛ in kan

Daminɛ teliya la

A daminɛ ni Bootstrap ka CSS ni JavaScript labɛnni-labɛnni ye CDN fɛ k’a sɔrɔ i mago tɛ jɔli fɛɛrɛ si la. a lajɛ waleyali la ni nin Bootstrap CodePen demo in ye .

Aw ye dosiye kura dɔ Dabɔ index.htmlaw ka porozɛ ju la. Aw bɛ <meta name="viewport">taamasiyɛn in fana don a kɔnɔ walasa ka jaabi kɛcogo ɲuman sɔrɔ telefɔni selilɛriw kɔnɔ.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Bootstrap ka CSS ni JS bɛ a kɔnɔ. Aw bɛ <link>taamasiyɛn bila <head>an ka CSS kama, ani <script>taamasiyɛn bila an ka JavaScript bundle la (Popper fana bɛ o la walasa ka fɛnw bilayɔrɔw, poppers ani baarakɛminɛnw sigi sen kan) sanni a ka dadon </body>. Aw ye kunnafoni wɛrɛw sɔrɔ an ka CDN ladɛrɛsiw kan .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Aw bɛ se fana ka Popper ni an ka JS don u dan na. N’i ma labɛn ka baara kɛ ni fɛnw ye minnu bɛ bɔ fɛnw na, minnu bɛ bɔ fɛnw na, walima ni baarakɛminɛnw ye, i ka kilobayt dɔw mara ni i ma Popper don a kɔnɔ.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Bonjour, diɲɛ! Aw ye ɲɛ min sugandi aw ka navigatɛri kɔnɔ, o da wuli walasa ka aw ka Bootstrapped ɲɛ ye. Sisan aw bɛ se ka jɔli daminɛ ni Bootstrap ye n' aw yɛrɛ ka layidu talen dilan , ka yɔrɔ tan ni caman fara a kan , ani ka baara kɛ ni an ka misali ofisiyaliw ye .

CDN ka ladɛrɛsiw

I n’a fɔ kunnafoni, an ka CDN ladɛrɛsi fɔlɔw filɛ nin ye.

Cogojirali	URL ye
CSS ye	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS ye	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

aw bɛ se fana ka baara kɛ ni CDN ye walasa ka an ka jɔli wɛrɛw la minnu bɛ Kɔnɔkow ɲɛ kan .

Fɛn nataw

Aw ye kunnafoni wɛrɛw kalan dɔɔnin diɲɛ sigida labɛnni nafama dɔw kan Bootstrap bɛ baara kɛ ni minnu ye.
Fɛn minnu bɛ Bootstrap kɔnɔ, olu kalan an ka kɔnɔkow yɔrɔ la ani yɔrɔ minnu bɛ JavaScript wajibiya, olu lisɛli jukɔrɔ.
Aw mago bɛ fanga wɛrɛ la dɔɔnin wa? aw ye jateminɛ kɛ ka jɔ ni Bootstrap ye ni sɔrɔyɔrɔ filenw donli ye pake ɲɛmɔgɔ fɛ .
Aw b'a fɛ ka baara kɛ ni Bootstrap ye i n'a fɔ module ni <script type="module">? Aw ye an ka baara kɛli ni Bootstrap ye i n’a fɔ module yɔrɔ lajɛ.

JS 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 ani Offcanvas plugins janya walasa ka jaabi kɛcogoyaw waleya
Navs ni Tab plugin ye walasa ka kɔnɔkow sɛgɛsɛgɛli kɛ
Offcanvases minnu bɛ kɛ ka jira, ka u bila yɔrɔ la, ani ka scroll kɛcogo jira
Scrollspy ye scroll kɛcogo ani navigation kurayali ye
Tositiw jirali ni bɔli kama
Baarakɛminɛnw ni popovers jirali ni jɔyɔrɔfalen (o fana bɛ Popper de wajibiya ) .

Duniya bɛɛ lajɛlen nafamaw

Bootstrap bɛ baara Kɛ ni diɲɛ cogoyaw ni sigicogo nafama damadɔ ye, minnu bɛɛ bɛ Taa a dan na ka ɲɛsin cross browser cogoyaw normalisation ma. An ka dive ka don.

HTML5 sɛbɛn suguya

Bootstrap bɛ HTML5 doctype baara de wajibiya. Ni o tɛ, i bɛ funky ni incomplete styling dɔw ye.

<!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ɛ teliya la .

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 .
ɲininkali kɛ ani ka an ka GitHub Baro lajɛ .
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ɔ.