Aféierung

Fänkt un mat Bootstrap, dem weltbeléiftste Kader fir reaktiounsfäeger, mobil-éischt Siten ze bauen, mat jsDelivr an enger Schabloun Startsäit.

Op dëser Säit

Schnellstart

Sicht Dir fir séier Bootstrap op Äre Projet ze addéieren? Benotzt jsDelivr, e gratis Open Source CDN. Benotzt e Package Manager oder musst Dir d'Quelldateien eroflueden? Gitt op d'Downloads Säit .

CSS

Copy-paste de Stylesheet <link>an Ären <head>ier all aner Stylesheets fir eis CSS ze lueden.

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

JS

Vill vun eise Komponenten erfuerderen d'Benotzung vu JavaScript fir ze funktionéieren. Speziell erfuerderen se eis eege JavaScript Plugins a Popper . Plaz ee vun de folgende <script>s no um Enn vun Äre Säiten, direkt virum Ofschlosstag </body>, fir se z'aktivéieren.

Bündel

Füügt all Bootstrap JavaScript Plugin an Ofhängegkeet mat engem vun eisen zwee Bündel un. Béid bootstrap.bundle.jsan bootstrap.bundle.min.jsenthalen Popper fir eis Tooltips a Popovers. Fir méi Informatiounen iwwer wat am Bootstrap abegraff ass, kuckt w.e.g. eis Inhalter Sektioun.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Trennen

Wann Dir décidéiert mat der separater Skriptléisung ze goen, muss de Popper als éischt kommen (wann Dir Tooltips oder Popovers benotzt), an dann eis JavaScript Plugins.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Moduler

Wann Dir benotzt <script type="module">, kuckt w.e.g. op eis benotzt Bootstrap als Modul Sektioun.

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 eise Collapse Plugin ze verlängeren fir reaktiounsfäeger Verhalen ëmzesetzen
Offcanvases fir Affichage, Positionéierung a Scroll Verhalen
Toasts fir ze weisen an ze entloossen
Tooltips a Popovers fir ze weisen an ze positionéieren (erfuerdert och Popper )
Scrollspy fir Scrollverhalen an Navigatiounsupdates

Starter Schabloun

Gitt sécher datt Är Säiten mat de leschten Design- an Entwécklungsnormen opgeriicht sinn. Dat heescht en HTML5 Doktype benotzen an e Viewport Meta Tag fir entspriechend reaktiounsfäeger Verhalen enthalen. Setzt alles zesummen an Är Säite solle sou ausgesinn:

<!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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Fir déi nächst Schrëtt, besicht d' Layout Dokumenter oder eis offiziell Beispiller fir unzefänken den Inhalt an d'Komponente vun Ärem Site auszeleeën.

Wichteg globalen

Bootstrap beschäftegt eng Handvoll wichteg global Stiler an Astellungen, déi Dir musst bewosst sinn wann Dir se benotzt, 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 onkomplett Styling, awer och et sollt keng bedeitend Hick verursaachen.

<!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 an der Starter Schabloun 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äichen Ressourcen.

Liesen an abonnéieren op The Official Bootstrap Blog .
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.