Rutsystem

Exempel

Bootstraps rutsystem använder en serie behållare, rader och kolumner för att layouta och anpassa innehåll. Den är byggd med flexbox och är helt lyhörd. Nedan följer ett exempel och en fördjupad förklaring för hur rutnätet går ihop.

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

Ovanstående exempel skapar tre lika breda kolumner över alla enheter och visningsportar med hjälp av våra fördefinierade rutnätsklasser. Dessa kolumner är centrerade på sidan med den överordnade .container.

Hur det fungerar

För att bryta ner det, så här går rutnätet samman:

• Vårt rutnät stöder sex responsiva brytpunkter . Brytpunkter är baserade på min-widthmediefrågor, vilket betyder att de påverkar den brytpunkten och alla de ovanför den (t.ex. .col-sm-4gäller för sm, md, lg, xl, och xxl). Detta innebär att du kan styra storleken på behållarna och kolumnen och beteendet efter varje brytpunkt.

• Behållare centrerar och täcker ditt innehåll horisontellt. Använd .containerför en responsiv pixelbredd, .container-fluidför width: 100%alla visningsportar och enheter, eller en responsiv behållare (t.ex. .container-md) för en kombination av vätske- och pixelbredder.

• Rader är omslag för kolumner. Varje kolumn har horisontell padding(kallad ränna) för att kontrollera utrymmet mellan dem. Detta paddingmotverkas sedan på raderna med negativa marginaler för att säkerställa att innehållet i dina kolumner är visuellt justerat ner till vänster. Rader stöder även modifieringsklasser för att enhetligt tillämpa kolumnstorlek och rännstensklasser för att ändra avståndet mellan ditt innehåll.

• Kolumner är otroligt flexibla. Det finns 12 mallkolumner tillgängliga per rad, så att du kan skapa olika kombinationer av element som sträcker sig över valfritt antal kolumner. Kolumnklasser anger antalet mallkolumner som ska spännas över (t.ex. col-4spänner över fyra). widths sätts i procent så att du alltid har samma relativa storlek.

• Rännor är också lyhörda och anpassningsbara. Rännstensklasser är tillgängliga över alla brytpunkter, med alla samma storlekar som våra marginaler och stoppningsavstånd . Byt horisontella rännor med .gx-*klasser, vertikala rännor med .gy-*eller alla rännor med .g-*klasser. .g-0finns även för att ta bort hängrännor.

• Sass variabler, kartor och mixins driver nätet. Om du inte vill använda de fördefinierade rutnätsklasserna i Bootstrap, kan du använda vår rutnäts källkod Sass för att skapa din egen med mer semantisk uppmärkning. Vi inkluderar även några anpassade CSS-egenskaper för att konsumera dessa Sass-variabler för ännu större flexibilitet för dig.

Var medveten om begränsningarna och buggarna kring flexbox , som oförmågan att använda vissa HTML-element som flexbehållare .

Rutnätsalternativ

Bootstraps rutsystem kan anpassas över alla sex standardbrytpunkter och alla brytpunkter du anpassar. De sex standardgridnivåerna är följande:

• Extra liten (xs)
• Liten (sm)
• Medium (md)
• Stor (lg)
• Extra stor (xl)
• Extra extra stor (xxl)

Som nämnts ovan har var och en av dessa brytpunkter sin egen behållare, unika klassprefix och modifierare. Så här ändras rutnätet över dessa brytpunkter:

Automatisk layout av kolumner

Använd brytpunktsspecifika kolumnklasser för enkel kolumnstorlek utan en explicit numrerad klass som .col-sm-6.

Lika bredd

Här är till exempel två rutnätslayouter som gäller för varje enhet och visningsport, från xstill xxl. Lägg till valfritt antal enhetslösa klasser för varje brytpunkt du behöver och varje kolumn kommer att ha samma bredd.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Ställa in en kolumnbredd

Automatisk layout för flexbox-rutnätskolumner innebär också att du kan ställa in bredden på en kolumn och få syskonkolumnerna automatiskt att ändra storlek runt den. Du kan använda fördefinierade rutnätsklasser (som visas nedan), rutnätsblandningar eller inline-bredder. Observera att de andra kolumnerna kommer att ändra storlek oavsett bredden på mittkolumnen.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Variabel bredd innehåll

