Me timata ki a Bootstrap

Ko te Bootstrap he kete taputapu o mua kaha, kua whakakiia ki nga ahuatanga. Hangaia tetahi mea—mai i te tauira ki te hanga—i roto i nga meneti.

I tenei wharangi

Te tiimata tere

Tīmatahia ma te whakauru i te CSS kua rite a Bootstrap me te JavaScript ma te CDN me te kore e hiahia mo etahi waahanga hanga. Tirohia i roto i te mahi me tenei Bootstrap CodePen demo .

Waihangahia he index.htmlkonae hou ki to pakiaka kaupapa. Whakauruhia te <meta name="viewport">tohu mo te whanonga urupare tika i roto i nga taputapu waea.

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

Whakauruhia te CSS me te JS a Bootstrap. Tuhia te <link>tohu ki roto i te <head>mo to tatou CSS, me te <script>tohu mo to tatou paihere JavaScript (tae atu ki te Popper mo te whakanoho i nga takahanga, poppers, me nga taputapu) i mua i te kati </body>. Ako atu mo o maatau hononga CDN .

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

Ka taea hoki e koe te whakauru i a Popper me a maatau JS motuhake. Mena karekau koe e whakaaro ki te whakamahi i nga takahanga, nga pouvers, nga aki taputapu ranei, tiakina etahi kiropaita ma te kore e whakauru i a 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>

Kia ora, te ao! Whakatuwheratia te wharangi i to kaitirotiro e pai ana kia kite i to wharangi Bootstrapped. Inaianei ka taea e koe te timata ki te hanga me Bootstrap ma te hanga i to ake ake tahora , taapiri i nga waahanga maha , me te whakamahi i o maatau tauira whai mana .

hononga CDN

Hei tohutoro, koinei o maatau hononga CDN tuatahi.

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

Ka taea hoki e koe te whakamahi i te CDN ki te tiki i etahi atu o a maatau hanga kua whakarārangihia ki te wharangi Ihirangi .

Nga mahi ka whai ake

Pānuihia etahi atu korero mo etahi tautuhinga taiao ao nui e whakamahia ana e Bootstrap.
Panuihia nga korero kei roto i te Bootstrap i roto i ta maatau waahanga tirotiro me te rarangi o nga waahanga e hiahia ana ki te JavaScript kei raro nei.
Me iti ake te mana? Whakaarohia te hanga me Bootstrap ma te whakauru i nga konae puna ma te kaiwhakahaere kete .
Kei te titiro ki te whakamahi i a Bootstrap hei kōwae me te <script type="module">? Tena tirohia to maatau whakamahi Bootstrap hei waahanga waahanga.

Nga waahanga JS

Kei te mohio ko nga waahanga e tino hiahia ana ki a maatau JavaScript me Popper? Paatohia te hono whakaatu i nga waahanga kei 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 whakaroa atu i a maatau taputapu Tiango me Offcanvas ki te whakatinana i nga whanonga aro
Navs me te Ripa mono mo te takahuri i nga pihanga ihirangi
He kanapa mo te whakaatu, te tuunga, me te whanonga panuku
Scrollspy mo te whanonga panuku me nga whakahou whakatere
Toasts mo te whakaatu me te whakakore
Nga aki utauta me nga pouvers mo te whakaatu me te tuunga (me Popper ano hoki )

Te ao nui

Kei te whakamahi a Bootstrap i te maha o nga momo ahua nui o te ao me nga tautuhinga, 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, ka kite koe i etahi momo ahua rorirori me te kore e oti.

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

Ka kite koe i tetahi tauira o tenei mahi i te timatanga tere .

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 .
Patai me te tirotiro i a maatau Matapakinga GitHub .
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.