Gittersystem

Eksempel

Bootstraps gittersystem bruger en række beholdere, rækker og kolonner til at layoute og justere indhold. Den er bygget med flexbox og er fuldt responsiv. Nedenfor er et eksempel og en uddybende forklaring på, hvordan netsystemet hænger sammen.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Ovenstående eksempel opretter tre kolonner med samme bredde på tværs af alle enheder og visningsporte ved hjælp af vores foruddefinerede gitterklasser. Disse kolonner er centreret på siden med den overordnede .container.

Hvordan det virker

Nedbryder det, her er, hvordan gittersystemet kommer sammen:

• Vores gitter understøtter seks responsive brudpunkter . Breakpoints er baseret på min-widthmedieforespørgsler, hvilket betyder, at de påvirker det breakpoint og alle dem over det (f.eks. .col-sm-4gælder for sm, md, lg, xl, og xxl). Dette betyder, at du kan kontrollere størrelsen på beholderen og kolonnen og adfærd efter hvert brudpunkt.

• Containere centrerer og fylder dit indhold vandret. Brug .containertil en responsiv pixelbredde, .container-fluidtil width: 100%på tværs af alle visningsporte og enheder, eller en responsiv beholder (f.eks. .container-md) til en kombination af væske- og pixelbredder.

• Rækker er omslag til kolonner. Hver søjle har vandret padding(kaldet en rende) til at kontrollere mellemrummet mellem dem. Dette paddingmodvirkes så på rækkerne med negative marginer for at sikre, at indholdet i dine kolonner er visuelt justeret ned i venstre side. Rækker understøtter også modifikationsklasser for ensartet at anvende kolonnestørrelser og rendeklasser for at ændre afstanden mellem dit indhold.

• Kolonner er utrolig fleksible. Der er 12 skabelonkolonner tilgængelige pr. række, så du kan oprette forskellige kombinationer af elementer, der spænder over et vilkårligt antal kolonner. Kolonneklasser angiver antallet af skabelonkolonner, der skal spændes over (f.eks. col-4spænder over fire). widths er sat i procenter, så du altid har den samme relative størrelse.

• Tagrender er også lydhøre og kan tilpasses. Tagrendeklasser er tilgængelige på tværs af alle brudpunkter, med alle de samme størrelser som vores margin og polstringsafstand . Skift vandrette tagrender med .gx-*klasser, lodrette tagrender med .gy-*, eller alle tagrender med .g-*klasser. .g-0findes også til at fjerne tagrender.

• Sass variabler, kort og mixins driver nettet. Hvis du ikke ønsker at bruge de foruddefinerede gitterklasser i Bootstrap, kan du bruge vores gitters kilde Sass til at oprette din egen med mere semantisk markup. Vi inkluderer også nogle tilpassede CSS-egenskaber til at forbruge disse Sass-variabler for endnu større fleksibilitet for dig.

Vær opmærksom på begrænsningerne og fejlene omkring flexbox , såsom manglende evne til at bruge nogle HTML-elementer som flex-containere .

Grid muligheder

Bootstraps gittersystem kan tilpasses på tværs af alle seks standard breakpoints og eventuelle breakpoints, du tilpasser. De seks standardgitterniveauer er som følger:

• Ekstra lille (xs)
• Lille (sm)
• Medium (md)
• Stor (lg)
• Ekstra stor (xl)
• Ekstra ekstra stor (xxl)

Som nævnt ovenfor har hvert af disse brudpunkter deres egen container, unikke klassepræfiks og modifikatorer. Her er, hvordan gitteret ændres på tværs af disse brudpunkter:

Auto-layout kolonner

Brug breakpoint-specifikke kolonneklasser for nem kolonnestørrelse uden en eksplicit nummereret klasse som .col-sm-6.

Lige bred

For eksempel er her to gitterlayouts, der gælder for hver enhed og visningsport, fra xstil xxl. Tilføj et hvilket som helst antal enhedsløse klasser for hvert breakpoint, du har brug for, og hver kolonne vil have samme bredde.

<div class="container text-center">
  <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>

Indstilling af én kolonnebredde

Auto-layout for flexbox-gitterkolonner betyder også, at du kan indstille bredden af ​​en kolonne og automatisk ændre størrelsen på søskendekolonnerne omkring den. Du kan bruge foruddefinerede gitterklasser (som vist nedenfor), gitterblandinger eller inline-bredder. Bemærk, at de andre kolonner vil ændre størrelsen, uanset bredden af ​​den midterste kolonne.

<div class="container text-center">
  <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 breddeindhold

Brug col-{breakpoint}-autoklasser til at dimensionere kolonner baseret på den naturlige bredde af deres indhold.

