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, 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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 , ani an yɛrɛ ka JavaScript plugins de wajibiya. An bɛ baara Kɛ ni jQuery ka slim build ye , nka a dafalen fana bɛ Dɛmɛ.

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ɛ. jQuery ka kan ka na fɔlɔ, o kɔfɛ Popper, o kɔfɛ an ka JavaScript plugins.

Fɔrifɛ

Bootstrap JavaScript plugin bɛɛ Dòn an ka bundle fla 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, nka jQuery tɛ . JQuery don a kɔnɔ fɔlɔ, o kɔfɛ Bootstrap JavaScript bundle dɔ don a kɔnɔ. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

A yɔrɔw

I b’a fɛ k’a dɔn ko yɔrɔ jumɛnw bɛ jQuery, an ka JavaScript ani Popper de wajibiya k’a jɛya wa? Show components yɔrɔ digi min bɛ duguma. N’i dalen tɛ ɲɛw labɛncogo la, i bɛ 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
Scrollspy ye scroll kɛcogo ani navigation kurayali ye
Baarakɛminɛnw ni popovers jirali ni jɔyɔrɔfalen (a fana bɛ Popper de wajibiya ) .

Modèle de démarrage

Aw ye aw jija ka 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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ɲɛ cogoya nafama damadɔ ye ani sigicogo minnu na i mago bɛ minnu na n’i bɛ baara Kɛ n’a ye, olu bɛɛ bɛ ɲini 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 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 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-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ɔ.

CSPw ani SVG minnu bɛ don a kɔnɔ

Bootstrap yɔrɔ caman bɛ SVGw don an ka CSS kɔnɔ walasa ka yɔrɔw cogoya kɛ cogo basigilen na ani nɔgɔya la navigatɔrɔw ni minɛnw kɔnɔ. Jɛkulu minnu ka CSP labɛncogo ka gɛlɛn kosɛbɛ , an ye an ka SVG minnu bɛ don a kɔnɔ, olu misaliw bɛɛ sɛbɛn (o bɛɛ bɛ baara kɛ ni background-image) ye walasa i ka se k’i ka sugandiliw lajɛ ka ɲɛ.

Butɔn dadon (a bɛ kɛ ni lasɔminiw ni modaliw ye) .
Jateminɛ kɛyɔrɔw ani arajo butɔni minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye
Foroko sɛgɛsɛgɛliw
Formulaire validation taamasiyɛnw
Meniw sugandi minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye
Carousel (karosel) kunbɛncogo
Navbar bɛ butɔni wuli

Ka da sigida baro kan , sugandi dɔw bɛ se ka kɛ walasa k’o ɲɛnabɔ i yɛrɛ ka kodebasi kɔnɔ, i n’a fɔ ka URLw bila u nɔ na ni nafolo ye min bɛ sigida la, ka jaw bɔ yen ani ka baara kɛ ni ja minnu bɛ ɛntɛrinɛti kɔnɔ (o tɛ se ka kɛ yɔrɔ bɛɛ la), ani ka i ka CSP sɛmɛntiya. An ka laadilikan ye ka i yɛrɛ ka lakana sariyaw lajɛ koɲuman ani ka sira ɲuman latigɛ ka taa ɲɛ, ni a mago bɛ o la.