Stillas

Bootstrap er bygget på et responsivt 12-kolonner rutenett. Vi har også inkludert oppsett med fast og flytende bredde basert på det systemet.

Standard 940px rutenett

Standard rutenettsystem som leveres som en del av Bootstrap er et 940px bredt, 12-kolonner rutenett .

Den har også fire responsive varianter for ulike enheter og oppløsninger: telefon, nettbrettportrett, bordlandskap og små stasjonære stasjoner, og store widescreen-stasjonære stasjonære maskiner.

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Som vist her, kan et grunnleggende oppsett lages med to "kolonner", som hver spenner over et antall av de 12 grunnleggende kolonnene vi definerte som en del av rutenettsystemet vårt.

Forskyvning av kolonner

4 offset 4

3 offset 3

8 offset 4

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Hekkesøyler

Med det statiske (ikke-flytende) rutenettet i Bootstrap er hekking enkelt. For å neste innholdet ditt, legg til en ny .rowog et sett med .span*kolonner i en eksisterende .span*kolonne.

Eksempel

Nivå 1 i kolonnen

Nivå 2

<div class = "row" > 
  <div class = "span12" > 
    Nivå 1 i kolonnen
    <div class = "row" > 
      <div class = "span6" > Nivå 2 </div> 
      <div class = "span6" > Nivå 2 </div> 
    </div>
  </div>
</div>

Tilpasning av rutenett

Variabel	Standardverdi	Beskrivelse
`@gridColumns`	12	Antall kolonner
`@gridColumnWidth`	60 piksler	Bredde på hver kolonne
`@gridGutterWidth`	20 piksler	Negativt mellomrom mellom kolonner
`@siteWidth`	Beregnet sum av alle søyler og takrenner	Teller antall søyler og takrenner for å stille inn bredden på `.container-fixed()`blandingen

Variabler i LESS

Innebygd i Bootstrap er en håndfull variabler for å tilpasse standard 940px rutenettsystem, dokumentert ovenfor. Alle variabler for rutenettet er lagret i variabler.less.

Hvordan tilpasse

Å endre rutenettet betyr å endre de tre @grid*variablene og rekompilere Bootstrap. Endre rutenettvariablene i variables.less og bruk en av de fire dokumenterte måtene for å rekompilere . Hvis du legger til flere kolonner, sørg for å legge til CSS for de i grid.less.

Holder seg lydhør

Tilpasning av rutenettet fungerer bare på standardnivået, 940px-rutenettet. For å opprettholde de responsive aspektene ved Bootstrap, må du også tilpasse rutenettene i responsive.less.

Fast layout

Standard og enkel 940px bred, sentrert layout for omtrent hvilken som helst nettside eller side levert av en enkelt <div class="container">.

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

Flytende layout

<div class="container-fluid">gir fleksibel sidestruktur, min- og maks-bredder og en venstre sidelinje. Det er flott for apper og dokumenter.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sidefeltinnhold-->
    </div>
    <div class = "span10" > 
      <!--Broppsinnhold-->
    </div>
  </div>
</div>

Støttede enheter

Bootstrap støtter en håndfull mediespørringer for å gjøre prosjektene dine mer passende på forskjellige enheter og skjermoppløsninger. Her er hva som er inkludert:

Merkelapp	Layout bredde	Kolonnebredde	Rennebredde
Smarttelefoner	480px og lavere	Væskesøyler, ingen faste bredder
Portrett nettbrett	480px til 768px	Væskesøyler, ingen faste bredder
Liggende nettbrett	768px til 940px	44px	20 piksler
Misligholde	940px og oppover	60 piksler	20 piksler
Stort display	1210px og oppover	70 piksler	30 piksler

Hva de gjør

Mediespørringer tillater tilpasset CSS basert på en rekke forhold – forhold, bredder, visningstype osv. – men fokuserer vanligvis rundt min-widthog max-width.

Endre bredden på kolonnen i rutenettet vårt
Stable elementer i stedet for å flyte der det er nødvendig
Endre størrelsen på overskrifter og tekst for å være mer passende for enheter

Bruke mediespørringene

Bootstrap inkluderer ikke automatisk disse mediespørringene, men det er veldig enkelt å forstå og legge til dem og krever minimalt med oppsett. Du har noen alternativer for å inkludere de responsive funksjonene til Bootstrap:

Bruk den kompilerte responsive versjonen, bootstrap-responsive.css
Legg til @import "responsive.less" og kompiler Bootstrap på nytt
Endre og rekompilere responsive.less som en separat

Hvorfor ikke bare inkludere det? Når sant skal sies, trenger ikke alt være responsivt. I stedet for å oppmuntre utviklere til å fjerne denne funksjonen, finner vi det best å aktivere den.

  // Liggende telefoner og nedover
  @media ( maks . bredde : 480px ) { ... }     
 
  // Liggende telefon til stående nettbrett
  @media ( maks . bredde : 768px ) { ... }     
 
  // Stående nettbrett til liggende og skrivebord
  @media ( min - bredde : 768px ) og ( maks - bredde : 940px ) { ... }        
 
  // Stort skrivebord
  @media ( min - bredde : 1200px ) { .. }