Bootstrap ass op reaktiounsfäeger 12-Kolonn Gitter, Layouten a Komponenten gebaut.
Bootstrap benotzt verschidden HTML Elementer an CSS Eegeschaften déi d'Benotzung vum HTML5 Doktype erfuerderen. Gitt et am Ufank vun all Äre Projeten un.
<!DOCTYPE html> <html lang="de"> ... </html>
Bootstrap setzt Basis global Display, Typographie a Linkstiler. Konkret, mir:
margin
op de Kierperbackground-color: white;
opbody
@baseFontFamily
, @baseFontSize
, an @baseLineHeight
Attributer als eis typographesch Basis@linkColor
an applizéiert Link ënnersträicht nëmmen op:hover
Dës Stiler kënnen an scaffolding.less fonnt ginn .
Mat Bootstrap 2 ass den alen Resetblock zugonschte vun Normalize.css , e Projet vum Nicolas Gallagher a Jonathan Neal , deen och den HTML5 Boilerplate dréit . Während mir vill vun Normalize bannent eisem Reset.less benotzen , hu mir e puer Elementer speziell fir Bootstrap geläscht.
De Standard Bootstrap Gitter System benotzt 12 Sailen , fir en 940px breet Container ouni reaktiounsfäeger Funktiounen aktivéiert. Mat der reaktiounsfäeger CSS-Datei bäigefüügt, passt d'Gitter op 724px an 1170px breet ofhängeg vun Ärem Viewport. Ënner 767px Viewports ginn d'Säulen fléissend a stackelen vertikal.
Fir eng einfach zwee Kolonn Layout, schafen eng .row
a füügt déi entspriechend Zuel vu .span*
Sailen. Well dëst en 12-Kolonn-Raster ass, .span*
spant all eng Zuel vun deenen 12 Spalten aus, a soll ëmmer bis zu 12 fir all Zeil addéieren (oder d'Zuel vun de Spalten an der Elterendeel).
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
Gitt dëst Beispill, hu mir .span4
an .span8
, fir 12 Gesamtkolonnen an eng komplett Zeil ze maachen.
Beweegt Spalten no riets mat .offset*
Klassen. All Klass erhéicht de lénksen Rand vun enger Kolonn ëm eng ganz Kolonn. Zum Beispill, .offset4
bewegt .span4
iwwer véier Sailen.
<div class="row"> <div class="span4">...</div> <div class="span3 offset2">...</div> </div>
Fir Ären Inhalt mat dem Standardgitter ze nestéieren, füügt eng nei .row
a Set vu .span*
Spalten an enger existéierender .span*
Kolonn. Nested Zeile sollen eng Rei vu Sailen enthalen, déi d'Zuel vu Spalten vu sengem Elterendeel addéieren.
<div class="row"> <div class="span9"> Niveau 1 Kolonn <div class="row"> <div class="span6">Niveau 2</div> <div class="span3">Niveau 2</div> </div> </div> </div>
De Flësseggitter System benotzt Prozenter amplaz Pixel fir Kolonnbreet. Et huet déiselwecht reaktiounsfäeg Fäegkeeten wéi eise fixe Gittersystem, a garantéiert proper Proportiounen fir Schlësselbildschirmresolutiounen an Apparater.
Maacht all Zeil "flësseg" andeems Dir .row
op ännert .row-fluid
. D'Kolonnklassen bleiwen genau d'selwecht, sou datt et einfach ass tëscht fixen a flëssege Gitter ze flippen.
<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
Fonctionnéiert déiselwecht Manéier wéi de fixe Gittersystem Offset: Füügt .offset*
all Kolonn un fir duerch esou vill Kolonnen ze kompenséieren.
<div class="row-fluid"> <div class="span4">...</div> <div class="span4 offset2">...</div> </div>
Flësseggitter benotzen d'Nisting anescht: all nestet Niveau vu Kolonnen soll bis zu 12 Säulen derbäi ginn. Dëst ass well d'Flëssegkeetsgitter Prozentzuelen benotzt, net Pixel, fir Breeten ze setzen.
<div class="row-fluid"> <div class="span12"> Flëssegkeet 12 <div class="row-fluid"> <div class="span6"> Flëssegkeet 6 <div class="row-fluid"> <div class="span6">Flësseg 6</div> <div class="span6">Flësseg 6</div> </div> </div> <div class="span6">Flësseg 6</div> </div> </div> </div>
Bitt eng gemeinsam fix Breet (an optional reaktiounsfäeger) Layout mat nëmmen <div class="container">
néideg.
<Kierper> <div class="container"> ... </div> </body>
Erstellt eng fléissend zwee-Kolonn Säit mat <div class="container-fluid">
- super fir Uwendungen an Dokumenter.
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar Inhalt--> </div> <div class="span10"> <!--Kierper Inhalt--> </div> </div> </div>
Aktivéiert reaktiounsfäeger CSS an Ärem Projet andeems Dir de passende Meta Tag an zousätzlech Stylesheet an <head>
Ärem Dokument enthält. Wann Dir Bootstrap vun der Customize Säit kompiléiert hutt, musst Dir nëmmen de Meta Tag enthalen.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Kapp erop! Bootstrap enthält keng reaktiounsfäeger Funktiounen als Standard zu dëser Zäit well net alles reaktiounsfäeger muss sinn. Amplaz d'Entwéckler ze encouragéieren dës Feature ze läschen, si mir et am beschten et z'aktivéieren wéi néideg.
Media Ufroen erlaben personaliséiert CSS baséiert op enger Zuel vu Bedéngungen - Verhältnisser, Breeten, Displaytyp, etc - awer konzentréiert sech normalerweis ronderëm min-width
an max-width
.
Benotzt Medienufroen verantwortlech an nëmmen als Start fir Är mobil Publikum. Fir gréisser Projeten, betruecht engagéiert Code Basen an net Schichten vun Medien Ufroen.
Bootstrap ënnerstëtzt eng Handvoll Medienufroen an enger eenzeger Datei fir ze hëllefen Är Projete méi passend op verschidden Apparater an Écranresolutiounen ze maachen. Hei ass wat abegraff ass:
Label | Layout Breet | Kolonn Breet | Gutter Breet |
---|---|---|---|
Grouss Display | 1200px a méi | 70px | 30 px |
Default | 980px a méi | 60px | 20 px |
Portrait Pëllen | 768px a méi | 42px vun | 20 px |
Handyen op Pëllen | 767px an drënner | Flësseg Sailen, keng fix Breet | |
Handyen | 480px an drënner | Flësseg Sailen, keng fix Breet |
/* Groussen Desktop */ @media (min-Breet: 1200px) { ... } /* Portrait Tablet op Landschaft an Desktop */ @media (min-Breet: 768px) an (max-Breet: 979px) { ... } /* Landschaftstelefon op Porträt-Tablet */ @media (max-Breet: 767px) { ... } /* Landschaft Telefonen an erof */ @media (max-Breet: 480px) { ... }
Fir méi séier mobilfrëndlech Entwécklung, benotzt dës Utility Klassen fir Inhalt per Apparat ze weisen an ze verstoppen. Drënner ass eng Tabell vun de verfügbare Klassen an hiren Effekt op e bestëmmte Medienufro Layout (vum Apparat markéiert). Si kënnen an fonnt ginn responsive.less
.
Klass | Telefonen 767px an drënner | Pëllen 979px ze 768px | Desktops Default |
---|---|---|---|
.visible-phone |
Siichtbar | Verstoppt | Verstoppt |
.visible-tablet |
Verstoppt | Siichtbar | Verstoppt |
.visible-desktop |
Verstoppt | Verstoppt | Siichtbar |
.hidden-phone |
Verstoppt | Siichtbar | Siichtbar |
.hidden-tablet |
Siichtbar | Verstoppt | Siichtbar |
.hidden-desktop |
Siichtbar | Siichtbar | Verstoppt |
Benotzt op enger limitéierter Basis a vermeit ganz verschidde Versioune vum selwechte Site ze kreéieren. Amplaz benotzt se fir d'Presentatioun vun all Apparat ze ergänzen. Reaktiounsfäeger Utilities sollen net mat Dëscher benotzt ginn, a sinn als solch net ënnerstëtzt.
Ännert Äre Browser d'Gréisst oder lued op verschidden Apparater fir déi uewe genannte Klassen ze testen.
Gréng Scheckzeechen weisen datt d'Klass an Ärem aktuelle Viewport siichtbar ass.
Hei, gréng Scheckzeechen weisen datt d'Klass an Ärem aktuelle Viewport verstoppt ass.