HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap 4 Grid Voorbeelde

❮ Vorige Volgende ❯

Hieronder het ons 'n paar voorbeelde van Bootstrap 4-roosteruitlegte versamel.

Drie gelyke kolomme

Gebruik die .colklas op 'n gespesifiseerde aantal elemente en Bootstrap sal herken hoeveel elemente daar is (en gelyke breedte kolomme skep). In die voorbeeld hieronder gebruik ons ​​drie kol-elemente, wat elk 'n breedte van 33,33% kry.

kol
kol
kol

Voorbeeld

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Drie gelyke kolomme wat getalle gebruik

Jy kan ook getalle gebruik om die kolomwydte te beheer. Maak net seker dat die som 12 of minder optel (dit is nie nodig dat jy al 12 beskikbare kolomme gebruik nie):

kol-4
kol-4
kol-4

Voorbeeld

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

Drie ongelyke kolomme

Om ongelyke kolomme te skep, moet jy getalle gebruik. Die volgende voorbeeld sal 'n verdeling van 25%/50%/25% skep:

kol-3
kol-6
kol-3

Voorbeeld

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

Stel een kolombreedte in

Dit is egter genoeg om net die breedte van een kolom te stel, en die broers en susterskolomme outomaties die grootte rondom dit te laat verander. Die volgende voorbeeld sal 'n verdeling van 25%/50%/25% skep:

kol
kol-6
kol

Voorbeeld

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

Meer gelyke kolomme

1 van 2
2 van 2
1 van 4
2 van 4
3 van 4
4 van 4
1 van 6
2 van 6
3 van 6
4 van 6
5 van 6
6 van 6

Voorbeeld

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Ry Cols

Jy kan ook beheer hoeveel kolomme wat langs mekaar moet verskyn (ongeag hoeveel kole), met die .row-cols-*klasse:

1 van 2
2 van 2
1 van 4
2 van 4
3 van 4
4 van 4
1 van 6
2 van 6
3 van 6
4 van 6
5 van 6
6 van 6

Voorbeeld

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Meer ongelyke kolomme

1 van 2
2 van 2
1 van 4
2 van 4
3 van 4
4 van 4
1 van 4
2 van 4
3 van 4
4 van 4

Voorbeeld

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>

<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

Gelyke Hoogte

As een van die kolomme groter is as die ander (as gevolg van teks- of CSS-hoogte), sal die res volg:

Baie pyn is baie belangrik, daar is geen verskil in die kos en die sintuie nie. En die pyn wat ek daardie naweek kan kry. Geen slegte iriure haal dit op nie, en zril woonstelle of so iets, het een van ons wat sokker gesien het gesubsidieer. Nee ons pyn moet deur my gelees word, dit behoort hom platon te laat slym.
kol
kol

Voorbeeld

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Geneste kolomme

kol-8
kol-6
kol-6
kol-4

Die volgende voorbeeld wys hoe om 'n tweekolomuitleg te skep, met nog twee kolomme binne een van die kolomme:

Voorbeeld

<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</div>
</div>

Responsiewe klasse

Die Bootstrap 4-roosterstelsel het vyf klasse:

  • .col-(ekstra klein toestelle - skermwydte minder as 576px)
  • .col-sm-(klein toestelle - skermwydte gelyk aan of groter as 576px)
  • .col-md-(medium toestelle - skermwydte gelyk aan of groter as 768 px)
  • .col-lg-(groot toestelle - skermwydte gelyk aan of groter as 992px)
  • .col-xl-(xlarge toestelle - skermwydte gelyk aan of groter as 1200px)

Die klasse hierbo kan gekombineer word om meer dinamiese en buigsame uitlegte te skep.

Wenk: Elke klas skaal op, so as jy dieselfde breedtes vir smen wil stel md, hoef jy net te spesifiseer sm.

Gestapel tot Horisontaal

kol-sm-9
kol-sm-3
kol-sm
kol-sm
kol-sm

Die volgende voorbeeld wys hoe om 'n kolomuitleg te skep wat begin gestapel op ekstra klein toestelle, voordat dit horisontaal word op groter toestelle (sm, md, lg en xl):

Voorbeeld

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Meng en pas

kol-6 kol-sm-9
kol-6 kol-sm-3
kol-7 kol-lg-8
kol-5 kol-lg-4
kol-sm-3 kol-md-6 kol-lg-4
kol-sm-9 kol-md-6 kol-lg-8

Voorbeeld

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

Geen Geute

Voeg die .no-guttersklas by die .rowhouer om geute te verwyder (ekstra spasie):

Die pyn self is belangrik, maar die pyn word versterk deur die adipiscerende proses, maar ek gee dit tyd om dit af te sny sodat ek goeie werk en pyn kan doen.
Sodat, vir die grootste deel, enige een van ons tot die uitoefening van enige soort werk sal kom, behalwe om voordeel te trek uit die doelwitte daaruit.
Maar sodat julle kan verstaan ​​waarvandaan elke gebore dwaling die plesier is om die pyn te beskuldig en te prys, sal ek die hele saak oopmaak en presies die dinge verduidelik wat gesê is deur daardie uitvinder van die waarheid en as 't ware die argitek van die geseënde lewe.

Voorbeeld

<div class="row no-gutters">

❮ Vorige Volgende ❯