Pegmata

Requirit HTML5 doctype

Bootstrap utitur quibusdam HTML elementis et CSS proprietatibus quae usum doctypi HTML5 requirunt. Include eam in principio omnium consiliorum tuorum.

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

Typographia et nexus

Bootstrap ponit basic global ostentationem, typographiam, stylos et nexus. In specie, nos;

Remove marginin corpore
Constitue background-color: white;superbody
Utere @baseFontFamily, @baseFontSizeac @baseLineHeightattributis nostris basi typographyicis
Color per nexus global pone @linkColoret applicare nexum in luce ponit tantum:hover

Hi styli intra scaffolding.less inveniri possunt .

Reset per Normalize

Cum Bootstrap 2, vetus reset clausus in favorem Normalize.css omissa est , consilium a Nicolas Gallagher quod etiam potentias HTML5 Boilerplate . Dum multum in repositione nostra Normalize utimur , quaedam elementa specialiter pro Bootstrap removimus.

Vivamus eget example

Default Bootstrap grid systema 12 columnis utitur , faciens ad 940px latum continens sine notis responsivis para . Cum additamento responsionis fasciculi CSS, euismod commodat ut 724px et 1170px latae secundum prospectum tuum. Infra 767px prospectus, columnae fluidae fiunt et verticaliter acervus.

Basic eget HTML

Nam in simplicibus duabus columnis insito, crea a .rowet congruum numerum .span*columnarum adde. Cum haec sit 12-columnarum craticularum, singulae .span*palmorum numerus illarum 12 columnarum, et semper usque ad 12 pro quolibet versu (vel columnarum numero parent).

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

Hoc exemplum habemus .span4et .span8faciens pro 12 columnis totali et ordine completo.

Offsetting columnas

Movere columnas ad sinistram utendi .offset*classes. Utraque pars columnae marginem sinistrum toto agmine auget. Nam .offset4movet .span4quattuor columnas.

3 offset 2

III offset 1

3 offset 2

VI offset 3

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

Columnae nidificantes

Ut contentus egeo defalta edificare te, novam .rowet columnam .span*intra columnam existentem appone .span*. Ordines nidificati columnarum copiae, quae ad columnas parentis sui adiciant.

Exemplum

Hic duae .span4columnae nidificant intra a .span8.

Level 1 of column

Level 2

<div class = "row" > 
  <div class = "span9" > 
    Level 1 column
    <div class = "row" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span3" > Level 2 </div> 
    </div>
  </div>
</div>

Vivamus malesuada euismod nisl

Systema ecum fluidum percents loco imaginum utitur pro inversae columnae. Easdem facultates responsivas habet ac ratio certa eget, ut debitas proportiones pro clavibus velorum resolutionibus et machinis obtineat.

Basic fluida euismod HTML

Fac aliquem ordinem "fluidum" mutando .rowin .row-fluid. Classes columnae eodem modo stant, facilem efficiunt ut flip inter grides fixa et fluida.

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

Liquor firmanda

Eodem modo operatur ut ratio fixa electronicarum firmandarum: adde .offset*columnam quamlibet per multas columnas ad offset.

IV offset 4

III offset 3

VI offset 6

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

Liquor nidificans

Aedificatio cum fluidis gridis aliquantulum diversa est: numerus columnarum nidificantium non debet numerorum columnarum parentis aequare. Sed unusquisque gradu columnarum nidificantium retexere, quia uterque ordo 100 columnae parentis suscipit.

Liquor 12

Liquor 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Level 1 of column
    <div class = "row-fluid" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </div>
  </div>
</div>

Fixum layout

Communi fixa latitudine (et optione responsiva) propositum praebet cum sola <div class="container">requiritur.

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

Liquor layout

Liquorem crea, paginam bipartitam cum <div class="container-fluid">—magnis applicationibus et soUicitudo.

<div class = "continens-fluidum" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sidebar content-->
    </div>
    <div class = "span10" > 
      <!-- Corpus contentum-->
    </div>
  </div>
</div>

Enabling features responsiva

CSS in incepto tuo responde responsivam comprehendendo meta tag et addito stilo in scheda intra <head>documenti tui. Si Bootstrap compixisti e Customize pagina, solum meta tag includere debes.

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

Capita! Bootstrap lineamenta responsiva non includit per defaltam hoc tempore, sicut non omnia oportet quae respondeant. Instead of developers adhortandos ut hanc notam removendam, id potissimum significamus ut id quod opus erat efficiat.

De responsiva Bootstrap

Media queries permittit pro consuetudine CSS innixa multis condicionibus-ratios, latitudinis, speciei ostensionis, etc., sed plerumque versari circa min-widthet max-width.

Mutare latitudinem columnae in malesuada euismod nostra
Rare elementa loco supernatet ubicumque necesse
Resize capita et textum aptius excogitationibus

Instrumentis quaestionibus conscie utere et solum ut initium in audientiis mobilibus tuis. Pro amplioribus inceptis, codicem basium dicatum considerant, nec laminis instrumentorum communicationis socialis quaesitum.

Supported machinas

Bootstrap pugillum instrumentorum inquisitionum in uno fasciculo adiuvat ut opera tua in diversis machinis et resolutionibus screen aptiores faciant. En quid includitur:

Label	Layout width	columnae latitudo	Tetigisset domatum fistulas latitudo
Phones	480px et infra	Columnae fluidae nullae fixa latitudines
Phones ad tabulas	767px et infra	Columnae fluidae nullae fixa latitudines
Effigies tabulae	768px et supra	42px	20px
Default	980px et usque *	60px	20px
Magna ostentatio	1200px et sursum	70px	30px

/ * Landscape phones et deorsum */
@media ( max - latitudo : 480px ) { ... }     
 
/ * Landscape phone ad imaginem tabulae */
@media ( max - latitudo : 767px ) { ... }     
 
/* Effigies tabulae ad landscape et desktop */
@media ( min - width : 768px ) et ( max - width : 979px ) { ... }        
 
/* Magnae desktop */
@media ( min- width : 1200px ) { ... } _

Responsivum utilitatem classes

Ad velociorem progressionem mobilem amicabilem, his generibus utilitatis utere ad contenta per machinas ostendendas et occultandas. Infra mensa est in promptu classium earumque effectus in data instrumentorum interrogatione (intitulata per machinam). Inveniuntur in responsive.less.

Classis	Phones767px et infra	Tabulae979px ad 768px	DesktopsDefault
`.visible-phone`	Visibilis	Occultus	Occultus
`.visible-tablet`	Occultus	Visibilis	Occultus
`.visible-desktop`	Occultus	Occultus	Visibilis
`.hidden-phone`	Occultus	Visibilis	Visibilis
`.hidden-tablet`	Visibilis	Occultus	Visibilis
`.hidden-desktop`	Visibilis	Visibilis	Occultus

Cum ut

Utere in stricto fundamento et vitare creando prorsus varias eiusdem situs versiones. Sed utere ad singulas propositiones complendas.

Responsivum utilitates test causa

Recipe navigatrum vel onere in variis machinis ad probandas classes suprascriptas.

Visibilis in...

Viridis checkmarks indicant genus conspicuum in tua currenti prospectu.

PhonePhone
TabletTablet
DesktopDesktop

Occultus in...

Hic, notae virides indicant genus absconditum in tua currenti prospectu.

PhonePhone
TabletTablet
DesktopDesktop

Global occasus