Bootstrap

Steiger

Bootstrap is gebouwd op responsieve rasters, lay-outs en componenten met 12 kolommen.

Algemene instellingen

Vereist HTML5-documenttype

Bootstrap maakt gebruik van bepaalde HTML-elementen en CSS-eigenschappen die het gebruik van het HTML5-doctype vereisen. Voeg het toe aan het begin van al uw projecten.

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

Typografie en links

Bootstrap stelt algemene algemene weergave-, typografie- en linkstijlen in. Specifiek, wij:

  • Verwijderen marginop het lichaam
  • Zet background-color: white;op debody
  • Gebruik de @baseFontFamily, @baseFontSize, en @baseLineHeightattributen als onze typografische basis
  • Stel de algemene linkkleur in via @linkColoren pas linkonderstrepingen alleen toe op:hover

Deze stijlen zijn te vinden binnen scaffolding.less .

Reset via Normaliseren

Met Bootstrap 2 is het oude resetblok geschrapt ten gunste van Normalize.css , een project van Nicolas Gallagher en Jonathan Neal dat ook de HTML5 Boilerplate aandrijft . Hoewel we veel van Normalize gebruiken binnen onze reset.less , hebben we enkele elementen specifiek voor Bootstrap verwijderd.

Standaard rastersysteem

Live grid voorbeeld

Het standaard Bootstrap-rastersysteem gebruikt 12 kolommen , wat zorgt voor een 940px brede container zonder dat responsieve functies zijn ingeschakeld. Met het toegevoegde responsieve CSS-bestand past het raster zich aan om 724px en 1170px breed te zijn, afhankelijk van uw kijkvenster. Onder de 767px viewports worden de kolommen vloeiend en verticaal gestapeld.

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

HTML basisraster

Voor een eenvoudige lay-out met twee kolommen maakt u een .rowen voegt u het juiste aantal .span*kolommen toe. Aangezien dit een raster met 12 kolommen is, beslaat elk .span*een aantal van die 12 kolommen en moet het voor elke rij (of het aantal kolommen in de bovenliggende kolom) altijd 12 zijn.

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

In dit voorbeeld hebben we .span4en .span8, wat 12 totale kolommen en een volledige rij oplevert.

Kolommen compenseren

Verplaats kolommen naar rechts met behulp van .offset*klassen. Elke klasse vergroot de linkermarge van een kolom met een hele kolom. .offset4Beweegt bijvoorbeeld .span4over vier kolommen.

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

Kolommen nesten

Als u uw inhoud wilt nesten met het standaardraster, voegt u een nieuwe .rowen een reeks .span*kolommen toe binnen een bestaande .span*kolom. Geneste rijen moeten een reeks kolommen bevatten die optellen tot het aantal kolommen van de bovenliggende.

Kolom op niveau 1
Level 2
Level 2 
  1. <div class = "rij" > 
  2.   <div class = "span9" > 
  3.     Kolom op niveau 1
  4.     <div class = "rij" > 
  5.       <div class = "span6" > Niveau 2 </div> 
  6.       <div class = "span3" > Niveau 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Vloeibaar roostersysteem

Voorbeeld van live vloeistofraster

Het vloeiende rastersysteem gebruikt procenten in plaats van pixels voor kolombreedtes. Het heeft dezelfde responsieve mogelijkheden als ons vaste rastersysteem en zorgt voor de juiste verhoudingen voor de belangrijkste schermresoluties en apparaten.

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

Basis vloeiende raster HTML

Maak elke rij "vloeibaar" door te wijzigen .rowin .row-fluid. De kolomklassen blijven exact hetzelfde, waardoor het gemakkelijk is om te wisselen tussen vaste en vloeiende rasters.

  1. <div class = "rij-vloeistof" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Vloeistofcompensatie

Werkt op dezelfde manier als de offset van het vaste rastersysteem: voeg toe .offset*aan elke kolom om met zoveel kolommen te compenseren.

4
4 verschoven 4
3 verschoven 3
3 verschoven 3
6 verschoven 6 
  1. <div class = "rij-vloeistof" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Vloeistof nesten

Vloeiende rasters maken op een andere manier gebruik van nesten: elk genest niveau van kolommen moet maximaal 12 kolommen bevatten. Dit komt omdat het vloeiende raster percentages gebruikt, geen pixels, voor het instellen van breedtes.

Vloeistof 12
Vloeistof 6
Vloeistof 6
Vloeistof 6
Vloeistof 6 
  1. <div class = "rij-vloeistof" > 
  2.   <div class = "span12" > 
  3.     Vloeistof 12
  4.     <div class = "rij-vloeistof" > 
  5.       <div class = "span6" > 
  6.         Vloeistof 6
  7.         <div class = "rij-vloeistof" > 
  8.           <div class = "span6" > Vloeistof 6 </div> 
  9.           <div class = "span6" > Vloeistof 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Vloeistof 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Lay-outs

