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.

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Ọtụtụ n'ime akụrụngwa anyị chọrọ iji Javascript rụọ ọrụ. Kpọmkwem, ha chọrọ jQuery , Popper , na ngwa mgbakwunye Javascript nke anyị. Anyị na-eji jQuery's slim build , mana a na-akwadokwa ụdị zuru ezu.

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. jQuery ga-ebu ụzọ bịa, mgbe ahụ Popper, na mgbakwunye Javascript anyị.

Mkpokọta

Tinye mgbakwunye Bootstrap JavaScript ọ bụla yana otu n'ime ngwugwu abụọ anyị. Ha abụọ bootstrap.bundle.jsgụnyere bootstrap.bundle.min.jsPopper maka ngwa ọrụ anyị na popovers, mana ọ bụghị jQuery . Buru ụzọ tinye jQuery, emesia ngwugwu Bootstrap JavaScript. 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/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>

Kewapụ iche

Ọ bụrụ na ị kpebie ịga na ngwọta script 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/[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>

Ngwa

Ịchọ ịmata ihe akụrụngwa chọrọ n'ụzọ doro anya jQuery, Javascript anyị, na Popper? Pịa njikọ ihe ngosi ngosi dị n'okpuru. Ọ bụrụ na ịmaghị maka nhazi ibe ahụ, 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
Scrollspy maka omume mpịakọta na mmelite igodo
Ntuziaka ngwaọrụ na popovers maka ngosipụta na idobe (na-achọkwa Popper )

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

Nke ahụ bụ ihe niile ị chọrọ maka n'ozuzu ibe chọrọ. 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, shrink-to-fit=no">

Ị 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 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ị akwụrụ—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ị .
Gị na 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-4).
Ndị nrụpụta kwesịrị iji isiokwu bootstrapdị na ngwugwu na-agbanwe ma ọ bụ gbakwunye na arụmọrụ nke 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.

CSP na SVG agbakwunyere

Ọtụtụ ngwa Bootstrap gụnyere SVG agbakwunyere na CSS anyị ka ọ bụrụ ụdị ngwa ọ bụla na-adị mfe n'ofe ihe nchọgharị na ngwaọrụ. Maka ndị otu nwere nhazi CSP siri ike karị , anyị edekọla ihe niile gbasara SVG anyị agbakwunyere (a na-etinye ha niile site na background-image) ka ị nwee ike nyochaa nhọrọ gị nke ọma.

Bọtịnụ mechie (a na-eji na ọkwa na modal)
Igbe nlele na bọtịnụ redio
Ụdị mgba ọkụ
Akara ngosi nkwado ụdị
Nhọrọ nhọrọ nhọrọ
Njikwa carousel
Pịa bọtịnụ ngbanwe

Dabere na mkparịta ụka obodo , ụfọdụ nhọrọ maka ịza nke a na koodu nke gị gụnyere dochie URL na akụ ndị obodo, wepụ ihe onyonyo na iji onyonyo inline (agaghị ekwe omume na mpaghara niile), yana gbanwee CSP gị. Ndụmọdụ anyị bụ iji nlezianya nyochaa atumatu nchekwa nke gị wee kpebie ụzọ kacha mma ịga n'ihu, ọ bụrụ na ọ dị mkpa.