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.