Vaste lay-out

Biedt een gemeenschappelijke vaste breedte (en optioneel responsieve) lay-out met alleen <div class="container">vereist.

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

Vloeiende lay-out

Maak een vloeiende pagina met twee kolommen met <div class="container-fluid">—ideaal voor toepassingen en documenten.

  1. <div class = "containervloeistof" > 
  2.   <div class = "rij-vloeistof" > 
  3.     <div class = "span2" > 
  4.       <!--Zijbalk inhoud-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Lichaamsinhoud-->
  8.     </div>
  9.   </div>
  10. </div>

Reagerend ontwerp

Responsieve functies inschakelen

Schakel responsieve CSS in uw project in door de juiste metatag en extra stylesheet in <head>uw document op te nemen. Als je Bootstrap hebt samengesteld vanaf de pagina Aanpassen, hoef je alleen de metatag op te nemen.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1,0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Kop op!Bootstrap bevat op dit moment standaard geen responsieve functies, omdat niet alles responsief hoeft te zijn. In plaats van ontwikkelaars aan te moedigen deze functie te verwijderen, denken we dat het het beste is om deze indien nodig in te schakelen.

Over responsieve Bootstrap

Responsieve apparaten

Mediaquery's maken aangepaste CSS mogelijk op basis van een aantal voorwaarden (verhoudingen, breedtes, weergavetype, enz.), maar richten zich meestal rond min-widthen max-width.

  • Wijzig de breedte van de kolom in ons raster
  • Stapel elementen in plaats van te zweven waar nodig
  • Wijzig het formaat van koppen en tekst zodat ze geschikter zijn voor apparaten

Gebruik mediaquery's op een verantwoorde manier en alleen als een start voor uw mobiele doelgroepen. Overweeg voor grotere projecten speciale codebases en geen lagen van mediaquery's.

Ondersteunde apparaten

Bootstrap ondersteunt een handvol mediaquery's in één bestand om uw projecten geschikter te maken voor verschillende apparaten en schermresoluties. Dit is wat er is inbegrepen:

Label Lay-outbreedte Kolombreedte breedte van de goot
Groot scherm 1200px en hoger 70px 30px
Standaard 980px en hoger 60px 20px
Portrettabletten 768px en hoger 42px 20px
Telefoons naar tablets 767px en lager Vloeistofkolommen, geen vaste breedtes
telefoons 480px en lager Vloeistofkolommen, geen vaste breedtes 
  1. /* Groot bureaublad */
  2. @media ( min - breedte : 1200px ) { ... }     
  3.  
  4. /* Staand tablet naar liggend en desktop */
  5. @media ( min - breedte : 768 px ) en ( max - breedte : 979 px ) { ... }        
  6.  
  7. /* Liggende telefoon naar staande tablet */
  8. @media ( max - breedte : 767px ) { ... }     
  9.  
  10. /* Liggende telefoons en omlaag */
  11. @media ( max - breedte : 480px ) { ... }

Responsieve hulpprogramma-klassen

Voor een snellere mobielvriendelijke ontwikkeling gebruikt u deze hulpprogrammaklassen voor het weergeven en verbergen van inhoud per apparaat. Hieronder vindt u een tabel met de beschikbare klassen en hun effect op een bepaalde mediaquerylay-out (gelabeld per apparaat). Ze zijn te vinden in responsive.less.

Klas telefoons767px en lager Tabletten979px tot 768px DesktopsStandaard
.visible-phone Zichtbaar
.visible-tablet Zichtbaar
.visible-desktop Zichtbaar
.hidden-phone Zichtbaar Zichtbaar
.hidden-tablet Zichtbaar Zichtbaar
.hidden-desktop Zichtbaar Zichtbaar

Wanneer te gebruiken

Gebruik op beperkte basis en vermijd het maken van totaal verschillende versies van dezelfde site. Gebruik ze in plaats daarvan als aanvulling op de presentatie van elk apparaat. Responsieve hulpprogramma's mogen niet worden gebruikt met tabellen en worden daarom niet ondersteund.

Testcase voor responsieve hulpprogramma's

Pas het formaat van uw browser aan of laad op verschillende apparaten om de bovenstaande klassen te testen.

Zichtbaar op...

Groene vinkjes geven aan dat klasse zichtbaar is in uw huidige viewport.

  • Telefoon✔ Telefoon
  • Tablet✔ Tablet
  • Bureaublad✔ Bureaublad

Verborgen op...

Hier geven groene vinkjes aan dat klasse verborgen is in uw huidige viewport.

  • Telefoon✔ Telefoon
  • Tablet✔ Tablet
  • Bureaublad✔ Bureaublad