Stillads · Twitter Bootstrap på dansk

Kræver HTML5 doctype

Bootstrap gør brug af visse HTML-elementer og CSS-egenskaber, der kræver brug af HTML5 doctype. Medtag det i begyndelsen af alle dine projekter.

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

Typografi og links

Bootstrap indstiller grundlæggende global visning, typografi og linkstile. Helt konkret har vi:

Fjern marginpå kroppen
Sæt background-color: white;påbody
Brug @baseFontFamily, @baseFontSize, og @baseLineHeightattributterne som vores typografiske base
Indstil den globale linkfarve via @linkColorog anvend kun linkunderstregninger på:hover

Disse stilarter kan findes inden for scaffolding.less .

Nulstil via Normaliser

Med Bootstrap 2 er den gamle nulstillingsblok blevet droppet til fordel for Normalize.css , et projekt af Nicolas Gallagher , der også driver HTML5 Boilerplate . Mens vi bruger meget af Normalize i vores reset.less , har vi fjernet nogle elementer specifikt til Bootstrap.

Eksempel på et levende net

Standard Bootstrap-gittersystemet bruger 12 kolonner , hvilket giver en 940px bred container uden responsive funktioner aktiveret. Med den responsive CSS-fil tilføjet, tilpasser gitteret sig til at være 724px og 1170px bredt afhængigt af din viewport. Under 767px viewports bliver søjlerne flydende og stables lodret.

Grundlæggende HTML-gitter

For et simpelt layout med to kolonner skal du oprette et .rowog tilføje det passende antal .span*kolonner. Da dette er et gitter .span*med 12 kolonner, spænder hver over et antal af disse 12 kolonner og bør altid lægge op til 12 for hver række (eller antallet af kolonner i den overordnede).

<div klasse = "række" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Givet dette eksempel har vi .span4og .span8, hvilket giver 12 kolonner i alt og en komplet række.

Forskydning af kolonner

Flyt kolonner til venstre ved hjælp af .offset*klasser. Hver klasse øger venstre margen af 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 klasse = "række" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Indlejrede søjler

For at indlejre dit indhold med standardgitteret skal du tilføje en ny .rowog et sæt .span*kolonner i en eksisterende .span*kolonne. Indlejrede rækker skal indeholde et sæt kolonner, der summeres til antallet af kolonner for dets overordnede.

Eksempel

Her er to indlejrede .span4kolonner placeret i en .span8.

Niveau 1 af kolonne

Niveau 2

<div klasse = "række" > 
  <div class = "span9" > 
    Niveau 1 kolonne
    <div klasse = "række" > 
      <div class = "span6" > Niveau 2 </div> 
      <div class = "span3" > Niveau 2 </div> 
    </div>
  </div>
</div>

Eksempel på levende væskegitter

Det flydende gittersystem bruger procenter i stedet for pixels til kolonnebredder. Det har de samme responsfunktioner som vores faste gittersystem, hvilket sikrer korrekte proportioner for vigtige skærmopløsninger og enheder.

Grundlæggende flydende gitter HTML

Gør en hvilken som helst række "flydende" ved at skifte .rowtil .row-fluid. Søjleklasserne forbliver de samme, hvilket gør det nemt at vende mellem faste og flydende gitter.

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

Væskeforskydning

Fungerer på samme måde som det faste gittersystem forskydning: Føj .offset*til en hvilken som helst kolonne for at udligne 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>

Flydende indlejring

Indlejring med væskegitter er lidt anderledes: Antallet af indlejrede kolonner bør ikke matche forældrenes antal kolonner. I stedet nulstilles hvert niveau af indlejrede kolonner, fordi hver række fylder 100 % af den overordnede kolonne.

Væske 12

Væske 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Niveau 1 af kolonne
    <div class = "row-fluid" > 
      <div class = "span6" > Niveau 2 </div> 
      <div class = "span6" > Niveau 2 </div> 
    </div>
  </div>
</div>

Fast layout

Giver et fælles layout med fast bredde (og valgfrit responsivt) med kun <div class="container">påkrævet.

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

Flydende layout

Opret en flydende side med to spalter med — <div class="container-fluid">fantastisk til applikationer og dokumenter.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sidebjælkeindhold-->
    </div>
    <div class = "span10" > 
      <!--Kropsindhold-->
    </div>
  </div>
</div>

Aktivering af responsive funktioner

Aktiver responsiv CSS i dit projekt ved at inkludere det korrekte metatag og yderligere stylesheet i <head>dit dokument. Hvis du har kompileret Bootstrap fra siden Tilpas, behøver du kun inkludere metatagget.

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

Heads up! Bootstrap inkluderer ikke som standard responsive funktioner på nuværende tidspunkt, da alt ikke behøver at være responsivt. I stedet for at opfordre udviklere til at fjerne denne funktion, finder vi det bedst at aktivere den efter behov.

Om responsiv Bootstrap

Medieforespørgsler tillader tilpasset CSS baseret på en række forhold – forhold, bredder, visningstype osv. – men fokuserer normalt omkring min-widthog max-width.

Rediger bredden af kolonnen i vores gitter
Stak elementer i stedet for at flyde, hvor det er nødvendigt
Tilpas størrelsen på overskrifter og tekst for at være mere passende til enheder

Brug medieforespørgsler ansvarligt og kun som en start på dine mobile målgrupper. For større projekter skal du overveje dedikerede kodebaser og ikke lag af medieforespørgsler.

Understøttede enheder

Bootstrap understøtter en håndfuld medieforespørgsler i en enkelt fil for at hjælpe med at gøre dine projekter mere passende på forskellige enheder og skærmopløsninger. Her er hvad der er inkluderet:

Etiket	Layout bredde	Søjlebredde	Tagrendes bredde
Telefoner	480px og derunder	Væskesøjler, ingen faste bredder
Telefoner til tablets	767px og derunder	Væskesøjler, ingen faste bredder
Portræt tablets	768px og derover	42px	20 px
Standard	980px og op	60 px	20 px
Stort display	1200px og op	70 px	30 px

/* Liggende telefoner og nedad */
@media ( maks . bredde : 480px ) { ... }     
 
/* Liggende telefon til portrættablet */
@media ( maks . bredde : 767px ) { ... }     
 
/* Portræt tablet til liggende og desktop */
@media ( min - bredde : 768px ) og ( maks.bredde : 979px ) { ... } _ _        
 
/* Stort skrivebord */
@media ( min - bredde : 1200px ) { ... }

Responsive værktøjsklasser

For hurtigere mobilvenlig udvikling skal du bruge disse hjælpeklasser til at vise og skjule indhold efter enhed. Nedenfor er en tabel over de tilgængelige klasser og deres effekt på et givet medieforespørgselslayout (mærket efter enhed). De kan findes i responsive.less.

Klasse	Telefoner767px og derunder	Tabletter979px til 768px	DesktopsStandard
`.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

Hvornår skal bruges

Brug på et begrænset grundlag og undgå at oprette helt forskellige versioner af det samme websted. Brug dem i stedet til at komplementere hver enheds præsentation.

Responsive utilities testcase

Tilpas størrelsen på din browser eller indlæs på forskellige enheder for at teste ovenstående klasser.

Synlig på...

Grønne flueben angiver, at klassen er synlig i din aktuelle visningsport.

telefon✔ Telefon
Tablet✔ Tablet
Desktop✔ Desktop

Skjult på...

Her angiver grønne flueben, at klassen er skjult i din aktuelle visningsport.

telefon✔ Telefon
Tablet✔ Tablet
Desktop✔ Desktop

Stilladser

Globale indstillinger