<div class="container text-center">
  <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>

Responsive klasser

Bootstraps gitter inkluderer seks niveauer af foruddefinerede klasser til at bygge komplekse responsive layouts. Tilpas størrelsen af ​​dine kolonner på ekstra små, små, mellemstore, store eller ekstra store enheder, som du finder passende.

Alle brudpunkter

For gitter, der er ens fra den mindste enhed til den største, skal du bruge klasserne .colog . .col-*Angiv en nummereret klasse, når du har brug for en kolonne af særlig størrelse; ellers er du velkommen til at holde dig til .col.

<div class="container text-center">
  <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>

Stablet til vandret

Ved at bruge et enkelt sæt .col-sm-*klasser kan du oprette et grundlæggende gittersystem, der starter stablet og bliver vandret ved det lille brudpunkt ( sm).

<div class="container text-center">
  <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>

Mix og match

Vil du ikke have, at dine kolonner blot skal stables i nogle gitterniveauer? Brug en kombination af forskellige klasser for hvert niveau efter behov. Se eksemplet nedenfor for en bedre idé om, hvordan det hele fungerer.

<div class="container text-center">
  <!-- 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>

Række kolonner

Brug de responsive .row-cols-*klasser til hurtigt at indstille antallet af kolonner, der bedst gengiver dit indhold og dit layout. Hvor normale .col-*klasser gælder for de individuelle kolonner (f.eks. .col-md-4), er rækkekolonneklasserne indstillet på overordnet .rowsom en genvej. Med .row-cols-autokan du give søjlerne deres naturlige bredde.

Brug disse rækkekolonnerklasser til hurtigt at oprette grundlæggende gitterlayouts eller til at styre dine kortlayouts.

<div class="container text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 også bruge den medfølgende 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);
  }
}

Indlejring

For at indlejre dit indhold med standardgitteret skal du tilføje en ny .rowog et sæt .col-sm-*kolonner i en eksisterende .col-sm-*kolonne. Indlejrede rækker skal indeholde et sæt kolonner, der tæller op til 12 eller færre (det er ikke påkrævet, at du bruger alle 12 tilgængelige kolonner).

<div class="container text-center">
  <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 bruger Bootstraps kilde Sass-filer, har du mulighed for at bruge Sass-variabler og mixins til at skabe brugerdefinerede, semantiske og responsive sidelayouts. Vores foruddefinerede grid-klasser bruger de samme variabler og mixins for at give en hel række klar-til-brug-klasser til hurtigt responsive layouts.

Variabler

Variabler og kort bestemmer antallet af kolonner, rendebredden og det medieforespørgselspunkt, hvor flydende kolonner skal begynde. Vi bruger disse til at generere de foruddefinerede gitterklasser, der er dokumenteret ovenfor, såvel som til de brugerdefinerede mixins, der er angivet nedenfor.

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

$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 bruges sammen med gittervariablerne til at generere semantisk CSS for individuelle gitterkolonner.

// 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);

Eksempel på brug

Du kan ændre variablerne til dine egne brugerdefinerede værdier, eller bare bruge mixins med deres standardværdier. Her er et eksempel på brug af standardindstillingerne til at skabe et to-kolonne layout med et mellemrum mellem.

.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>

Tilpasning af gitteret

Ved at bruge vores indbyggede gitter Sass-variabler og -kort er det muligt helt at tilpasse de foruddefinerede gitterklasser. Skift antallet af lag, medieforespørgselsdimensionerne og containerbredderne – og kompilér derefter igen.

Søjler og tagrender

Antallet af gitterkolonner kan ændres via Sass-variabler. $grid-columnsbruges til at generere bredderne (i procent) af hver enkelt søjle, mens $grid-gutter-widthden indstiller bredden for søjlerrenderne. $grid-row-columnsbruges til at indstille det maksimale antal kolonner af .row-cols-*, ethvert tal over denne grænse ignoreres.

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

Grid tiers

Går du ud over selve kolonnerne, kan du også tilpasse antallet af gitterniveauer. Hvis du kun ville have fire gitterniveauer, ville du opdatere $grid-breakpointsog $container-max-widthstil noget som dette:

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

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

Når du foretager ændringer i Sass-variablerne eller -kortene, skal du gemme dine ændringer og kompilere igen. Hvis du gør det, udlæses et helt nyt sæt foruddefinerede gitterklasser for kolonnebredder, forskydninger og bestilling. Responsive synlighedsværktøjer vil også blive opdateret til at bruge de tilpassede brudpunkter. Sørg for at indstille gitterværdier i px(ikke rem, em, eller %).