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.

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 as ûnderdiel fan Bootstrap is in 940px-breed, 12-kolomraster .

It hat ek fjouwer responsive fariaasjes foar ferskate apparaten en resolúsjes: tillefoan, tabletportret, tafellânskip en lytse buroblêden, en grutte breedskerm-buroblêden.

  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 = "span12" > 
  3.     Nivo 1 fan kolom
  4.     <div class = "rige" > 
  5.       <div class = "span6" > Nivo 2 </div> 
  6.       <div class = "span6" > 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
@siteWidth Berekkene som fan alle kolommen en goten Telt oantal kolommen en goten om de breedte fan 'e .container-fixed()mixin yn te stellen

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

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
Portret tablets 480px oant 768px Fluid kolommen, gjin fêste breedtes
Lânskip tablets 768px oant 979px 42px 20px
Standert 980px en mear 60px 20px
Grutte display 1210px 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" >

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

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 telefoans en del
  2.   @media ( max - width : 480px ) { ... }     
  3.  
  4.   // Lânskip telefoan oan portret tablet
  5.   @media ( max - width : 768px ) { ... }     
  6.  
  7.   // Portret tablet nei lânskip en buroblêd
  8.   @media ( min - breedte : 768px ) en ( max - breedte : 980px ) { ... }        
  9.  
  10.   // Grut buroblêd
  11.   @media ( min - breedte : 1200px ) { .. }