Bootstrap

Steierwerk

Bootstrap is gebou op 'n responsiewe 12-kolom-rooster. Ons het ook vaste- en vloeistofwydte-uitlegte ingesluit wat op daardie stelsel gebaseer is.

Globale style vir CSS-terugstelling, tipografie en skakels

Vereis HTML5 doctype

Bootstrap maak gebruik van HTML-elemente en CSS-eienskappe wat die gebruik van die HTML5 doctype vereis. Maak seker dat jy dit aan die begin van elke Bootstrapped-bladsy in jou projek insluit.

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

Tipografie en skakels

Binne die scaffolding.less -lêer stel ons basiese globale vertoon-, tipografie- en skakelstyle. Spesifiek, ons:

  • Verwyder marge op die liggaam
  • Stel background-color: white;op diebody
  • Gebruik die @baseFontFamily, @baseFontSize, en @baseLineHeighteienskappe as ons tipografiese basis
  • Stel die globale skakelkleur via @linkColoren pas skakelonderstrepe slegs op:hover

Stel terug via Normaliseer

Vanaf Bootstrap 2 het die tradisionele CSS-terugstelling ontwikkel om gebruik te maak van elemente van Normalize.css , 'n projek deur Nicolas Gallagher wat ook die HTML5 Boilerplate aandryf .

Die nuwe reset kan steeds gevind word in reset.less , maar met baie elemente verwyder vir beknoptheid en akkuraatheid.

Standaard roosterstelsel 12 kolomme met 'n responsiewe draai

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

Die verstekroosterstelsel wat as deel van Bootstrap verskaf word, is 'n 940px-wye, 12-kolom-rooster .

Dit het ook vier responsiewe variasies vir verskeie toestelle en resolusies: foon, tabletportret, tafellandskap en klein lessenaars, en groot breëskerm-rekenaars.

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

Soos hier getoon, kan 'n basiese uitleg geskep word met twee "kolomme", wat elk oor 'n aantal van die 12 grondkolomme strek wat ons as deel van ons roosterstelsel gedefinieer het.


Verrekening van kolomme

4
4 verreken 4
3 verreken 3
3 verreken 3
8 verreken 4 
  1. <div klas = "ry" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Nestende kolomme

Met die statiese (nie-vloeibare) roosterstelsel in Bootstrap is nesmaak maklik. Om jou inhoud te nes, voeg net 'n nuwe .rowen stel .span*kolomme binne 'n bestaande .span*kolom by.

Voorbeeld

Geneste rye moet 'n stel kolomme insluit wat optel by die aantal kolomme van sy ouer. Byvoorbeeld, twee geneste .span3kolomme moet binne 'n .span6.

Vlak 1 van kolom
Vlak 2
Vlak 2 
  1. <div klas = "ry" > 
  2.   <div klas = "span12" > 
  3.     Vlak 1 van kolom
  4.     <div klas = "ry" > 
  5.       <div class = "span6" > Vlak 2 </div> 
  6.       <div class = "span6" > Vlak 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Vloeistofroosterstelsel 12 responsiewe, persentasiegebaseerde kolomme

Vloeistofkolomme

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

Persentasies, nie pixels nie

Die vloeistofroosterstelsel gebruik persente vir kolomwydtes in plaas van vaste pixels. Dit het ook dieselfde responsiewe variasies as ons vaste roosterstelsel, wat die regte verhoudings vir sleutelskermresolusies en toestelle verseker.

Vloeistof rye

Maak enige ry vloeibaar deur eenvoudig na te .rowverander .row-fluid. Die kolomme bly presies dieselfde, wat dit baie eenvoudig maak om tussen vaste en vloeiende uitlegte te blaai.

Opmerk

  1. <div klas = "ry-vloeistof" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Vloeistof nes

Nesting met vloeistofroosters is 'n bietjie anders: die aantal geneste kolomme hoef nie by die ouer te pas nie. In plaas daarvan word jou kolomme op elke vlak teruggestel omdat elke ry 100% van die ouerkolom beslaan.

Vloeistof 12
Vloeistof 6
Vloeistof 6 
  1. <div klas = "ry-vloeistof" > 
  2.   <div klas = "span12" > 
  3.     Vlak 1 van kolom
  4.     <div klas = "ry-vloeistof" > 
  5.       <div class = "span6" > Vlak 2 </div> 
  6.       <div class = "span6" > Vlak 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Roosteraanpassing

Veranderlik Standaard waarde Beskrywing
@gridColumns 12 Aantal kolomme
@gridColumnWidth 60 px Breedte van elke kolom
@gridGutterWidth 20 px Negatiewe spasie tussen kolomme
@siteWidth Berekende som van alle kolomme en geute Tel die aantal kolomme en geute om die breedte van die .container-fixed()mengin te stel

Veranderlikes in MINDER

Ingebou in Bootstrap is 'n handvol veranderlikes om die verstek 940px-roosterstelsel aan te pas, hierbo gedokumenteer. Alle veranderlikes vir die rooster word in veranderlikes.less gestoor.

Hoe om aan te pas

Om die rooster te wysig beteken om die drie @grid*veranderlikes te verander en Bootstrap weer saam te stel. Verander die roosterveranderlikes in variables.less en gebruik een van die vier maniere wat gedokumenteer is om te hersaamstel . As jy meer kolomme byvoeg, maak seker dat jy die CSS byvoeg vir dié in grid.less.

Bly responsief

