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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Vill vun eise Komponenten erfuerderen d'Benotzung vu JavaScript fir ze funktionéieren. Speziell erfuerderen se jQuery , Popper , an eis eege JavaScript Plugins. Mir benotzen jQuery's schlank Build , awer déi voll Versioun gëtt och ënnerstëtzt.

Plaz ee vun de folgende <script>s no um Enn vun Äre Säiten, direkt virum Ofschlosstag </body>, fir se z'aktivéieren. jQuery muss als éischt kommen, dann Popper, an dann eis JavaScript Plugins.

Bündel

Füügt all Bootstrap JavaScript Plugin mat engem vun eisen zwee Bündelen un. Béid bootstrap.bundle.jsan bootstrap.bundle.min.jsenthalen Popper fir eis Tooltips a Popovers, awer net jQuery . Gitt jQuery als éischt un, dann e Bootstrap JavaScript Bündel. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponenten

Virwëtzeg wéi eng Komponente explizit jQuery, eise JavaScript a Popper erfuerderen? Klickt op de Show Komponente Link hei ënnen. Wann Dir net sécher sidd iwwer d'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
Scrollspy fir Scrollverhalen an Navigatiounsupdates
Tooltips a Popovers fir ze weisen an ze positionéieren (erfuerdert och Popper )

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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Dat ass alles wat Dir braucht fir allgemeng Säit Ufuerderunge. Besicht d' Layout-Dokumenter oder eis offiziell Beispiller fir unzefänken den Inhalt a Komponenten 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, shrink-to-fit=no">

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 lescht 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-4).
D'Entwéckler sollten 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.

CSPs an embedded SVGs

Verschidde Bootstrap Komponenten enthalen embedded SVGs an eiser CSS fir Komponenten konsequent an einfach iwwer Browser an Apparater ze styléieren. Fir Organisatiounen mat méi strenge CSP Konfiguratiounen , hu mir all Instanzen vun eisen embedded SVGs dokumentéiert (déi all iwwer ugewannt ginn background-image) sou datt Dir Är Optiounen méi grëndlech iwwerpréift.

Zoumaachen Knäppchen (benotzt an Alarmer a Modale)
Benotzerdefinéiert Checkboxen a Radio Knäppercher
Form Schalter
Form Validatioun Symboler
Benotzerdefinéiert wielt Menü
Karussell Kontrollen
Navbar wiesselen Knäppercher

Baséierend op Gemeinschaftsgespréich , e puer Optiounen fir dëst an Ärer eegener Codebase ze adresséieren enthalen d'Ersatz vun den URLen mat lokal gehoste Verméigen, d'Biller ze läschen an Inline Biller ze benotzen (net méiglech an all Komponenten), an Äert CSP z'änneren. Eis Empfehlung ass Är eege Sécherheetspolitike virsiichteg ze iwwerpréiwen an iwwer e beschte Wee no vir ze entscheeden, wann néideg.