Lowdown Get in clavibus fragmentorum infrastructurae Bootstrap, inclusis accessus ad meliorem, velociorem, validiorem interretialem evolutionem.

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>

Mobile primum

Cum Bootstrap 2, ad libitum stylos mobiles benevolos adiunximus pro clavis compagis aspectibus. Cum Bootstrap 3, consilium rescripsimus ut amicabile mobile sit ab initio. Loco additis stylis mobilibus ad libitum, recte in nucleum coquitur. Revera, Bootstrap primum mobile est . Primi styli mobiles per totam bibliothecam in locis separatis reperiri possunt.

Ut recte reddendo et tangas zooming, adice speculationem meta tag ad tuum <head>.

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

Facultates zooming in mobilibus machinis inactivare potes, addendo user-scalable=noad prospectum metaphysicae. Hoc disables zooming, significantes usores tantum librum possunt, et eventum in tuo situ sentiens plusculum in applicatione indigena. Super, hoc in omni situ non commendamus, ita cautela utimur!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Typographia et nexus

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

Constitue background-color: #fff;superbody
Utere @font-family-base, @font-size-baseet @line-height-baseattributis basi typographicis nostris
Color per nexus global pone @link-coloret applicare nexum in luce ponit tantum:hover

Hi styli intus inveniuntur scaffolding.less.

Normalize.css

Pro emendato cross-browser reddendo, Normalize.css utimur , consilium per Nicolas Gallagher et Jonathan Neal .

Continentes

Bootstrap requirit elementum continentem ad contenta involvere situs et domum nostram systematis eget. Unum e duobus vasis uti in inceptis tuis eligas licet. Nota quod debetur paddinget plus, neque continens est nestabile.

Utere .containerad docilem latitudinem fixa continens.

<div class="container">
  ...
</div>

Utere .container-fluidad plenam latitudinem continentis, totam latitudinem visi tuae enucleando.

<div class="container-fluid">
  ...
</div>

Bootstrap comprehendit responsivum, mobile primum systema fluidum craticulae, quod ad 12 columnas apte scandit sicut machina vel portio amplitudinis augetur. Classes praedefinitas includit optiones layout faciles, ac mixins potentes ad plures semanticos rationes generandas .

Introductio

Grid systemata adhibentur ad layouts paginas creandas per seriem versuum et columnarum quae domum tuam content. Ecce quomodo opera eget ratio Bootstrap:

Ordines ponendi sunt intra .container(latum-latum) vel .container-fluid(plenam latitudinem) ad debitam noctis et Nullam.
Ordines ad creandum ordines columnarum horizontales.
Contentus intra columnas collocari debet, et solae columnae immediatae esse possunt puerorum ordinum.
Classes eget praedefinitae similes .rowet .col-xs-4promptae sunt ad cito faciendas rationes emittendi. Minus mixins etiam pro pluribus in layout semanticis adhiberi potest.
Columnae canales creant (gaps between column content) via padding. Nullam id est in ordine ad primam et ultimam columnam per marginem negativam in .rows.
In margine negativo est cur exempla infra edantur. Praesent ut contentus in columnis eget non-eget contentis instruxit.
Eget columnae creantur numerando numerum duodenarum columnarum quae ad spatium velis. Verbi gratia, tres aequales columnae uterentur tribus .col-xs-4.
Si plures quam 12 columnae intra unum ordinem collocantur, singulae extra columnarum globi, ut una unitas, novam lineam involvent.
Eget classes ad machinas applicant cum latitudines ductiles, maiores quam vel aequales magnitudines fracturae, et classes eget iaculis in minora machinas delendi. Ergo, eg applicans aliquod .col-md-*genus elemento, non solum in mediis machinis eius stylum afficiet, sed etiam in magnis machinis, si .col-lg-*genus non adest.

Exempla vide ad haec principia applicanda in codice tuo.

Media queries

Sequentibus instrumentis quaestionibus in minori lima nostra adhibemus ad creandos fracturae puncta in systemate eget.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

De his instrumentis quaestionibus interdum dilatamus max-widthut modum CSS comprehendamus ad machinis angustiorem.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Eget optiones

Vide quomodo aspectus Bootstrap eget systematis per multiplices machinis cum manu manus habilis laborant.

	Extra parvas cogitationes Phone (<768px)	Parvae cogitationes tabulae (≥768px)	Medium cogitationes Desktops (≥992px)	Magnae cogitationes Desktops (≥1200px)
Mores malesuada euismod	Horizontalis in omni tempore	Concidit ut satus, horizontali supra breakpoints
latitudo continens	Nemo (auto)	750px	970px	1170px
Classis praepositionis	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# Columnarum	12
columnae latitudo	Auto	~62px	~81px	~97px
Tetigisset domatum fistulas latitudo	30px (15px in utraque parte columnae)
Nestable	Ita
Offsets	Ita
Columna ordinatio	Ita

Exemplum: Stacked-ut-horizontalis

Uno ordine .col-md-*electronicarum classium utens, potes creare fundamentalem rationem emissionis quae in machinis mobilibus et tabulis machinis reclinatis incipit (extra parva ad parvas range) antequam horizontalis in escritorio (medii) machinis fiat. Place eget columnas in aliquam .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Exemplum: Liquor continens

Quaelibet fixa latitudo eget layout converte in layout plenam latitudinem, mutando extimum tuum .containerad .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Exemplum: Mobile et desktop

Non vis tuas columnas ad solum ACERVUS in minoribus machinis? Utere extra parvas et medias fabrica eget classes addendo .col-xs-* .col-md-*ad columnas tuas. Vide infra exemplum melioris notionis quomodo omnia operatur.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Exemplum: Mobile, tabula, desktop

Exstructo in exemplo praecedente, efficens rationes etiam dynamicas et validas cum tabulis .col-sm-*classium.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Exempli gratia: involutio columna

Si plures quam 12 columnae intra unum ordinem collocantur, singulae extra columnarum globi, ut una unitas, novam lineam involvent.

.col-xs-9

.col-xs-4
Quia 9 + 4 = 13 > 12, haec 4-columna-lata div involvit in novam lineam unam contiguam unitatem.

