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, 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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 , me a maatau ake taputapu JavaScript. Ka whakamahia e matou te hanga iti o te jQuery , engari kei te tautokohia te putanga katoa.

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. Me haere mai te jQuery i te tuatahi, katahi ko Popper, katahi a maatau taputapu JavaScript.

Paihere

Whakaurua ia Bootstrap JavaScript mono me tetahi o a maatau paihere e rua. E rua bootstrap.bundle.jsme bootstrap.bundle.min.jste whakauru Popper mo o maatau taputapu me nga popovers, engari kaua ko jQuery . Whakaurua te jQuery i te tuatahi, katahi ko te paihere JavaScript Bootstrap. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Waehanga

Kei te mohio ko nga waahanga e tino hiahia ana ki te jQuery, to tatou JavaScript, me te Popper? Paatohia te hono whakaatu wae i raro nei. Mena karekau koe e tino mohio mo te hanganga o te wharangi, panui tonu mo tetahi tauira tauira wharangi.

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
Scrollspy mo te whanonga panuku me nga whakahou whakatere
Nga aki utauta me nga pouvers mo te whakaatu me te tuunga (me Popper ano hoki )

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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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.

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

Nga CSP me nga SVG kua whakauruhia

He maha nga waahanga Bootstrap kei roto ko nga SVG kua whakauruhia ki roto i a maatau CSS ki te whakakakahu i nga waahanga i nga wa katoa me te ngawari puta noa i nga kaitirotiro me nga taputapu. Mo nga whakahaere e kaha ake ana nga whirihoranga CSP , kua tuhia e matou nga ahuatanga katoa o a maatau SVG kua whakauruhia (he tono katoa ma background-image) kia taea ai e koe te arotake i o whiringa.

Patene kati (whakamahia ki nga matohi me nga tikanga)
Pouakataki ritenga me nga paatene reo irirangi
Puka whakakā
Puka tohu whakamana
Nga tahua whiriwhiri ritenga
Nga mana whakahaere carousel
Pātene takahuri paewhakatere

I runga i nga korero a te hapori , ko etahi o nga whiringa mo te whakatika i tenei i roto i to ake turanga waehere ko te whakakapi i nga URL me nga rawa e whakahaerehia ana i te rohe, te tango i nga whakaahua me te whakamahi i nga whakaahua raina (kaore e taea i nga waahanga katoa), me te whakarereke i to CSP. Ko ta matou kupu tohutohu me ata arotake i a koe ake kaupapa here haumarutanga me te whakatau i te huarahi pai whakamua, mena e tika ana.