Stillas

Krever HTML5 doctype

Bootstrap bruker visse HTML-elementer og CSS-egenskaper som krever bruk av HTML5 doctype. Inkluder det i begynnelsen av alle prosjektene dine.

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

Typografi og lenker

Bootstrap setter grunnleggende globale visnings-, typografi- og lenkestiler. Nærmere bestemt:

Fjern marginpå 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

Disse stilene kan finnes innenfor scaffolding.less .

Tilbakestill via Normaliser

Med Bootstrap 2 har den gamle tilbakestillingsblokken blitt droppet til fordel for Normalize.css , et prosjekt av Nicolas Gallagher som også driver HTML5 Boilerplate . Mens vi bruker mye av Normalize i vår reset.less , har vi fjernet noen elementer spesifikt for Bootstrap.

Eksempel på levende rutenett

Standard Bootstrap-rutenettsystemet bruker 12 kolonner , noe som gir en 940px bred beholder uten responsive funksjoner aktivert. Med den responsive CSS-filen lagt til, tilpasser rutenettet seg til å være 724px og 1170px bredt avhengig av visningsporten din. Under 767px viewporter blir kolonnene flytende og stables vertikalt.

Grunnleggende HTML-rutenett

For en enkel layout med to kolonner, lag en .rowog legg til riktig antall .span*kolonner. Siden dette er et rutenett .span*med 12 kolonner, spenner hver over et antall av disse 12 kolonnene, og bør alltid legge til 12 for hver rad (eller antall kolonner i den overordnede).

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

Gitt dette eksemplet har vi .span4og .span8, noe som gir totalt 12 kolonner og en hel rad.

Forskyvning av kolonner

Flytt kolonner til venstre ved å bruke .offset*klasser. Hver klasse øker venstre marg i en kolonne med en hel kolonne. .offset4Flytter for eksempel .span4over fire kolonner.

3 offset 2

3 offset 1

3 offset 2

6 offset 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Hekkesøyler

For å legge innholdet ditt med standardrutenettet, legg til en ny .rowog et sett med .span*kolonner i en eksisterende .span*kolonne. Nestede rader skal inneholde et sett med kolonner som summerer seg til antall kolonner til den overordnede.

Eksempel

Her er to nestede .span4kolonner plassert innenfor en .span8.

Nivå 1 i kolonnen

Nivå 2

<div class = "row" > 
  <div class = "span9" > 
    Nivå 1 kolonne
    <div class = "row" > 
      <div class = "span6" > Nivå 2 </div> 
      <div class = "span3" > Nivå 2 </div> 
    </div>
  </div>
</div>

Eksempel på strømnettet

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

Grunnleggende flytende rutenett HTML

Gjør hvilken som helst rad "flytende" ved å endre .rowtil .row-fluid. Kolonneklassene forblir de samme, noe som gjør det enkelt å veksle mellom faste og flytende rutenett.

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

Væske forskyvning

Fungerer på samme måte som forskyvningen av det faste rutenettet: legg .offset*til en hvilken som helst kolonne for å forskyve med så mange kolonner.

4 offset 4

3 offset 3

6 offset 6

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

Hekking av væske

Nesting med væskegitter er litt annerledes: Antall nestede kolonner skal ikke samsvare med foreldrenes antall kolonner. I stedet tilbakestilles hvert nivå av nestede kolonner 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>

Fast layout

Gir et felles oppsett med fast bredde (og valgfritt responsivt) med bare <div class="container">nødvendig.

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

Flytende layout

Lag en flytende side med to kolonner med <div class="container-fluid">– flott for applikasjoner og dokumenter.

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

Aktiverer responsive funksjoner

Slå på responsiv CSS i prosjektet ditt ved å inkludere riktig metatag og ekstra stilark i <head>dokumentet ditt. Hvis du har kompilert Bootstrap fra Tilpass-siden, trenger du bare inkludere metakoden.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stilark" >

Vær oppmerksom! Bootstrap inkluderer ikke responsive funksjoner som standard på dette tidspunktet, da ikke alt trenger å være responsivt. I stedet for å oppmuntre utviklere til å fjerne denne funksjonen, finner vi det best å aktivere den etter behov.

Om responsiv Bootstrap

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
Telefoner	480px og lavere	Væskesøyler, ingen faste bredder
Telefoner 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

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

Responsive verktøyklasser

For raskere mobilvennlig utvikling, bruk disse verktøyklassene for å vise og skjule innhold etter enhet. Nedenfor er en tabell over de tilgjengelige klassene og deres effekt på et gitt mediespørringsoppsett (merket med enhet). De finnes i responsive.less.

Klasse	Telefoner767px og lavere	Nettbrett979px til 768px	Stasjonære datamaskinerMisligholde
`.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

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.

Testcase for responsive verktøy

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

Synlig på...

Grønne haker indikerer at klassen er synlig i din nåværende visningsport.

Telefon✔ Telefon
Tablett✔ Nettbrett
Skrivebord✔ Skrivebord

Skjult på...

Her indikerer grønne haker at klassen er skjult i din nåværende visningsport.

Telefon✔ Telefon
Tablett✔ Nettbrett
Skrivebord✔ Skrivebord

Globale innstillinger