Bootstrap

Steigers

Bootstrap is boud op in responsyf 12-kolom raster. Wy hawwe ek yndielingen mei fêste en floeibere breedte opnommen basearre op dat systeem.

Globale stilen foar CSS-reset, typografy en keppelings

Fereasket HTML5 doctype

Bootstrap makket gebrûk fan HTML-eleminten en CSS-eigenskippen dy't it gebrûk fan it HTML5-doktype nedich binne. Wês wis dat jo it opnimme oan it begjin fan elke Bootstrapped-pagina yn jo projekt.

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

Typografy en keppelings

Binnen it bestân scaffolding.less sette wy basis globale werjefte, typografy en keppelingsstilen yn. Spesifyk, wy:

  • Fuortsmite marzje op it lichem
  • Set background-color: white;op debody
  • Brûk de @baseFontFamily, @baseFontSize, en @baseLineHeightattributen as ús typografyske basis
  • Stel de wrâldwide keppelingskleur yn fia @linkColoren tapasse keppeling ûnderstreken allinich op:hover

Weromsette fia Normalize

Fanôf Bootstrap 2 is de tradisjonele CSS-reset evoluearre om gebrûk te meitsjen fan eleminten fan Normalize.css , in projekt fan Nicolas Gallagher dat ek de HTML5 Boilerplate oandriuwt .

De nije reset kin noch fûn wurde yn reset.less , mar mei in protte eleminten fuortsmiten foar koarteheid en krektens.

Standert rastersysteem 12 kolommen mei in responsive twist

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

It standert rastersysteem levere yn Bootstrap brûkt 12 kolommen dy't werjaan op breedtes fan 724px, 940px (standert sûnder responsive CSS ynbegrepen), en 1170px. Under 767px viewports wurde de kolommen floeiend en steapele se fertikaal.

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

Lykas hjir te sjen is, kin in basisyndieling makke wurde mei twa "kolommen", elk oer in oantal fan 'e 12 fûnemintele kolommen dy't wy definieare as diel fan ús rastersysteem.


Offset kolommen

4
4 sjo 4
3 sjo 3
3 sjo 3
8 sjo 4 
  1. <div class = "rige" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Nesting kolommen

Mei it statyske (net-fluïde) rastersysteem yn Bootstrap is nesting maklik. Om jo ynhâld te nesteljen, foegje gewoan in nije .rowen set .span*kolommen ta binnen in besteande .span*kolom.

Foarbyld

Neste rigen moatte in set kolommen befetsje dy't it oantal kolommen fan syn âlder optelle. Bygelyks, twa nestele .span3kolommen moatte pleatst wurde binnen in .span6.

Nivo 1 fan kolom
Nivo 2
Nivo 2 
  1. <div class = "rige" > 
  2.   <div class = "span6" > 
  3.     Level 1 kolom
  4.     <div class = "rige" > 
  5.       <div class = "span3" > Nivo 2 </div> 
  6.       <div class = "span3" > Nivo 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fluid grid systeem 12 responsive, prosint-basearre kolommen

Fluid kolommen

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

Persintaazjes, net piksels

It floeistofrastersysteem brûkt persintaazjes foar kolombreedtes ynstee fan fêste piksels. It hat ek deselde responsive fariaasjes as ús fêste rastersysteem, en soarget foar juste proporsjes foar resolúsjes en apparaten op it toetseboerd.

Fluid rigen

Meitsje elke rige floeistof gewoan troch te feroarjen .rownei .row-fluid. De kolommen bliuwe krekt itselde, wêrtroch it super maklik is om te wikseljen tusken fêste en floeiende yndielingen.

Markup

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

Fluid nesting

Nestjen mei floeibere rasters is in bytsje oars: it oantal nestele kolommen hoecht net oerien te kommen mei de âlder. Ynstee dêrfan wurde jo kolommen op elk nivo weromset, om't elke rige 100% fan 'e âlderkolom nimt.

Fluid 12
Fluid 6
Fluid 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Nivo 1 fan kolom
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Nivo 2 </div> 
  6.       <div class = "span6" > Nivo 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Grid maatwurk

Fariabel Standertwearde Beskriuwing
@gridColumns 12 Oantal kolommen
@gridColumnWidth 60px Breedte fan elke kolom
@gridGutterWidth 20px Negative romte tusken kolommen

Fariabelen yn LESS

Ynboud yn Bootstrap binne in hantsjefol fariabelen foar it oanpassen fan it standert 940px rastersysteem, hjirboppe dokumintearre. Alle fariabelen foar it roaster wurde opslein yn variables.less.

Hoe oanpasse

It wizigjen fan it raster betsjut it feroarjen fan de trije @grid*fariabelen en it opnij kompilearjen fan Bootstrap. Feroarje de rasterfariabelen yn variables.less en brûk ien fan 'e fjouwer dokumintearre manieren om opnij te kompilearjen . As jo ​​mear kolommen tafoegje, wês dan wis dat jo de CSS tafoegje foar dy yn grid.less.

Bliuwend responsyf

Oanpassing fan it raster wurket allinich op it standertnivo, it 940px-raster. Om de responsive aspekten fan Bootstrap te behâlden, moatte jo ek de rasters oanpasse yn responsive.less.

