Støvelhempe

Stillas

Bootstrap er bygget på et responsivt 12-kolonner rutenett. Vi har også inkludert oppsett med fast og flytende bredde basert på det systemet.

Globale stiler for tilbakestilling av CSS, typografi og lenker

Krever HTML5 doctype

Bootstrap bruker HTML-elementer og CSS-egenskaper som krever bruk av HTML5 doctype. Sørg for å inkludere den i begynnelsen av hver Bootstrapped-side i prosjektet ditt.

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

Typografi og lenker

Innenfor scaffolding.less -filen angir vi grunnleggende global visning, typografi og lenkestiler. Nærmere bestemt:

  • Fjern margen på kroppen
  • Sett background-color: white;påbody
  • Bruk @baseFontFamily, @baseFontSize, og @baseLineHeightattributtene som vår typografiske base
  • Angi den globale koblingsfargen via @linkColorog bruk lenkeunderstreking kun på:hover

Tilbakestill via Normaliser

Fra Bootstrap 2 har den tradisjonelle CSS-tilbakestillingen utviklet seg til å bruke elementer fra Normalize.css , et prosjekt av Nicolas Gallagher som også driver HTML5 Boilerplate .

Den nye tilbakestillingen kan fortsatt finnes i reset.less , men med mange elementer fjernet for korthet og nøyaktighet.

Standard rutenettsystem 12 kolonner med en responsiv vri

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

Standard rutenettsystemet i Bootstrap bruker 12 kolonner som gjengis i bredder på 724px, 940px (standard uten responsiv CSS inkludert) og 1170px. Under 767px viewporter blir kolonnene flytende og stables vertikalt.

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

Som vist her, kan en grunnleggende layout lages med to "kolonner", som hver spenner over et antall av de 12 grunnkolonnene vi definerte som en del av rutenettsystemet vårt.


Forskyvning av kolonner

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>

Hekkesøyler

Med det statiske (ikke-flytende) rutenettet i Bootstrap er hekking enkelt. For å neste innholdet ditt, legg til en ny .rowog et sett med .span*kolonner i en eksisterende .span*kolonne.

Eksempel

Nestede rader skal inneholde et sett med kolonner som summeres til antall kolonner til den overordnede. For eksempel bør to nestede .span3kolonner plasseres i en .span6.

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

Fluid grid system 12 responsive, prosentbaserte kolonner

Væskesøyler

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

Prosent, ikke piksler

Fluidgittersystemet bruker prosenter for kolonnebredder i stedet for faste piksler. Den har også de samme responsive variasjonene som vårt faste rutenettsystem, og sikrer riktige proporsjoner for viktige skjermoppløsninger og enheter.

Væske rader

Gjør hvilken som helst rad flytende ved å endre .rowtil .row-fluid. Kolonnene forblir de samme, noe som gjør det superenkelt å veksle mellom faste og flytende oppsett.

Markup

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

Hekking av væske

Nesting med flytende rutenett er litt annerledes: Antall nestede kolonner trenger ikke samsvare med overordnet. I stedet tilbakestilles kolonnene dine på hvert nivå fordi hver rad tar opp 100 % av den overordnede kolonnen.

Væske 12
Væske 6
Væske 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Nivå 1 i kolonnen
  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>

Tilpasning av rutenett

Variabel Standardverdi Beskrivelse
@gridColumns 12 Antall kolonner
@gridColumnWidth 60 piksler Bredde på hver kolonne
@gridGutterWidth 20 piksler Negativt mellomrom mellom kolonner

Variabler i LESS

Innebygd i Bootstrap er en håndfull variabler for å tilpasse standard 940px rutenettsystem, dokumentert ovenfor. Alle variabler for rutenettet er lagret i variabler.less.

Hvordan tilpasse

Å endre rutenettet betyr å endre de tre @grid*variablene og rekompilere Bootstrap. Endre rutenettvariablene i variables.less og bruk en av de fire dokumenterte måtene for å rekompilere . Hvis du legger til flere kolonner, sørg for å legge til CSS for de i grid.less.

Holder seg lydhør

Tilpasning av rutenettet fungerer bare på standardnivået, 940px-rutenettet. For å opprettholde de responsive aspektene ved Bootstrap, må du også tilpasse rutenettene i responsive.less.

Oppsett Grunnleggende maler for å lage nettsider

Fast layout

Standard og enkel 940px bred, sentrert layout for omtrent hvilken som helst nettside eller side levert av en enkelt <div class="container">.

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

