Bootstrap

Steieren

Bootstrap ass op reaktiounsfäeger 12-Kolonn Gitter, Layouten a Komponenten gebaut.

Global Astellungen

Verlaangt HTML5 doctype

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.

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

Typographie a Linken

Bootstrap setzt Basis global Display, Typographie a Linkstiler. Konkret, mir:

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

Dës Stiler kënnen an scaffolding.less fonnt ginn .

Reset via Normalize

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.

Standard Gitter System

Live Gitter Beispill

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.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Basis Gitter HTML

Fir eng einfach zwee Kolonn Layout, schafen eng .rowa 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).

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

Gitt dëst Beispill, hu mir .span4an .span8, fir 12 Gesamtkolonnen an eng komplett Zeil ze maachen.

Offset Sailen

Beweegt Spalten no riets mat .offset*Klassen. All Klass erhéicht de lénksen Rand vun enger Kolonn ëm eng ganz Kolonn. Zum Beispill, .offset4bewegt .span4iwwer véier Sailen.

4
3 offset 2
3 offset 1
3 offset 2
6 offen3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Nesting Sailen

Fir Ären Inhalt mat dem Standardgitter ze nestéieren, füügt eng nei .rowa 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.

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

Flesseggassystem

Live Fluid Grid Beispill

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.

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

Basis flësseg Gitter HTML

Maacht all Zeil "flësseg" andeems Dir .rowop ännert .row-fluid. D'Kolonnklassen bleiwen genau d'selwecht, sou datt et einfach ass tëscht fixen a flëssege Gitter ze flippen.

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

Flëssegkeet Offset

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.

4
4 offset 4
3 offset 3
3 offset 3
6 offen 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Flësseg Nascht

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.

Flëssegkeet 12
Flëssegkeet 6
Flëssegkeet 6
Flëssegkeet 6
Flëssegkeet 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Flëssegkeet 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Flëssegkeet 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Layouten

Fixed Layout

Bitt eng gemeinsam fix Breet (an optional reaktiounsfäeger) Layout mat nëmmen <div class="container">néideg.

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

Flësseg Layout

Erstellt eng fléissend zwee-Kolonn Säit mat <div class="container-fluid">- super fir Uwendungen 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

Aktivéiert reaktiounsfäeger Funktiounen

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.

  1. <meta name = "viewport" content = "Breet = Gerätbreet, initial Skala = 1.0" >  
  2. <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.

Iwwer reaktiounsfäeger Bootstrap

Reaktiounsfäeger Apparater

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

Reaktiounsfäeger Utility Klassen

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 Handyen767px an drënner Pëllen979 bis 768 px DesktopsDefault
.visible-phone Siichtbar
.visible-tablet Siichtbar
.visible-desktop Siichtbar
.hidden-phone Siichtbar Siichtbar
.hidden-tablet Siichtbar Siichtbar
.hidden-desktop Siichtbar Siichtbar

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. Reaktiounsfäeger Utilities sollen net mat Dëscher benotzt ginn, a sinn als solch net ënnerstëtzt.

Responsive Utilities Testfall

Ä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