Bootstrap ass op engem reaktiounsfäeger 12-Kolonn Gitter gebaut. Mir hunn och fix- a flësseg Breet Layouten op Basis vun deem System abegraff.
De Standard Gittersystem, deen als Deel vum Bootstrap zur Verfügung gestallt gëtt, ass en 940px-breet, 12-Kolonn Gitter .
Et huet och véier reaktiounsfäeger Variatiounen fir verschidden Apparater a Resolutiounen: Telefon, Tablet Porträt, Dësch Landschaft a kleng Desktops, a grouss Widescreen Desktops.
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
Wéi hei gewisen, kann e Basislayout erstallt ginn mat zwee "Säulen", déi all eng Zuel vun den 12 Fundamental Sailen iwwerspanen, déi mir als Deel vun eisem Gittersystem definéiert hunn.
<div class="row"> <div class="span4">...</div> <div class="span4 offset4">...</div> </div>
Mam statesche (net flëssege) Gittersystem am Bootstrap ass Nesting einfach. Fir Ären Inhalt ze nestéieren, füügt just eng nei .row
a Set vu .span*
Kolonnen an enger existéierender .span*
Kolonn derbäi.
Nested Zeile sollen eng Rei vu Kolonnen enthalen, déi d'Zuel vun de Kolonnen vun hirem Elterendeel addéieren. Zum Beispill, zwee nestéiert .span3
Kolonnen sollten an engem .span6
.
<div class="row"> <div class="span12"> Niveau 1 vun der Kolonn <div class="row"> <div class="span6">Niveau 2</div> <div class="span6">Niveau 2</div> </div> </div> </div>
D'Flëssegkeetsgitter System benotzt Prozentsaz fir Kolonn Breet amplaz fix Pixel. Et huet och déiselwecht reaktiounsfäeger Variatiounen wéi eise fixe Gittersystem, fir déi richteg Proportiounen fir Schlësselbildschirmresolutiounen an Apparater ze garantéieren.
Maacht all Zeil flësseg einfach andeems Dir .row
op ännert .row-fluid
. D'Säulen bleiwen genau d'selwecht, sou datt et super einfach ass tëscht fixen a flëssege Layouten ze flipsen.
<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
Nesting mat flëssege Gitter ass e bëssen anescht: d'Zuel vun de nestéierte Sailen brauch net dem Elterendeel ze passen. Amplaz ginn Är Kolonnen op all Niveau zréckgesat well all Zeil 100% vun der Elterkolonne ophëlt.
<div class="row-fluid"> <div class="span12"> Niveau 1 vun der Kolonn <div class="row-fluid"> <div class="span6">Niveau 2</div> <div class="span6">Niveau 2</div> </div> </div> </div>
Variabel | Default Wäert | Beschreiwung |
---|---|---|
@gridColumns |
12 | Zuel vun de Sailen |
@gridColumnWidth |
60px | Breet vun all Kolonn |
@gridGutterWidth |
20 px | Negativ Plaz tëscht Sailen |
@siteWidth |
Berechent Zomm vun alle Sailen a Rennen | Zielt d'Zuel vu Sailen a Rennen fir d'Breet vum .container-fixed() Mixin ze setzen |
Built a Bootstrap sinn eng Handvoll Variablen fir de Standard 940px Gittersystem ze personaliséieren, uewen dokumentéiert. All Variablen fir d'Gitter sinn an variables.less gespäichert.
D'Ännerung vum Gitter bedeit déi dräi @grid*
Variabelen z'änneren an Bootstrap nei ze kompiléieren. Change the Grid Variables in variables.less a benotzt ee vun de véier dokumentéierte Weeër fir nei ze kompiléieren . Wann Dir méi Kolonnen bäidréit, gitt sécher d'CSS fir déi an grid.less ze addéieren.
Personnalisatioun vum Gitter funktionnéiert nëmmen um Standardniveau, dem 940px Gitter. Fir déi reaktiounsfäeger Aspekter vum Bootstrap z'erhalen, musst Dir och d'Gitter an responsive.less personaliséieren.
De Standard an einfachen 940px-breet, zentréiert Layout fir bal all Websäit oder Säit vun enger eenzeger <div class="container">
.
<Kierper> <div class="container"> ... </div> </body>
<div class="container-fluid">
gëtt flexibel Säit Struktur, min- a Max-Breet, an eng lénks Säit Sidebar. Et ass super fir Apps an Dokumenter.
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar Inhalt--> </div> <div class="span10"> <!--Kierper Inhalt--> </div> </div> </div>
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 |
---|---|---|---|
Smartphones | 480px an drënner | Flësseg Sailen, keng fix Breet | |
Portrait Pëllen | 480px bis 768px | Flësseg Sailen, keng fix Breet | |
Landschaft Pëllen | 768 bis 979 px | 42px vun | 20 px |
Default | 980px a méi | 60px | 20 px |
Grouss Display | 1210px a méi | 70px | 30 px |
Fir sécherzestellen datt Geräter reaktiounsfäeger Säiten richteg weisen, enthält de Viewport Meta Tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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
.
Bootstrap enthält dës Medienufroen net automatesch, awer se ze verstoen an ze addéieren ass ganz einfach a erfuerdert minimale Setup. Dir hutt e puer Méiglechkeeten fir d'Reaktiounsfäegkeete vu Bootstrap abegraff:
Firwat et net just matmaachen? Wourecht gesot ginn, net alles muss reaktiounsfäeger sinn. Amplaz d'Entwéckler ze encouragéieren dës Feature ze läschen, hu mir et am beschten fir se z'aktivéieren.
// Landschaft Handyen an erof @media (max-Breet: 480px) { ... } // Landschaft Telefon zu Porträt Tablet @media (max-Breet: 768px) { ... } // Portrait Tablet op Landschaft an Desktop @media (min-Breet: 768px) an (max-Breet: 980px) { ... } // Groussen Desktop @media (min-Breet: 1200px) { .. }