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.

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, der leveres som en del af Bootstrap, er et 940px bredt, 12-søjlers gitter .

Den har også fire responsive variationer til forskellige enheder og opløsninger: telefon, tablet portræt, bordlandskab og små desktops og store widescreen desktops.

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

Som vist her, kan et grundlæggende layout oprettes med to "kolonner", der hver spænder over et antal af de 12 grundkolonner, 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 class="row"> klasse = "række" >
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Indlejrede 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 af kolonne
Niveau 2
Niveau 2 
  1. <div class="row"> klasse = "række" >
  2.   <div class = "span12" > 
  3.     Niveau 1 af kolonne
  4.     <div klasse = "række" > 
  5.       <div class = "span6" > Niveau 2 </div> 
  6.       <div class = "span6" > 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"> klasse = "rækkevæske" >
  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"> klasse = "rækkevæske" >
  2.   <div class = "span12" > 
  3.     Niveau 1 af kolonne
  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
@siteWidth Beregnet sum af alle søjler og tagrender Tæller antallet af søjler og tagrender for at indstille bredden af .container-fixed()​​mixin

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"> klasse = "beholder-væske" >
  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

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
Portræt tablets 480px til 768px Væskesøjler, ingen faste bredder
Liggende tablets 768px til 979px 42px 20 px
Standard 980px og op 60 px 20 px
Stort display 1210px 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"> name = "viewport" content = "width=enhed-width, initial-scale=1.0" >

Hvad de gør

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

  1. Use the compiled responsive version, bootstrap-responsive.css
  2. Add @import "responsive.less" and recompile Bootstrap
  3. Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  1.   // Landskabstelefoner og nedad
  2.   @media ( maks . bredde : 480px ) { ... }     
  4.   // Liggende telefon til portrættablet
  5.   @media (max-width: 768px) { ... }
  7.   // Portrait tablet to landscape and desktop
  8.   @media (min-width: 768px) and (max-width: 980px) { ... }
  10.   // Large desktop
  11.   @media (min-width: 1200px) { .. }