Fara í aðalefni Farðu í skjalaleiðsögn
in English

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.

Á þessari síð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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

Margir af íhlutum okkar þurfa að nota JavaScript til að virka. Nánar tiltekið, þeir þurfa okkar eigin JavaScript viðbætur og Popper . Settu eitt af eftirfarandi <script>s nálægt lok síðna þinna, rétt fyrir lokunarmerkið </body>, til að virkja þær.

Knippi

Láttu hvert Bootstrap JavaScript tappi og ósjálfstæði fylgja með einum af tveimur búntum okkar. Bæði bootstrap.bundle.jsog bootstrap.bundle.min.jsinnihalda Popper fyrir verkfæraleiðbeiningar okkar og popovers. 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/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Einingar

Ef þú notar <script type="module">, vinsamlegast skoðaðu okkar notkun Bootstrap sem einingahluta .

Í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ð framlengja Collapse viðbótina okkar til að innleiða móttækilega hegðun
  • Skál til að sýna og henda
  • Verkfæraleiðbeiningar og sprettigluggar til að birta og staðsetja (þarf líka Popper )
  • Scrollspy fyrir skrunhegðun og leiðsöguuppfærslur

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

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Fyrir næstu skref, farð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">

Þú 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 á algenga HTML þætti.

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