Source

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, gratis zur Verfügung gestallt vun de Leit bei jsDelivr. Benotzt e Package Manager oder musst Dir d'Quelldateien eroflueden? Kapp 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Vill vun eise Komponenten erfuerderen d'Benotzung vu JavaScript fir ze funktionéieren. Speziell erfuerderen se jQuery , Popper.js , an eis eege JavaScript Plugins. Setzt déi folgend <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.js, an dann eis JavaScript Plugins.

Mir benotzen jQuery's schlank Build , awer déi voll Versioun gëtt och ënnerstëtzt.

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

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

Eis bootstrap.bundle.jsan bootstrap.bundle.min.jsenthalen Popper , awer net jQuery . Fir méi Informatiounen iwwer wat am Bootstrap abegraff ass, kuckt w.e.g. eis Inhalter Sektioun.

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 d'Visibilitéit vum Inhalt z'änneren
  • Dropdowns fir ze weisen an ze positionéieren (erfuerdert och Popper.js )
  • Modale fir Affichage, Positionéierung a Scrollverhalen
  • Navbar fir eise Collapse Plugin ze verlängeren fir reaktiounsfäeger Verhalen ëmzesetzen
  • Tooltips a Popovers fir ze weisen an ze positionéieren (erfuerdert och Popper.js )
  • 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, 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>

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 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 Code fir mobilen Apparater optimiséieren an dann Komponenten opskaléieren wéi néideg mat CSS Medien Ufroen. 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.

  • Follegt @getbootstrap op Twitter .
  • Liesen an abonnéieren op Den Offiziellen Bootstrap Blog .
  • Chat mat Matbierger Bootstrapper an IRC. Um irc.freenode.netServer, 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.