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.
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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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.js
an bootstrap.bundle.min.js
enthalen 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-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>
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
- 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-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>
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-sizing
Wäert vun content-box
op border-box
. Dëst garantéiert datt padding
et 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 ::before
an ::after
- wäerten all déi spezifizéiert box-sizing
fir 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.chat
Server, am#bootstrap
Kanal. - Ëmsetzung Hëllef kann um Stack Overflow fonnt ginn (tagged
bootstrap-5
). - D'Entwéckler sollen d'Schlësselwuert
bootstrap
op 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.