Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
in English

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.

I tenei wharangi

Te tiimata tere

Kei te titiro ki te taapiri tere a Bootstrap ki to kaupapa? Whakamahia te jsDelivr, he CDN puna tuwhera kore utu. 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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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 ki a maatau ake JavaScript mono me Popper . Tuhia tetahi o nga mea e whai ake nei <script>ki te pito o to wharangi, i mua tonu i te tohu kati </body>, kia taea ai.

Paihere

Whakaurua ia Bootstrap JavaScript mono me te whakawhirinaki ki tetahi o a maatau paihere e rua. E rua bootstrap.bundle.jsme bootstrap.bundle.min.jste whakauru Popper mo o maatau taputapu me nga pouvers. Mo etahi atu korero mo nga mea kei roto i te Bootstrap, tirohia ta maatau waahanga tirotiro .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Wehewehe

Mena ka whakatau koe ki te haere me te otinga tuhinga motuhake, me haere mai a Popper i te tuatahi (mehemea kei te whakamahi koe i nga aki taputapu, i nga popovers ranei), katahi a maatau taputapu JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Kōwae

Mena kei te whakamahi koe <script type="module">, tirohia to maatau whakamahi Bootstrap hei waahanga waahanga.

Waehanga

Kei te mohio ko nga waahanga e tino hiahia ana ki a maatau JavaScript me Popper? 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.

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 ano 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
  • He kanapa mo te whakaatu, te tuunga, me te whanonga panuku
  • Toasts mo te whakaatu me te whakakore
  • Nga aki utauta me nga pouvers mo te whakaatu me te tuunga (me Popper ano 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">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Mo nga mahi ka whai ake, toro ki nga tuhinga Tahora , ki a maatau tauira whaimana ranei hei timata ki te whakatakoto i nga ihirangi me nga waahanga o to pae.

Te ao nui

Kei te 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 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 pūkoro i te tuatahi, katahi ka whakahiahia nga waahanga ka tika ma te whakamahi i nga patai pāpāho CSS. Hei whakarite kia tika te whakaputanga 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">

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 whakarite kia 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.

  • Panuitia me te ohauru ki te Blog Bootstrap Official .
  • Kōrerorero me o hoa Bootstrappers i IRC. I runga i te irc.libera.chattūmau, i te #bootstraphongere.
  • Ka kitea pea te awhina whakatinana i Stack Overflow (tagged bootstrap-5).
  • Me whakamahi nga kaiwhakawhanake i te kupu matua bootstrapi runga i nga kete ka whakarereke, ka taapiri atu ranei ki te 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.