Bootstrap

Ställningar

Bootstrap är byggt på ett responsivt rutnät med 12 kolumner. Vi har också inkluderat layouter med fast och flytande bredd baserat på det systemet.

Globala stilar för CSS-återställning, typografi och länkar

Kräver HTML5 doctype

Bootstrap använder HTML-element och CSS-egenskaper som kräver användning av HTML5 doctype. Var noga med att inkludera det i början av varje Bootstrapped-sida i ditt projekt.

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

Typografi och länkar

Inom filen scaffolding.less ställer vi in ​​grundläggande globala visnings-, typografi- och länkstilar. Närmare bestämt, vi:

  • Ta bort marginalen på kroppen
  • Ställ background-color: white;in påbody
  • Använd @baseFontFamily, @baseFontSize, och @baseLineHeightattributen som vår typografiska bas
  • Ställ in den globala länkfärgen via @linkColoroch använd endast länkunderstrykningar på:hover

Återställ via Normalize

Från och med Bootstrap 2 har den traditionella CSS-återställningen utvecklats för att använda element från Normalize.css , ett projekt av Nicolas Gallagher som också driver HTML5 Boilerplate .

Den nya återställningen kan fortfarande hittas i reset.less , men med många element borttagna för korthet och noggrannhet.

Standard rutsystem 12 kolumner med en responsiv twist

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

Standardrutnätssystemet som tillhandahålls i Bootstrap använder 12 kolumner som återges med bredderna 724px, 940px (standard utan responsiv CSS inkluderad) och 1170px. Under 767px viewports blir kolumnerna flytande och staplas vertikalt.

  1. <div class = "rad" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Som visas här kan en grundläggande layout skapas med två "kolumner", som var och en spänner över ett antal av de 12 grundkolumner som vi definierade som en del av vårt rutsystem.


Förskjutning av kolumner

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4 
  1. <div class = "rad" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Häckande kolumner

Med det statiska (icke-flytande) rutsystemet i Bootstrap är kapslingen lätt. För att kapsla ditt innehåll, lägg bara till en ny .rowoch uppsättning .span*kolumner i en befintlig .span*kolumn.

Exempel

Kapslade rader bör innehålla en uppsättning kolumner som summeras till antalet kolumner för dess överordnade. Till exempel .span3bör två kapslade kolumner placeras i en .span6.

Nivå 1 i kolumn
Nivå 2
Nivå 2 
  1. <div class = "rad" > 
  2.   <div class = "span6" > 
  3.     Nivå 1 kolumn
  4.     <div class = "rad" > 
  5.       <div class = "span3" > Nivå 2 </div> 
  6.       <div class = "span3" > Nivå 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Vätskenätsystem 12 känsliga, procentbaserade kolumner

Vätskekolonner

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

Procent, inte pixlar

Vätskenätsystemet använder procenttal för kolumnbredder istället för fasta pixlar. Den har också samma responsiva variationer som vårt fasta rutsystem, vilket säkerställer rätt proportioner för viktiga skärmupplösningar och enheter.

Vätske rader

Gör valfri rad flytande helt enkelt genom att ändra .rowtill .row-fluid. Kolumnerna förblir exakt desamma, vilket gör det superenkelt att växla mellan fasta och flytande layouter.

Pålägg

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

Vätska häckande

Att kapsla med vätskenät är lite annorlunda: antalet kapslade kolumner behöver inte matcha föräldern. Istället återställs dina kolumner på varje nivå eftersom varje rad tar upp 100 % av den överordnade kolumnen.

Vätska 12
Vätska 6
Vätska 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Nivå 1 i kolumn
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Nivå 2 </div> 
  6.       <div class = "span6" > Nivå 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Rutnätsanpassning

Variabel Standardvärde Beskrivning
@gridColumns 12 Antal kolumner
@gridColumnWidth 60px Bredden på varje kolumn
@gridGutterWidth 20px Negativt mellanslag mellan kolumner

Variabler i LESS

Inbyggda i Bootstrap är en handfull variabler för att anpassa standard 940px-rutnätssystemet, dokumenterat ovan. Alla variabler för rutnätet lagras i variables.less.

Hur man anpassar

Att ändra rutnätet innebär att ändra de tre @grid*variablerna och kompilera om Bootstrap. Ändra rutnätsvariablerna i variables.less och använd ett av de fyra dokumenterade sätten att kompilera om . Om du lägger till fler kolumner, se till att lägga till CSS för de i grid.less.

Förbli lyhörd

Anpassning av rutnätet fungerar bara på standardnivån, 940px rutnätet. För att behålla de responsiva aspekterna av Bootstrap måste du också anpassa rutnäten i responsive.less.

