Bootstrap-raster - Grote apparaten

Bootstrap-rastervoorbeeld: grote apparaten

In het vorige hoofdstuk hebben we een rastervoorbeeld gepresenteerd met klassen voor kleine en middelgrote apparaten. We gebruikten twee div's (kolommen) en we gaven ze een verdeling van 25%/75% op kleine apparaten en een verdeling van 50%/50% op middelgrote apparaten:

Maar op grote apparaten kan het ontwerp beter zijn als een verdeling van 33%/66%.

Tip: Grote apparaten worden gedefinieerd als een schermbreedte van 1200 pixels en meer .

Voor grote apparaten zullen we de .col-lg-*klassen gebruiken.

Dus nu zullen we de kolombreedten voor grote apparaten toevoegen:

Nu gaat Bootstrap zeggen: "Kijk bij het kleine formaat naar klassen met -sm- erin en gebruik die. Kijk bij de middelgrote klassen naar klassen met -md- erin en gebruik die. klassen met het woord -lg- erin en gebruik die".

Het volgende voorbeeld resulteert in een verdeling van 25%/75% op kleine apparaten, een verdeling van 50%/50% op middelgrote apparaten en een verdeling van 33%/66% op grote apparaten:

Alleen groot gebruiken

In het onderstaande voorbeeld specificeren we alleen de .col-lg-6klasse (zonder .col-md-*en/of .col-sm-*). Dit betekent dat grote apparaten 50%/50% splitsen. Voor middelgrote EN kleine apparaten wordt het echter verticaal gestapeld (100% breedte):