Byrjaðu með Bootstrap

Bootstrap er öflugt, fullkomið framendaverkfærasett. Smíðaðu hvað sem er - frá frumgerð til framleiðslu - á nokkrum mínútum.

Á þessari síðu

Fljót byrjun

Byrjaðu á því að setja Bootstrap framleiðslutilbúna CSS og JavaScript í gegnum CDN án þess að þurfa að byggja skref. Sjáðu það í reynd með þessari Bootstrap CodePen kynningu .

Búðu til nýja index.htmlskrá í verkefnisrótinni þinni. Láttu <meta name="viewport">merkið líka fylgja með fyrir rétta móttækilega hegðun í fartækjum.

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

Láttu Bootstrap CSS og JS fylgja með. Settu <link>merkið í <head>fyrir CSS okkar og <script>merkið fyrir JavaScript pakkann okkar (þar á meðal Popper til að staðsetja fellivalmyndir, poppara og verkfæraábendingar) fyrir lokun </body>. Lærðu meira um CDN tenglana okkar .

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

Þú getur líka látið Popper og JS okkar fylgja með. Ef þú ætlar ekki að nota fellivalmyndir, sprettiglugga eða verkfæraábendingar skaltu spara kílóbæt með því að hafa Popper ekki með.

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

Halló heimur! Opnaðu síðuna í vafranum þínum að velja til að sjá Bootstraped síðuna þína. Nú geturðu byrjað að byggja með Bootstrap með því að búa til þitt eigið skipulag , bæta við tugum íhluta og nýta opinberu dæmin okkar .

CDN tenglar

Til viðmiðunar eru hér aðal CDN tenglar okkar.

Lýsing	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`

Þú getur líka notað CDN til að sækja allar viðbótarsmíðar okkar sem eru skráðar á innihaldssíðunni .

Næstu skref

Lestu aðeins meira um nokkrar mikilvægar alþjóðlegar umhverfisstillingar sem Bootstrap notar.
Lestu um hvað er innifalið í Bootstrap í innihaldshlutanum okkar og listanum yfir íhluti sem krefjast JavaScript hér að neðan.
Þarftu aðeins meiri kraft? Íhugaðu að byggja með Bootstrap með því að láta frumskrárnar fylgja með pakkastjóranum .
Viltu nota Bootstrap sem einingu með <script type="module">? Vinsamlegast vísaðu til okkar með því að nota Bootstrap sem einingahluta .

JS íhlutir

Ertu forvitinn um hvaða íhlutir þurfa sérstaklega JavaScript og Popper? Smelltu á hlekkinn sýna íhluti hér að neðan. Ef þú ert yfirhöfuð óviss um almenna síðuuppbyggingu skaltu halda áfram að lesa fyrir dæmi um síðusniðmát.

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ð útvíkka Collapse og Offcanvas viðbætur til að innleiða móttækilega hegðun
Navs með Tab viðbótinni til að skipta um efnisrúður
Offcanvases til að sýna, staðsetja og fletta hegðun
Scrollspy fyrir skrunhegðun og leiðsöguuppfærslur
Skál til að sýna og henda
Verkfæraleiðbeiningar og sprettigluggar til að birta og staðsetja (þarf líka Popper )

Mikilvægir alheimsmenn

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

HTML5 doctype

Bootstrap krefst notkunar á HTML5 doctype. Án þess muntu sjá angurvær og ófullnægjandi stíl.

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

Þú getur séð dæmi um þetta í aðgerð í hraðbyrjun .

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

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

Lestu og gerðu áskrifandi að The Official Bootstrap Blog .
Spyrðu og skoðaðu GitHub umræður okkar .
Spjallaðu við aðra Bootstrappera í IRC. Á irc.libera.chatþjóninum, á #bootstraprásinni.
Innleiðingarhjálp má finna á Stack Overflow (merkt bootstrap-5).
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 svipaða afhendingaraðferðir til að fá hámarks uppgötvanleika.

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