twitter-bootstrap
Grid-systeem

Invoering

Opmerkingen

Mediaquery's

Met mediaquery's in Bootstrap kunt u inhoud verplaatsen, weergeven en verbergen op basis van de viewport-grootte. De volgende mediaquery's worden gebruikt in MINDER bestanden om de belangrijkste breekpunten in het Bootstrap-rastersysteem te maken:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Af en toe worden deze uitgebreid met een maximale breedte om CSS te beperken tot een smallere set apparaten:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Bootstrap Grid Tiers (breekpunten)

Naast het begrip kolomeenheden , Bootstrap heeft verschillende breekpunten of rastergrootten zogenaamde tiers. Het Bootstrap 3-raster heeft vier (4) lagen om verschillende schermbreedtes aan te passen. De Bootstrap 3-lagen zijn xs , sm , md en lg . De rasterkolommen van Bootstrap worden geïdentificeerd door verschillende CSS-klassen col-{breakpoint}-{units} .

Elke rasterlaag omvat een bereik dat is ontworpen om de meest gangbare schermbreedtes van apparaten te passen, zoals die van desktops, laptops, tablets en smartphones.

Bootstrap gebruikt CSS-mediaquery's om responsieve breekpunten te maken die een grens voor elke rastergrootte bepalen. Met deze rastergroottes kunt u de lay-out van kolommen aanpassen aan verschillende schermbreedtes en apparaten__ de essentie van responsief ontwerp.

• col-xs-* - voor de kleinste schermbreedtes zoals smartphones <768 px
• col-sm-* - voor kleine schermbreedtes zoals smartphones en tablets> = 768 px
• col-md-* - voor gemiddelde schermbreedtes zoals tablets en laptops> = 992 px
• col-lg-* - voor grote schermbreedtes zoals desktops> = 1200 px

Referentie: Grid System

Dezelfde kolombreedte voor elk apparaat

Als u een kolom wilt maken die altijd 50% van de viewport-breedte is (op alle apparaten), kunt u col-*-6 voor elke laag ..

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>

Dit is echter een onnodige extra markup, omdat col-xs-6 6 eenheden op xs en hoger betekent. De kleinste laag die u instelt (xs, sm of md) definieert ook de grootte voor grotere schermbreedtes. Voor dezelfde kolom op alle lagen stelt u de breedte in voor de kleinste viewport.

Kortere code:

<div class="col-xs-6">..</div>

Verschillende kolombreedte voor elk apparaat (responsief ontwerp)

De klassen col-*-* kunnen worden gecombineerd om de kolombreedten op verschillende rastergroottes te regelen.

Maak bijvoorbeeld 50% kolombreedte op sm rij, en een 25% kolombreedte op md rij ...

<div class="col-md-3 col-sm-6">..</div>

De sm , md en lg rasters worden allemaal verticaal "gestapeld" bij viewport-breedten van minder dan 768 pixels. Hier past het xs raster. Kolommen die de klassen col-xs- * gebruiken, zullen niet verticaal worden gestapeld en blijven op de kleinste schermen verkleinen.

Bootstrap rijen en kolommen

Het rastersysteem van Bootstrap heeft 12 eenheden die bekend staan als Kolommen en die kunnen worden gebruikt om inhoud horizontaal over de viewport te plaatsen.

De reden voor een raster van 12 eenheden (in plaats van 10, 16, enz.) Is dat 12 gelijk verdeeld in 6 (helften), 4 (kwartalen) en 3 (derde). Dit maakt het aanpassen aan verschillende indelingen veel eenvoudiger. De rasterkolommen van Bootstrap worden geïdentificeerd door verschillende CSS-klassen col-{breakpoint}-{units} . Meer informatie over viewport-breedte en breekpunten (AKA-lagen)

Dus bijvoorbeeld, col-md-3 vertegenwoordigt een kolom die 3 van de 12 eenheden (of 25%) over een kijkvenster met gemiddelde breedte ( md ) inneemt. Als u een kolombreedte in uw lay-out wilt gebruiken, gebruikt u gewoon de juiste klasse col-{breakpoint}-{units} in uw HTML-opmaak.

<div class="col-{breakpoint}-{units}">

