Bootstrap

Steiger

Bootstrap is gebouwd op een responsief raster met 12 kolommen. We hebben ook lay-outs met vaste en vloeiende breedte toegevoegd op basis van dat systeem.

Algemene stijlen voor CSS-reset, typografie en links

Vereist HTML5-documenttype

Bootstrap maakt gebruik van HTML-elementen en CSS-eigenschappen die het gebruik van het HTML5-doctype vereisen. Zorg ervoor dat u het aan het begin van elke Bootstrapped-pagina in uw project opneemt.

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

Typografie en links

Binnen het bestand scaffolding.less stellen we algemene algemene weergave-, typografie- en linkstijlen in. Specifiek, wij:

  • Marge op de body verwijderen
  • 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

Reset via Normaliseren

Vanaf Bootstrap 2 is de traditionele CSS-reset geëvolueerd om gebruik te maken van elementen uit Normalize.css , een project van Nicolas Gallagher dat ook de HTML5 Boilerplate aanstuurt .

De nieuwe reset is nog steeds te vinden in reset.less , maar met veel elementen verwijderd voor beknoptheid en nauwkeurigheid.

Standaard rastersysteem 12 kolommen met een responsieve twist

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

Het standaardrastersysteem in Bootstrap gebruikt 12 kolommen die worden weergegeven met een breedte van 724px, 940px (standaard zonder responsieve CSS inbegrepen) en 1170px. Onder de 767px viewports worden de kolommen vloeiend en verticaal gestapeld.

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

Zoals hier wordt getoond, kan een basislay-out worden gemaakt met twee "kolommen", die elk een aantal van de 12 fundamentele kolommen beslaan die we hebben gedefinieerd als onderdeel van ons rastersysteem.


Kolommen compenseren

4
4 verschoven 4
3 verschoven 3
3 verschoven 3
8 verschoven 4 
  1. <div class = "rij" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Kolommen nesten

Met het statische (niet-vloeibare) rastersysteem in Bootstrap is nesten eenvoudig. Als u uw inhoud wilt nesten, voegt u gewoon een nieuwe .rowen een reeks .span*kolommen toe binnen een bestaande .span*kolom.

Voorbeeld

Geneste rijen moeten een reeks kolommen bevatten die optellen tot het aantal kolommen van de bovenliggende rij. Twee geneste .span3kolommen moeten bijvoorbeeld binnen een .span6.

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

Fluid grid-systeem 12 responsieve, op percentages gebaseerde kolommen

Vloeistofkolommen

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

Procenten, geen pixels

Het vloeiende rastersysteem gebruikt procenten voor kolombreedtes in plaats van vaste pixels. Het heeft ook dezelfde responsieve variaties als ons vaste rastersysteem, waardoor de juiste verhoudingen voor belangrijke schermresoluties en apparaten worden gegarandeerd.

Vloeiende rijen

Maak elke rij vloeiend door simpelweg te veranderen .rownaar .row-fluid. De kolommen blijven exact hetzelfde, waardoor het supereenvoudig is om te schakelen tussen vaste en vloeiende lay-outs.

Markup

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

Vloeistof nesten

Nesten met vloeiende rasters is een beetje anders: het aantal geneste kolommen hoeft niet overeen te komen met de bovenliggende. In plaats daarvan worden uw kolommen op elk niveau opnieuw ingesteld omdat elke rij 100% van de bovenliggende kolom in beslag neemt.

Vloeistof 12
Vloeistof 6
Vloeistof 6 
  1. <div class = "rij-vloeistof" > 
  2.   <div class = "span12" > 
  3.     Niveau 1 van kolom
  4.     <div class = "rij-vloeistof" > 
  5.       <div class = "span6" > Niveau 2 </div> 
  6.       <div class = "span6" > Niveau 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Rasteraanpassing

Variabele Standaardwaarde Beschrijving
@gridColumns 12 Aantal columns
@gridColumnWidth 60px Breedte van elke kolom
@gridGutterWidth 20px Negatieve spatie tussen kolommen