Flytende layout

<div class="container-fluid">gir fleksibel sidestruktur, min- og maks-bredder og en venstre sidelinje. Det er flott for apper og dokumenter.

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

Responsivt design Mediespørringer for ulike enheter og oppløsninger

Responsive enheter

Hva de gjør

Mediespørringer tillater tilpasset CSS basert på en rekke forhold – forhold, bredder, visningstype osv. – men fokuserer vanligvis rundt min-widthog max-width.

  • Endre bredden på kolonnen i rutenettet vårt
  • Stable elementer i stedet for å flyte der det er nødvendig
  • Endre størrelsen på overskrifter og tekst for å være mer passende for enheter

Bruk mediesøk på en ansvarlig måte og bare som en start på mobilpublikummet ditt. For større prosjekter bør du vurdere dedikerte kodebaser og ikke lag med mediespørringer.

Støttede enheter

Bootstrap støtter en håndfull mediespørringer i en enkelt fil for å gjøre prosjektene dine mer passende på forskjellige enheter og skjermoppløsninger. Her er hva som er inkludert:

Merkelapp Layout bredde Kolonnebredde Rennebredde
Smarttelefoner 480px og lavere Væskesøyler, ingen faste bredder
Smarttelefoner til nettbrett 767px og lavere Væskesøyler, ingen faste bredder
Portrett nettbrett 768px og over 42px 20 piksler
Misligholde 980px og oppover 60 piksler 20 piksler
Stort display 1200px og oppover 70 piksler 30 piksler

Krever metatag

For å sikre at enheter viser responsive sider på riktig måte, inkluderer du viewport-metakoden.

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

Bruke mediespørringene

Bootstrap inkluderer ikke automatisk disse mediespørringene, men det er veldig enkelt å forstå og legge til dem og krever minimalt med oppsett. Du har noen alternativer for å inkludere de responsive funksjonene til Bootstrap:

  1. Bruk den kompilerte responsive versjonen, bootstrap-responsive.css
  2. Legg til @import "responsive.less" og kompiler Bootstrap på nytt
  3. Endre og kompiler responsive.less på nytt som en egen fil

Hvorfor ikke bare inkludere det? Når sant skal sies, trenger ikke alt være responsivt. I stedet for å oppmuntre utviklere til å fjerne denne funksjonen, finner vi det best å aktivere den.

  1.   /* Liggende telefoner og nedover */
  2.   @media ( maks . bredde : 480px ) { ... }     
  3.  
  4.   /* Liggende telefon til stående nettbrett */
  5.   @media ( maks . bredde : 767px ) { ... }     
  6.  
  7.   /* Stående nettbrett til liggende og skrivebord */
  8.   @media ( min - bredde : 768px ) og ( maks - bredde : 979px ) { ... }        
  9.  
  10.   /* Stort skrivebord */
  11.   @media ( min - bredde : 1200px ) { ... }

Responsive verktøyklasser

Hva er de

For raskere mobilvennlig utvikling, bruk disse grunnleggende verktøyklassene for å vise og skjule innhold etter enhet.

Når du skal bruke

Bruk på begrenset basis og unngå å lage helt forskjellige versjoner av samme nettsted. Bruk dem i stedet for å komplettere presentasjonen til hver enhet.

Du kan for eksempel vise et <select>element for nav på mobiloppsett, men ikke på nettbrett eller skrivebord.

Støtteklasser

Her vises en tabell over klassene vi støtter og deres effekt på et gitt mediespørringsoppsett (merket av enheten). De finnes i responsive.less.

Klasse Telefoner480px og lavere Nettbrett767px og lavere Stasjonære datamaskiner768px og over
.visible-phone Synlig
.visible-tablet Synlig
.visible-desktop Synlig
.hidden-phone Synlig Synlig
.hidden-tablet Synlig Synlig
.hidden-desktop Synlig Synlig

Testforsøk

Endre størrelsen på nettleseren din eller last inn på forskjellige enheter for å teste klassene ovenfor.

Synlig på...

Grønne haker indikerer at klassen er synlig i din nåværende visningsport.

  • Telefon✔ Telefon
  • Tablett✔ Nettbrett
  • Skrivebord✔ Skrivebord

Skjult på...

Her indikerer grønne haker at klassen er skjult i din nåværende visningsport.

  • Telefon✔ Telefon
  • Tablett✔ Nettbrett
  • Skrivebord✔ Skrivebord