Het Bootstrap-Grid-Systeem Begrijpen
12-kolomsindeling
Het grid-systeem van Bootstrap verdeelt de pagina in 12 kolommen, wat een flexibele en responsieve lay-outstructuur biedt. Hiermee kunnen ontwikkelaars visueel aantrekkelijke en goed gestructureerde ontwerpen maken die zich naadloos aanpassen aan verschillende schermformaten en apparaten.
Grid-klassen
- container: De
container-klasse omhult en centreert de inhoud binnen een container met vaste breedte. Deze klasse zorgt voor padding, marge en correcte uitlijning van de inhoud; - row: De
row-klasse creëert een horizontale groep van kolommen. Het fungeert als container voor kolommen en zorgt voor correcte uitlijning en afstand tussen de kolommen; - col: Kolommen binnen een rij worden gedefinieerd met de
col-klasse. Ontwikkelaars specificeren de breedte van kolommen met col-klassen zoalscol-6,col-md-4ofcol-lg-3.
Responsief ontwerp
Het grid-systeem van Bootstrap is ontworpen om responsief te zijn, waardoor inhoud zich dynamisch aanpast op basis van de grootte van het viewport en het apparaattype. Ontwikkelaars kunnen responsieve grid-klassen zoals col-md-6 of col-lg-4 gebruiken om kolombreedtes te specificeren voor verschillende schermformaten, zoals middelgrote of grote apparaten.
Opmerking
In Bootstrap staan de klassen
sm,md,lgenxlvoor verschillende schermformaten
Voorbeelden
Voorbeeld 1: Basis Grid-indeling
In dit voorbeeld bevat een container één enkele rij met drie kolommen van gelijke breedte. Elke kolom neemt een gelijk deel van de breedte van de rij in, wat resulteert in een horizontale indeling met drie kolommen.
index.html
Voorbeeld 2: Responsieve Grid-indeling
In dit voorbeeld bevat een container één rij met drie kolommen. De eerste twee kolommen (col-md-6) zijn ingesteld om de helft van de breedte van de rij in te nemen op middelgrote schermen en groter. De derde kolom (col-md-12) is ingesteld om de volledige breedte van de rij in te nemen op middelgrote schermen en groter. Dit zorgt ervoor dat de derde kolom de volledige breedte van de rij benut.
index.html
Resultaat van het gedrag van het responsieve raster
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain how to use the different grid classes in Bootstrap?
What do the sm, md, lg, and xl classes mean in practice?
Can you provide more examples of responsive layouts using Bootstrap?
Awesome!
Completion rate improved to 3.23Het Bootstrap-Grid-Systeem Begrijpen
Veeg om het menu te tonen
12-kolomsindeling
Het grid-systeem van Bootstrap verdeelt de pagina in 12 kolommen, wat een flexibele en responsieve lay-outstructuur biedt. Hiermee kunnen ontwikkelaars visueel aantrekkelijke en goed gestructureerde ontwerpen maken die zich naadloos aanpassen aan verschillende schermformaten en apparaten.
Grid-klassen
- container: De
container-klasse omhult en centreert de inhoud binnen een container met vaste breedte. Deze klasse zorgt voor padding, marge en correcte uitlijning van de inhoud; - row: De
row-klasse creëert een horizontale groep van kolommen. Het fungeert als container voor kolommen en zorgt voor correcte uitlijning en afstand tussen de kolommen; - col: Kolommen binnen een rij worden gedefinieerd met de
col-klasse. Ontwikkelaars specificeren de breedte van kolommen met col-klassen zoalscol-6,col-md-4ofcol-lg-3.
Responsief ontwerp
Het grid-systeem van Bootstrap is ontworpen om responsief te zijn, waardoor inhoud zich dynamisch aanpast op basis van de grootte van het viewport en het apparaattype. Ontwikkelaars kunnen responsieve grid-klassen zoals col-md-6 of col-lg-4 gebruiken om kolombreedtes te specificeren voor verschillende schermformaten, zoals middelgrote of grote apparaten.
Opmerking
In Bootstrap staan de klassen
sm,md,lgenxlvoor verschillende schermformaten
Voorbeelden
Voorbeeld 1: Basis Grid-indeling
In dit voorbeeld bevat een container één enkele rij met drie kolommen van gelijke breedte. Elke kolom neemt een gelijk deel van de breedte van de rij in, wat resulteert in een horizontale indeling met drie kolommen.
index.html
Voorbeeld 2: Responsieve Grid-indeling
In dit voorbeeld bevat een container één rij met drie kolommen. De eerste twee kolommen (col-md-6) zijn ingesteld om de helft van de breedte van de rij in te nemen op middelgrote schermen en groter. De derde kolom (col-md-12) is ingesteld om de volledige breedte van de rij in te nemen op middelgrote schermen en groter. Dit zorgt ervoor dat de derde kolom de volledige breedte van de rij benut.
index.html
Resultaat van het gedrag van het responsieve raster
Bedankt voor je feedback!
