Stillas

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

Krever HTML5 doctype

Bootstrap bruker HTML-elementer og CSS-egenskaper som krever bruk av HTML5 doctype. Sørg for å inkludere den i begynnelsen av hver Bootstrapped-side i prosjektet ditt.

<!DOCTYPE html>
<html lang = "no" > 
  ...
</html>

Typografi og lenker

Innenfor scaffolding.less -filen angir vi grunnleggende global visning, typografi og lenkestiler. Nærmere bestemt:

Fjern margen på kroppen
Sett background-color: white;påbody
Bruk @baseFontFamily, @baseFontSize, og @baseLineHeightattributtene som vår typografiske base
Angi den globale koblingsfargen via @linkColorog bruk lenkeunderstreking kun på:hover

Tilbakestill via Normaliser

Fra Bootstrap 2 har den tradisjonelle CSS-tilbakestillingen utviklet seg til å bruke elementer fra Normalize.css , et prosjekt av Nicolas Gallagher som også driver HTML5 Boilerplate .

Den nye tilbakestillingen kan fortsatt finnes i reset.less , men med mange elementer fjernet for korthet og nøyaktighet.

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" > 
      <!--Sidefeltinnhold-->
    </div>
    <div class = "span10" > 
      <!--Broppsinnhold-->
    </div>
  </div>
</div>

Responsive enheter

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

Bruk mediesøk på en ansvarlig måte og bare som en start på mobilpublikummet ditt. For større prosjekter bør du vurdere dedikerte kodebaser og ikke lag med mediespørringer.

Støttede enheter

Bootstrap støtter en håndfull mediespørringer i en enkelt fil 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
Smarttelefoner til nettbrett	767px og lavere	Væskesøyler, ingen faste bredder
Portrett nettbrett	768px og over	42px	20 piksler
Misligholde	980px og oppover	60 piksler	20 piksler
Stort display	1200px og oppover	70 piksler	30 piksler

Krever metatag

For å sikre at enheter viser responsive sider på riktig måte, inkluderer du viewport-metakoden.

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

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 kompiler responsive.less på nytt som en egen fil

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 : 980px ) { ... }        
 
  // Stort skrivebord
  @media ( min - bredde : 1200px ) { .. }

Responsive verktøyklasser

Hva er de

For raskere mobilvennlig utvikling, bruk disse grunnleggende verktøyklassene for å vise og skjule innhold etter enhet.

Når du skal bruke

Bruk på begrenset basis og unngå å lage helt forskjellige versjoner av samme nettsted. Bruk dem i stedet for å komplettere presentasjonen til hver enhet.

Du kan for eksempel vise et <select>element for nav på mobiloppsett, men ikke på nettbrett eller skrivebord.

Støtteklasser

Her vises en tabell over klassene vi støtter og deres effekt på et gitt mediespørringsoppsett (merket av enheten). De finnes i responsive.less.

Klasse	Telefoner480px og lavere	Nettbrett767px og lavere	Stasjonære datamaskiner768px og over
`.visible-phone`	Synlig	Skjult	Skjult
`.visible-tablet`	Skjult	Synlig	Skjult
`.visible-desktop`	Skjult	Skjult	Synlig
`.hidden-phone`	Skjult	Synlig	Synlig
`.hidden-tablet`	Synlig	Skjult	Synlig
`.hidden-desktop`	Synlig	Synlig	Skjult

Testforsøk

Endre størrelsen på nettleseren din eller last inn på forskjellige enheter for å teste klassene ovenfor.

Synlig på...

Telefon✔ Telefon
Tablett✔ Nettbrett
Skrivebord✔ Skrivebord

Skjult på...

Telefon✔ Telefon
Tablett✔ Nettbrett
Skrivebord✔ Skrivebord