Bootstrap

Stilladser

Bootstrap er bygget på et responsivt 12-søjlet gitter. Vi har også inkluderet layouter med fast og flydende bredde baseret på dette system.

Globale stilarter til CSS-nulstilling, typografi og links

Kræver HTML5 doctype

Bootstrap gør brug af HTML-elementer og CSS-egenskaber, der kræver brug af HTML5-doctype. Sørg for at inkludere det i begyndelsen af ​​hver Bootstrapped-side i dit projekt.

  1. <!DOCTYPE html>
  2. <html lang = "da" > 
  3.   ...
  4. </html>

Typografi og links

I filen scaffolding.less indstiller vi grundlæggende global visning, typografi og linkstile. Helt konkret har vi:

  • Fjern margen på 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

Nulstil via Normaliser

Fra Bootstrap 2 har den traditionelle CSS-nulstilling udviklet sig til at gøre brug af elementer fra Normalize.css , et projekt af Nicolas Gallagher , der også driver HTML5 Boilerplate .

Den nye nulstilling kan stadig findes i reset.less , men med mange elementer fjernet for kortheds skyld og nøjagtighed.

Standard gittersystem 12 søjler med et responsivt twist

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Standardgittersystemet i Bootstrap bruger 12 kolonner , der gengives i bredder på 724px, 940px (standard uden responsiv CSS inkluderet) og 1170px. Under 767px viewports bliver søjlerne flydende og stables lodret.

  1. <div klasse = "række" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Som vist her kan der oprettes et grundlæggende layout med to "kolonner", der hver spænder over et antal af de 12 grundsøjler, vi definerede som en del af vores gittersystem.


Forskydning af kolonner

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4 
  1. <div klasse = "række" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Indlejrende søjler

Med det statiske (ikke-flydende) gittersystem i Bootstrap er indlejring let. For at indlejre dit indhold skal du blot tilføje en ny .rowog et sæt .span*kolonner i en eksisterende .span*kolonne.

Eksempel

Indlejrede rækker skal indeholde et sæt kolonner, der summeres til antallet af kolonner for dets overordnede. For eksempel skal to indlejrede .span3kolonner placeres i en .span6.

Niveau 1 i kolonnen
Niveau 2
Niveau 2 
  1. <div klasse = "række" > 
  2.   <div class = "span6" > 
  3.     Niveau 1 kolonne
  4.     <div klasse = "række" > 
  5.       <div class = "span3" > Niveau 2 </div> 
  6.       <div class = "span3" > Niveau 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Væskegittersystem 12 responsive, procentbaserede kolonner

Væskesøjler

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Procent, ikke pixels

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

Flydende rækker

Gør enhver række flydende blot ved at skifte .rowtil .row-fluid. Søjlerne forbliver de samme, hvilket gør det super nemt at vende mellem faste og flydende layouts.

Markup

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Flydende indlejring

Indlejring med flydende gitter er lidt anderledes: Antallet af indlejrede kolonner behøver ikke at matche det overordnede. I stedet nulstilles dine kolonner på hvert niveau, fordi hver række fylder 100 % af den overordnede kolonne.

Væske 12
Væske 6
Væske 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Niveau 1 i kolonnen
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Niveau 2 </div> 
  6.       <div class = "span6" > Niveau 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Tilpasning af gitter

Variabel Standard værdi Beskrivelse
@gridColumns 12 Antal kolonner
@gridColumnWidth 60 px Bredden af ​​hver kolonne
@gridGutterWidth 20 px Negativt mellemrum mellem kolonner

Variabler i LESS

Indbygget i Bootstrap er en håndfuld variabler til tilpasning af standard 940px-gittersystemet, dokumenteret ovenfor. Alle variabler for gitteret gemmes i variables.less.

Sådan tilpasses

Ændring af gitteret betyder at ændre de tre @grid*variabler og genkompilere Bootstrap. Skift gittervariablerne i variables.less og brug en af ​​de fire dokumenterede måder til at rekompilere . Hvis du tilføjer flere kolonner, skal du sørge for at tilføje CSS for dem i grid.less.

Forbliver lydhør

Tilpasning af gitteret fungerer kun på standardniveauet, 940px-gitteret. For at vedligeholde de responsive aspekter af Bootstrap, bliver du også nødt til at tilpasse gitrene i responsive.less.

Layouts Grundlæggende skabeloner til at oprette websider

Fast layout

Standardlayoutet og det enkle 940px-brede, centrerede layout til stort set alle websteder eller sider leveret af en enkelt <div class="container">.

  1. <body>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

Flydende layout

<div class="container-fluid">giver fleksibel sidestruktur, min- og max-bredder og en venstre sidebjælke. Det er fantastisk til apps og dokumenter.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Sidebjælkeindhold-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Kropsindhold-->
  8.     </div>
  9.   </div>
  10. </div>

Responsivt design Medieforespørgsler til forskellige enheder og opløsninger

Responsive enheder

Hvad de gør

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
Smartphones 480px og derunder Væskesøjler, ingen faste bredder
Smartphones 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

Kræver metatag

For at sikre, at enheder viser responsive sider korrekt, skal du inkludere viewport-metatagget.

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

Brug af medieforespørgsler

Bootstrap inkluderer ikke automatisk disse medieforespørgsler, men det er meget nemt at forstå og tilføje dem og kræver minimal opsætning. Du har et par muligheder for at inkludere de responsive funktioner i Bootstrap:

  1. Brug den kompilerede responsive version, bootstrap-responsive.css
  2. Tilføj @import "responsive.less" og kompiler Bootstrap igen
  3. Rediger og genkompiler responsive.less som en separat fil

Hvorfor ikke bare inkludere det? Sandt at sige, ikke alt behøver at være lydhør. I stedet for at opfordre udviklere til at fjerne denne funktion, finder vi det bedst at aktivere den.

  1.   /* Liggende telefoner og nedad */
  2.   @media ( maks . bredde : 480px ) { ... }     
  3.  
  4.   /* Liggende telefon til portrættablet */
  5.   @media ( maks . bredde : 767px ) { ... }     
  6.  
  7.   /* Portræt tablet til liggende og desktop */
  8.   @media ( min - bredde : 768px ) og ( maks.bredde : 979px ) { ... } _ _        
  9.  
  10.   /* Stort skrivebord */
  11.   @media ( min - bredde : 1200px ) { ... }

Responsive værktøjsklasser

Hvad er de

For hurtigere mobilvenlig udvikling skal du bruge disse grundlæggende hjælpeklasser til at vise og skjule indhold efter enhed.

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.

For eksempel kan du vise et <select>element til nav på mobillayout, men ikke på tablets eller desktops.

Support klasser

Her vises en tabel over de klasser, vi understøtter, og deres effekt på et givet medieforespørgselslayout (mærket efter enhed). De kan findes i responsive.less.

Klasse Telefoner480px og derunder Tabletter767px og derunder Desktops768px og derover
.visible-phone Synlig
.visible-tablet Synlig
.visible-desktop Synlig
.hidden-phone Synlig Synlig
.hidden-tablet Synlig Synlig
.hidden-desktop Synlig Synlig

Test sag

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