Kolombreedte is vloeibaar (geen vaste breedte), dus verbruiken de kolommen een percentage van hun container.

Kolomeenheden in Bootstrap 3

• col-*-1 : 1 of 12 (8.33333333% breedte)
• col-*-2 : 2 of 12 (16.66666667% breedte)
• col-*-3 : 3 of 12 (25% breedte)
• col-*-4 : 4 of 12 (33.3333333% breedte)
• col-*-5 : 5 of 12 (41.66666667% breedte)
• col-*-6 : 6 of 12 (50% breedte)
• col-*-7 : 7 of 12 (58.33333333% breedte)
• col-*-8 : 8 of 12 (66.66666667% breedte)
• col-*-9 : 9 of 12 (75% breedte)
• col-*-10 : 10 of 12 (83.33333333% breedte)
• col-*-11 : 11 of 12 (91.66666667% breedte)
• col-*-12 : 12 of 12 (100% breedte)

Demo - 12 kolomeenheden van Bootstrap

De Bootstrap-rij

De klasse Bootstrap .row wordt gebruikt om de kolommen te bevatten. Kolommen moeten altijd in rijen worden geplaatst en rijen moeten altijd in een container worden geplaatst ( container of container-fluid ). De rij gebruikt negatieve marges (-15 px) om de juiste afstand tussen de inhoud van de kolom en de rand van de browser te waarborgen. Rijen worden gebruikt om kolommen horizontaal te groeperen.

<div class="container">
    <div class="row">
        <!-- one more columns -->
        <div class="col-{breakpoint}-{units}">..</div>
    </div>
</div>

Kolommen zal het vullen .row horizontaal naar links naar rechts, en zal wrap om een nieuwe lijn elke 12 kolom units. Daarom kunt u .row s gebruiken om horizontale onderbrekingen te maken, of u kunt meer dan 12 .row toevoegen in een enkel .row element om kolommen te hebben die verticaal door de viewport worden .row (of gestapeld).

Wanneer u .row (meer dan 12 eenheden in een .row ), moet u responsieve resets (of clearfixes) gebruiken om een gelijkmatige omloop van ongelijke kolominhoud te garanderen. Dit is essentieel wanneer de inhoud van de kolommen in hoogte varieert.

Meer over Bootstrap-rasterkolommen en -rijen

Problemen met de lay-out van de Bootstrap 3-vloeistofrasters?

Bootstrap 3 - geneste rij. Kan ik kolommen toevoegen aan meer dan 12?

Bootstrap rij en kol uitleg

Hoe het Bootstrap-raster werkt (gemiddeld)

containers

Bootstrap vereist een bevattend element om de inhoud van de site te verpakken en ons rastersysteem te huisvesten. U kunt een van de twee containers kiezen om in uw projecten te gebruiken.

Gebruik .container klasse voor een responsieve container met vaste breedte.

<div class="container">
  ...
</div>

Gebruik de klasse .container-fluid voor een container over de volledige breedte die de volledige breedte van uw viewport overspant.

<div class="container-fluid">
  ...
</div>

Opmerking: containers zijn niet nestbaar (u kunt een container niet in een andere container plaatsen), vanwege padding en meer.

Kolommen compenseren

Deze klassen vergroten de linkermarge van een kolom met * kolommen. Bijvoorbeeld .col-md-offset-4 verplaatst .col-md-4 over vier kolommen.

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
  <div class="col-lg-5 col-lg-offset-1"></div>
  <div class="col-lg-5 col-lg-offset-1"></div>
</div>

Kolomvolgmanipulatie met push en pull

<div class="container content">
    <div class="row">
        <!--Main Content-->
        <div class="col-lg-9 col-lg-push-3">
            Main Content
        </div>
        
        <!--Sidebar-->
        <div class="col-lg-3 col-lg-pull-9">
            Sidebar
        </div>
    </div>
</div>

Hiermee wijzigt u de volgorde van de ingebouwde rasterkolommen.

Syntaxis: .col-md-push- * en .col-md-pull- *.

Meer:
Kolomvolgmanipulatie met col-lg-push en col-lg-pull in Twitter Bootstrap 3
Bootstrap 3: Push / pull-kolommen alleen op kleinere schermformaten
Kolom bestellen en stapelen in Bootstrap 3