Bootstrap

Pegmata

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

Styli Global pro reset, typographia, et nexus

Requirit HTML5 doctype

Bootstrap utitur HTML elementis et CSS proprietatibus quae usum doctypi HTML5 requirunt. Vide ut eam includas in initio paginae cuiuslibet Bootstrapped in tuo consilio.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Typographia et nexus

Intra scaffolding.less fasciculus, fundamentales globales ostentationem, typographiam, stylos nexus collocamus. In specie, nos;

  • Remove margine in 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

Reset per Normalize

As of Bootstrap 2, CSS reset traditum evolvit ut elementis utatur a Normalize.css , consilium a Nicolas Gallagher quod etiam potentias HTML5 Boilerplate .

Reset nova in reset.less inveniri potest , sed multis elementis brevitatis et subtilitatis remotis.

Default eget systema 12 columnas cum responsiva torquent

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Defalta ratio electronicarum in Bootstrap parata est utetur 12 columnis quae ex inversa parte 724px, 940px reddunt (defaltam sine CSS responsivo inclusam), et 1170px. Infra 767px prospectus, columnae fluidae fiunt et verticaliter acervus.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


Offsetting columnas

4
IV offset 4
III offset 3
III offset 3
VIII offset 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </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
Level 2 
  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     Level 1 column
  4.     <div class = "row" > 
  5.       <div class = "span3" > Level 2 </div> 
  6.       <div class = "span3" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Liquor eget systematis 12 responsive, columnis percent-substructis

Columnae fluidae

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
Liquor 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Level 1 of column
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span6" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Eget Aliquam

Variabilis Default valorem Descriptio
@gridColumns 12 Numerus columnarum
@gridColumnWidth 60px Latitudo cuiusque columnae
@gridGutterWidth 20px Negans spatium inter columnas

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.

Proposita Basic templates creare webpages

Fixum layout

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

  1. <body>
  2.   <div class = "continens" > 
  3.     ...
  4.   </div>
  5. </body>

Liquor layout

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

  1. <div class = "continens-fluidum" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Sidebar content-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!-- Corpus contentum-->
  8.     </div>
  9.   </div>
  10. </div>

Responsivum consilium Media queries pro variis machinis et resolutionibus

Responsorium cogitationes

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

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
Suspendisse potenti 480px et infra Columnae fluidae nullae fixa latitudines
Suspendisse ut 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

Meta requirit tag

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

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

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:

  1. Utere versionem responsivam exaratam, bootstrap-responsive.css
  2. Add @import "responsive.less" et recompile Bootstrap
  3. 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.

  1.   / * Landscape phones et deorsum */
  2.   @media ( max - latitudo : 480px ) { ... }     
  3.  
  4.   / * Landscape phone ad imaginem tabulae */
  5.   @media ( max - latitudo : 767px ) { ... }     
  6.  
  7.   /* Effigies tabulae ad landscape et desktop */
  8.   @media ( min - width : 768px ) et ( max - width : 979px ) { ... }        
  9.  
  10.   /* Magnae desktop */
  11.   @media ( min- width : 1200px ) { ... } _

Responsivum utilitatem classes

Quid sunt?

Ad velociorem progressionem mobilem amicabilem, his fundamentalibus utilitatibus generibus utere ad contenta per machinas demonstrandas et occultandas.

Cum ut

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

Exempli gratia, <select>elementum nav in layout mobilibus demonstras, non autem in tabulis aut in escritorio.

Support classes

Ostensa hic est tabella generum quam adiuvamus et effectum in data instrumenti interrogatione (intitulata per machinam). Inveniuntur in responsive.less.

Classis Phones480px et infra Tabulae767px et infra Desktops768px et supra
.visible-phone Visibilis
.visible-tablet Visibilis
.visible-desktop Visibilis
.hidden-phone Visibilis Visibilis
.hidden-tablet Visibilis Visibilis
.hidden-desktop Visibilis Visibilis

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