Layouter Grundläggande mallar för att skapa webbsidor

Fast layout

Standard och enkla 940px bred, centrerad layout för nästan vilken webbplats eller sida som helst som tillhandahålls av en enda <div class="container">.

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

Flytande layout

<div class="container-fluid">ger flexibel sidstruktur, min- och maxbredder och en vänstra sidofält. Det är bra för appar och dokument.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Innehåll i sidofältet-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Kroppsinnehåll-->
  8.     </div>
  9.   </div>
  10. </div>

Responsiv design Mediafrågor för olika enheter och upplösningar

Responsiva enheter

Vad dem gör

Mediefrågor tillåter anpassad CSS baserat på ett antal förhållanden – förhållanden, bredder, visningstyp, etc – men fokuserar vanligtvis på min-widthoch max-width.

  • Ändra bredden på kolumnen i vårt rutnät
  • Stapla element istället för att flyta där det behövs
  • Ändra storlek på rubriker och text för att vara mer lämpliga för enheter

Använd mediefrågor på ett ansvarsfullt sätt och bara som en start för din mobila publik. För större projekt, överväg dedikerade kodbaser och inte lager av mediefrågor.

Enheter som stöds

Bootstrap stöder en handfull mediefrågor i en enda fil för att göra dina projekt mer lämpliga på olika enheter och skärmupplösningar. Här är vad som ingår:

Märka Layoutens bredd Kolumnbredd Rännans bredd
Smartphones 480px och lägre Vätskepelare, inga fasta bredder
Smartphones till surfplattor 767px och lägre Vätskepelare, inga fasta bredder
Porträtt tabletter 768px och högre 42px 20px
Standard 980px och uppåt 60px 20px
Stor display 1200px och uppåt 70 pixlar 30 pixlar

Kräver metatagg

Inkludera viewport-metataggen för att säkerställa att enheter visar responsiva sidor korrekt.

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

Använda mediafrågor

Bootstrap inkluderar inte automatiskt dessa mediefrågor, men att förstå och lägga till dem är mycket enkelt och kräver minimal installation. Du har några alternativ för att inkludera de responsiva funktionerna i Bootstrap:

  1. Använd den kompilerade responsiva versionen, bootstrap-responsive.css
  2. Lägg till @import "responsive.less" och kompilera om Bootstrap
  3. Ändra och kompilera om responsive.less som en separat fil

Varför inte bara inkludera det? Sanningen att säga, allt behöver inte vara lyhört. Istället för att uppmuntra utvecklare att ta bort den här funktionen tycker vi att det är bäst att aktivera den.

  1.   /* Liggande telefoner och nedåt */
  2.   @media ( maxbredd : 480px ) { ... } _ _     
  3.  
  4.   /* Liggande telefon till stående surfplatta */
  5.   @media ( max - bredd : 767px ) { ... }     
  6.  
  7.   /* Stående surfplatta till liggande och skrivbord */
  8.   @media ( min - bredd : 768px ) och ( max - bredd : 979px ) { ... }        
  9.  
  10.   /* Stort skrivbord */
  11.   @media ( min - bredd : 1200px ) { ... }

Responsiva verktygsklasser

Vad är dem

För snabbare mobilvänlig utveckling, använd dessa grundläggande verktygsklasser för att visa och dölja innehåll per enhet.

När ska användas

Använd i begränsad omfattning och undvik att skapa helt olika versioner av samma webbplats. Använd dem istället för att komplettera varje enhets presentation.

Du kan till exempel visa ett <select>element för nav på mobila layouter, men inte på surfplattor eller stationära datorer.

Supportklasser

Här visas en tabell över de klasser vi stöder och deras effekt på en given mediefrågelayout (märkt av enhet). De finns i responsive.less.

Klass Telefoner480px och lägre Tabletter767px och lägre Stationära datorer768px och högre
.visible-phone Synlig
.visible-tablet Synlig
.visible-desktop Synlig
.hidden-phone Synlig Synlig
.hidden-tablet Synlig Synlig
.hidden-desktop Synlig Synlig

Testfall

Ändra storlek på din webbläsare eller ladda på olika enheter för att testa ovanstående klasser.

Syns på...

Gröna bockar indikerar att klassen är synlig i din nuvarande visningsport.

  • Telefon✔ Telefon
  • Läsplatta✔ Surfplatta
  • Skrivbord✔ Skrivbord

Gömd på...

Här indikerar gröna bockar att klassen är gömd i din nuvarande visningsport.

  • Telefon✔ Telefon
  • Läsplatta✔ Surfplatta
  • Skrivbord✔ Skrivbord