Steierwerk

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.

<!DOCTYPE html>
<html lang = "af" > 
  ...
</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 wat ook die HTML5 Boilerplate aandryf . Terwyl ons baie van Normalize binne ons reset.less gebruik , het ons sommige elemente spesifiek vir Bootstrap verwyder.

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.

Basiese rooster HTML

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

<div klas = "ry" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</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.

3 verreken 2

3 verreken 1

3 verreken 2

6 verreken 3

<div klas = "ry" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</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

<div klas = "ry" > 
  <div klas = "span9" > 
    Vlak 1 kolom
    <div klas = "ry" > 
      <div class = "span6" > Vlak 2 </div> 
      <div class = "span3" > Vlak 2 </div> 
    </div>
  </div>
</div>

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.

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.

<div klas = "ry-vloeistof" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Vloeistofkompensasie

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

4 verreken 4

3 verreken 3

6 verreken 6

<div klas = "ry-vloeistof" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Vloeistof nes

Nesting met vloeistofroosters is 'n bietjie anders: die aantal geneste kolomme moet nie ooreenstem met die ouer se aantal kolomme nie. In plaas daarvan word elke vlak van geneste kolomme teruggestel omdat elke ry 100% van die ouerkolom opneem.

Vloeistof 12

Vloeistof 6

<div klas = "ry-vloeistof" > 
  <div klas = "span12" > 
    Vloeistof 12
    <div klas = "ry-vloeistof" > 
      <div class = "span6" > Vloeistof 6 </div> 
      <div class = "span6" > Vloeistof 6 </div> 
    </div>
  </div>
</div>

Vaste uitleg

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

<liggaam>
  <div klas = "houer" > 
    ...
  </div>
</body>

Vloeibare uitleg

Skep 'n vloeiende, twee-kolom bladsy met - <div class="container-fluid">ideaal vir toepassings en dokumente.

<div klas = "houer-vloeistof" > 
  <div klas = "ry-vloeistof" > 
    <div klas = "span2" > 
      <!--Sybalkinhoud-->
    </div>
    <div klas = "span10" > 
      <!--Liggaam inhoud-->
    </div>
  </div>
</div>

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.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<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

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

/* Groot lessenaar */
@media ( min - breedte : 1200px ) { ... }     
 
/* Portrettablet na landskap en lessenaar */
@media ( min - breedte : 768px ) en ( maksimum - wydte : 979px ) { ... }        
 
/* Landskapfoon na portrettablet */
@media ( maksimum - wydte : 767px ) { ... }     
 
/* Landskapfone en af */
@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	Versteek	Versteek
`.visible-tablet`	Versteek	Sigbaar	Versteek
`.visible-desktop`	Versteek	Versteek	Sigbaar
`.hidden-phone`	Versteek	Sigbaar	Sigbaar
`.hidden-tablet`	Sigbaar	Versteek	Sigbaar
`.hidden-desktop`	Sigbaar	Sigbaar	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. 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

Globale instellings