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.
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.
Copy-paste de Stylesheet <link>
an Ären <head>
ier all aner Stylesheets fir eis CSS ze lueden.
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.
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.js
an bootstrap.bundle.min.js
enthalen 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
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:
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.
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.
Bootstrap erfuerdert d'Benotzung vum HTML5 Doktype. Ouni et gesitt Dir e puer funky onkomplett Styling, awer och et sollt keng bedeitend Hick verursaachen.
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>
.
Dir kënnt e Beispill vun dësem an Aktioun an der Starter Schabloun gesinn .
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 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:
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 .
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.
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.net
Server, am##bootstrap
Kanal. - Ëmsetzung Hëllef kann um Stack Overflow fonnt ginn (tagged
bootstrap-4
). - D'Entwéckler sollten 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.