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 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 datamaskiner, og store widescreen-stasjonære datamaskiner.

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

Som vist her, kan en grunnleggende layout lages med to "kolonner", som hver spenner over et antall av de 12 grunnkolonnene 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

Nestede rader skal inneholde et sett med kolonner som summeres til antall kolonner til den overordnede. For eksempel bør to nestede .span3kolonner plasseres i en .span6.

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>

Væskesøyler

Prosent, ikke piksler

Fluidgittersystemet bruker prosenter for kolonnebredder i stedet for faste piksler. Den har også de samme responsive variasjonene som vårt faste rutenettsystem, og sikrer riktige proporsjoner for viktige skjermoppløsninger og enheter.

Væske rader

Gjør hvilken som helst rad flytende ved å endre .rowtil .row-fluid. Kolonnene forblir de samme, noe som gjør det superenkelt å veksle mellom faste og flytende oppsett.

Markup

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

Hekking av væske

Nesting med flytende rutenett er litt annerledes: Antall nestede kolonner trenger ikke samsvare med overordnet. I stedet tilbakestilles kolonnene dine på hvert nivå fordi hver rad tar opp 100 % av den overordnede kolonnen.

Væske 12

Væske 6

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

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">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Supported devices

Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label	Layout width	Column width	Gutter width
Smartphones	480px and below	Fluid columns, no fixed widths
Portrait tablets	480px to 768px	Fluid columns, no fixed widths
Landscape tablets	768px to 979px	42px	20px
Default	980px and up	60px	20px
Large display	1210px and up	70px	30px

Requires meta tag

To ensure devices display responsive pages properly, include the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

What they do

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

Modify the width of column in our grid
Stack elements instead of float wherever necessary
Resize headings and text to be more appropriate for devices

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

Use the compiled responsive version, bootstrap-responsive.css
Add @import "responsive.less" and recompile Bootstrap
Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  // Landscape phones and down
  @media (max-width: 480px) { ... }
 
  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }
 
  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }
 
  // Large desktop
  @media (min-width: 1200px) { .. }