twitter-bootstrap
Rutsystem

Introduktion

Anmärkningar

Mediefrågor

Mediefrågor i Bootstrap låter dig flytta, visa och dölja innehåll baserat på visningsstorleken. Följande mediefrågor används i LESS-filer för att skapa viktiga brytpunkter i Bootstrap-rutnätet:

/* 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) { ... }

Ibland utvidgas dessa till att inkludera en maxbredd för att begränsa CSS till en smalare uppsättning enheter:

@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 (Breakpoints)

Förutom begreppet kolonnenheter har Bootstrap olika brytpunkter eller rutstorlekar kända som nivåer. Bootstrap 3-rutnätet har fyra (4) nivåer för att passa olika skärmbredder (eller visningsportar). Bootstrap 3-nivåerna är xs , sm , md och lg . Bootstraps col-{breakpoint}-{units} identifieras av olika col-{breakpoint}-{units} CSS klasser.

Varje rutnät omfattar ett sortiment som är utformat för att bäst passa typiska enhetsskärmbredd som skrivbord, bärbara datorer, surfplattor och smartphones.

Bootstrap använder CSS-mediefrågor för att skapa responsiva brytpunkter som skapar en gräns för varje rutstorlek. Dessa rutstorlekar gör det möjligt för dig att ändra layout för kolumner så att de bäst matchar olika skärmbredd och enheter__ essensen av responsiv design.

• col-xs-* - för de minsta skärmbredderna som smartphones <768 px
• col-sm-* - för små skärmbredd som smartphones och surfplattor> = 768 px
• col-md-* - för medelstora skärmbredd som surfplattor och bärbara datorer> = 992 px
• col-lg-* - för stora skärmbredd som stationära datorer> = 1200 px

Referens: Grid System

Samma kolumnbredd för varje enhet

För att skapa en kolumn som alltid är 50% av visningsbredden (på alla enheter) kan du ställa in col-*-6 för varje nivå.

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

Detta är dock onödig extra markering, eftersom col-xs-6 betyder 6 enheter på xs och uppåt. Den minsta nivå som du anger (xs, sm eller md) definierar också storleken för större skärmbredd. För samma storlekskolumn på alla nivåer, ställ bara in bredden för det minsta utsiktsområdet.

Kortare kod:

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

Olika kolumnbredd för varje enhet (responsiv design)

col-*-* -klasserna kan kombineras för att kontrollera kolumnbredderna på olika rutstorlekar.

Skapa till exempel en kolumn på 50% bredd i sm nivån och en kolumn på 25% bredd vid md nivån ...

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

sm , md och lg rutnätet "staplas" vertikalt vid visningsbredder mindre än 768 pixlar. Det är här xs rutnätet passar in. Kolumner som använder klasserna col-xs- * staplas inte vertikalt och fortsätter att skala ner på de minsta skärmarna.

Bootstrap Rader & kolumner

Bootstraps rutnät har 12 enheter kända som kolumner som kan användas för att lägga upp innehåll horisontellt över visningsområdet.

Anledningen till ett 12-enhetsnät (istället för 10, 16 osv.) Är att 12 delar jämnt i 6 (halvor), 4 (fjärdedelar) och 3 (tredjedelar). Detta gör det lättare att anpassa sig till olika layouter. Bootstraps col-{breakpoint}-{units} identifieras av olika col-{breakpoint}-{units} CSS klasser. Läs mer om visningsbredd och brytpunkter (AKA Tiers)

Så till exempel representerar col-md-3 en kolumn som tar upp 3 av de 12 enheterna (eller 25%) över ett medium ( md ) breddvy. Om du col-{breakpoint}-{units} använda en kolumnbredd i din layout använder du bara lämplig col-{breakpoint}-{units} i din HTML-markering.

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

Kolumnbredden är flytande (inte fast bredd), så kolumnerna konsumerar en procentandel av sin behållare.

Kolumnenheter i Bootstrap 3

• col-*-1 : 1 av 12 (8,333333333% bredd)
• col-*-2 : 2 av 12 (16.66666667% bredd)
• col-*-3 : 3 av 12 (25% bredd)
• col-*-4 : 4 av 12 (33,33333333% bredd)
• col-*-5 : 5 av 12 (41,666666667% bredd)
• col-*-6 : 6 av 12 (50% bredd)
• col-*-7 : 7 av 12 (58.33333333% bredd)
• col-*-8 : 8 av 12 (66.66666667% bredd)
• col-*-9 : 9 av 12 (75% bredd)
• col-*-10 : 10 av 12 (83.33333333% bredd)
• col-*-11 : 11 av 12 (91,666666667% bredd)
• col-*-12 : 12 av 12 (100% bredd)

Demo - Bootstraps 12 kolumnenheter

Bootstrap-raden

.row Bootstrap .row används för att innehålla kolumnerna. Kolumner ska alltid placeras i rader och rader ska alltid placeras inuti en container ( container eller container-fluid ). Raden använder negativa marginaler (-15px) för att säkerställa korrekt avstånd mellan kolumnens innehåll och webbläsarkanten. Rader används för att gruppera kolumner horisontellt.

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

Kolumner kommer att fylla .row horisontellt från vänster till höger och slås till en ny rad varje 12 kolumnenheter. Därför kan du använda .row att skapa horisontella pauser , eller du kan lägga till mer än 12 kolumnenheter i ett enda .row element för att ha kolumner som lindas (eller staplas) vertikalt ner i visningsområdet.

När du använder kolonnomslag (mer än 12 enheter i en .row ), måste du använda responsiva återställningar (eller rensfixer) för att säkerställa jämn inpackning av ojämnt kolumninnehåll. Detta är viktigt när innehållet i kolumnerna varierar i höjd.

Mer om Bootstrap Grid Column & Rows

Bootstrap 3-problem med layouten i vätskerid?

Bootstrap 3 - kapslad rad kan jag få kolumner till mer än 12?

Bootstrap rad och kol förklaring

Så fungerar Bootstrap-rutnätet (Medium)

behållare

Bootstrap kräver ett innehållande element för att radera innehållet på webbplatsen och hysa vårt nätsystem. Du kan välja en av två behållare att använda i dina projekt.

Använd .container för en lyhörd behållare med fast bredd.

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

Använd .container-fluid klass för en behållare med full bredd som sträcker sig över hela visningsportens bredd.

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

Obs: Behållare är inte häckbara (du kan inte lägga en behållare i en annan behållare) på grund av padding mera.

Förskjutning av kolumner

Dessa klasser ökar vänstermarginalen för en kolumn med * kolumner. Exempelvis flyttar .col-md-offset-4 .col-md-4 över fyra kolumner.

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

Kolumnordning manipulering med tryck och drag

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

Detta ändrar ordningen på de inbyggda rutnätkolumnerna.

Syntax: .col-md-push- * och .col-md-pull- *.

Mer:
Kolumnordningmanipulation med col-lg-push och col-lg-pull i Twitter Bootstrap 3
Bootstrap 3: Tryck / dra bara kolumner i mindre skärmstorlekar
Kolumnbeställning och stapling i Bootstrap 3