Pegmata

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

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" > 
  <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" > 
  <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

Ordines nidificati columnarum copiae includantur quae ad numerum parentis eius adaugent columnarum. Exempli gratia: duae .span3columnae nidificantes intra a .span6.

Level 1 of column

Level 2

<div 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>

Columnae fluidae

Percent, non elementa

Ratio eget fluidi cento utitur pro inversae columnae loco fixa elementa. Eadem etiam variationes responsivas habet ac ratio certa eget, ut debitas proportiones pro clavibus velorum resolutionibus et machinis obtineat.

Liquor ordines

Fac aliquem ordinem fluidum simpliciter mutando .rowin .row-fluid. Columnae eaedem manent, eamque eximie directam emittunt ut inter certas et fluidos rationes flectat.

Markup

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

Liquor nidificans

Aliquantulum differt: numerus columnarum nidificantium parenti non indiget. Sed columnae tuae in quovis gradu 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>

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

Variabilia 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.

Quomodo mos

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 iis qui 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 = "continens-fluidum" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sidebar content-->
    </div>
    <div class = "span10" > 
      <!-- Corpus contentum-->
    </div>
  </div>
</div>

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
Suspendisse potenti	480px et infra	Columnae fluidae nullae fixa latitudines
Effigies tabulae	480px ad 768px	Columnae fluidae nullae fixa latitudines
Quisque tabulas	768px ad 979px	42px	20px
Default	980px et usque *	60px	20px
Magna ostentatio	1210px et usque *	70px	30px

Meta requirit tag

Ut machinis respondeas paginas apte ostendas, includere prospectus meta tag.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Quid isti faciunt

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

Per media queries

Bootstrap has instrumentorum interrogationes automatice non includit, sed intellectus ea et addens facillima est ac minima postulata requirit. Habes pauca optiones pro quibus lineamenta responsiva Bootstrap possidet:

Utere versionem responsivam exaratam, bootstrap-responsive.css
Add @import "responsive.less" et recompile Bootstrap
Mutare 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
  @media ( max - latitudo : 480px ) { ... }     
 
  // Landscape phone ad imaginem tabulae
  @media ( max - latitudo : 768px ) { ... }     
 
  // Effigies tabula ad landscape et desktop
  @media ( min- width : 768px ) and ( max- width : 980px ) { ... } _ _        
 
  // Large desktop
  @media ( min - width : 1200px ) { .. }