Kynning

Byrjaðu með Bootstrap, vinsælasta ramma heims til að byggja upp móttækilegar, farsíma-fyrstu síður, með jsDelivr og sniðmátsbyrjunarsíðu.

Fljót byrjun

Viltu fljótt bæta Bootstrap við verkefnið þitt? Notaðu jsDelivr, ókeypis opinn CDN. Notarðu pakkastjóra eða þarf að hlaða niður frumskránum? Farðu á niðurhalssíðuna .

CSS

Afritaðu og líma stílblaðið <link>inn í þitt á <head>undan öllum öðrum stílblöðum til að hlaða CSS okkar.

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

JS

Margir af íhlutum okkar þurfa að nota JavaScript til að virka. Nánar tiltekið þurfa þeir jQuery , Popper og okkar eigin JavaScript viðbætur. Við notum grannur smíði jQuery , en full útgáfan er einnig studd.

Settu eitt af eftirfarandi <script>s nálægt lok síðna þinna, rétt fyrir lokunarmerkið </body>, til að virkja þær. jQuery verður að koma fyrst, síðan Popper og svo JavaScript viðbæturnar okkar.

Knippi

Láttu hvert Bootstrap JavaScript viðbætur fylgja með einum af tveimur búntum okkar. Bæði bootstrap.bundle.jsog bootstrap.bundle.min.jsinnihalda Popper fyrir verkfæraábendingar okkar og popovers, en ekki jQuery . Láttu fyrst jQuery fylgja með, síðan Bootstrap JavaScript búnt. Fyrir frekari upplýsingar um hvað er innifalið í Bootstrap, vinsamlegast skoðaðu innihaldshlutann okkar .

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

Aðskilið

Ef þú ákveður að fara með aðskildu forskriftalausnina verður Popper að koma fyrst (ef þú ert að nota verkfæraábendingar eða popovers), og síðan JavaScript viðbæturnar okkar.

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

Íhlutir

Ertu forvitinn um hvaða íhlutir þurfa beinlínis jQuery, JavaScript okkar og Popper? Smelltu á hlekkinn sýna íhluti hér að neðan. Ef þú ert ekki viss um síðuskipulagið skaltu halda áfram að lesa fyrir sýnishorn síðusniðmáts.

Sýna íhluti sem krefjast JavaScript

Viðvaranir um að vísa frá
Hnappar til að skipta um stöðu og gátreit/útvarpsvirkni
Hringekja fyrir alla rennibrautarhegðun, stýringar og vísbendingar
Dragðu saman til að skipta á sýnileika efnis
Fellilistar til að birta og staðsetja (þarf líka Popper )
Aðferðir til að sýna, staðsetja og fletta hegðun
Navbar til að framlengja Collapse viðbótina okkar til að innleiða móttækilega hegðun
Scrollspy fyrir skrunhegðun og leiðsöguuppfærslur
Verkfæraleiðbeiningar og sprettigluggar til að birta og staðsetja (þarf líka Popper )

Sniðmát fyrir byrjendur

Vertu viss um að setja upp síðurnar þínar með nýjustu hönnunar- og þróunarstöðlum. Það þýðir að nota HTML5 doctype og innihalda viewport meta tag fyrir rétta móttækilega hegðun. Settu þetta allt saman og síðurnar þínar ættu að líta svona út:

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

Það er allt sem þú þarft fyrir heildarkröfur um síðu. Skoðaðu útlitsskjölin eða opinberu dæmin okkar til að byrja að setja upp efni og íhluti síðunnar þinnar.

Mikilvægir alheimsmenn

Bootstrap notar handfylli af mikilvægum alþjóðlegum stílum og stillingum sem þú þarft að vera meðvitaður um þegar þú notar það, sem allar eru nánast eingöngu miðaðar að því að staðla stíla í gegnum vafra. Við skulum kafa inn.

HTML5 doctype

Bootstrap krefst notkunar á HTML5 doctype. Án þess muntu sjá angurvær ófullnægjandi stíl, en það ætti ekki að valda töluverðum hiksta.

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

Móttækilegt metamerki

Bootstrap er þróað fyrir farsíma fyrst , stefna þar sem við fínstillum kóða fyrir farsíma fyrst og stækkum síðan íhluti eftir þörfum með því að nota CSS fjölmiðlafyrirspurnir. Til að tryggja rétta myndbirtingu og snertiaðdrátt fyrir öll tæki skaltu bæta viðbragðsmikla sýnishorninu við <head>.

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

Þú getur séð dæmi um þetta í aðgerð í byrjunarsniðmátinu .

Box-stærð

Til að fá einfaldari stærð í CSS breytum við alþjóðlegu box-sizinggildinu úr content-boxí border-box. Þetta tryggir paddingað það hafi ekki áhrif á endanlega reiknaða breidd frumefnis, en það getur valdið vandræðum með hugbúnað frá þriðja aðila eins og Google kortum og Google sérsniðinni leitarvél.

Í einstaka tilfellum sem þú þarft að hnekkja því skaltu nota eitthvað eins og eftirfarandi:

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

Með ofangreindu brotinu munu hreiðraðir þættir - þar á meðal myndað efni í gegnum ::beforeog - ::afterallir erfa það sem tilgreint er box-sizingfyrir það .selector-for-some-widget.

Lærðu meira um gerð kassa og stærð á CSS Tricks .

Endurræstu

Til að bæta flutning í gegnum vafra notum við endurræsingu til að leiðrétta ósamræmi milli vafra og tækja á sama tíma og við bjóðum upp á örlítið skoðanari endurstillingar á algengum HTML þáttum.

Samfélag

Fylgstu með þróun Bootstrap og náðu til samfélagsins með þessum gagnlegu úrræðum.

Lestu og gerðu áskrifandi að The Official Bootstrap Blog .
Spjallaðu við aðra Bootstrappera í IRC. Á irc.libera.chatþjóninum, á #bootstraprásinni.
Innleiðingarhjálp má finna á Stack Overflow (merkt bootstrap-4).
Hönnuðir ættu að nota lykilorðið bootstrapá pökkum sem breyta eða bæta við virkni Bootstrap þegar þeir dreifa í gegnum npm eða álíka afhendingaraðferðir til að fá hámarks uppgötvun.

Þú getur líka fylgst með @getbootstrap á Twitter fyrir nýjustu slúðrið og frábær tónlistarmyndbönd.

CSP og innbyggð SVG

Nokkrir Bootstrap íhlutir innihalda innbyggða SVG í CSS okkar til að stilla íhluti stöðugt og auðveldlega í vöfrum og tækjum. Fyrir stofnanir með strangari CSP stillingar höfum við skráð öll tilvik af innbyggðum SVG skjölum okkar (sem öll eru notuð í gegnum background-image) svo þú getir farið betur yfir valkostina þína.

Lokahnappur (notaður í viðvörunum og aðferðum)
Sérsniðnir gátreiti og útvarpshnappar
Form rofar
Tákn fyrir staðfestingu eyðublaða
Sérsniðnar valmyndir
Stjórna hringekju
Skiptahnappar á Navbar

Byggt á samræðum samfélagsins , eru nokkrir möguleikar til að taka á þessu í þínum eigin kóðagrunni að skipta út vefslóðum fyrir staðbundnar eignir, fjarlægja myndirnar og nota innbyggðar myndir (ekki mögulegt í öllum hlutum) og breyta CSP þínum. Tilmæli okkar eru að fara vandlega yfir eigin öryggisstefnu og ákveða bestu leiðina fram á við, ef þörf krefur.