Variabelen in MINDER

In Bootstrap zijn een handvol variabelen ingebouwd voor het aanpassen van het standaard 940px-rastersysteem, hierboven beschreven. Alle variabelen voor het raster worden opgeslagen in variables.less.

Hoe aan te passen?

Het wijzigen van het raster betekent het wijzigen van de drie @grid*variabelen en het opnieuw compileren van Bootstrap. Wijzig de rastervariabelen in variables.less en gebruik een van de vier gedocumenteerde manieren om opnieuw te compileren . Als je meer kolommen toevoegt, zorg er dan voor dat je de CSS toevoegt voor die in grid.less.

Responsief blijven

Aanpassing van het raster werkt alleen op het standaardniveau, het 940px-raster. Om de responsieve aspecten van Bootstrap te behouden, moet u ook de rasters aanpassen in responsive.less.

Lay-outs Basissjablonen om webpagina's te maken

Vaste lay-out

De standaard en eenvoudige 940px-brede, gecentreerde lay-out voor zowat elke website of pagina die door een enkele <div class="container">.

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

Vloeiende lay-out

<div class="container-fluid">geeft flexibele paginastructuur, min- en max-breedten en een linkerzijbalk. Het is geweldig voor apps 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>

Responsief ontwerp Mediaquery's voor verschillende apparaten en resoluties

Responsieve apparaten

Wat ze doen

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
Smartphones 480px en lager Vloeistofkolommen, geen vaste breedtes
Smartphones naar tablets 767px en lager Vloeistofkolommen, geen vaste breedtes
Portrettabletten 768px en hoger 42px 20px
Standaard 980px en hoger 60px 20px
Groot scherm 1200px en hoger 70px 30px

Vereist metatag

Om ervoor te zorgen dat apparaten responsieve pagina's correct weergeven, voegt u de viewport-metatag toe.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1,0" >

De mediaquery's gebruiken

Bootstrap neemt deze mediaquery's niet automatisch op, maar het begrijpen en toevoegen ervan is heel eenvoudig en vereist minimale instellingen. Je hebt een paar opties om de responsieve functies van Bootstrap op te nemen:

  1. Gebruik de gecompileerde responsieve versie, bootstrap-responsive.css
  2. Voeg @import "responsive.less" toe en hercompileer Bootstrap
  3. Wijzig en hercompileer responsive.less als een apart bestand

Waarom niet gewoon opnemen? De waarheid is dat 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 in te schakelen.

  1.   /* Liggende telefoons en omlaag */
  2.   @media ( max - breedte : 480px ) { ... }     
  3.  
  4.   /* Liggende telefoon naar staande tablet */
  5.   @media ( max - breedte : 767px ) { ... }     
  6.  
  7.   /* Staand tablet naar liggend en desktop */
  8.   @media ( min - breedte : 768 px ) en ( max - breedte : 979 px ) { ... }        
  9.  
  10.   /* Groot bureaublad */
  11.   @media ( min - breedte : 1200px ) { ... }

Responsieve hulpprogramma-klassen

Wat zijn ze

Gebruik voor een snellere mobielvriendelijke ontwikkeling deze basishulpklassen voor het weergeven en verbergen van inhoud per apparaat.

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.

U kunt bijvoorbeeld een <select>element voor navigatie weergeven op mobiele lay-outs, maar niet op tablets of desktops.

Ondersteuning klassen

Hier wordt een tabel weergegeven met de klassen die we ondersteunen en hun effect op een bepaalde mediaquerylay-out (gelabeld per apparaat). Ze zijn te vinden in responsive.less.

Klas telefoons480px en lager Tabletten767px en lager Desktops768px en hoger
.visible-phone Zichtbaar
.visible-tablet Zichtbaar
.visible-desktop Zichtbaar
.hidden-phone Zichtbaar Zichtbaar
.hidden-tablet Zichtbaar Zichtbaar
.hidden-desktop Zichtbaar Zichtbaar

Testgeval

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