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
Pone background-color: white;superbody
Utere @baseFontFamily, @baseFontSizeet @baseLineHeightattributis basi typographicis nostris
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 et Jonathan Neal qui 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 euismod columnarum, singulae .span*palmi totidem 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 dextram 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.

Level 1 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 eget fixa firmanda: 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

Liquores grids utantur nidificantes aliter: singulas columnarum gradus nidificantes usque ad 12 columnas debent addere. Causa est, quia egena eget liquorem recipis utitur, non elementa, ad latitudines collocandas.

Liquor 12

Liquor 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Liquor 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        Liquor 6
        <div class = "row-fluid" > 
          <div class = "span6" > Fluid 6 </div> 
          <div class = "span6" > Fluid 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluid 6 </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 schedae 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. Loco tincidunt adhortantes ut hanc notam removerent, optimum visum est 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 tantum 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
Magna ostentatio	1200px et sursum	70px	30px
Default	980px et usque *	60px	20px
Effigies tabulae	768px et supra	42px	20px
Phones ad tabulas	767px et infra	Columnae fluidae nullae fixa latitudines
Phones	480px et infra	Columnae fluidae nullae fixa latitudines

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

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. Utilitas responsiva tabulis uti non debet, et sic non sustinetur.

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