Source

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, veitt ókeypis af fólkinu á jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Margir af íhlutum okkar þurfa að nota JavaScript til að virka. Nánar tiltekið þurfa þeir jQuery , Popper.js og okkar eigin JavaScript viðbætur. Settu 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, svo Popper.js, og svo JavaScript viðbæturnar okkar.

Við notum grannur smíði jQuery , en full útgáfan er einnig studd.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Ertu forvitinn um hvaða íhlutir krefjast beinlínis jQuery, JS okkar og Popper.js? 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.

Okkar bootstrap.bundle.jsog bootstrap.bundle.min.jsinnihalda Popper , en ekki jQuery . Fyrir frekari upplýsingar um hvað er innifalið í Bootstrap, vinsamlegast skoðaðu innihaldshlutann okkar .

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 einnig Popper.js )
  • 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
  • Verkfæraleiðbeiningar og sprettigluggar til að birta og staðsetja (þarf líka Popper.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Fylgdu @getbootstrap á Twitter .
  • Lestu og gerðu áskrifandi að The Official Bootstrap Blog .
  • Spjallaðu við aðra Bootstrappera í IRC. Á irc.freenode.netþ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.