Mafere na isi ọdịnaya Gaa na ntugharị docs
Check
in English

Bido na Bootstrap

Bootstrap bụ ngwa ọrụ n'ihu nwere njiri mara ike. Wulite ihe ọ bụla - site na prototype ruo mmepụta - na nkeji.

Na ibe a

Mmalite ngwa ngwa

Bido site na itinye Bootstrap CSS dị njikere na Javascript site na CDN na-enweghị mkpa usoro ihe nrụpụta ọ bụla. Jiri ihe ngosi Bootstrap CodePen hụ ya na omume .


  1. Mepụta index.htmlfaịlụ ọhụrụ na mgbọrọgwụ ọrụ gị. Tinye <meta name="viewport">mkpado ahụ yana maka omume anabatara nke ọma na ngwaọrụ mkpanaka.

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

  2. Gụnye CSS Bootstrap na JS. Tinye <link>mkpado n'ime <head>CSS anyị, na <script>mkpado maka ngwugwu Javascript anyị (gụnyere Popper maka idobe dropdowns, poppers, na Tooltips) tupu mmechi </body>. Mụtakwuo maka njikọ CDN anyị .

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

    Ị nwekwara ike ịgụnye Popper na JS anyị iche. Ọ bụrụ na ị naghị eme atụmatụ iji dropdowns, popovers, ma ọ bụ Tooltips, chekwaa ụfọdụ kilobytes site na etinyeghị Popper.

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

  3. Ndewo Ụwa! Mepee ibe ahụ n'ihe nchọgharị ị họọrọ ka ịhụ ibe Bootstrapped gị. Ugbu a ị nwere ike ibido jiri Bootstrap rụọ ụlọ site na imepụta okirikiri nhọrọ ukwuu , tinye ọtụtụ akụrụngwa yana iji ihe atụ gọọmentị anyị .

Dịka ntụaka, ebe a bụ njikọ CDN mbụ anyị.

Nkọwa URL
CSS https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

Ị nwekwara ike iji CDN nweta ihe ọ bụla n'ime ihe nrụpụta anyị depụtara na ibe ọdịnaya .

Nzọụkwụ ọzọ

Akụkụ JS

Ị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 na Offcanvas iji mejuputa omume na-anabata
  • Navs nwere ngwa mgbakwunye Tab maka ịtụgharị pane ọdịnaya
  • Oghere mkpuchi maka ngosipụta, idokwa ya na omume mpịakọta
  • Scrollspy maka omume mpịakọta na mmelite igodo
  • Toasts maka igosipụta na ịchụpụ
  • Ntuziaka ngwaọrụ na popovers maka ngosipụta na idobe (na-achọkwa Popper )

Globals dị mkpa

Bootstrap na-eji ụdị na ntọala dị mkpa zuru ụwa ọnụ, ha 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 na ezughị ezu styling.

<!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-eme na mmalite ngwa ngwa .

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

Nọgidenụ na-emepe emepe maka mmepe nke Bootstrap wee jiri ihe enyemaka ndị a na-enyere ndị obodo aka.

  • Gụọ ma denye aha na blọọgụ Bootstrap gọọmentị .
  • Rịọ wee nyochaa Mkparịta ụka GitHub anyị .
  • 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.