Steigers

Fereasket HTML5 doctype

Bootstrap makket gebrûk fan bepaalde HTML-eleminten en CSS-eigenskippen dy't it gebrûk fan it HTML5-doktype nedich binne. Meitsje it op oan it begjin fan al jo projekten.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Typografy en keppelings

Bootstrap stelt basis globale werjefte, typografy, en keppelingsstilen yn. Spesifyk, wy:

Fuortsmite marginop 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

Dizze stilen kinne fûn wurde binnen scaffolding.less .

Weromsette fia Normalize

Mei Bootstrap 2 is it âlde resetblok fallen yn it foardiel fan Normalize.css , in projekt fan Nicolas Gallagher dat ek de HTML5 Boilerplate oandriuwt . Wylst wy in protte fan Normalize brûke binnen ús reset.less , hawwe wy guon eleminten spesifyk foar Bootstrap fuortsmiten.

Foarbyld fan Live Grid

It standert Bootstrap-rastersysteem brûkt 12 kolommen , wat soarget foar in 940px brede kontener sûnder responsive funksjes ynskeakele. Mei it responsive CSS-bestân tafoege, past it raster oan om 724px en 1170px breed te wêzen ôfhinklik fan jo viewport. Under 767px viewports wurde de kolommen floeiend en steapele se fertikaal.

Basic grid HTML

Foar in ienfâldige twa kolom opmaak, meitsje in .rowen heakje it passend oantal .span*kolommen. As dit is in 12-kolom raster, elk .span*oerspant in oantal fan dy 12 kolommen, en moat altyd optelle oant 12 foar eltse rige (of it oantal kolommen yn 'e âlder).

<div class = "rige" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Sjoen dit foarbyld hawwe wy .span4en .span8, meitsje foar 12 totale kolommen en in folsleine rige.

Offset kolommen

Ferpleats kolommen nei lofts mei .offset*klassen. Elke klasse fergruttet de loftermarzje fan in kolom mei in hiele kolom. Bygelyks, .offset4beweecht .span4oer fjouwer kolommen.

3 sjo2

3 sjo 1

3 sjo2

6 sjo 3

<div class = "rige" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Nesting kolommen

Om jo ynhâld mei it standertraster te nesteljen, foegje in nije .rowen set .span*kolommen ta binnen in besteande .span*kolom. Neste rigen moatte in set kolommen befetsje dy't it oantal kolommen fan har âlder optelle.

Foarbyld

Hjir binne twa nestele .span4kolommen pleatst binnen in .span8.

Nivo 1 fan kolom

Nivo 2

<div class = "rige" > 
  <div class = "span9" > 
    Level 1 kolom
    <div class = "rige" > 
      <div class = "span6" > Nivo 2 </div> 
      <div class = "span3" > Nivo 2 </div> 
    </div>
  </div>
</div>

Foarbyld fan Live Fluid Grid

It fluidrastersysteem brûkt persintaazjes ynstee fan piksels foar kolombreedten. It hat deselde responsive mooglikheden as ús fêste rastersysteem, en soarget foar juste proporsjes foar wichtige skermresolúsjes en apparaten.

Basis floeiber raster HTML

Meitsje elke rige "fluid" troch te feroarjen .rownei .row-fluid. De kolomklassen bliuwe krekt itselde, wêrtroch it maklik is om te wikseljen tusken fêste en floeiende rasters.

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Fluid offsetting

Wurket op deselde manier as de offsetting fan it fêste rastersysteem: tafoegje .offset*oan elke kolom om te kompensearjen troch safolle kolommen.

4 sjo 4

3 sjo 3

6 sjo 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Fluid nesting

Nestjen mei floeibere rasters is in bytsje oars: it oantal nestele kolommen moat net oerienkomme mei it oantal kolommen fan 'e âlder. Ynstee dêrfan wurdt elk nivo fan nestele kolommen weromset, om't elke rige 100% fan 'e âlderkolom nimt.

Fluid 12

Fluid 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Nivo 1 fan kolom
    <div class = "row-fluid" > 
      <div class = "span6" > Nivo 2 </div> 
      <div class = "span6" > Nivo 2 </div> 
    </div>
  </div>
</div>

Fêste yndieling

Biedt in mienskiplike fêste breedte (en opsjoneel responsive) yndieling mei allinich <div class="container">fereaske.

<body>
  <div class = "container" > 
    ...
  </div>
</body>

Fluid yndieling

Meitsje in floeiende side mei twa kolommen mei <div class="container-fluid">- geweldig foar applikaasjes en dokuminten.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sydbalke ynhâld-->
    </div>
    <div class = "span10" > 
      <!--Lichaam ynhâld-->
    </div>
  </div>
</div>

Responsive funksjes ynskeakelje

Skeakelje responsive CSS yn jo projekt yn troch de juste metatag en ekstra stylblêd op te nimmen yn <head>jo dokumint. As jo Bootstrap hawwe gearstald fan 'e side oanpasse, moatte jo allinich de meta-tag opnimme.

<meta name = "viewport" content = "width=apparaatbreedte, initial-skaal=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylblêd" >

Heads up! Bootstrap omfettet op dit stuit gjin responsive funksjes standert, om't net alles responsyf hoecht te wêzen. Ynstee fan ûntwikkelders oan te moedigjen om dizze funksje te ferwiderjen, fine wy it bêste om it as nedich yn te skeakeljen.

Oer responsive Bootstrap

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
Tillefoans	480px en ûnder	Fluid kolommen, gjin fêste breedtes
Tillefoans 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

/* Lânskip tillefoans en del */
@media ( max - width : 480px ) { ... }     
 
/* Lânskip tillefoan nei portrettablet */
@media ( max - width : 767px ) { ... }     
 
/* Portret tablet nei lânskip en buroblêd */
@media ( min - breedte : 768px ) en ( max - breedte : 979px ) { ... }        
 
/* Grut buroblêd */
@media ( min - breedte : 1200px ) { ... }

Responsive utility klassen

Foar rapper mobylfreonlike ûntwikkeling, brûk dizze nutklassen foar it sjen en ferbergjen fan ynhâld per apparaat. Hjirûnder is in tabel fan de beskikbere klassen en harren effekt op in opjûne media query layout (label troch apparaat). Se kinne fûn wurde yn responsive.less.

Klasse	Tillefoans767px en ûnder	Tabletten979px oant 768px	BuroblêdenStandert
`.visible-phone`	Sichtber	Ferburgen	Ferburgen
`.visible-tablet`	Ferburgen	Sichtber	Ferburgen
`.visible-desktop`	Ferburgen	Ferburgen	Sichtber
`.hidden-phone`	Ferburgen	Sichtber	Sichtber
`.hidden-tablet`	Sichtber	Ferburgen	Sichtber
`.hidden-desktop`	Sichtber	Sichtber	Ferburgen

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.

Testkoffer foar responsive utilities

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

Globale ynstellings