Bootstrap

Stilladser

Bootstrap er bygget på responsive 12-kolonne gitter, layout og komponenter.

Globale indstillinger

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.

  1. <!DOCTYPE html>
  2. <html lang = "da" > 
  3.   ...
  4. </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 og Jonathan Neal , der også driver HTML5 Boilerplate . Mens vi bruger meget af Normalize i vores reset.less , har vi fjernet nogle elementer specifikt til Bootstrap.

Standard gittersystem

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.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

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).

  1. <div klasse = "række" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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 højre ved hjælp af .offset*klasser. Hver klasse øger venstre margen af ​​en kolonne med en hel kolonne. .offset4Flytter for eksempel .span4over fire kolonner.

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3 
  1. <div klasse = "række" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </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.

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

Væskegittersystem

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.

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

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.

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
4 offset 4
3 offset 3
3 offset 3
6 offset 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Flydende indlejring

Væskegitter udnytter indlejring forskelligt: ​​Hvert indlejret niveau af kolonner skal tilføje op til 12 kolonner. Dette skyldes, at væskegitteret bruger procenter, ikke pixels, til indstilling af bredder.

Væske 12
Væske 6
Væske 6
Væske 6
Væske 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Væske 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Væske 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Layouts

Fast layout

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

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

Flydende layout

Opret en flydende side med to spalter med — <div class="container-fluid">fantastisk til applikationer 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>

Responsive design

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.

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

Heads up!Bootstrap inkluderer ikke som standard responsive funktioner på nuværende tidspunkt, da ikke alt 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

Responsive enheder

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
Stort display 1200px og op 70 px 30 px
Standard 980px og op 60 px 20 px
Portræt tablets 768px og derover 42px 20 px
Telefoner til tablets 767px og derunder Væskesøjler, ingen faste bredder
Telefoner 480px og derunder Væskesøjler, ingen faste bredder 
  1. /* Stort skrivebord */
  2. @media ( min - bredde : 1200px ) { ... }     
  3.  
  4. /* Portræt tablet til liggende og desktop */
  5. @media ( min - bredde : 768px ) og ( maks.bredde : 979px ) { ... } _ _        
  6.  
  7. /* Liggende telefon til portrættablet */
  8. @media ( maks . bredde : 767px ) { ... }     
  9.  
  10. /* Liggende telefoner og nedad */
  11. @media ( maks . bredde : 480px ) { ... }

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
.visible-tablet Synlig
.visible-desktop Synlig
.hidden-phone Synlig Synlig
.hidden-tablet Synlig Synlig
.hidden-desktop Synlig Synlig

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 hjælpeprogrammer bør ikke bruges sammen med tabeller og understøttes derfor ikke.

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