.col-xs-6 Sequentes
columnae pergunt in linea nova.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Responsiva columna resets

Cum quattuor gradibus gridis in promptu es ad quaestiones incurrere ubi, certis punctis, columnae tuae non satis recte apparent sicut una altera altior. Figere hoc, utere compositione a .clearfixet utilitate classium nostrarum responsivarum .

.col-xs-6 .col-sm-3
Resize conspectum tuum vel in phone pro exemplo deprime.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Praeter columnas aperiendas ad fractiones responsivas, opus est ut offsets, impellat, vel trahat . Vide hoc in agendo in malesuada euismod exemplo .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Offsetting columnas

Movere columnas ad dextram utendi .col-md-offset-*classes. Haec genera columnae marginem sinistrum augent *. Nam .col-md-offset-4movet .col-md-4quattuor columnas.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Etiam offsets vincire ab inferioribus ordinibus cum .col-*-offset-0classibus potes.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Columnae nidificantes

Ut contentus egeo defalta edificare te, novas .rowac columnas intra columnam .col-sm-*existentem appone. .col-sm-*Ordines nestedi includere columnarum copia quae usque ad 12 vel pauciores adde (non requiritur ut omnibus 12 columnis in promptu uteris).

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Columna ordinatio

Ordinem ordinis nostri constructi in columnas euismod cum classibus .col-md-push-*ac determinativis facile mutamus..col-md-pull-*

.col-md-9 .col-md-dis-3

.col-md-3 .col-md-trah-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Minus mixins et variabiles

Praeter eget genera elaborationis praestructa ad propositum celeritatis, Bootstrap includit minus variabiles et mixins minus variabiles pro cito generando rationes tuas simplices, semanticas.

Variabilium

Variabiles numerum determinant columnarum, latitudinem triviarum, et punctum mediae interrogationis, quo incipiunt columnae volitare. His utimur ad generandum praedefinitas eget classes supra confirmatas, necnon pro consuetudine mixins infra recensita.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

Mixins in conjunctione cum variabilium eget ad generandum semanticam CSS pro singulis columnis eget.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Exemplum usus

Mutationes variabiles ad valorum suorum consuetudinum mutare potes, vel mixinis cum eorum defectu valoribus tantum utere. Exemplum est hic usus occasus defectus ad efficiendum duas columnas extensiones cum interstitio.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Capitula

Omnia HTML capita, <h1>per <h6>, in promptu sunt. .h1per .h6classes etiam in promptu sunt, nam cum vis fonti styli inserere, sed adhuc textum tuum inline ostendi volo.

h1. Bootstrap capite	Semibold 36px
h2. Bootstrap capite	Semibold 30px
h3. Bootstrap capite	Semibold 24px
h4. Bootstrap capite	Semibold 18px
h5. Bootstrap capite	Semibold 14px
h6. Bootstrap capite	Semibold 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Facere leviorem textum secundarium in quovis titulo cum <small>tag genere vel .smallclasse.

h1. Bootstrap petere secundarium illud

h2. Bootstrap petere secundarium illud

h3. Bootstrap petere secundarium illud

h4. Bootstrap petere secundarium illud

h5. Bootstrap petere secundarium illud

h6. Bootstrap petere secundarium illud

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Corpus exemplum

Bootstrap's global default font-sizeis 14px , with a line-heightof 1.428 . Hoc ad <body>omnes paragraphos applicatur. Praeterea <p>(paragraphis) recipiunt fundum marginis dimidii lineae altitudinis computatae (10px per defaltam).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Duc corpus exemplum

Fac a paragrapho stare addendo .lead.

Vivamus sagittis lacus vel augue laoreet, rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Aedificavit cum Minus

Scala typographica duabus minus variabilibus in variabilibus innititur : @font-size-baseet @line-height-base. Prima est basis fontis amplitudinis per totum et secundum est basis lineae altitudinis. Variabilibus illis et simplicibus quibusdam mathematica utimur ad oras, paddinges, et lineas altitudinum totius generis nostri magisque utimur. Mos eas et Bootstrap adaptat.

Inline text elementa

notatum illud

Ad illustrandum cursus textus ob congruentiam in alio contextu, uti pro <mark>elemento.

Signo tag to . uti poteshighlighttext.

You can use the mark tag to <mark>highlight</mark> text.

Deletum illud

Ad indicandas cuneos textus qui deleti sunt uti pro <del>elemento.

~~Haec linea textui destinatur ut textus deletus tractandus sit.~~

<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough text

Ad indicandas caudices textus qui non iam ad usum <s>tag pertinentes sunt.

~~Haec linea textus iam accurate tractari destinatur.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Textus insertus

Ad indicandas additamenta documento uti <ins>tag.

Haec linea textui ad documentum additamentum tractari destinatur.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Fucosa text

Ad underline text uti <u>tag.

Haec linea textus reddet sicut fucosa

<u>This line of text will render as underlined</u>

Utere HTML defectionis emphasin tags cum stylis levibus.

Small text

Ad illustrandum inlines vel cuneos textus, <small>tag utere ut textum ad 85% magnitudinem parentis exponas. Eleemosyna recipiunt sua font-sizepro elementis nidificantibus <small>.

Vel licet elemento inline uti .smallloco cuiuslibet <small>.

Hic linea textus intelligitur ut subtiliter imprimatur.

<small>This line of text is meant to be treated as fine print.</small>

Audax

Ad efferendam PRAECISIO textus graviori fonti-ponderis.

Sequentia textus abruptionis pro audaci textu redditur .

<strong>rendered as bold text</strong>

Italics

Pro efferat excerpta textus cum cursivis.

The following snippet of text is rendered as italicized text .

<em>rendered as italicized text</em>

Alternis elementis

Libenter uti <b>et <i>in HTML5. <b>intelligitur exaggerare verba vel phrases sine importatione additi momenti dum <i>is mostly for vox, technica, etc.

Gratia diei et noctis classes

Facile realign textum ad partes cum textu alignment classes.

Reliquum textum varius.

Centrum textus varius.

Right aligned text.

Textum iustificatum.

Textus involvo nulla.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Mutatio classes

Textum in compositionibus cum textu uncialium classes transmutare.