Aanpassing van die rooster werk slegs op die verstekvlak, die 940px-rooster. Om die responsiewe aspekte van Bootstrap te handhaaf, sal jy ook die roosters in responsive.less moet aanpas.

Uitlegte Basiese sjablone om webblaaie te skep

Vaste uitleg

Die verstek en eenvoudige 940px-wye, gesentreerde uitleg vir omtrent enige webwerf of bladsy wat deur 'n enkele <div class="container">.

  1. <liggaam>
  2.   <div klas = "houer" > 
  3.     ...
  4.   </div>
  5. </body>

Vloeibare uitleg

<div class="container-fluid">gee buigsame bladsystruktuur, min- en maksimum-wydtes, en 'n linkerkantse kantbalk. Dit is wonderlik vir toepassings en dokumente.

  1. <div klas = "houer-vloeistof" > 
  2.   <div klas = "ry-vloeistof" > 
  3.     <div klas = "span2" > 
  4.       <!--Sybalkinhoud-->
  5.     </div>
  6.     <div klas = "span10" > 
  7.       <!--Liggaam inhoud-->
  8.     </div>
  9.   </div>
  10. </div>

Responsiewe ontwerp Medianavrae vir verskeie toestelle en resolusies

Responsiewe toestelle

Wat hulle doen

Medianavrae maak voorsiening vir pasgemaakte CSS gebaseer op 'n aantal voorwaardes—verhoudings, breedtes, vertoontipe, ens—maar fokus gewoonlik rondom min-widthen max-width.

  • Verander die breedte van kolom in ons rooster
  • Stapel elemente in plaas van om te dryf waar nodig
  • Verander die grootte van opskrifte en teks om meer gepas vir toestelle te wees

Gebruik medianavrae verantwoordelik en slegs as 'n begin vir jou mobiele gehore. Vir groter projekte, oorweeg toegewyde kodebasisse en nie lae medianavrae nie.

Ondersteunde toestelle

Bootstrap ondersteun 'n handvol medianavrae in 'n enkele lêer om te help om jou projekte meer toepaslik op verskillende toestelle en skermresolusies te maak. Hier is wat ingesluit is:

Etiket Uitleg breedte Kolom breedte Geut breedte
Slimfone 480px en minder Vloeistofkolomme, geen vaste breedtes nie
Slimfone na tablette 767px en minder Vloeistofkolomme, geen vaste breedtes nie
Portret tablette 768px en hoër 42px 20 px
Verstek 980px en hoër 60 px 20 px
Groot vertoon 1200px en hoër 70 px 30 px

Vereis metatag

Om te verseker dat toestelle responsiewe bladsye behoorlik vertoon, sluit die viewport-metamerker in.

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

Gebruik die media-navrae

Bootstrap sluit nie outomaties hierdie medianavrae in nie, maar om dit te verstaan ​​en by te voeg is baie maklik en vereis minimale opstelling. U het 'n paar opsies om die responsiewe kenmerke van Bootstrap in te sluit:

  1. Gebruik die saamgestelde responsiewe weergawe, bootstrap-responsive.css
  2. Voeg @import "responsive.less" by en hersaamstel Bootstrap
  3. Verander en hersaamstel responsive.less as 'n aparte lêer

Hoekom dit nie net insluit nie? Om die waarheid te sê, nie alles hoef reageer te wees nie. In plaas daarvan om ontwikkelaars aan te moedig om hierdie kenmerk te verwyder, dink ons ​​dit is die beste om dit te aktiveer.

  1.   // Landskap fone en af
  2.   @media ( maksimum - wydte : 480px ) { ... }     
  3.  
  4.   // Landskapfoon na portrettablet
  5.   @media ( maksimum - wydte : 768px ) { ... }     
  6.  
  7.   // Portret tablet na landskap en lessenaar
  8.   @media ( min - breedte : 768px ) en ( maksimum - wydte : 980px ) { ... }        
  9.  
  10.   // Groot lessenaar
  11.   @media ( min - breedte : 1200px ) { .. }

Responsiewe nutsklasse

Wat is hulle

Vir vinniger selfoonvriendelike ontwikkeling, gebruik hierdie basiese nutsklasse om inhoud per toestel te wys en te versteek.

Wanneer om te gebruik

Gebruik op 'n beperkte basis en vermy om heeltemal verskillende weergawes van dieselfde webwerf te skep. Gebruik dit eerder om elke toestel se aanbieding aan te vul.

Jy kan byvoorbeeld 'n <select>element vir navigasie op mobiele uitlegte wys, maar nie op tablette of rekenaars nie.

Ondersteun klasse

Hier word 'n tabel getoon van die klasse wat ons ondersteun en die effek daarvan op 'n gegewe medianavraaguitleg (gemerk volgens toestel). Hulle kan gevind word in responsive.less.

Klas Fone480px en minder Tablette767px en minder Desktops768px en hoër
.visible-phone Sigbaar
.visible-tablet Sigbaar
.visible-desktop Sigbaar
.hidden-phone Sigbaar Sigbaar
.hidden-tablet Sigbaar Sigbaar
.hidden-desktop Sigbaar Sigbaar

Toetssaak

Verander die grootte van jou blaaier of laai op verskillende toestelle om die bogenoemde klasse te toets.

Sigbaar op...

  • Foon✔ Telefoon
  • Tablet✔ Tablet
  • Desktop✔ lessenaar

Versteek op...

  • Foon✔ Telefoon
  • Tablet✔ Tablet
  • Desktop✔ lessenaar