Layouts Basissjabloanen om websiden te meitsjen

Fêste yndieling

De standert en ienfâldige 940px-brede, sintraal yndieling foar sawat elke webside of side levere troch ien <div class="container">.

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

Fluid yndieling

<div class="container-fluid">jout fleksibele side struktuer, min- en max-widths, en in linker sydbalke. It is geweldich foar apps en dokuminten.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Sydbalke ynhâld-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Lichaam ynhâld-->
  8.     </div>
  9.   </div>
  10. </div>

Responsive design Media-fragen foar ferskate apparaten en resolúsjes

Responsive apparaten

Wat se dogge

Media-fragen jouwe oanpaste CSS mooglik op basis fan in oantal betingsten - ferhâldingen, breedtes, displaytype, min-widthensfh max-width.

  • Feroarje de breedte fan kolom yn ús raster
  • Stack eleminten ynstee fan float wêr nedich
  • Wizigje de grutte fan kopteksten en tekst om mear geskikt te wêzen foar apparaten

Brûk mediafragen ferantwurde en allinich as in begjin foar jo mobile publyk. Besjoch foar gruttere projekten tawijde koadebasen en net lagen fan mediafragen.

Stipe apparaten

Bootstrap stipet in hantsjefol mediafragen yn ien bestân om te helpen jo projekten passender te meitsjen op ferskate apparaten en skermresolúsjes. Hjir is wat opnommen is:

Etiket Layout breedte Kolom breedte Gootbreedte
Snoadfoans 480px en ûnder Fluid kolommen, gjin fêste breedtes
Snoadfoans nei tablets 767px en ûnder Fluid kolommen, gjin fêste breedtes
Portret tablets 768px en heger 42px 20px
Standert 980px en mear 60px 20px
Grutte display 1200px en mear 70px 30px

Fereasket meta tag

Om te soargjen dat apparaten responsive siden goed werjaan, befetsje de viewport-metatag.

  1. <meta name = "viewport" content = "width=apparaatbreedte, initial-skaal=1.0" >

Mei help fan de media queries

Bootstrap omfettet dizze mediafragen net automatysk, mar it begripen en tafoegjen is heul maklik en fereasket minimale opset. Jo hawwe in pear opsjes foar it opnimmen fan de responsive funksjes fan Bootstrap:

  1. Brûk de kompilearre responsive ferzje, bootstrap-responsive.css
  2. Foegje @import "responsive.less" ta en kompilearje Bootstrap opnij
  3. Responsive.less feroarje en opnij kompilearje as in apart bestân

Wêrom net gewoan opnimme? De wierheid wurdt ferteld, net alles hoecht te reageren. Ynstee fan ûntwikkelders oan te moedigjen om dizze funksje te ferwiderjen, fine wy ​​​​it it bêste om it yn te skeakeljen.

  1.   /* Lânskip tillefoans en del */
  2.   @media ( max - width : 480px ) { ... }     
  3.  
  4.   /* Lânskip tillefoan nei portrettablet */
  5.   @media ( max - width : 767px ) { ... }     
  6.  
  7.   /* Portret tablet nei lânskip en buroblêd */
  8.   @media ( min - breedte : 768px ) en ( max - breedte : 979px ) { ... }        
  9.  
  10.   /* Grut buroblêd */
  11.   @media ( min - breedte : 1200px ) { ... }

Responsive utility klassen

Wat binne dat

Foar rapper mobylfreonlike ûntwikkeling, brûk dizze basisprogrammaklassen foar it sjen en ferbergjen fan ynhâld per apparaat.

Wannear te brûken

Brûk op in beheinde basis en foarkom it meitsjen fan folslein ferskillende ferzjes fan deselde side. Brûk se ynstee om de presintaasje fan elk apparaat oan te foljen.

Jo kinne bygelyks in <select>elemint foar nav sjen op mobile opmaak, mar net op tablets of buroblêden.

Stipe klassen

Hjir werjûn is in tabel fan 'e klassen dy't wy stypje en har effekt op in opjûne mediaquery-yndieling (markearre troch apparaat). Se kinne fûn wurde yn responsive.less.

Klasse Tillefoans480px en ûnder Tabletten767px en ûnder Buroblêden768px en heger
.visible-phone Sichtber
.visible-tablet Sichtber
.visible-desktop Sichtber
.hidden-phone Sichtber Sichtber
.hidden-tablet Sichtber Sichtber
.hidden-desktop Sichtber Sichtber

Test gefal

Feroarje de grutte fan jo blêder of lade op ferskate apparaten om de boppesteande klassen te testen.

Sjoch op ...

Griene karmerken jouwe oan dat klasse sichtber is yn jo hjoeddeistige viewport.

  • Tillefoan✔ Telefoan
  • Tablet✔ Tablet
  • Buroblêd✔ Buroblêd

Ferburgen op ...

Hjir jouwe griene karmerken oan dat klasse ferburgen is yn jo hjoeddeistige viewport.

  • Tillefoan✔ Telefoan
  • Tablet✔ Tablet
  • Buroblêd✔ Buroblêd