Source

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, nke ndị folks nyere n'efu na jsDelivr. 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Ọtụtụ n'ime akụrụngwa anyị chọrọ iji Javascript rụọ ọrụ. Kpọmkwem, ha chọrọ jQuery , Popper.js , na ngwa mgbakwunye Javascript nke anyị. Debe <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.js, na mgbakwunye Javascript anyị.

Anyị na-eji jQuery's slim build , mana a na-akwadokwa ụdị zuru ezu.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Ịchọ ịmata ihe akụrụngwa chọrọ n'ụzọ doro anya jQuery, JS anyị na Popper.js? 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.js )
Modal maka igosipụta, idokwa ya na omume mpịakọta
Navbar maka ịgbatị ngwa mgbakwunye anyị Collapse iji mejuputa omume na-anabata
Ntuziaka ngwaọrụ na popovers maka ngosipụta na idowe (na-achọkwa Popper.js )
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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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ị 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.

Soro @getbootstrap na Twitter .
Gụọ ma denye aha na blọọgụ Bootstrap gọọmentị .
Soro ndị Bootstrappers ibe gị kparịta ụka na IRC. Na ihe irc.freenode.netnkesa, 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.