Bootstrap

Steierwerk

Bootstrap is gebou op responsiewe 12-kolom roosters, uitlegte en komponente.

Globale instellings

Vereis HTML5 doctype

Bootstrap maak gebruik van sekere HTML-elemente en CSS-eienskappe wat die gebruik van die HTML5 doctype vereis. Sluit dit aan die begin van al jou projekte in.

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

Tipografie en skakels

Bootstrap stel basiese globale vertoon-, tipografie- en skakelstyle. Spesifiek, ons:

  • Verwyder marginop 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

Hierdie style kan gevind word binne scaffolding.less .

Stel terug via Normaliseer

Met Bootstrap 2 is die ou terugstelblok laat vaar ten gunste van Normalize.css , 'n projek deur Nicolas Gallagher en Jonathan Neal wat ook die HTML5 Boilerplate aandryf . Terwyl ons baie van Normalize binne ons reset.less gebruik , het ons sommige elemente spesifiek vir Bootstrap verwyder.

Standaard roosterstelsel

Voorbeeld van lewendige rooster

Die standaard Bootstrap-roosterstelsel gebruik 12 kolomme , wat 'n 940px wye houer maak sonder dat responsiewe kenmerke geaktiveer is. Met die responsiewe CSS-lêer bygevoeg, pas die rooster aan om 724px en 1170px wyd te wees, afhangende van jou viewport. Onder 767px viewports word die kolomme vloeibaar en stapel hulle vertikaal.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Basiese rooster HTML

Vir 'n eenvoudige uitleg van twee kolomme, skep 'n .rowen voeg die toepaslike aantal .span*kolomme by. Aangesien dit 'n 12-kolom-rooster is, .span*strek elkeen 'n aantal van daardie 12 kolomme, en moet altyd tot 12 vir elke ry (of die aantal kolomme in die ouer) optel.

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

Gegewe hierdie voorbeeld, het ons .span4en .span8, wat vir 12 totale kolomme en 'n volledige ry maak.

Verrekening van kolomme

Skuif kolomme na regs deur .offset*klasse te gebruik. Elke klas vergroot die linkerkantlyn van 'n kolom met 'n hele kolom. .offset4Beweeg byvoorbeeld .span4oor vier kolomme.

4
3 verreken 2
3 verreken 1
3 verreken 2
6 verreken 3 
  1. <div klas = "ry" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Nestende kolomme

Om jou inhoud met die verstekrooster te nes, voeg 'n nuwe .rowen stel .span*kolomme binne 'n bestaande .span*kolom by. Geneste rye moet 'n stel kolomme insluit wat optel by die aantal kolomme van sy ouer.

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

Vloeistofroosterstelsel

Voorbeeld van lewendige vloeistofrooster

Die vloeistofroosterstelsel gebruik persente in plaas van pixels vir kolomwydtes. Dit het dieselfde responsiewe vermoëns as ons vaste roosterstelsel, wat die regte proporsies vir sleutelskermresolusies en toestelle verseker.

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

Basiese vloeibare rooster HTML

Maak enige ry "vloeibaar" deur te verander .rowna .row-fluid. Die kolomklasse bly presies dieselfde, wat dit maklik maak om tussen vaste en vloeibare roosters te blaai.

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

Vloeistofkompensasie

Werk op dieselfde manier as die vaste roosterstelsel-kompensasie: voeg .offset*by enige kolom om te verreken met soveel kolomme.

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

Vloeistof nes

Vloeistofroosters gebruik nes verskillend: elke geneste vlak van kolomme moet tot 12 kolomme optel. Dit is omdat die vloeistofrooster persentasies, nie pixels nie, gebruik om breedtes in te stel.

Vloeistof 12
Vloeistof 6
Vloeistof 6
Vloeistof 6
Vloeistof 6 
  1. <div klas = "ry-vloeistof" > 
  2.   <div klas = "span12" > 
  3.     Vloeistof 12
  4.     <div klas = "ry-vloeistof" > 
  5.       <div klas = "span6" > 
  6.         Vloeistof 6
  7.         <div klas = "ry-vloeistof" > 
  8.           <div class = "span6" > Vloeistof 6 </div> 
  9.           <div class = "span6" > Vloeistof 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Vloeistof 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Uitlegte

Vaste uitleg

Verskaf 'n algemene vaste breedte (en opsioneel reageer) uitleg met slegs <div class="container">vereiste.

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

Vloeibare uitleg

Skep 'n vloeiende, twee-kolom bladsy met - <div class="container-fluid">ideaal 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>

Reaktiewe ontwerp

Aktiveer responsiewe kenmerke

Skakel responsiewe CSS in jou projek aan deur die korrekte metamerker en bykomende stylblad binne die <head>van jou dokument in te sluit. As jy Bootstrap vanaf die Pasmaak-bladsy saamgestel het, hoef jy net die metamerker in te sluit.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Let op!Bootstrap sluit tans nie by verstek responsiewe kenmerke in nie, aangesien alles nie reageer hoef 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 soos nodig.

Oor responsiewe Bootstrap

Responsiewe toestelle

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
Groot vertoon 1200px en hoër 70 px 30 px
Verstek 980px en hoër 60 px 20 px
Portret tablette 768px en hoër 42px 20 px
Fone na tablette 767px en minder Vloeistofkolomme, geen vaste breedtes nie
Fone 480px en minder Vloeistofkolomme, geen vaste breedtes nie 
  1. /* Groot lessenaar */
  2. @media ( min - breedte : 1200px ) { ... }     
  3.  
  4. /* Portrettablet na landskap en lessenaar */
  5. @media ( min - wydte : 768px ) en ( maks - wydte : 979px ) { ... }        
  6.  
  7. /* Landskapfoon na portrettablet */
  8. @media ( maksimum - wydte : 767px ) { ... }     
  9.  
  10. /* Landskapfone en af ​​*/
  11. @media ( maksimum - wydte : 480px ) { ... }

Responsiewe nutsklasse

Vir vinniger selfoonvriendelike ontwikkeling, gebruik hierdie nutsklasse om inhoud per toestel te wys en te versteek. Hieronder is 'n tabel van die beskikbare klasse en hul effek op 'n gegewe medianavraaguitleg (gemerk volgens toestel). Hulle kan gevind word in responsive.less.

Klas Fone767px en minder Tablette979px tot 768px DesktopsVerstek
.visible-phone Sigbaar
.visible-tablet Sigbaar
.visible-desktop Sigbaar
.hidden-phone Sigbaar Sigbaar
.hidden-tablet Sigbaar Sigbaar
.hidden-desktop Sigbaar Sigbaar

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. Responsiewe nutsprogramme moet nie met tabelle gebruik word nie, en word as sodanig nie ondersteun nie.

Responsiewe hulpprogramme-toetsgeval

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

Sigbaar op...

Groen regmerkies dui aan dat klas sigbaar is in jou huidige viewport.

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

Versteek op...

Hier dui groen regmerkies aan dat klas in jou huidige kykpoort versteek is.

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