Textum Lowercased.

Textum Uppercased.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Abbreviations

Exsecutio stylized <abbr>elementi HTML pro abbreviationibus et Acronym versionem amplificatam ostendere. Abbreviationes cum titleattributo habent levem marginem punctatum et cursorem adiuvantem in volatilibus, contextum additicium in tabernus praebentes et technologiae adiuvandae utentes.

Basic abbreviationem

Abbreviatio verbi attributum est attr .

<abbr title="attribute">attr</abbr>

Initialism

Adde .initialismabbreviationem pro fontium magnitudine paulo minore.

HTML optimum est cum panis divisa.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Addresses

Praesenti informationes contactus proximi vel totius corporis operis est antecessoris. Serva formatting per omnes lineas cum ending <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Blockquotes

Adfers caudices contentorum aliunde intra documentum tuum.

Default blockquote

Circumcingere <blockquote>aliquem HTML ut auctoritas. Pro recto quotes commendamus a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote optiones

Style and content changes for simple variations on a standard <blockquote>.

Nomen fons

Adde <footer>ad cognoscendum fontem. Nomen principii operis in involve <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

In Source Title aliquis celebre

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alternis ostendimus

Adde .blockquote-reversepro obstructionumquote cum contentis recti-aligned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

In Source Title aliquis celebre

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Lists

Inordinatus

Enumeratio rerum in quibus ordo explicite non refert.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat iaculis lectus
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

Iussit

Enumeratio rerum in quibus ordo explicite refert.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat iaculis lectus
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Unstyled

Aufer default list-styleet left margin in lista (immediate tantum parvuli). Hoc solum ad infantes immediatos pertinet res enumerandas, id quod necesse est ut indices quoslibet tam nestosos addas.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat iaculis lectus
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>...</li>
</ul>

Inline

Pone omnia indicem rerum in una linea cum display: inline-block;aliqua luce coloratum.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Descriptio

Enumeratio terminorum cum earum adiunctis descriptionibus.

Descriptio tabulae: Descriptio perfectus est ad definiendum terminos.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Vestibulum malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontalis descriptio

Constitue leges et descriptiones in <dl>acie iuxta. Incipit reclinatorium sicut default <dl>s, sed cum navbar expandit, ita fac.

Descriptio tabulae: Descriptio perfectus est ad definiendum terminos.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Vestibulum malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Auto-truncating

Tabulae horizontalis descriptiones erunt truncata vocabula quae nimis longa sunt in columna sinistra aptare cum text-overflow. In angustiis visis, ad defaltam reclinatam mutabuntur.

Inline

Wrap inline excerpta of code with <code>.

Velut <section>inlinere debet.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

User input

Utere <kbd>ad indicandum initus quod typice intravit per tincidunt.

Ad directoria flectendum, genus cdnomen indicem secuta est.
Recensere occasus, torcular ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Basic obstructionum

<pre>Pluribus lineis codicis utere . Vide ut nullum angulum fugias in brackets in codice recte reddendo.

<p>Sample textum hic...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Classem optione addere .pre-scrollablepotes quae max-altitudinis 350px ponet et in scrollbar y-axis providebit.

Variabilium

Ad indicandas variabiles pro elemento utuntur <var>.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Sample output

Ad indicandas cuneos specimen output ex programmatis <samp>tag usu.

Hic textus a programmate computatorio output exempli causa tractandus est.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Basic exemplum

Pro basic stylus - color levis et solum divisores horizontales - genus basin .tablecuivis adde <table>. Superfluus videri potest, sed pervulgatum usum tabularum pro aliis plugins quasi calendariis ac notis fraudantes, consuetum tabularum stilos segregare optavimus.

Tabulae ad libitum caption.
#	Praenomen	Cognomen	Username
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Larry	Avis	@twitter

<table class="table">
  ...
</table>

Striata ordines

Addere .table-stripedadhibenda est zebra-striata ad quemlibet ordinem tabulae intra <tbody>.

Crucem pasco convenientiam

Tabulae striatae per :nth-childelectrix CSS nominantur, quae in Penitus Rimor 8 non suppetunt.

#	Praenomen	Cognomen	Username
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Larry	Avis	@twitter

<table class="table table-striped">
  ...
</table>

praetextae mensae

Adde .table-borderedlimites undique mensae et cellae.

#	Praenomen	Cognomen	Username
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Larry	Avis	@twitter

<table class="table table-bordered">
  ...
</table>

aliquet ordines

Adde .table-hoverut status tabernus tabulae intra a <tbody>.

#	Praenomen	Cognomen	Username
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Larry	Avis	@twitter

<table class="table table-hover">
  ...
</table>

Mensa condensata

Adde .table-condensedut tabulas magis compactas secando cellam dimidii.

#	Praenomen	Cognomen	Username
1	Mark	Otto	@mdo
2	Iacobus	Thornton	@fat
3	Avis Larry		@twitter

<table class="table table-condensed">
  ...
</table>

Contextual classes

Classes contextuales utere ad ordines tabulas colorandas vel singulas cellulas.

Classis	Descriptio
`.active`	Apponendo aliquet color ad certo ordine vel cellula
`.success`	Indicat prospera vel positivum actio
`.info`	Indicat neutrum informativum mutatio vel actio
`.warning`	Indicat admonitionem ut opus sit attendere
`.danger`	Indicat periculosa vel potentia negativa

#	Columna heading	Columna heading	Columna heading
1	columna content	columna content	columna content
2	columna content	columna content	columna content
3	columna content	columna content	columna content
4	columna content	columna content	columna content
5	columna content	columna content	columna content
6	columna content	columna content	columna content
7	columna content	columna content	columna content
8	columna content	columna content	columna content
9	columna content	columna content	columna content

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Deferre significatio technologiae adiuvandae

Color usus ut sensum ad mensam ordinis vel cellulae singulae addat tantum praebet indicationem visualem, quae non adhibebitur technologiarum assistivorum utentibus - sicut legentibus tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuo (textus visibilis in tabulario versu/cellensi pertinentes), vel per medium includatur, sicut textus additicius cum .sr-onlyclasse occultatur.

Responsivum tabulae

