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 attributen @baseFontFamily, @baseFontSize, en als onze typografische basis@baseLineHeight
  • 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 ingeschakelde responsieve functies . Met het toegevoegde responsieve CSS-bestand past het raster zich aan om 724px en 1170px breed te zijn, afhankelijk van uw kijkvenster. Onder 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 vloeistofraster 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

Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

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

Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.

About responsive Bootstrap

Responsieve apparaten

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

Supported devices

Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label Layout width Column width Gutter width
Large display 1200px and up 70px 30px
Default 980px and up 60px 20px
Portrait tablets 768px and above 42px 20px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below Fluid columns, no fixed widths 
  1. /* Large desktop */
  2. @media (min-width: 1200px) { ... }
  3.  
  4. /* Portrait tablet to landscape and desktop */
  5. @media (min-width: 768px) and (max-width: 979px) { ... }
  6.  
  7. /* Landscape phone to portrait tablet */
  8. @media (max-width: 767px) { ... }
  9.  
  10. /* Landscape phones and down */
  11. @media (max-width: 480px) { ... }

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

Responsive utilities test case

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