Använd col-{breakpoint}-autoklasser för att anpassa kolumner baserat på innehållets naturliga bredd.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Responsiva klasser

Bootstraps rutnät innehåller sex nivåer av fördefinierade klasser för att bygga komplexa responsiva layouter. Anpassa storleken på dina kolumner på extra små, små, medelstora, stora eller extra stora enheter som du vill.

Alla brytpunkter

För rutnät som är samma från den minsta till den största, använd klasserna .coloch . .col-*Ange en numrerad klass när du behöver en särskilt stor kolumn; annars får du gärna hålla dig till .col.

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

Staplad till horisontell

Med en enda uppsättning .col-sm-*klasser kan du skapa ett grundläggande rutsystem som börjar staplade och blir horisontellt vid den lilla brytpunkten ( sm).

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</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>
</div>

Mixa och matcha

Vill du inte att dina kolumner bara staplas i vissa rutnätsnivåer? Använd en kombination av olika klasser för varje nivå efter behov. Se exemplet nedan för en bättre uppfattning om hur det hela fungerar.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Rad kolumner

Använd de responsiva .row-cols-*klasserna för att snabbt ställa in antalet kolumner som bäst återger ditt innehåll och din layout. Medan normala .col-*klasser gäller för de individuella kolumnerna (t.ex. .col-md-4), ställs radkolumnklasserna på den överordnade .rowsom en genväg. Med .row-cols-autokan du ge kolumnerna sin naturliga bredd.

Använd dessa radkolumnklasser för att snabbt skapa grundläggande rutnätslayouter eller för att kontrollera dina kortlayouter.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Du kan också använda den medföljande Sass mixin row-cols(),:

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Häckande

För att kapsla ditt innehåll med standardrutnätet, lägg till en ny .rowoch uppsättning .col-sm-*kolumner i en befintlig .col-sm-*kolumn. Kapslade rader bör innehålla en uppsättning kolumner som summerar till 12 eller färre (det krävs inte att du använder alla 12 tillgängliga kolumner).

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass

När du använder Bootstraps käll-Sass-filer har du möjlighet att använda Sass-variabler och mixins för att skapa anpassade, semantiska och responsiva sidlayouter. Våra fördefinierade rutnätsklasser använder samma variabler och mixins för att tillhandahålla en hel uppsättning färdiga klasser för snabb responsiva layouter.

Variabler

Variabler och kartor bestämmer antalet kolumner, rännstenens bredd och mediefrågepunkten där flytande kolumner ska börja. Vi använder dessa för att generera de fördefinierade rutnätsklasserna som dokumenterats ovan, såväl som för de anpassade mixin som listas nedan.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Mixins

Mixins används tillsammans med rutnätsvariablerna för att generera semantisk CSS för enskilda rutkolumner.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

Exempel användning

Du kan ändra variablerna till dina egna anpassade värden, eller bara använda mixinerna med deras standardvärden. Här är ett exempel på hur du använder standardinställningarna för att skapa en layout med två kolumner med ett mellanrum mellan.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Anpassa rutnätet

Med hjälp av våra inbyggda Sass-variabler och kartor är det möjligt att helt anpassa de fördefinierade rutnätsklasserna. Ändra antalet nivåer, mediefrågans dimensioner och behållarbredderna – kompilera sedan om.

Kolumner och hängrännor

Antalet rutnätskolumner kan ändras via Sass-variabler. $grid-columnsanvänds för att generera bredden (i procent) av varje enskild kolumn samtidigt $grid-gutter-widthsom den ställer in bredden för kolumnrännorna.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Grid nivåer

Om du går bortom själva kolumnerna kan du också anpassa antalet rutnätsnivåer. Om du bara ville ha fyra rutnätsnivåer skulle du uppdatera $grid-breakpointsoch $container-max-widthstill något sånt här:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

När du gör ändringar i Sass-variablerna eller kartorna måste du spara dina ändringar och kompilera om. Om du gör det kommer en helt ny uppsättning fördefinierade rutnätsklasser att matas ut för kolumnbredder, offset och ordning. Responsiva synlighetsverktyg kommer också att uppdateras för att använda de anpassade brytpunkterna. Se till att ställa in rutnätsvärden i px(inte rem, em, eller %).