Okwu mmalite

Bido na Bootstrap, usoro kachasị ewu ewu n'ụwa maka iwulite saịtị ndị na-anabata, mkpanaka-mbụ, yana jsDelivr na ibe mmalite ndebiri.

Na ibe a

Mmalite ngwa ngwa

Na-achọ itinye ngwa ngwa Bootstrap na oru ngo gị? Jiri jsDelivr, CDN mepere emepe efu. Iji njikwa ngwugwu ma ọ bụ mkpa ibudata faịlụ isi mmalite? Gaa na ibe nbudata .

CSS

Detuo-tapawa ụdị akwụkwọ <link>ahụ n'ime gị <head>tupu mpempe akwụkwọ ndị ọzọ niile iji buo CSS anyị.

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

JS

Ọtụtụ n'ime akụrụngwa anyị chọrọ iji Javascript rụọ ọrụ. Kpọmkwem, ha chọrọ plugins Javascript nke anyị na Popper . Debe otu n'ime <script>s ndị a nso na njedebe nke ibe gị, ozugbo tupu </body>mkpado mmechi, iji mee ka ha nwee ike.

Mkpokọta

Tinye mgbakwunye Bootstrap JavaScript ọ bụla yana ịdabere na otu n'ime ngwugwu abụọ anyị. Ha abụọ bootstrap.bundle.jsgụnyere bootstrap.bundle.min.jsPopper maka ndụmọdụ ngwa anyị yana popovers. Maka ozi ndị ọzọ gbasara ihe etinyere na Bootstrap, biko hụ ngalaba ọdịnaya anyị .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Kewapụ iche

Ọ bụrụ na ị kpebie ịga na ngwọta edemede dị iche, Popper ga-ebu ụzọ bịa (ọ bụrụ na ị na-eji Tooltips ma ọ bụ popovers), na mgbe ahụ plugins Javascript anyị.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Modul

Ọ bụrụ na ị na-eji <script type="module">, biko rụtụ aka na iji Bootstrap anyị dị ka ngalaba modul .

Ngwa

Ịchọ ịmata ihe akụrụngwa chọrọ Javascript na Popper nke ọma? Pịa njikọ ihe ngosi ngosi dị n'okpuru. Ọ bụrụ na ị maghị maka nhazi ibe izugbe, nọgide na-agụ maka ndebiri ibe ihe atụ.

Gosi ihe ndị chọrọ Javascript

Mkpu maka ịchụpụ
Bọtịnụ maka ịtụgharị steeti yana ọrụ igbe igbe/ redio
Carousel maka omume, njikwa, na ihe ngosi slide niile
Dakọba maka ịtụgharị visibiliti ọdịnaya
Mbudata maka ngosipụta na idobe (na-achọkwa Popper )
Modal maka igosipụta, idokwa ya na omume mpịakọta
Navbar maka ịgbatị ngwa mgbakwunye anyị Collapse iji mejuputa omume na-anabata
Toasts maka igosipụta na ịchụpụ
Ntuziaka ngwaọrụ na popovers maka ngosipụta na idobe (na-achọkwa Popper )
Scrollspy maka omume mpịakọta na mmelite igodo

template mmalite

Jide n'aka na edobere ibe gị site na ụkpụrụ nhazi na mmepe kachasị ọhụrụ. Nke ahụ pụtara iji HTML5 doctype yana gụnyere mkpado meta nlele maka omume nnabata kwesịrị ekwesị. Tinye ya niile ọnụ na ibe gị kwesịrị ịdị ka nke a:

<!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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Maka usoro ndị ọzọ, gaa na docs okirikiri nhọrọ ukwuu ma ọ bụ ihe atụ gọọmentị anyị ka ịmalite ịtọpụta ọdịnaya na akụrụngwa saịtị gị.

Globals dị mkpa

Bootstrap na-eji ụdị na ntọala dị mkpa zuru ụwa ọnụ nke ị ga-achọ ịma mgbe ị na-eji ya, ihe niile fọrọ nke nta ka ọ bụrụ naanị maka ịhazigharị ụdị ihe nchọgharị obe. Ka anyị banye n'ime.

HTML5 doctype

Bootstrap chọrọ iji HTML5 doctype. Na-enweghị ya, ị ga-ahụ ụfọdụ funky ezughị ezu styling, ma gụnyere ya ekwesịghị ịkpata ọ bụla bukwanu hiccups.

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

mkpado meta na-anabata

A na-ebu ụzọ mepụta Bootstrap mkpanaka , atụmatụ nke anyị na-ebuli koodu maka ngwaọrụ mkpanaaka na mbụ wee bulie akụrụngwa dịka ọ dị mkpa site na iji ajụjụ mgbasa ozi CSS. Iji hụ na nsụgharị kwesịrị ekwesị na imetụ mbugharị maka ngwaọrụ niile, tinye mkpado meta ihe nlele na-anabata na faịlụ <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Ị nwere ike ịhụ ihe atụ nke a na-arụ ọrụ na template Starter .

Nhazi igbe

Maka nha kwụ ọtọ karịa na CSS, anyị na-agbanwe uru zuru ụwa box-sizingọnụ site content-boxna border-box. Nke a na-achọpụta paddingna ọ naghị emetụta obosara agbakọ ikpeazụ nke ihe mmewere, mana ọ nwere ike ịkpata nsogbu na ụfọdụ ngwanrọ ndị ọzọ dị ka Google Maps na Google Custom Search Engine.

N'oge a na-adịghị ahụkebe, ịchọrọ ịkagbu ya, jiri ihe dịka ndị a:

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

Site na snippet a dị n'elu, ihe ndị etinyere ọnụ—gụnyere ọdịnaya emepụtara site ::beforena — ::afterga-eketa aha akọwapụtara box-sizingmaka nke ahụ .selector-for-some-widget.

Mụtakwuo maka ụdị igbe na nha nha na CSS Tricks .

Malitegharịa ekwentị

Maka nrụgharị ihe nchọgharị ka emelitere, anyị na-eji Reboot dozie esemokwu n'ofe ihe nchọgharị na ngwaọrụ ebe anyị na-enye ntọgharị echiche karịa na ihe HTML nkịtị.

Ogbe

Jikọọ na mmepe nke Bootstrap ma jiri ihe enyemaka ndị a na-enyere ndị obodo aka.

Gụọ ma denye aha na blọọgụ Bootstrap gọọmentị .
Soro ndị Bootstrappers ibe gị kparịta ụka na IRC. Na ihe irc.libera.chatnkesa, na #bootstrapọwa.
Enwere ike ịchọta enyemaka mmejuputa na Stack Overflow (akpado bootstrap-5).
Ndị nrụpụta kwesịrị iji isiokwu bootstrapdị na ngwugwu na-agbanwe ma ọ bụ gbakwunye na ọrụ Bootstrap mgbe a na-ekesa site na npm ma ọ bụ usoro nnyefe yiri ya maka nchọpụta kacha.

Ị nwekwara ike soro @getbootstrap na Twitter maka asịrị ọhụrụ na vidiyo egwu dị egwu.