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 høyre 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.

Nivå 1 kolonne

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" > 
    Væske 12
    <div class = "row-fluid" > 
      <div class = "span6" > Fluid 6 </div> 
      <div class = "span6" > Fluid 6 </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
Stort display	1200px og oppover	70 piksler	30 piksler
Misligholde	980px og oppover	60 piksler	20 piksler
Portrett nettbrett	768px og over	42px	20 piksler
Telefoner til nettbrett	767px og lavere	Væskesøyler, ingen faste bredder
Telefoner	480px og lavere	Væskesøyler, ingen faste bredder

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

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class	Phones 767px and below	Tablets 979px to 768px	Desktops Default
`.visible-phone`	Visible	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

Responsive utilities test case

Resize your browser or load on different devices to test the above classes.

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

Phone✔ Telefon
Tablet✔ Nettbrett
Desktop✔ Desktop

Hidden on...

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

Telefon✔ Telefon
Tablett✔ Nettbrett
Skrivebord✔ Skrivebord

Globale innstillinger