Tabulas responsivas crea involucris quasvis .tableut .table-responsiveeas libellos transversas in parvis machinis efficias (sub 768px). Cum aliquid maius quam 768px latum spectaveris, nullam in his tabulis differentiam videbis.

Vertical clipping / truncation

Mensae responsoriae utuntur overflow-y: hidden, quae res aliquas rescindunt quae super imum vel summum tabulae margines excedunt. Praesertim hoc menus dropdown et aliae tertiae factionis contenta circumplecti possunt.

Firefox et fieldsets

Firefox stylum inconcinnum habet aliquid involutum width, quod impedit cum tabula responsiva. Hoc opprimi non potest sine hack Firefox specialia quae in Bootstrap non praebemus:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Pro maiori, lege hoc responsum Stack Overflow .

#	Mensa capite	Mensa capite	Mensa capite	Mensa capite	Mensa capite	Mensa capite
1	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula
2	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula
3	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula

#	Mensa capite	Mensa capite	Mensa capite	Mensa capite	Mensa capite	Mensa capite
1	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula
2	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula
3	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula	Mensa cellula

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Basic exemplum

Singula forma controllata automatice aliquam stylam globalem accipiunt. Omnia textualia <input>, <textarea>et <select>elementa cum defalta .form-controlponuntur . width: 100%;Wrap labels and controls in .form-groupfor optimum spacing.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Noli miscere forma coetus cum initus coetus

Noli miscere circulos formare directe cum input circulos . Sed in globus initus globi formae formae intra nidificant.

Inline forma

Adde .form-inlineformam tuam (quae non habet esse <form>) ad imperium left-alignum et impedimentum interclusum. Hoc solum valet de formis in prospectibus quae saltem 768px latae sunt.

Morem eget latitudines

Inputationes et selectae width: 100%;per defaltam in Bootstrap applicuerunt. In formis lineis collocamus quod width: auto;tam multiplex imperium in eadem linea residere potest. Prout in extensione tua, additional consuetudinis inversae requiri potest.

Semper addere pittacia

Lectores tegumentum laborantes cum formis tuis habebunt si pittacium non pro singulis initus includas. .sr-onlyAd has inlineas formas, pittacia classium utentes celare potes . Aliae insuper sunt methodi praebendi pittacium technologiarum adiuvativarum, ut sunt aria-label, aria-labelledbyseu titleattributum. Si nihil horum adsit, lectores screen utendi placeholderattributo, si adsint, uti possunt, sed note usum placeholdersubstitutionis in aliis methodis tinguendi non monuisse.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Forma horizontalis

Usus Bootstrap praedefinitis eget classibus ad align pittatas et coetus formarum regat in layout horizontali, addendo .form-horizontalformam (quae non habet esse <form>). Faciens ita mutat .form-groups se gerere sicut ordines malesuada euismod, ut nulla eget .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Supported controls

Exempla regulae formae normae in exempli forma attentatae sunt.

Inputs

Frequentissima forma ditionis, text-based input agros. Includes support for all HTML5 types : text, password, datetime, datetime-local, date, month, time, week, number, email, url, searchet tel.color

Type declarationem requiratur

Inputationes nonnisi plene dicuntur, si earum typeproprie declaratur.

<input type="text" class="form-control" placeholder="Text input">

Input circulos

Ad textum insertum vel bullarum ante et/vel post quemlibet textum substructum addere <input>, initus coetus componentium reprehendo .

Textarea

Forma temperantiae quae plures textus lineas sustinet. Mutare rowsattributum ut necesse est.

<textarea class="form-control" rows="3"></textarea>

Checkboxes et radios

Checkboxes sunt unum vel plures optiones in indicem seligendi, dum radios unum e multis eligendo sunt.

Debilitatum checkboxes et radios sustinentur, sed cursorem "non-permissum" in volive parentis praebere <label>, necesse est .disabledgenus parenti addere .radio, .radio-inline, .checkbox, vel .checkbox-inline.

Default (reclinant)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Inline checkboxes et radios

Utere .checkbox-inlinevel .radio-inlineclasses vel in serie checkboxes vel radios pro controllis quae in eadem linea apparent.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Checkboxes et radios sine titulus text

