Source

Kupu Whakataki

Me timata ki a Bootstrap, te anga tino rongonui o te ao mo te hanga i nga pae aro, waea-tuatahi, me te jsDelivr me te wharangi timatanga tauira.

Te tiimata tere

Kei te titiro ki te taapiri tere a Bootstrap ki to kaupapa? Whakamahia te jsDelivr, i whakaratohia mo te kore utu e te hunga i te jsDelivr. Ma te whakamahi i te kaiwhakahaere kete me tango ranei i nga konae puna? Haere ki te whaarangi tango.

CSS

Tārua-whakapirihia te pepa kāhua <link>ki roto i a koe <head>i mua i era atu momo rau kāhua hei uta i a maatau CSS.

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

JS

Ko te nuinga o a maatau waahanga e hiahia ana ki te whakamahi i te JavaScript hei mahi. Inaa, ka hiahia ratou jQuery , Popper.js , me a maatau ake taputapu JavaScript. Tuhia nga <script>s e whai ake nei ki te pito o o wharangi, i mua tonu i te </body>tohu kati, kia taea ai. Ko te jQuery te tuatahi, katahi ko Popper.js, katahi ko a maatau taputapu JavaScript.

Ka whakamahia e matou te hanga iti o te jQuery , engari kei te tautokohia te putanga katoa.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Kei te mohio ko wai nga waahanga e tino hiahia ana ki te jQuery, ki a maatau JS, me Popper.js? Paatohia te hono whakaatu wae i raro nei. Mena karekau koe e tino mohio mo te hanganga wharangi whanui, panui tonu mo tetahi tauira tauira tauira.

Ko ta maatau bootstrap.bundle.jsme bootstrap.bundle.min.jste whakauru ko Popper , engari ehara i te jQuery . Mo etahi atu korero mo nga mea kei roto i te Bootstrap, tirohia ta maatau waahanga tirotiro .

Whakaatuhia nga waahanga e hiahia ana ki te JavaScript
  • Matohi mo te whakakore
  • Patene mo te takahuri ahua me te pouakataki/mahinga reo irirangi
  • Carousel mo nga whanonga kiriata katoa, mana whakahaere me nga tohu
  • Tiango mo te takahuri i te tirohanga o te ihirangi
  • Whakataka mo te whakaatu me te tuunga (me Popper.js hoki )
  • Nga tauira mo te whakaatu, te tuunga, me te whanonga panuku
  • Navbar mo te whakawhānui ake i to maatau Tiango mono ki te whakatinana i te whanonga aro
  • Nga aki utauta me nga pouvers mo te whakaatu me te tuunga (me Popper.js hoki )
  • Scrollspy mo te whanonga panuku me nga whakahou whakatere

tauira timata

Kia mohio koe ki te whakarite i o wharangi me nga paerewa hoahoa me te whanaketanga hou. Ko te tikanga ko te whakamahi i te momo tuhinga HTML5 me te whakauru i te tohu tohu meta tiro mo nga whanonga whakautu tika. Whakakotahitia katoatia kia penei te ahua o o wharangi:

<!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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Koina noa te hiahia mo nga whakaritenga wharangi whanui. Tirohia nga tuhinga Tahora , a maatau tauira whaimana ranei hei timata ki te whakatakoto i nga ihirangi me nga waahanga o to pae.

Te ao nui

Ka whakamahi a Bootstrap i etahi momo ahua nui o te ao me nga tautuhinga e tika ana kia mohio koe i te wa e whakamahi ana, ko enei mea katoa he mea hanga noa ki te whakatikatika i nga momo tirotiro whakawhiti. Me ruku tatou.

HTML5 momo tuhinga

Me whakamahi a Bootstrap i te momo tuhinga HTML5. Ki te kore tenei, ka kite koe i etahi momo rorirori kaore i oti, engari ko te whakauru mai kia kaua e raru nui.

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

tūtohu meta urupare

I whakawhanakehia a Bootstrap mo te waea pūkoro i te tuatahi , he rautaki e arotau ai tatou i te waehere mo nga taputapu waea i te tuatahi, katahi ka piki ake nga waahanga e tika ana ma te whakamahi i nga patai pāpāho CSS. Hei whakarite i te whakaputa tika me te topa pa mo nga taputapu katoa, taapirihia te tohu meta tauranga tirohanga urupare ki to <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Ka taea e koe te kite i tetahi tauira o tenei mahi i roto i te tauira timata .

Pouaka-rahi

Mo te rahinga maamaa ake i roto i te CSS, ka huri tatou i te box-sizinguara o te ao mai i content-boxte border-box. Ma tenei ka paddingkore e pa ki te whanui rorohiko whakamutunga o tetahi huānga, engari ka raru pea ki etahi rorohiko tuatoru penei i nga Mahere Google me te Miihini Rapu Ritenga a Google.

I nga wa onge ka hiahia koe ki te whakakore, whakamahia tetahi mea penei:

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

Ma te snippet i runga ake nei, ko nga huānga kohanga—tae atu ki nga ihirangi i hangaia ma te— ::beforeka ::afterwhakawhiwhia katoatia nga mea kua tohua box-sizingmo tera .selector-for-some-widget.

Ako atu mo te tauira pouaka me te rahi i CSS Tricks .

Whakahou ano

Mo te pai ake o te whakaputa whakawhiti-tirotiro, ka whakamahi matou i te Reboot ki te whakatika i nga maiorooro puta noa i nga kaitirotiro me nga taputapu i te wa e whakarato ana i etahi atu taapiri whakaaro ki nga huānga HTML noa.

Hapori

Kia mau ki nga korero mo te whanaketanga o Bootstrap me te toro atu ki te hapori me enei rauemi awhina.

  • Whaia @getbootstrap i runga i Twitter .
  • Panuitia me te ohauru ki te Blog Bootstrap Official .
  • Kōrerorero me o hoa Bootstrappers i IRC. I runga i te irc.freenode.nettūmau, i te ##bootstraphongere.
  • Ka kitea pea te awhina whakatinana i Stack Overflow (tagged bootstrap-4).
  • Me whakamahi nga kaiwhakawhanake i te kupu matua bootstrapi runga i nga kete ka whakarereke, ka taapiri atu ranei ki nga mahi a Bootstrap i te wa e tohatoha ana ma roto i te npm me nga momo tuku rite mo te tino kitea.

Ka taea hoki e koe te whai @getbootstrap i runga i Twitter mo nga korero hou me nga riipene puoro whakamataku.