Start mat Bootstrap

Bootstrap ass e mächtege, Feature-gepackte Frontend Toolkit. Baut alles - vu Prototyp bis Produktioun - a Minutten.

Op dëser Säit

Schnellstart

Fänkt un andeems Dir Bootstrap's Produktiounsfäerdeg CSS a JavaScript iwwer CDN enthält ouni de Besoin fir Build Schrëtt. Kuckt et an der Praxis mat dëser Bootstrap CodePen Demo .

Erstellt eng nei index.htmlDatei an Ärem Projet root. Gitt den <meta name="viewport">Tag och fir entspriechend reaktiounsfäeger Verhalen op mobilen Apparater.

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

Enthält Bootstrap's CSS an JS. Setzt den <link>Tag an de <head>fir eis CSS, an den <script>Tag fir eise JavaScript-Bündel (inklusiv Popper fir Dropdowns, Poppers an Tooltips ze positionéieren) virum Schluss </body>. Léiert méi iwwer eis CDN Linken .

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

Dir kënnt och Popper an eis JS separat enthalen. Wann Dir net plangt Dropdowns, Popovers oder Tooltips ze benotzen, spuert e puer Kilobytes andeems Dir Popper net enthält.

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

Moien Welt! Öffnen d'Säit an Ärem gewielte Browser fir Är Bootstrapped Säit ze gesinn. Elo kënnt Dir ufänken mat Bootstrap ze bauen andeems Dir Ären eegene Layout erstellt , Dosende vu Komponenten bäigefüügt an eis offiziell Beispiller benotzt .

CDN Linken

Als Referenz, hei sinn eis primär CDN Linken.

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

Dir kënnt och den CDN benotze fir all vun eisen zousätzleche Builds op der Inhalter Säit ze sichen .

Nächst Schrëtt

Liest e bësse méi iwwer e puer wichteg global Ëmfeld Astellungen déi Bootstrap benotzt.
Liest iwwer wat am Bootstrap an eiser Inhaltssektioun abegraff ass an d'Lëscht vun de Komponenten déi JavaScript hei ënnen erfuerderen.
Braucht Dir e bësse méi Kraaft? Betruecht mam Bootstrap ze bauen andeems Dir d'Quelldateien iwwer Package Manager enthält .
Sicht Dir Bootstrap als Modul mat <script type="module">? Gitt w.e.g. op eis benotzt Bootstrap als Modul Sektioun.

JS Komponenten

Virwëtzeg wéi eng Komponente explizit eise JavaScript a Popper erfuerderen? Klickt op de Show Komponente Link hei ënnen. Wann Dir iwwerhaapt net sécher sidd iwwer déi allgemeng Säitstruktur, liest weider fir e Beispill Säit Schabloun.

Show Komponenten déi JavaScript erfuerderen

Alarmer fir entlooss
Knäppercher fir Staaten ze wiesselen an Checkbox / Radio Funktionalitéit
Karussell fir all Rutschverhalen, Kontrollen an Indikatoren
Zesummebroch fir Visibilitéit vum Inhalt ze wiesselen
Dropdowns fir ze weisen an ze positionéieren (erfuerdert och Popper )
Modale fir Affichage, Positionéierung a Scrollverhalen
Navbar fir eis Collapse an Offcanvas Plugins ze verlängeren fir reaktiounsfäeger Verhalen ëmzesetzen
Navs mam Tab-Plugin fir Inhaltspäicher ze wiesselen
Offcanvases fir Affichage, Positionéierung a Scroll Verhalen
Scrollspy fir Scrollverhalen an Navigatiounsupdates
Toasts fir ze weisen an ze entloossen
Tooltips a Popovers fir ze weisen an ze positionéieren (erfuerdert och Popper )

Wichteg globalen

Bootstrap beschäftegt eng Handvoll wichteg global Stiler an Astellungen, déi all bal ausschliesslech op d' Normaliséierung vu Cross-Browser Stiler ausgeriicht sinn. Loosst eis eran tauchen.

HTML5 doctype

Bootstrap erfuerdert d'Benotzung vum HTML5 Doktype. Ouni et gesitt Dir e puer funky an onkomplett Styling.

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

Responsive Meta Tag

Bootstrap gëtt als éischt mobil entwéckelt , eng Strategie an där mir als éischt de Code fir mobilen Apparater optimiséieren an dann d'Komponenten opskaléieren wéi néideg mat CSS Medienufroen. Fir richteg Rendering an Touch Zoomen fir all Apparater ze garantéieren, füügt de reaktiounsfäeger Viewport Meta Tag op Är <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Dir kënnt e Beispill vun dësem an Aktioun am Schnellstart gesinn .

Këscht Gréisst

Fir méi einfach Gréisst an CSS, schalte mir de globale box-sizingWäert vun content-boxop border-box. Dëst garantéiert datt paddinget net déi endgülteg berechnen Breet vun engem Element beaflosst, awer et kann Probleemer mat Drëtt Partei Software wéi Google Maps a Google Custom Search Engine verursaachen.

An der seltener Geleeënheet musst Dir et iwwerschreiden, benotzt eppes wéi folgend:

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

Mat dem uewe genannte Snippet, nestéiert Elementer - inklusiv generéiert Inhalt iwwer ::beforean ::after- wäerten all déi spezifizéiert box-sizingfir dat ierwen .selector-for-some-widget.

Léiert méi iwwer Këschtmodell a Gréisst bei CSS Tricks .

Neistarten

Fir verbessert Cross-Browser Rendering benotze mir Reboot fir Inkonsistenzen iwwer Browser an Apparater ze korrigéieren, wärend e bësse méi Meenungsäusserung Resets op gemeinsam HTML Elementer ubidden.

Communautéit

Bleift um Lafenden iwwer d'Entwécklung vu Bootstrap an erreecht d'Gemeinschaft mat dësen hëllefräiche Ressourcen.

Liesen an abonnéieren op The Official Bootstrap Blog .
Frot an entdeckt eis GitHub Diskussiounen .
Chat mat Matbierger Bootstrapper an IRC. Um irc.libera.chatServer, am #bootstrapKanal.
Ëmsetzung Hëllef kann um Stack Overflow fonnt ginn (tagged bootstrap-5).
D'Entwéckler sollen d'Schlësselwuert bootstrapop Packagen benotzen déi d'Funktionalitéit vum Bootstrap änneren oder addéieren wann se duerch npm oder ähnlech Liwwermechanismen verdeelen fir maximal Entdeckbarkeet.

Dir kënnt och @getbootstrap op Twitter verfollegen fir déi lescht Klatsch an genial Museksvideoen.