Intra textum non habes <label>, initus ponitur ut credas. In statu tantum operatur in checkboxes et radios non-inlines. Memento adhuc praebere aliquam formam pittacii ad technologias adiuvandas (verbi causa utens aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Eligit

border-radiusNota multos indigenas electos menus, in Safari et Chrome, angulos rotundos habere, qui per proprietates mutari non possunt .

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Nam <select>imperium cum multipleattributo multae optiones per defaltam ostenduntur.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Static imperium

Cum textum planum iuxta formam pittacii intra formam ponere debes, .form-control-staticclassis in a <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Focus civitatis

Defectus outlinestyli in aliqua forma controllata removemus et box-shadowin eius locum applicamus :focus.

Demo `:focus`state

Praelibatum exemplum initus utitur stylis consuetis in documentis nostris ad :focusstatum in a .form-control.

Disabled statum

Addere disabledattributum Boolean in initus ne user interationes. Debilitatum initibus leviora videntur et not-allowedcursorem addunt.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Disabled fieldsets

Adde illico disabledattributum <fieldset>inactivandi omnes potestates .<fieldset>

Caveat de link functionality of`<a>`

Defalta navigatores omnes formas nativas controllatas ( <input>, <select>et <button>elementa) intra <fieldset disabled>quasi debilem tractabunt, impediendo tam claviaturas quam murem interationes. Attamen si forma tua <a ... class="btn btn-*">elementa etiam includit, haec solum stylus dabuntur pointer-events: none. Sicut notatum est in sectione de statu debilitatum pro globulis (et nominatim in sub-sectione pro anchoris elementis), haec proprietas CSS nondum normatum est nec plene in Opera 18 et infra, vel in Penitus Rimor 11, parta est. 't impedire tincidunt utentes ne focus vel activate hos nexus possit. Ita tutus esse, utere usu JavaScript ad tales nexus disable.

Crucem pasco convenientiam

Dum Bootstrap hos stylos in omnibus navigatoribus adhibebit, Internet Explorer 11 et infra non plene disabledattributum in a <fieldset>. Utere consuetudine JavaScript ad disable campum in his navigatoribus.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Readonly state

Addere readonlyattributum booleanum in initus ad praecavendam modificationem valoris initus. Legere solum inputes leviores apparent (sicut inputs debiles), sed cursorem vexillum retinent.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Auxilium text

Obstructionum planum textum ad formam moderantis adiuvandum.

Textus cum forma controls iungens auxilium

Auxilium textus debet explicite coniungi cum forma temperantiae quod pertinet ad usus aria-describedbyattributi. Hoc efficiet ut technologiae adiutrices - sicut lectores tegumentum - hunc textum adiuvent annuntient cum usor tendit vel imperium intrat.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Validation civitatibus

Bootstrap convalidatio genera includit erroris, admonitionis, et prosperitatis status de forma moderantis. Uti, addere .has-warning, .has-error, vel .has-successad elementum parentis. Aliqua .control-label, .form-controlet .help-blockintra illud elementum stilos convalidationis recipiet.

Convalidatio technologiarum technologiarum et colorblind usorum assistentium ad portandum statum

His stylis convalidationis adhibitis ad significandum statum formae imperium solum praebet indicium visuale, colori-substructi, quod non afferetur utentibus technologiarum adiuvantium - sicut lectorum tegumentum - vel colorum caecorum utentium.

Ut jocus etiam rei publicae indicium proferat. Exempli gratia, includere potes admonitum de statu in forma <label>ipsius textus continentiae (sicut in sequenti codice exempli causa accidit), includere Glyphicon (cum opportunitate textus .sr-onlyclassi utens - Glyphicon exempla videas ), vel praebendo. additional auxilium text scandalum. Speciatim pro technologia adiuvativa, forma invalida controllata attribui potest etiam aria-invalid="true"attributum.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Cum libitum iconibus

Imagines ad libitum videre potes additis iconibus .has-feedbackac dextra.

Icones videre tantum cum <input class="form-control">elementis textualibus laborant.

Icones, pittacia et coetus initus

Positio manualis iconum feedback postulatur pro inputibus sine pittacio et pro coetibus input cum addito in dextro. Valde hortatus es ut pittacia pro omnibus initibus pro accessibilitate de causis praebeant. Si pittacia prohibere vis quominus exponi velis, eas cum .sr-onlyclasse absconde. Si sine pittaciis facere debes, iconem topaestimationem accommoda. Pro coetibus inputandis, rightvalorem congruenti pixel accommodare secundum latitudinem addonationis tuae.

Iconem significatio technologiae adiuvandae

Curet ut technologiae adiutrices - sicut lectores tegumentum - recte significationem iconis deferant, textus occultus additicius includatur cum .sr-onlyclasse et expresse coniungatur cum forma temperantiae quod spectat ad utendum aria-describedby. Vel aliter, ut significatio (exempli gratia hoc quod cavetur pro certo textu ingressum campi) importetur in aliqua alia forma, ita ut immutatio textus actualis <label>coniungatur cum forma temperantiae.

Etsi sequentia exempla iam memorant convalidationis statum propriae formae in ipso <label>textu moderante, praedicta ars ( .sr-onlytextus utens et aria-describedby) ad illustrandas usus inclusa est.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Icones libitum in formas horizontales et inlines

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Icones ad libitum cum pittaciis `.sr-only`occultis

Si .sr-onlyclasse uteris ad formam dominii occultandam <label>(potius quam aliis optionibus labellis utens, sicut aria-labelattributis), Bootstrap sponte accommodabit positionem iconis semel additae.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Imperium inspectionem

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

altitudo inspectionem

Facere formam breviorem vel procerior controllata quae magnitudinum conjunctionem inserere.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Horizontalis forma coetus magnitudinum

Celeriter amplitudo pittacia et forma moderatur intus .form-horizontaladdendo .form-group-lgvel .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Columna inspectionem

Involvere inputs in columnis eget, vel elementum aliquam consuetudinem parentis, ad latitudines facile urgere desideravit.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Button tags

Classes in felis utere elementum <a>, <button>vel .<input>

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Contextus speciales usus

<a>Dum globuli classes in et elementis adhiberi possunt <button>, tantum <button>elementa intra componentes navbar et navbar sustinentur.

Links agens ut bullarum

Si <a>elementa uti globulis - excitato in-pagina functionis usitatae sunt, quam ad aliud documentum vel sectionem intra paginam hodiernam navigantes — opportuna quoque danda sunt role="button".

Crucis-pastor reddens

Pro praxi, maxime commendamus utentes <button>elemento quoties fieri potest ut transitus pascuae congruens reddendae.

Inter alia, est cimex in Firefox <30 quod nos vetat quominus bullarum -basedum line-heightinstitutio <input>, causans ut non exacte respondeat altitudini aliarum bullarum in Firefox.

Optiones

Utere aliqua ex classibus button e promptis ad conjunctionem vocatam cito creandam.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Deferre significatio technologiae adiuvandae

Color usus ad conjunctionem significationem addere solum praebet indicationem visualem, quae non adhibebitur usoribus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuae (textus conjunctionis visibilis), vel per alterum medium comprehenditur, sicut textus additicius cum classibus occultatur .sr-only.

Magnitudines

Fac maiorem vel minorem globulis? Add .btn-lg, .btn-sm, vel .btn-xsmagnitudines additas .

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Faces angustos globulis gradu, quae plenam latitudinem parentis cludunt, addendo .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Active civitate

Bullae apparent pressae (colore obscuriore, limbo obscuriore et umbra insertae) cum activae. Pro <button>elementis hoc fit via :active. Pro <a>elementis factum est .active. Sed uti potes .activein <button>s (et attributum includere aria-pressed="true") debes programmatice replicare statum activum.

Button elementum

Non opus est addere :activesicuti genus est, sed si eandem speciem cogere debes, perge et adde .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

anchor elementum

Classem .activeglobulis <a>addere.

Prima pagina Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Disabled statum

Fac tesserae inexplicabiles vultus remittens eas opacity.

Button elementum

disabledBullae attributum add <button>.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Crucem pasco convenientiam

Si disabledattributum a <button>, Internet Explorer 9 addideris et infra textum griseum reddet cum sordido textuum umbra quod figere non possumus.

anchor elementum

Classem .disabledglobulis <a>addere.

Prima pagina Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Utimur .disabledut hic classis utilitas, similis communi .activeclassi, ita praepositio nulla desideratur.

Link functionality caveat

Hoc genus utitur pointer-events: noneut nexum functionis s inactivare conetur <a>, sed proprietatem CSS nondum normatum esse nec in Opera 18 et infra plene fulciri, vel in Penitus Rimor 11. Praeterea etiam in navigatoribus qui sustentationem faciunt pointer-events: none, claviaturae navigationem non cessat, id significat quod claviaturae usores et utentes technologiarum adiuvantium perspicaces possunt adhuc hos nexus movere. Ita tutus esse, utere usu JavaScript ad tales nexus disable.

Responsiva imagines

Imagines in Bootstrap 3 fieri possunt per adiectionem .img-responsiveclassis amicabiliter respondeant. Hoc valet max-width: 100%;, height: auto;et display: block;ad imaginem ut bene scandet ad elementum parentis.

Ad imagines medias, quae .img-responsiveclassis utuntur, .center-blockloco utuntur .text-center. Vide sectionem adiumentorum ad plura singularia de .center-blockusu.

Imagines SVG et IE 8-10

In Penitus Rimor 8-10, SVG imagines cum .img-responsiveproportione sunt magnitudines. Hoc ut figas, adde width: 100% \9;ubi necesse est. Bootstrap hoc automatice non applicat cum complicationes aliis formatorum imaginum causat.

<img src="..." class="img-responsive" alt="Responsive image">

Figurae imago

Classes <img>elemento adde, ut imagines in aliqua re facile exprimant.

Crucem pasco convenientiam

Animo Penitus Rimor 8 subsidium pro angulis rotundatis carere.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Colores contextuales

Significationem per colorem deferre cum paucis emphasin utilitatis generibus. Haec etiam applicari possunt ad nexus et oberrant sicut styli nostri nexus default.

Fusce dapibus, tellus ac cursus commodo, tortor mauris aliquam nibh.

Nullam id dolor id nibh ultricies vehicula ut id tellus.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Cum proprietate

Interdum classes emphasi non possunt applicari propter speciem alterius selectoris. Pleraque textus <span>cum classe satis habendus est.

Deferre significatio technologiae adiuvandae

Color usus ad significationem addere tantum praebet indicationem visualem, quae utentibus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae vel ex ipso contento manifestae sint (colores contextuales tantum adhibentur ad confirmandam significationem iam in textu/markup), vel per medium alterum includi, sicut textus additus cum .sr-onlyclassium occultatus. .

Contextual backgrounds

Contextual texti colori similis, curriculum elementi cuivis contextual classi facile pone. Anchora membra obscurabunt in volitando, sicut in classibus textus.

Nullam id dolor id nibh ultricies vehicula ut id tellus.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Cum proprietate

Interdum contextual classes contextus applicari non possunt propter alterius selectoris speciem. In quibusdam, idoneus labor est cum materia involvere contentus <div>classe.

Deferre significatio technologiae adiuvandae

Sicut cum coloribus contextualibus , ut quaevis significatio quae per colorem transvehatur, etiam in forma pure praesentationis non sit.

Prope icon

Prope iconem genericam utere ad dimittendum contentum sicut modales et erectus.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

Currus utere ad designandum dropdown functionalitatem et directionem. Nota quod defectus caret sponte in dropup menus convertet .

<span class="caret"></span>

Velox ratibus

Supernatet elementum sinistro vel dextro cum classe. !importantne proventus speciei includitur. Classes etiam pro mixins adhiberi possunt.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Centrum contentus caudices

Pone elementum ad display: blocket centrum via margin. Praesto ut mixin et classis.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

Facile patet s elemento parentisfloat addendo . Micro clare fix utitur ut per Nicolas Gallagher divulgatur. Potest etiam adhiberi ut mixin..clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Ostendens et latens contentus

Cogere elementum exhibendum vel occultum ( incluso pro lectoribus ducto ) cum usu .showet .hiddengeneribus. Hae classes utuntur !importantad certamina vitare certamina sicut vivae natationes . Tantum available pro gradu ad scandalum toggling. Possunt etiam uti mixins.

.hidepraesto est, sed non semper lectorum tegumentum afficit ac deprecatur ut v3.0.1. Usu .hiddenvel .sr-onlypro.

Praeterea .invisiblevisibilitas elementi solum adhiberi potest ut toggle, significatio eius displaynon modificatur et elementum adhuc fluxum documenti afficere potest.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Lector screen et claviaturae contentus navigationis

Elementum celare omnibus machinis nisi cum lectoribus screen.sr-only . Miscere .sr-onlycum .sr-only-focusableelementum iterum demonstrare cum focused (exempli gratia per usorem solum claviaturae). Necesse est ad accessibilitatem sequendam optimas consuetudines . Potest etiam adhiberi ut mixins.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Imago postea

Classem .text-hidevel mixin utendum est ut adiuvet reponere textus elementi contenti cum imagine ima.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Ad velociorem progressionem mobilem amicabilem, his generibus utilitatis utere ad ostendendum et occultandum contentus per machinas per media quaesita. Inclusa etiam sunt utilia genera ad toggling contenta typis impressa.

His uti conare in stricto fundamento et ne creando prorsus varias eiusdem situs versiones. Sed utere ea ad singulas propositiones complendas.

Praesto classes

Utere una vel compositione e classibus promptis ad toggling contentum per prospectum breakpoints.

	Extra parva machinasPhones (<768px)	Parva machinaeTabulae (≥768px)	Medium cogitationesDesktops (≥992px)	Magnae cogitationesDesktops (≥1200px)
`.visible-xs-*`	Visibilis	Occultus	Occultus	Occultus
`.visible-sm-*`	Occultus	Visibilis	Occultus	Occultus
`.visible-md-*`	Occultus	Occultus	Visibilis	Occultus
`.visible-lg-*`	Occultus	Occultus	Occultus	Visibilis
`.hidden-xs`	Occultus	Visibilis	Visibilis	Visibilis
`.hidden-sm`	Visibilis	Occultus	Visibilis	Visibilis
`.hidden-md`	Visibilis	Visibilis	Occultus	Visibilis
`.hidden-lg`	Visibilis	Visibilis	Visibilis	Occultus

Ut de v3.2.0, .visible-*-*classes singulorum fracturae in tribus variationibus veniunt, una pro singulis CSS displaypretii proprietatis infra recensita.

Manipulus classes	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Itaque, pro extra parvas ( xs) screens exempli gratia, .visible-*-*classes praesto sunt: .visible-xs-block, .visible-xs-inline, et .visible-xs-inline-block.

Classes .visible-xs, .visible-sm, .visible-mdet .visible-lgetiam sunt , sed deprecantur ut v3.2.0 . Eae circiter aequiparantur .visible-*-block, nisi cum casibus specialibus additis ad <table>elementa relatas toggling.

Print classes

Similia classibus responsivis regularibus, his utere ad contenta toggling pro impressis.

Classes	Pasco	Print
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Occultus	Visibilis
`.hidden-print`	Visibilis	Occultus

Classis .visible-printetiam exstat sed deprecatur ut v3.2.0. Proxime valet .visible-print-block, praeter casus speciales additis<table> elementis relatis.

Test casibus

Recipe navigatrum vel onere in variis machinis ad probandas lectiones responsivas utilitates.

Visibilis in...

Viridis checkmarks indicant elementum visibile in tua currenti prospectu.

Extra parva Visibilis ad x-parvum

Parvus Visibilis in parvis

Medium Visibilis in medium

Magna Visibilis in magnis

Extra parva et parva Visibilis ad x-parva et parva

Medium et magnum Visibilis in medio et magno

Extra parvum et medium Visibilis ad x-parvum et medium

Parvus et magnus Visibilis in parvis et magnis

Extra parva et magna Visibilis ad x-parva et magna

Parvus et medius Visibilis in parvis et medium

Occultus in...

Hic, viridia checkmark etiam indicant elementum absconditum in tua currenti prospectu.

Extra parva Occultus in x-parva

Parvus Occultus in parvis

Medium Occultus in medium

Magna Occultus in magnis

Extra parva et parva Occultus in x-parvis et parvis

Medium et magnum Occultus in medio et magno

Extra parvum et medium Occultus in x-parva et media

Parvus et magnus Occultus in parvis et magnis

Extra parva et magna Occultus in x-parvis et magnis

Parvus et medius Occultus in parvis et medium

Bootstrap scriptor CSS in Minus, preprocessor additis functionis sicut variabiles, mixins, et functiones pro CSS componendis aedificatur. Qui inspicientes fontem Minus fasciculi utendi loco imaginum CSS nostrorum compiplicatorum uti possunt multis variabilibus et mixinis in compage utimur.

Grid variabiles et mixins intra sectionem systematis Grid operiuntur .

Componendis Bootstrap

Bootstrap duobus saltem modis adhiberi potest: confectis CSS vel cum fonte Minus fasciculi. Minora fasciculi componendi, sectionem Incipiendi consule ut progressioni tuae evolutioni propositae ad currendum necessaria mandata.

Tertia pars instrumentorum compilation cum Bootstrap laborare potest, sed nostris core quadrigis non sustinetur.

Variabilium

Variabiles per totum consilium adhibentur ut modo centralizent et communicent valores communium ut colores, spatiis, vel acervi fontium. Ad integrum naufragii, Lorem videre velit .

Colorum

Facile duobus technis coloratis utuntur: cineraceis et semanticis. Colores cineraceorum vivos accessum praebent ad umbras nigras communiter adhibitas, cum semanticae varios colores in valores significantes contextuales assignatos includunt.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Qualibet harum variabilium colorum utere, prout sunt, vel eas transponere ad variabilium significationis pro tuo consilio.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Pegmata

Paucis variabilibus pro cito customisandi elementorum sceleti tui siti.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Vincula

Facillime nexus tuos cum colore dextro cum uno tantum valore exprimes.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Nota quod @link-hover-colorusus functionis, aliud instrumentum terribilis a Minus, ad ius coloratum automagically creare potest. Potes uti darken, lighten, saturateet desaturate.

Typographia

Facilius figuram tuam, magnitudinem textus, ducens, et plura cum paucis variantibus mobilibus pone. Bootstrap his quoque utitur ad mixins typographici faciles.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Icones

Duae variabiles velox ad locum ac filename iconum tuarum customisandi.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Components

Componentes per Bootstrap aliquo variabili defectu ad valorem communium constituendum utuntur. Hic in vulgatis.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Vendor mixins

Mixinae venditoris mixtae sunt ut auxilium multiplices navigatores adiuvent, cum omnia praefixa venditoris pertinentes in CSS compilata sunt.

Arca-sizing

Repone tuum exemplar archa cum una mixin. Pro contextu hoc utile articulum ex Mozilla vide .

Mixin deprecatur ut v3.2.0, cum introductione Autopraefixoris. Ad convenientiam retrogradam conservandam, Bootstrap mixin interne uti perget usque ad Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Anguli rotundae

border-radiusHodie omnes navigatores moderni proprietatem non praefixam sustinent . Ut talis, nulla .border-radius()mixin est, sed Bootstrap brevia includit ad duos angulos cito in certo latere rei.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Arca (Drop) obumbratio

Si scopum auditorium tuum utens navigatoribus et machinis recentissimis maximisque, scito uti box-shadowbona sua. Si subsidia maiora Android (pre-v4) et iOS machinis (pre-iOS 5) auxilio indigent, mixin deprecata utere ut requisita exciperent.-webkit utere ut praepositionem

Mixin deprecatur ut v3.1.0, cum Bootstrap publice suggesta non sustineat quae vexillum proprietatis non sustinet. Ad convenientiam retrogradam conservandam, Bootstrap mixin interne uti perget usque ad Bootstrap v4.

Fac ut rgba()colores in arca tua umbris utaris, ut quam maxime compaginem cum subiectis misceant.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Transitiones

Multiplex mixins ad mollitiem. Omnes informationes transitus una cum uno constitue, vel moras et durationem separatam denota prout opus est.

Mixina deprecantur ut v3.2.0, cum introductione Autopraefixoris. Ad convenientiam retrogradam conservandam, Bootstrap mixins intrinsecus uti perget usque ad Bootstrap v4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Transformationes

Rotate, endo, translate (moveo), vel skew obiecto aliquo.

Mixina deprecantur ut v3.2.0, cum introductione Autopraefixoris. Ad convenientiam retrogradam conservandam, Bootstrap mixins intrinsecus uti perget usque ad Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animationes

Una mixin ad utens omnes proprietates animationis CSS3 in una declaratione et aliis mixinis pro singularibus proprietatibus.

Mixina deprecantur ut v3.2.0, cum introductione Autopraefixoris. Ad convenientiam retrogradam conservandam, Bootstrap mixins intrinsecus uti perget usque ad Bootstrap v4.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opacitas

Opacitatem omnibus navigantibus constitue et filterlapsus casus IE8 praebe.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Placeholder text

Contextum praebere pro forma controllis intra unumquemque campum.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Columnae

Columnas generare per CSS intra unum elementum.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Gradientes

Facile quemvis duos colores in clivum globum convertet. Plus proficies et directionem pone, utere tribus coloribus, vel uti gradiente radiali. Uno mixin omnia praefixa syntaxis habebis tibi opus est.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Etiam angulum vexillum bicolori, clivum linearem designare potes;

#gradient > .directional(#333; #000; 45deg);

Si tonsori stilo clivo striato opus est, hoc etiam facile est. Unum tantum colorem denotamus et livorem translucentem operiemus.

#gradient > .striped(#333; 45deg);

Antea et tres colores loco utere. Pone primum colorem, secundum colorem, sistere colorem secundi coloris (valorem recipis instar 25%), et tertium colorem cum his mixins;

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Capita! Si quandocunque clivum removere debes, fac ut quaslibet IE-specias filterquas tibi addideris removendas. Facere potes utendo .reset-filter()mixin e regione background-image: none;.

utilitas mixins

Utilitas mixins sunt mixtiones, quae alias proprietates CSS non finitas coniungunt ad certum finem vel negotium consequendum.

Clearfix

Oblivisci class="clearfix"aliquid elementi addere et loco .clearfix()mixin addere ubi oportet. Utitur mica clarifica ex Nicolao Gallagher .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Horizontalis centrum

Celeriter aliquod elementum in suo parente centrum. Quisque eget posuere widthneque max-width.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

sizing auxiliatores

Facilius speciem rei speciem.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Resizable textareas

Facile configurare resize optiones pro quavis textarea, vel aliquo alio elemento. Defectus ad mores navigatri normales ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Textum truncatum

Textum facile truncatum cum ellipsis cum una mixin. Ut eget elementum blockneque inline-block.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retinae imagines

Denota duas imaginum vias et @1x dimensiones imaginis, et Bootstrap quaestionem instrumentorum @2x praebebit. Si multas imagines ad ministrandum habes, scribe imaginem tuam retinae CSS manually in uno instrumento interrogationis.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Dum Bootstrap in Minus aedificatur, etiam portum Sass officialem habet . Nos eam in repositorio separato GitHub et updates tractamus cum scripto conversionis.

Quid includitur?

Cum portum Sass separatum habet et paulo aliter audientibus inservit, contenta rei multum differunt ab incepto principali Bootstrap. Hoc facit, portum Sass compatible cum multis systematibus Sass-fundatis quam maxime.

Semita	Descriptio
`lib/`	Ruby gemma codici (configuratio Sass, Rails et integrationes Compass)
`tasks/`	Scripta converter (less conversus ad Sass flumine)
`test/`	Compilationem probat
`templates/`	Compass sarcina manifesta
`vendor/assets/`	Sass, JavaScript et files font
`Rakefile`	Interna opera, ut sarculum et converto

Visita repositorium Sass portus GitHub ut has tabulas in actu videas.

Institutionem

Ad informationem de modo instituendi et utendi Bootstrap pro Sass, consule promptarium GitHub legere . Maxime hodie fons est et informationes usus includit cum Rails, Compass, et vexillum incepta Sass.

Bootstrap ad Sass

CSS

Overview

HTML5 doctype

Mobile primum

Typographia et nexus

Normalize.css

Continentes

Eget ratio

Introductio

Media queries

Eget optiones

Exemplum: Stacked-ut-horizontalis

Exemplum: Liquor continens

Exemplum: Mobile et desktop

Exemplum: Mobile, tabula, desktop

Exempli gratia: involutio columna

Responsiva columna resets

Offsetting columnas

Columnae nidificantes

Columna ordinatio

Minus mixins et variabiles

Variabilium

Mixins

Exemplum usus

Typographia

Capitula

h1. Bootstrap capite

h2. Bootstrap capite

h3. Bootstrap capite

h4. Bootstrap capite

h5. Bootstrap capite

h6. Bootstrap capite

h1. Bootstrap petere secundarium illud

h2. Bootstrap petere secundarium illud

h3. Bootstrap petere secundarium illud

h4. Bootstrap petere secundarium illud

h5. Bootstrap petere secundarium illud

h6. Bootstrap petere secundarium illud

Corpus exemplum

Duc corpus exemplum

Aedificavit cum Minus

Inline text elementa

notatum illud

Deletum illud

Strikethrough text

Textus insertus

Fucosa text

Small text

Audax

Italics

Alternis elementis

Gratia diei et noctis classes

Mutatio classes

Abbreviations

Basic abbreviationem

Initialism

Addresses

Blockquotes

Default blockquote

Blockquote optiones

Nomen fons

Alternis ostendimus

Lists

Inordinatus

Iussit

Unstyled

Inline

Descriptio

Horizontalis descriptio

Auto-truncating

Code

Inline

User input

Basic obstructionum

Variabilium

Sample output

Tabulae

Basic exemplum

Striata ordines

Crucem pasco convenientiam

Demo `:focus`state

Caveat de link functionality of`<a>`

Icones ad libitum cum pittaciis `.sr-only`occultis