Pegmata

Bootstrap aedificatur in euismod columnae responsive. Etiam rationes fixas et fluidas latitudines in illa systemate inclusas habuimus.

Default 940px malesuada euismod

Default grid system provided as part of Bootstrap is a 940px-wide, 12-column grids .

Habet etiam quattuor variationes responsivas pro variis machinis et resolutionibus: telephonum, tabulam effigies, tabulam topiorum et tabulata parva, et magnas tabulas amplissimas.

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

Ut hic ostenditur, layout fundamentalis creari potest cum binis "columnis," singulae numero XII columnarum fundamentorum, quas definivimus partem electronicae systematis nostrae.

Offsetting columnas

IV offset 4

III offset 3

VIII offset 4

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

Columnae nidificantes

Cum static (non-fluido) ratio eget in Bootstrap, facilis nidificatio est. Ad contentum tuum nidificandum, modo novam .rowac columnam .span*intra columnam existentem appone .span*.

Exemplum

Level 1 of column

Level 2

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

Eget Aliquam

Variabilis	Default valorem	Descriptio
`@gridColumns`	12	Numerus columnarum
`@gridColumnWidth`	60px	Latitudo cuiusque columnae
`@gridGutterWidth`	20px	Negans spatium inter columnas
`@siteWidth`	Computata summa omnium columnarum et canalium	Columnarum et canalium numerum numerat ad latitudinem `.container-fixed()`mixin

Variabiles in minori

In Bootstrap aedificatae sunt nonnulli variabilium pro defalta 940px electronicarum rationum, quae supra documenta sunt. Omnes variabiles pro euismod in variables.less conditae sunt.

Quam ad customize

Eget modificare significat variabiles tres @grid*variabiles et Bootstrap reparare. Mutare eget variabiles in variables.less et uti unum ex quattuor modis documentis recompile . Si plures columnas addas, cave CSS pro illis in grid.

moratur responsive

Aliquam malesuada euismod nisi, eget adipiscing massa operatur in. Ad aspectus responsivas Bootstrap conservandos, etiam habebis gridos in responsive.less.

Fixum layout

Defalta et simplex 940px-wide, centrum tantum circa aliquem locum vel paginam proviso ab uno <div class="container">.

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

Liquor layout

<div class="container-fluid">dat structuram flexibilem, min- et max- latum et sinisteriorem. Est magna pro apps et soUicitudo.

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

Supported machinas

Bootstrap nonnullam instrumentorum inquisitionem adiuvat ut opera tua in variis machinis ac resolutionibus screen magis aptam reddant. En quid includitur:

Label	Layout width	columnae latitudo	Tetigisset domatum fistulas latitudo
Suspendisse potenti	480px et infra	Columnae fluidae nullae fixa latitudines
Effigies tabulae	480px ad 768px	Columnae fluidae nullae fixa latitudines
Quisque tabulas	768px ad 940px	44px	20px
Default	940px et usque *	60px	20px
Magna ostentatio	1210px et usque *	70px	30px

Quid isti faciunt

Media queries permittit pro consuetudine CSS innixa pluribus condicionibus-ratios, latitudinis, speciei ostensionis, etc., sed plerumque tendit circum min-widthet max-width.

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

Per media queries

Bootstrap has instrumentorum interrogationes automatice non includit, sed intellectus easque addens facillime est ac minimum postulat. Habes pauca optiones pro quibus lineamenta responsiva Bootstrap possidet:

Utere versionem responsivam exaratam, bootstrap-responsive.css
Add @import "responsive.less" et recompile Bootstrap
Modificare et recompile responsive.less ut separatum

Cur non tantum comprehendit? Dicatur veritas, non omnia, qua respondeant. Instead of developers adhortans ut hanc notam removeret, optimum visum est ut eam efficeret.

  // Landscape phones et deorsum// Landscape phones et deorsum
  @media ( max - latitudo : 480px ) { ... }     
  // Landscape phone ad imaginem tabulae
  @media ( max - latitudo : 768px ) { ... }     
  // Effigies tabula ad landscape et desktop
  @media ( min - width : 768px ) et ( max - width : 940px ) { ... }        
  // Large desktop
  @media ( min - width : 1200px ) { .. }