Bootstrap

Steieren

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.

Globale Stiler fir CSS zrécksetzen, Typographie a Linken

Verlaangt HTML5 doctype

Bootstrap benotzt HTML Elementer an CSS Eegeschaften déi d'Benotzung vum HTML5 Doktype erfuerderen. Gitt sécher et am Ufank vun all Bootstrapped Säit an Ärem Projet opzehuelen.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Typographie a Linken

Bannent dem scaffolding.less Fichier, mir setzen Basis global Display, Typographie, a Link Stiler. Konkret, mir:

  • Ewechzehuelen Rand op de Kierper
  • Setzt background-color: white;opbody
  • Benotzt d' @baseFontFamily, @baseFontSize, an @baseLineHeightAttributer als eis typographie Basis
  • Setzt d'global Linkfaarf iwwer @linkColoran applizéiert Link ënnersträicht nëmmen op:hover

Reset via Normalize

Zënter Bootstrap 2 huet den traditionelle CSS-Reset sech entwéckelt fir Elementer aus Normalize.css ze benotzen , e Projet vum Nicolas Gallagher , deen och den HTML5 Boilerplate mécht .

Den neie Reset kann nach ëmmer am Reset.less fonnt ginn , awer mat villen Elementer ewechgeholl fir Kuerzegkeet a Genauegkeet.

Standard Gittersystem 12 Sailen mat engem reaktiounsfäeger Twist

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

De Standard Gittersystem, deen am Bootstrap zur Verfügung gestallt gëtt, benotzt 12 Sailen déi op Breet vu 724px, 940px (Standard ouni reaktiounsfäeger CSS abegraff) an 1170px ausginn. Ënner 767px Viewports ginn d'Säulen fléissend a stackelen vertikal.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Wéi hei gewisen, kann e Basislayout mat zwou "Säulen" erstallt ginn, déi all eng Zuel vun den 12 Fundamental Sailen iwwerspanen, déi mir als Deel vun eisem Gittersystem definéiert hunn.


Offset Sailen

4
4 offset 4
3 offset 3
3 offset 3
8 offen4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Nesting Sailen

Mam statesche (net flëssege) Gittersystem am Bootstrap ass Nesting einfach. Fir Ären Inhalt ze nestéieren, füügt just eng nei .rowa Set vu .span*Kolonnen an enger existéierender .span*Kolonn derbäi.

Beispill

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 .span3Kolonnen sollten an engem .span6.

Niveau 1 vun der Kolonn
Niveau 2
Niveau 2 
  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     Niveau 1 Kolonn
  4.     <div class = "row" > 
  5.       <div class = "span3" > Niveau 2 </div> 
  6.       <div class = "span3" > Niveau 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Flesseggassystem 12 reaktiounsfäeger, Prozent-baséiert Saile

Flësseg Kolonnen

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Prozent, net Pixel

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.

Flësseg Reihen

Maacht all Zeil flësseg einfach andeems Dir .rowop ä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.

Markup

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Flësseg Nascht

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.

Flëssegkeet 12
Flëssegkeet 6
Flëssegkeet 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Niveau 1 vun der Kolonn
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Niveau 2 </div> 
  6.       <div class = "span6" > Niveau 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Gitter Personnalisatioun

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

Variablen an LESS

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.

Wéi ugepasst

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.

Reaktiounsfäeger bleiwen

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.

Layout Basis Templates fir Websäiten ze kreéieren

Fixed Layout

De Standard an einfachen 940px-breet, zentréiert Layout fir bal all Websäit oder Säit vun enger eenzeger <div class="container">.

  1. <Kierper>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

Flësseg Layout

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

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Sidebar Inhalt-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Kierper Inhalt-->
  8.     </div>
  9.   </div>
  10. </div>

Reaktiounsfäeger Design Medien Ufroen fir verschidden Apparater a Resolutiounen

Reaktiounsfäeger Apparater

Wat se maachen

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-widthan max-width.

  • Ännert d'Breet vun der Kolonn an eisem Gitter
  • Stack Elementer amplaz ze schwammen wou et néideg ass
  • D'Gréisst vun den Rubriken an den Text änneren fir méi passend fir Apparater ze sinn

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.

Ënnerstëtzt Apparater

Bootstrap ënnerstëtzt eng Handvoll Medienufroen an enger eenzeger Datei fir ze hëllefen Är Projete méi passend op verschidden Apparater an Écran Resolutiounen 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
Smartphones zu Pëllen 767px an drënner Flësseg Sailen, keng fix Breet
Portrait Pëllen 768px a méi 42px vun 20 px
Default 980px a méi 60px 20 px
Grouss Display 1200px a méi 70px 30 px

Verlaangt Meta Tag

Fir sécherzestellen datt Geräter reaktiounsfäeger Säiten richteg weisen, enthält de Viewport Meta Tag.

  1. <meta name = "viewport" content = "Breet = Gerätbreet, initial Skala = 1.0" >

Benotzt d'Medien Ufroen

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:

  1. Benotzt déi kompiléiert reaktiounsfäeg Versioun, bootstrap-responsive.css
  2. Füügt @import "responsive.less" derbäi a kompiléiert Bootstrap nei
  3. Modify and recompile responsive.less als separat Fichier

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.

  1.   /* Landschaft Telefonen an erof */
  2.   @media ( max - Breet : 480px ) { ... }     
  3.  
  4.   /* Landschaftstelefon op Porträt-Tablet */
  5.   @media ( max - Breet : 767px ) { ... }     
  6.  
  7.   /* Portrait Tablet op Landschaft an Desktop */
  8.   @media ( min - Breet : 768px ) an ( max - Breet : 979px ) { ... }        
  9.  
  10.   /* Groussen Desktop */
  11.   @media ( min - Breet : 1200px ) { ... }

Reaktiounsfäeger Utility Klassen

Wat sinn se

Fir méi séier mobilfrëndlech Entwécklung, benotzt dës Basis Utility Klassen fir Inhalt per Apparat ze weisen an ze verstoppen.

Wéini ze benotzen

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.

Zum Beispill kënnt Dir en <select>Element fir nav op mobilen Layouten weisen, awer net op Pëllen oder Desktops.

Ënnerstëtzung Klassen

Hei ugewisen ass eng Tabell vun de Klassen déi mir ënnerstëtzen an hiren Effekt op e bestëmmte Medienufro Layout (vum Apparat markéiert). Si kënnen an fonnt ginn responsive.less.

Klass Handyen480px an drënner Pëllen767px an drënner Desktops768px a méi
.visible-phone Siichtbar
.visible-tablet Siichtbar
.visible-desktop Siichtbar
.hidden-phone Siichtbar Siichtbar
.hidden-tablet Siichtbar Siichtbar
.hidden-desktop Siichtbar Siichtbar

Test Fall

Ännert Äre Browser d'Gréisst oder lued op verschidden Apparater fir déi uewe genannte Klassen ze testen.

Siichtbar op ...

Gréng Scheckzeechen weisen datt d'Klass an Ärem aktuelle Viewport siichtbar ass.

  • Telefon✔ Telefon
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Verstoppt op ...

Hei, gréng Scheckzeechen weisen datt d'Klass an Ärem aktuelle Viewport verstoppt ass.

  • Telefon✔ Telefon
  • Tablet✔ Tablet
  • Desktop✔ Desktop