Obțineți informații despre elementele cheie ale infrastructurii Bootstrap, inclusiv abordarea noastră pentru o dezvoltare web mai bună, mai rapidă și mai puternică.

HTML5 doctype

Bootstrap folosește anumite elemente HTML și proprietăți CSS care necesită utilizarea doctype HTML5. Includeți-l la începutul tuturor proiectelor dvs.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

În primul rând mobil

Cu Bootstrap 2, am adăugat stiluri opționale pentru dispozitive mobile pentru aspectele cheie ale cadrului. Cu Bootstrap 3, am rescris proiectul pentru a fi prietenos cu dispozitivele mobile de la început. În loc să adauge stiluri mobile opționale, acestea sunt coapte chiar în miez. De fapt, Bootstrap este mai întâi mobil . Stilurile mobile first pot fi găsite în întreaga bibliotecă, nu în fișiere separate.

Pentru a asigura randarea corectă și mărirea la atingere, adăugați metaeticheta de vizualizare la <head>.

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

Puteți dezactiva capacitățile de zoom pe dispozitivele mobile adăugând user-scalable=nola metaeticheta viewport. Acest lucru dezactivează mărirea, ceea ce înseamnă că utilizatorii pot doar să deruleze și are ca rezultat site-ul dvs. să se simtă puțin mai mult ca o aplicație nativă. În general, nu recomandăm acest lucru pe fiecare site, așa că aveți grijă!

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

Tipografie și link-uri

Bootstrap stabilește stilurile de afișare globală de bază, tipografie și linkuri. Mai exact, noi:

Asezat background-color: #fff;pebody
Utilizați atributele @font-family-base, @font-size-baseși @line-height-baseca bază tipografică
Setați culoarea globală a linkului prin @link-colorși aplicați sublinierea linkului numai pe:hover

Aceste stiluri pot fi găsite în scaffolding.less.

Normalize.css

Pentru o redare îmbunătățită între browsere, folosim Normalize.css , un proiect de Nicolas Gallagher și Jonathan Neal .

Containere

Bootstrap necesită un element de conținut pentru a încheia conținutul site-ului și pentru a găzdui sistemul nostru de grilă. Puteți alege unul dintre cele două containere pe care să le folosiți în proiectele dvs. Rețineți că, din cauza paddingși mai mult, niciunul dintre containere nu este imbricabil.

Utilizați .containerpentru un container cu lățime fixă receptiv.

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

Utilizați .container-fluidpentru un container cu lățime completă, care se întinde pe întreaga lățime a ferestrei dvs. de vizualizare.

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

Bootstrap include un sistem de rețea fluid mobil, receptiv, care se scalează în mod corespunzător până la 12 coloane pe măsură ce dimensiunea dispozitivului sau a ferestrei de vizualizare crește. Include clase predefinite pentru opțiuni ușoare de aspect, precum și mix-uri puternice pentru generarea de aspecte mai semantice .

Introducere

Sistemele de grilă sunt folosite pentru a crea aspecturi de pagină printr-o serie de rânduri și coloane care găzduiesc conținutul dvs. Iată cum funcționează sistemul de grilă Bootstrap:

Rândurile trebuie plasate într .container-o (lățime fixă) sau .container-fluid(lățime completă) pentru alinierea și umplutura corespunzătoare.
Utilizați rânduri pentru a crea grupuri orizontale de coloane.
Conținutul trebuie plasat în coloane și numai coloanele pot fi copii imediate ale rândurilor.
Clasele de grilă predefinite precum .rowși .col-xs-4sunt disponibile pentru realizarea rapidă a machetelor de grilă. Mai puține mixine pot fi, de asemenea, folosite pentru mai multe aspecte semantice.
Coloanele creează jgheaburi (spații între conținutul coloanei) prin padding. Această umplutură este compensată în rânduri pentru prima și ultima coloană prin marjă negativă pe .rows.
Marja negativă este motivul pentru care exemplele de mai jos sunt depășite. Este astfel încât conținutul din coloanele de grilă să fie aliniat cu conținutul non-grilă.
Coloanele de grilă sunt create prin specificarea numărului de douăsprezece coloane disponibile pe care doriți să le acoperiți. De exemplu, trei coloane egale ar folosi trei .col-xs-4.
Dacă mai mult de 12 coloane sunt plasate într-un singur rând, fiecare grup de coloane suplimentare se va încheia, ca o singură unitate, pe o nouă linie.
Clasele de grilă se aplică dispozitivelor cu lățimi de ecran mai mari sau egale cu dimensiunile punctelor de întrerupere și suprascriu clasele de grilă care vizează dispozitive mai mici. Prin urmare, de exemplu, aplicarea oricărei .col-md-*clase unui element nu va afecta doar stilul acestuia pe dispozitivele medii, ci și pe dispozitivele mari dacă o .col-lg-*clasă nu este prezentă.

Priviți exemplele pentru aplicarea acestor principii în codul dvs.

Interogări media

Folosim următoarele interogări media în fișierele noastre Less pentru a crea punctele de întrerupere cheie în sistemul nostru de grilă.

/* 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) { ... }

Ocazional, extindem aceste interogări media pentru a include o max-widthlimitare CSS la un set mai restrâns de dispozitive.

@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) { ... }

Opțiuni de grilă

Vedeți cum funcționează aspectele sistemului de grilă Bootstrap pe mai multe dispozitive cu un tabel la îndemână.

	Dispozitive foarte mici Telefoane (<768px)	Dispozitive mici Tablete (≥768px)	Dispozitive medii Desktopuri (≥992px)	Dispozitive mari Desktopuri (≥1200px)
Comportamentul grilei	Orizontală în orice moment	Restrâns pentru a începe, orizontal deasupra punctelor de întrerupere
Lățimea containerului	Niciuna (auto)	750px	970px	1170px
Prefixul clasei	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# de coloane	12
Lățimea coloanei	Auto	~62px	~81px	~97px
Latimea jgheabului	30px (15px pe fiecare parte a unei coloane)
Încadrabil	da
Compensare	da
Ordinea coloanelor	da

Exemplu: stivuite la orizontală

Folosind un singur set de .col-md-*clase de grilă, puteți crea un sistem de grilă de bază care începe stivuit pe dispozitive mobile și tablete (gama foarte mică până la mică) înainte de a deveni orizontal pe dispozitive desktop (medii). Plasați coloanele de grilă în orice .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>

Exemplu: Recipient de lichid

Transformați orice aspect al grilei cu lățime fixă într-un aspect cu lățime completă, schimbând cel mai exterior .containerîn .container-fluid.

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

Exemplu: mobil și desktop

Nu doriți ca coloanele dvs. să fie pur și simplu stivuite în dispozitive mai mici? Utilizați clasele de grilă de dispozitive extra mici și medii adăugând .col-xs-* .col-md-*la coloanele dvs. Consultați exemplul de mai jos pentru o idee mai bună despre cum funcționează totul.

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

Exemplu: mobil, tabletă, desktop

Construiți-vă pe exemplul anterior creând aspecte și mai dinamice și mai puternice cu .col-sm-*clasele pentru tablete.

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

Exemplu: împachetarea coloanei

Dacă mai mult de 12 coloane sunt plasate într-un singur rând, fiecare grup de coloane suplimentare se va încheia, ca o singură unitate, pe o nouă linie.

.col-xs-9

.col-xs-4
Deoarece 9 + 4 = 13 > 12, acest div cu 4 coloane este înfășurat pe o nouă linie ca o unitate contigue.

.col-xs-6
Coloanele ulterioare continuă de-a lungul liniei noi.

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

Resetează coloana receptivă

Cu cele patru niveluri de grile disponibile, este obligat să întâmpinați probleme în care, la anumite puncte de întrerupere, coloanele dvs. nu se clarifică destul de bine, deoarece una este mai înaltă decât cealaltă. Pentru a remedia acest lucru, utilizați o combinație de a .clearfixși clasele noastre de utilitare receptive .

.col-xs-6 .col-sm-3
Redimensionați-vă fereastra de vizualizare sau verificați-l pe telefon pentru un exemplu.

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

Pe lângă ștergerea coloanelor la punctele de întrerupere receptive, poate fi necesar să resetați decalajele, împingerea sau tragere . Vedeți acest lucru în acțiune în exemplul de grilă .

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

Coloane compensate

Mutați coloanele la dreapta folosind .col-md-offset-*clase. Aceste clase măresc marginea stângă a unei coloane cu *coloane. De exemplu, .col-md-offset-4se deplasează .col-md-4pe patru coloane.

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

De asemenea, puteți modifica decalajele de la nivelurile inferioare ale grilei cu .col-*-offset-0clase.

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

Cuibări coloane

Pentru a vă îngloba conținutul cu grila implicită, adăugați un nou .rowși un set de .col-sm-*coloane într-o .col-sm-*coloană existentă. Rândurile imbricate ar trebui să includă un set de coloane care se adună până la 12 sau mai puțin (nu este necesar să utilizați toate cele 12 coloane disponibile).

Nivelul 1: .col-sm-9

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

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

Ordinea coloanelor

Schimbați cu ușurință ordinea coloanelor noastre de grilă încorporate cu .col-md-push-*și .col-md-pull-*clasele modificatoare.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-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>

Mai puține mixuri și variabile

Pe lângă clasele de grilă preconstruite pentru machete rapide, Bootstrap include mai puține variabile și mixuri pentru a genera rapid propriile machete simple și semantice.

Variabile

Variabilele determină numărul de coloane, lățimea jgheabului și punctul de interogare media la care să înceapă coloanele plutitoare. Le folosim pentru a genera clasele de grilă predefinite documentate mai sus, precum și pentru mixurile personalizate enumerate mai jos.

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

Mixine

Mixinele sunt utilizate împreună cu variabilele grilei pentru a genera CSS semantic pentru coloanele de grilă individuale.

// 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));
  }
}

Exemplu de utilizare

Puteți modifica variabilele la propriile valori personalizate sau pur și simplu utilizați mixin-urile cu valorile lor implicite. Iată un exemplu de utilizare a setărilor implicite pentru a crea un aspect cu două coloane cu un decalaj între.

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

Titluri

Toate titlurile HTML, <h1>prin <h6>, sunt disponibile. .h1sunt de asemenea disponibile cursuri prin intermediul .h6, pentru atunci când doriți să potriviți stilul fontului unui titlu, dar doriți totuși ca textul să fie afișat inline.

h1. Titlu bootstrap	Semibold 36 px
h2. Titlu bootstrap	Semibold 30px
h3. Titlu bootstrap	Semibold 24px
h4. Titlu bootstrap	Semibold 18px
h5. Titlu bootstrap	Semibold 14px
h6. Titlu bootstrap	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>

Creați text secundar mai ușor în orice titlu cu o <small>etichetă generică sau .smallclasa.

h1. Titlu Bootstrap Text secundar

h2. Titlu Bootstrap Text secundar

h3. Titlu Bootstrap Text secundar

h4. Titlu Bootstrap Text secundar

h5. Titlu Bootstrap Text secundar

h6. Titlu Bootstrap Text secundar

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

Copie a corpului

Valoarea implicită globală a Bootstrap font-sizeeste 14px , cu o valoare line-heightde 1.428 . Acest lucru se aplică <body>tuturor paragrafelor. În plus,<p> (paragrafele) primesc o marjă inferioară de jumătate din înălțimea liniei lor calculată (10px în mod implicit).

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>

Copia corpului principal

Faceți un paragraf în evidență adăugând .lead.

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

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

Construit cu Mai puțin

Scara tipografică se bazează pe două variabile Less în variabile.less : @font-size-baseși @line-height-base. Prima este dimensiunea fontului de bază folosită pe tot parcursul, iar a doua este înălțimea liniei de bază. Folosim acele variabile și câteva calcule simple pentru a crea marginile, umpluturile și înălțimile liniilor de toate tipurile noastre și altele. Personalizează-le și Bootstrap se adaptează.

Elemente de text inline

Text marcat

Pentru a evidenția o serie de text datorită relevanței sale într-un alt context, utilizați <mark>eticheta.

Puteți utiliza eticheta mark pentrua scoate in evidentatext.

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

Text șters

Pentru a indica blocurile de text care au fost șterse, utilizați <del>eticheta.

~~Această linie de text este menită să fie tratată ca text șters.~~

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

Text barat

Pentru a indica blocuri de text care nu mai sunt relevante, utilizați <s>eticheta.

~~Această linie de text este menită să fie tratată ca nemaifiind exactă.~~

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

Text inserat

Pentru a indica completări la document, utilizați <ins>eticheta.

Această linie de text este menită să fie tratată ca o completare la document.

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

Text subliniat

Pentru a sublinia textul utilizați <u>eticheta.

Această linie de text va fi redată subliniată

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

Utilizați etichetele de accentuare implicite ale HTML cu stiluri ușoare.

Text mic

Pentru a reduce accentul în linie sau blocuri de text, utilizați <small>eticheta pentru a seta textul la 85% din dimensiunea părintelui. Elementele de antet primesc propriile elemente font-sizeimbricate <small>.

Puteți utiliza alternativ un element inline cu .smallîn locul oricărui <small>.

Această linie de text este menită să fie tratată ca litere mici.

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

Îndrăzneţ

Pentru a sublinia un fragment de text cu o greutate mai mare a fontului.

Următorul fragment de text este redat ca text aldine .

<strong>rendered as bold text</strong>

Cursive

Pentru sublinierea unui fragment de text cu caractere cursive.

Următorul fragment de text este redat ca text cu caractere italice .

<em>rendered as italicized text</em>

Elemente alternative

Simțiți-vă liber să utilizați <b>și <i>în HTML5. <b>este menit să evidențieze cuvinte sau expresii fără a transmite o importanță suplimentară, în timp ce <i>este mai ales pentru voce, termeni tehnici etc.

Clasele de aliniere

Realliniați cu ușurință textul la componente cu clase de aliniere a textului.

Text aliniat la stânga.

Text aliniat la centru.

Text aliniat la dreapta.

Text justificat.

Fără text final.

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

Clasele de transformare

Transformați textul în componente cu clase de scriere cu majuscule.

Text cu litere mici.

Text cu majuscule.

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

Abrevieri

Implementare stilizată a <abbr>elementului HTML pentru abrevieri și acronime pentru a afișa versiunea extinsă la trecerea cursorului. Abrevierile cu un titleatribut au un chenar de jos punctat ușor și un cursor de ajutor la trecerea cu mouse-ul, oferind context suplimentar la trecerea cu mouse-ul și utilizatorilor de tehnologii de asistență.

Abreviere de bază

O abreviere a cuvântului atribut este attr .

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

Inițialism

Adaugă .initialismla o abreviere pentru o dimensiune puțin mai mică a fontului.

HTML este cel mai bun lucru de la feliile de pâine.

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

Adrese

Prezentați informații de contact pentru cel mai apropiat strămoș sau pentru întregul corp de lucru. Păstrați formatarea terminând toate liniile cu <br>.

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

Nume complet
[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>

Citate bloc

Pentru a cita blocuri de conținut dintr-o altă sursă în documentul dvs.

Citate bloc implicită

Înfășurați <blockquote>orice HTML ca citat. Pentru citate drepte, vă recomandăm un <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>

Opțiuni pentru citate blocate

Schimbări de stil și conținut pentru variații simple ale unui standard <blockquote>.

Denumirea unei surse

Adăugați un <footer>pentru identificarea sursei. Înveliți numele lucrării sursă în <cite>.

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

Cineva celebru în Titlul sursă

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

Afișări alternative

Adăugați .blockquote-reversepentru un blockquote cu conținut aliniat la dreapta.

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

Cineva celebru în Titlul sursă

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

Liste

Neordonat

O listă de articole în care ordinea nu contează în mod explicit.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- 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>

Ordonat

O listă de articole în care ordinea contează în mod explicit.

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

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

Nestilat

Eliminați marginea implicită list-styleși din stânga de pe elementele din listă (doar copiii imediati). Acest lucru se aplică numai articolelor imediate din lista copiilor , ceea ce înseamnă că va trebui să adăugați clasa și pentru orice liste imbricate.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- 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>

In linie

Așezați toate elementele din listă pe o singură linie cu display: inline-block;o ușoară umplutură.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Descriere

O listă de termeni cu descrierile asociate acestora.

Liste de descriere: O listă de descriere este perfectă pentru definirea termenilor.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Descriere orizontală

Faceți termeni și descrieri <dl>aliniați unul lângă altul. Începe stivuit ca <dl>s-urile implicite, dar când bara de navigare se extinde, la fel și acestea.

Liste de descriere: O listă de descriere este perfectă pentru definirea termenilor.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
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-truncare

Listele de descriere orizontale vor trunchia termenii care sunt prea lungi pentru a se potrivi în coloana din stânga cu text-overflow. În ferestrele de vizualizare mai înguste, acestea se vor schimba la aspectul implicit stivuit.

In linie

Înfășurați fragmente de cod inline cu <code>.

De exemplu, <section>ar trebui să fie înfășurat ca inline.

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

Intrarea utilizatorului

Utilizați <kbd>pentru a indica intrarea care este de obicei introdusă prin tastatură.

Pentru a schimba directoare, tastați cdurmat de numele directorului.
Pentru a edita setările, apăsați 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>

Bloc de bază

Utilizați <pre>pentru mai multe linii de cod. Asigurați-vă că scăpați de orice paranteze unghiulare din cod pentru o randare corectă.

<p>Exemplu de text aici...</p>

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

Puteți adăuga opțional .pre-scrollableclasa, care va seta o înălțime maximă de 350 px și va oferi o bară de derulare pe axa y.

Variabile

Pentru a indica variabile utilizați <var>eticheta.

y = m x + b

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

Eșantion de ieșire

Pentru a indica blocurile eșantion de ieșire dintr-un program, utilizați <samp>eticheta.

Acest text este menit să fie tratat ca exemplu de ieșire dintr-un program de calculator.

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

Exemplu de bază

Pentru stilul de bază - căptușeală ușoară și numai separatoare orizontale - adăugați clasa de bază .tablela orice <table>. Poate părea super redundant, dar având în vedere utilizarea pe scară largă a tabelelor pentru alte plugin-uri, cum ar fi calendare și alegeri de date, am optat să izolăm stilurile noastre personalizate de tabel.

Legendă opțională pentru tabel.
#	Nume	Numele de familie	Nume de utilizator
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry	Pasarea	@stare de nervozitate

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

Rânduri în dungi

Utilizați .table-stripedpentru a adăuga dungi zebră la orice rând de tabel din <tbody>.

Compatibilitate între browsere

Tabelele cu dungi sunt stilate prin :nth-childselectorul CSS, care nu este disponibil în Internet Explorer 8.

#	Nume	Numele de familie	Nume de utilizator
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry	Pasarea	@stare de nervozitate

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

Masă mărginită

Adăugați .table-borderedpentru chenarele de pe toate părțile tabelului și ale celulelor.

#	Nume	Numele de familie	Nume de utilizator
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry	Pasarea	@stare de nervozitate

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

Treceți cu mouse-ul pe rânduri

Adăugați .table-hoverpentru a activa starea de trecere cu mouse-ul pe rândurile de tabel dintr-un <tbody>.

#	Nume	Numele de familie	Nume de utilizator
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry	Pasarea	@stare de nervozitate

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

Tabel condensat

Adăugați .table-condensedpentru a face mesele mai compacte, tăind umplutura celulară în jumătate.

#	Nume	Numele de familie	Nume de utilizator
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

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

Clasele contextuale

Utilizați clase contextuale pentru a colora rândurile de tabel sau celulele individuale.

Clasă	Descriere
`.active`	Aplică culoarea hoverului unui anumit rând sau celulă
`.success`	Indică o acțiune reușită sau pozitivă
`.info`	Indică o schimbare sau o acțiune informativă neutră
`.warning`	Indică un avertisment care ar putea necesita atenție
`.danger`	Indică o acțiune periculoasă sau potențial negativă

#	Titlul coloanei	Titlul coloanei	Titlul coloanei
1	Conținutul coloanei	Conținutul coloanei	Conținutul coloanei
2	Conținutul coloanei	Conținutul coloanei	Conținutul coloanei
3	Conținutul coloanei	Conținutul coloanei	Conținutul coloanei
4	Conținutul coloanei	Conținutul coloanei	Conținutul coloanei
5	Conținutul coloanei	Conținutul coloanei	Conținutul coloanei
6	Conținutul coloanei	Conținutul coloanei	Conținutul coloanei
7	Conținutul coloanei	Conținutul coloanei	Conținutul coloanei
8	Conținutul coloanei	Conținutul coloanei	Conținutul coloanei
9	Conținutul coloanei	Conținutul coloanei	Conținutul coloanei

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

Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga semnificație unui rând de tabel sau unei celule individuale oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (textul vizibil în rândul/celula relevantă din tabel), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .sr-onlyclasa.

Tabele receptive

Creați tabele receptive prin împachetare oricare.table încadrându - .table-responsivele pentru a le face să deruleze orizontal pe dispozitive mici (sub 768 px). Când vizualizați ceva mai mare de 768 px lățime, nu veți vedea nicio diferență în aceste tabele.

Tăiere/troncare verticală

Tabelele responsive folosesc overflow-y: hidden, care decupează orice conținut care depășește marginile de jos sau de sus ale tabelului. În special, aceasta poate tăia meniurile drop-down și alte widget-uri terță parte.

Firefox și seturi de câmpuri

Firefox are un stil incomod de set de câmpuri care implică widthcare interferează cu tabelul receptiv. Acest lucru nu poate fi suprascris fără un hack specific Firefox pe care nu îl oferim în Bootstrap:

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

Pentru mai multe informații, citiți acest răspuns Stack Overflow .

#	Titlul tabelului	Titlul tabelului	Titlul tabelului	Titlul tabelului	Titlul tabelului	Titlul tabelului
1	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel
2	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel
3	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel

#	Titlul tabelului	Titlul tabelului	Titlul tabelului	Titlul tabelului	Titlul tabelului	Titlul tabelului
1	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel
2	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel
3	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel

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

Exemplu de bază

Controalele individuale ale formularelor primesc automat un stil global. Toate elementele textuale <input>, <textarea>, și <select>cu .form-controlsunt setate în width: 100%;mod implicit. Înfășurați etichetele și comenzile .form-grouppentru o distanță optimă.

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

Nu amestecați grupuri de formulare cu grupuri de intrare

Nu amestecați grupurile de formulare direct cu grupurile de intrare . În schimb, imbricați grupul de intrare în interiorul grupului de formulare.

Formular inline

Adăugați .form-inlinela formularul dvs. (care nu trebuie să fie neapărat un <form>) pentru controalele aliniate la stânga și blocuri inline. Acest lucru se aplică numai formularelor din ferestrele de vizualizare care au o lățime de cel puțin 768 px.

Poate necesita lățimi personalizate

Intrările și selectările s-au width: 100%;aplicat implicit în Bootstrap. În formularele inline, le resetăm width: auto;astfel încât mai multe controale să poată locui pe aceeași linie. În funcție de aspectul dvs., pot fi necesare lățimi personalizate suplimentare.

Adăugați întotdeauna etichete

Cititoarele de ecran vor avea probleme cu formularele dvs. dacă nu includeți o etichetă pentru fiecare intrare. Pentru aceste formulare inline, puteți ascunde etichetele folosind .sr-onlyclasa. Există și alte metode alternative de furnizare a unei etichete pentru tehnologiile de asistență, cum ar fi aria-labelatributul sau aria-labelledby. titleDacă niciunul dintre acestea nu este prezent, cititorii de ecran pot recurge la utilizarea placeholderatributului, dacă este prezent, dar rețineți că utilizarea lui placeholderca înlocuitor pentru alte metode de etichetare nu este recomandată.

<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 orizontală

Utilizați clasele de grilă predefinite de Bootstrap pentru a alinia etichetele și grupurile de controale de formular într-un aspect orizontal prin adăugarea .form-horizontalla formular (care nu trebuie să fie un <form>). Procedând astfel, .form-groups-ul se comportă ca rânduri de grilă, deci nu este nevoie de .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>

Controale acceptate

Exemple de controale de formular standard acceptate într-un exemplu de aspect de formular.

Intrări

Cel mai comun control al formularelor, câmpuri de introducere bazate pe text. Include suport pentru toate tipurile de HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, și color.

Declarația de tip este necesară

Intrările vor fi stilate complet numai dacă typesunt declarate corect.

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

Grupuri de intrare

Pentru a adăuga text integrat sau butoane înainte și/sau după orice text bazat pe text <input>, consultați componenta grupului de introducere .

Textarea

Controlul formularelor care acceptă mai multe linii de text. Schimbați rowsatributul după cum este necesar.

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

Casete de selectare și radiouri

Casetele de selectare sunt pentru a selecta una sau mai multe opțiuni dintr-o listă, în timp ce radiourile sunt pentru a selecta o opțiune din mai multe.

Casetele de selectare și radiourile dezactivate sunt acceptate, dar pentru a oferi un cursor „nepermis” la plasarea cursorului pe părinte <label>, va trebui să adăugați .disabledclasa la părinte .radio, .radio-inline, .checkbox, sau .checkbox-inline.

Implicit (stivuit)

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

Casete de selectare și radiouri în linie

Utilizați clasele .checkbox-inlinesau .radio-inlinepe o serie de casete de selectare sau radiouri pentru comenzile care apar pe aceeași linie.

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

Casete de selectare și radiouri fără text de etichetă

Dacă nu aveți text în <label>, intrarea este poziționată așa cum v-ați aștepta. Momentan funcționează numai pe casetele de selectare și radiouri non-inline. Nu uitați să furnizați în continuare o formă de etichetă pentru tehnologiile de asistență (de exemplu, folosind 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>

Selectează

Rețineți că multe meniuri de selecție native - și anume în Safari și Chrome - au colțuri rotunjite care nu pot fi modificate prin intermediul border-radiusproprietăților.

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

Pentru <select>controalele cu multipleatributul, sunt afișate implicit mai multe opțiuni.

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

Control static

Când trebuie să plasați text simplu lângă o etichetă de formular într-un formular, utilizați .form-control-staticclasa pe un <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>

Stare de focalizare

Înlăturăm stilurile implicite de outlinepe unele controale de formular și aplicăm a box-shadowîn locul său pentru :focus.

Demo`:focus`Stare

Exemplul de intrare de mai sus folosește stiluri personalizate în documentația noastră pentru a demonstra :focusstarea pe un .form-control.

Stare dezactivată

Adăugați disabledatributul boolean pe o intrare pentru a preveni interacțiunile utilizatorului. Intrările dezactivate par mai ușoare și adaugă un not-allowedcursor.

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

Seturi de câmpuri dezactivate

Adăugați disabledatributul la a <fieldset>pentru a dezactiva toate controalele dintr- <fieldset>o dată.

Avertisment cu privire la funcționalitatea link-ului`<a>`

În mod implicit, browserele vor trata toate comenzile de formulare native ( <input>, <select>și <button>elementele) din interiorul unui <fieldset disabled>ca fiind dezactivate, prevenind atât interacțiunile de la tastatură, cât și ale mouse-ului. Cu toate acestea, dacă formularul dvs. include și <a ... class="btn btn-*">elemente, acestea vor primi doar un stil pointer-events: none. După cum s-a menționat în secțiunea despre starea dezactivată pentru butoane (și în special în subsecțiunea pentru elementele de ancorare), această proprietate CSS nu este încă standardizată și nu este pe deplin acceptată în Opera 18 și mai jos, sau în Internet Explorer 11 și a câștigat nu împiedică utilizatorii de tastatură să poată concentra sau activa aceste legături. Deci, pentru a fi în siguranță, utilizați JavaScript personalizat pentru a dezactiva astfel de link-uri.

Compatibilitate între browsere

În timp ce Bootstrap va aplica aceste stiluri în toate browserele, Internet Explorer 11 și versiunile anterioare nu acceptă pe deplin disabledatributul pe un <fieldset>. Utilizați JavaScript personalizat pentru a dezactiva setul de câmpuri în aceste browsere.

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

Stare numai de citire

Adăugați readonlyatributul boolean pe o intrare pentru a preveni modificarea valorii intrării. Intrările numai pentru citire par mai ușoare (la fel ca intrările dezactivate), dar păstrează cursorul standard.

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

Text de ajutor

Text de ajutor la nivel de bloc pentru controalele formularului.

Asocierea textului de ajutor cu controalele formularului

Textul de ajutor ar trebui să fie asociat în mod explicit cu controlul formularului la care se referă folosind aria-describedbyatributul. Acest lucru va asigura că tehnologiile de asistență, cum ar fi cititoarele de ecran, vor anunța acest text de ajutor atunci când utilizatorul se concentrează sau intră în control.

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

Stări de validare

Bootstrap include stiluri de validare pentru stările de eroare, avertisment și succes pe controalele formularului. Pentru a utiliza, adăuga .has-warning, .has-error, sau .has-successla elementul părinte. Orice .control-label, .form-control, și .help-blockdin acel element vor primi stilurile de validare.

Transmiterea stării de validare către tehnologiile de asistență și utilizatorii daltonişti

Utilizarea acestor stiluri de validare pentru a indica starea unui control de formular oferă doar o indicație vizuală, bazată pe culoare, care nu va fi transmisă utilizatorilor tehnologiilor de asistență - cum ar fi cititoarele de ecran - sau utilizatorilor daltonieri.

Asigurați-vă că este furnizată și o indicație alternativă a stării. De exemplu, puteți include un indiciu despre stare în <label>textul controlului formularului în sine (cum este cazul în exemplul de cod următor), includeți un Glyphicon (cu text alternativ adecvat folosind .sr-onlyclasa - consultați exemplele Glyphicon ) sau oferind un bloc de text de ajutor suplimentar . În special pentru tehnologiile de asistență, controalelor de formular nevalide li se poate atribui și un aria-invalid="true"atribut.

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

Cu pictograme opționale

De asemenea, puteți adăuga pictograme opționale de feedback cu adăugarea .has-feedbackși pictograma din dreapta.

Pictogramele de feedback funcționează numai cu <input class="form-control">elemente textuale.

Pictograme, etichete și grupuri de intrare

Poziționarea manuală a pictogramelor de feedback este necesară pentru intrările fără etichetă și pentru grupurile de intrare cu un supliment în partea dreaptă. Sunteți încurajat să furnizați etichete pentru toate intrările din motive de accesibilitate. Dacă doriți să împiedicați afișarea etichetelor, ascundeți-le împreună cu .sr-onlyclasa. Dacă trebuie să faceți fără etichete, ajustați topvaloarea pictogramei de feedback. Pentru grupurile de intrare, ajustați rightvaloarea la o valoare adecvată a pixelilor, în funcție de lățimea suplimentului.

Transmiterea semnificației icoanei către tehnologiile de asistență

Pentru a vă asigura că tehnologiile de asistență – cum ar fi cititoarele de ecran – transmit corect semnificația unei pictograme, text ascuns suplimentar trebuie inclus în .sr-onlyclasă și asociat în mod explicit cu controlul formularului la care se referă folosind aria-describedby. Alternativ, asigurați-vă că sensul (de exemplu, faptul că există un avertisment pentru un anumit câmp de introducere a textului) este transmis într-o altă formă, cum ar fi modificarea textului real <label>asociat cu controlul formularului.

Deși următoarele exemple menționează deja starea de validare a controalelor respective de formular în <label>textul însuși, tehnica de mai sus (folosind .sr-onlytext și aria-describedby) a fost inclusă în scopuri ilustrative.

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

Pictograme opționale în forme orizontale și inline

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

Pictograme opționale cu `.sr-only`etichete ascunse

Dacă utilizați .sr-onlyclasa pentru a ascunde controlul unui formular <label>(în loc să utilizați alte opțiuni de etichetare, cum ar fi aria-labelatributul), Bootstrap va ajusta automat poziția pictogramei odată ce aceasta a fost adăugată.

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

Control dimensionarea

Setați înălțimi folosind clase precum .input-lgși setați lățimi folosind clase de coloane de tip grilă precum .col-lg-*.

Dimensiunea înălțimii

Creați controale de formă mai înalte sau mai scurte care se potrivesc cu dimensiunile butoanelor.

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

Dimensiunile grupurilor de forme orizontale

Măriți rapid etichetele și controalele de formular .form-horizontalprin adăugarea .form-group-lgsau .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>

Dimensiunea coloanei

Încadrați intrările în coloane de grilă sau în orice element părinte personalizat, pentru a aplica cu ușurință lățimile dorite.

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

Etichete pentru butoane

Utilizați clasele de butoane pe un element <a>, <button>, sau <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">

Utilizare specifică contextului

În timp ce clasele de butoane pot fi utilizate pe elemente <a>și <button>, numai <button>elementele sunt acceptate în componentele noastre de navigare și bară de navigare.

Link-uri care acționează ca butoane

Dacă <a>elementele sunt folosite pentru a acționa ca butoane – declanșând funcționalitatea în pagină, mai degrabă decât navigarea către un alt document sau secțiune din pagina curentă – ar trebui să li se acorde și un role="button".

Redare între browsere

Ca cea mai bună practică, vă recomandăm să folosiți <button>elementul ori de câte ori este posibil pentru a asigura randarea pe mai multe browsere.

Printre altele, există o eroare în Firefox <30 care ne împiedică să setăm butoanele bazate pe line-heightof <input>, făcându-le să nu se potrivească exact cu înălțimea altor butoane de pe Firefox.

Opțiuni

Utilizați oricare dintre clasele de butoane disponibile pentru a crea rapid un buton cu stil.

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

Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga semnificație unui buton oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile indicate de culoare sunt fie evidente din conținutul în sine (textul vizibil al butonului), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .sr-onlyclasa.

Dimensiuni

Vrei nasturi mai mari sau mai mici? Adăugați .btn-lg, .btn-sm, sau .btn-xspentru dimensiuni suplimentare.

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

Creați butoane la nivel de bloc—cele care se întind pe toată lățimea unui părinte—adăugând .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>

Stare activă

Butoanele vor apărea apăsate (cu un fundal mai întunecat, un chenar mai închis și o umbră inserată) când sunt active. Pentru <button>elemente, acest lucru se face prin :active. Pentru <a>elemente, se face cu .active. Cu toate acestea, puteți utiliza .activepe <button>s (și includeți aria-pressed="true"atributul) dacă aveți nevoie să replicați starea activă în mod programatic.

Element buton

Nu este nevoie să adăugați :active, deoarece este o pseudo-clasă, dar dacă trebuie să forțați aceeași apariție, continuați și adăugați .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>

Element de ancorare

Adăugați .activeclasa la <a>butoane.

Legătura principală Legătură

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

Stare dezactivată

Faceți ca butoanele să pară inaccesibile, estompându-le înapoi cu opacity.

Element buton

Adăugați disabledatributul la <button>butoane.

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

Compatibilitate între browsere

Dacă adăugați disabledatributul la un <button>, Internet Explorer 9 și mai jos va reda textul gri cu o umbră de text urâtă pe care nu o putem remedia.

Element de ancorare

Adăugați .disabledclasa la <a>butoane.

Legătura principală Legătură

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

Folosim .disabledaici ca o clasă de utilitate, similară cu .activeclasa comună, deci nu este necesar niciun prefix.

Avertisment privind funcționalitatea linkului

Această clasă pointer-events: noneîncearcă să dezactiveze funcționalitatea de legătură a lui <a>s, dar acea proprietate CSS nu este încă standardizată și nu este pe deplin acceptată în Opera 18 și versiunile anterioare sau în Internet Explorer 11. În plus, chiar și în browserele care acceptă pointer-events: none, tastatură navigarea rămâne neafectată, ceea ce înseamnă că utilizatorii de tastatură văzători și utilizatorii de tehnologii de asistență vor putea în continuare să activeze aceste linkuri. Deci, pentru a fi în siguranță, utilizați JavaScript personalizat pentru a dezactiva astfel de link-uri.

Imagini receptive

Imaginile din Bootstrap 3 pot fi adaptate prin adăugarea .img-responsiveclasei. Acest lucru se aplică și imaginii max-width: 100%;, astfel încât să se scaleze frumos la elementul părinte.height: auto;display: block;

Pentru a centra imaginile care folosesc .img-responsiveclasa, utilizați .center-blockîn loc de .text-center. Consultați secțiunea clase de ajutor pentru mai multe detalii despre .center-blockutilizare.

Imagini SVG și IE 8-10

În Internet Explorer 8-10, imaginile SVG .img-responsiveau dimensiuni disproporționate. Pentru a remedia acest lucru, adăugați width: 100% \9;acolo unde este necesar. Bootstrap nu aplică acest lucru automat, deoarece provoacă complicații altor formate de imagine.

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

Formele imaginii

Adăugați clase la un <img>element pentru a stila cu ușurință imaginile în orice proiect.

Compatibilitate între browsere

Rețineți că Internet Explorer 8 nu are suport pentru colțurile rotunjite.

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

Culorile contextuale

Transmite semnificația prin culoare cu o mână de clase de utilitate de accent. Acestea pot fi aplicate și link-urilor și se vor întuneca la trecerea cursorului, la fel ca stilurile noastre implicite de link.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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>

Confruntarea cu specificul

Uneori, clasele de accentuare nu pot fi aplicate din cauza specificului altui selector. În cele mai multe cazuri, o soluție suficientă este să vă înfășurați textul într-o <span>clasă.

Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul însuși (culorile contextuale sunt folosite doar pentru a întări semnificația care este deja prezentă în text/marcare), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .sr-onlyclasa .

Fundaluri contextuale

Similar cu clasele de culoare a textului contextual, setați cu ușurință fundalul unui element la orice clasă contextuală. Componentele de ancorare se vor întuneca la trecerea cu mouse-ul, la fel ca și clasele de text.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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>

Confruntarea cu specificul

Uneori, clasele de fundal contextuale nu pot fi aplicate din cauza specificului altui selector. În unele cazuri, o soluție suficientă este să împachetați conținutul elementului într-o <div>clasă.

Transmiterea sensului tehnologiilor de asistență

Ca și în cazul culorilor contextuale , asigurați-vă că orice semnificație transmisă prin culoare este, de asemenea, transmisă într-un format care nu este pur de prezentare.

Închide pictograma

Folosiți pictograma de închidere generică pentru a respinge conținut precum modal și alerte.

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

Carets

Utilizați semnele marcate pentru a indica funcționalitatea și direcția drop-down. Rețineți că marcajul implicit se va inversa automat în meniurile drop -up .

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

Plutește rapid

Flotați un element la stânga sau la dreapta cu o clasă. !importanteste inclus pentru a evita problemele de specificitate. Clasele pot fi folosite și ca mixine.

<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();
}

Centrați blocurile de conținut

Setați un element la display: blockși centrați prin margin. Disponibil ca mixin și clasă.

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

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

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

Clearfix

Ștergeți cu ușurință floats adăugând .clearfix la elementul părinte . Utilizează micro clearfix așa cum a fost popularizat de Nicolas Gallagher. Poate fi folosit și ca mixin.

<!-- 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();
}

Afișarea și ascunderea conținutului

Forțați ca un element să fie afișat sau ascuns ( inclusiv pentru cititoarele de ecran ) cu ajutorul claselor .showși . .hiddenAceste clase sunt folosite !importantpentru a evita conflictele de specificitate, la fel ca flotațiile rapide . Sunt disponibile numai pentru comutarea la nivel de bloc. Ele pot fi folosite și ca mixine.

.hideeste disponibil, dar nu afectează întotdeauna cititoarele de ecran și este depreciat începând cu v3.0.1. Folosește .hiddensau .sr-onlyîn loc.

În plus, .invisiblepoate fi folosit pentru a comuta doar vizibilitatea unui element, ceea ce înseamnă că acesta displaynu este modificat și elementul poate afecta în continuare fluxul documentului.

<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();
}

Cititor de ecran și conținut de navigare prin tastatură

Ascundeți un element pentru toate dispozitivele, cu excepția cititoarelor de ecran cu .sr-only. Combinați .sr-onlycu .sr-only-focusablepentru a afișa elementul din nou atunci când este focalizat (de exemplu, de către un utilizator doar cu tastatură). Necesar pentru a respecta cele mai bune practici de accesibilitate . Poate fi folosit și ca mixin.

<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();
}

Înlocuirea imaginii

Utilizați .text-hideclasa sau mixul pentru a ajuta la înlocuirea conținutului text al unui element cu o imagine de fundal.

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

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

Pentru o dezvoltare mai rapidă pentru dispozitive mobile, utilizați aceste clase de utilitate pentru afișarea și ascunderea conținutului pe dispozitiv prin interogare media. Sunt incluse, de asemenea, clase de utilitate pentru comutarea conținutului la imprimare.

Încercați să le utilizați pe o bază limitată și evitați să creați versiuni complet diferite ale aceluiași site. În schimb, folosiți-le pentru a completa prezentarea fiecărui dispozitiv.

Clasele disponibile

Utilizați o singură clasă sau o combinație a claselor disponibile pentru a comuta conținutul între punctele de întrerupere a ferestrei de vizualizare.

	Dispozitive foarte miciTelefoane (<768px)	Dispozitive miciTablete (≥768px)	Dispozitive mediiDesktop-uri (≥992px)	Dispozitive mariDesktop-uri (≥1200px)
`.visible-xs-*`	Vizibil	Ascuns	Ascuns	Ascuns
`.visible-sm-*`	Ascuns	Vizibil	Ascuns	Ascuns
`.visible-md-*`	Ascuns	Ascuns	Vizibil	Ascuns
`.visible-lg-*`	Ascuns	Ascuns	Ascuns	Vizibil
`.hidden-xs`	Ascuns	Vizibil	Vizibil	Vizibil
`.hidden-sm`	Vizibil	Ascuns	Vizibil	Vizibil
`.hidden-md`	Vizibil	Vizibil	Ascuns	Vizibil
`.hidden-lg`	Vizibil	Vizibil	Vizibil	Ascuns

Începând cu v3.2.0, .visible-*-*clasele pentru fiecare punct de întrerupere vin în trei variante, una pentru fiecare displayvaloare a proprietății CSS enumerată mai jos.

Grup de clase	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Deci, pentru xsecranele foarte mici ( ), de exemplu, .visible-*-*clasele disponibile sunt: .visible-xs-block, .visible-xs-inline, și .visible-xs-inline-block.

Clasele .visible-xs, .visible-sm, .visible-md, și .visible-lgexistă, de asemenea, dar sunt depreciate începând cu v3.2.0 . Ele sunt aproximativ echivalente cu .visible-*-block, cu excepția cazurilor speciale suplimentare pentru <table>elementele legate de comutare.

Cursuri de imprimare

Similar cu clasele responsive obișnuite, utilizați-le pentru a comuta conținutul pentru tipărire.

Clase	Browser	Imprimare
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Ascuns	Vizibil
`.hidden-print`	Vizibil	Ascuns

Clasa .visible-printexistă și ea, dar este depreciată începând cu v3.2.0. Este aproximativ echivalent cu .visible-print-block, cu excepția cazurilor speciale suplimentare pentru <table>elementele înrudite.

Cazuri de testare

Redimensionați browserul sau încărcați-vă pe diferite dispozitive pentru a testa clasele de utilitare receptive.

Vizibil pe...

Bifele verzi indică faptul că elementul este vizibil în fereastra curentă.

Extra mic ✔ Visible on x-small

Mic ✔ Visible on small

Mediu ✔ Visible on medium

Large ✔ Vizibil pe mare

Foarte mic și mic ✔ Visible on x-small and small

Medium and large ✔ Vizibil pe mediu și mare

Extra mic și mediu ✔ Visible on x-small and medium

Small and large ✔ Vizibil pe mici și mari

Extra small and large ✔ Vizibil pe x-mic și mare

Mici și mijlocii ✔ Visible on small and medium

Ascuns pe...

Aici, bifele verzi indică, de asemenea, că elementul este ascuns în fereastra curentă.

Extra mic ✔ Hidden on x-small

Mic ✔ Hidden on small

Mediu ✔ Hidden on medium

Large ✔ Ascuns pe mare

Foarte mic și mic ✔ Hidden on x-small and small

Medium and large ✔ Ascuns pe mediu și mare

Extra mic și mediu ✔ Hidden on x-small and medium

Small and large ✔ Ascuns pe mic și mare

Extra small and large ✔ Ascuns pe x-mic și mare

Mici și mijlocii ✔ Hidden on small and medium

CSS-ul Bootstrap este construit pe Less, un preprocesor cu funcționalități suplimentare precum variabile, mixuri și funcții pentru compilarea CSS. Cei care doresc să folosească fișierele sursă Less în loc de fișierele noastre CSS compilate pot folosi numeroasele variabile și mixuri pe care le folosim în cadrul cadrului.

Variabilele și mixurile de rețea sunt acoperite în secțiunea Sistem de rețea .

Compilarea Bootstrap

Bootstrap poate fi folosit în cel puțin două moduri: cu CSS-ul compilat sau cu fișierele sursă Less. Pentru a compila fișierele Less, consultați secțiunea Introducere pentru a vă configura mediul de dezvoltare pentru a rula comenzile necesare.

Instrumentele de compilare terță parte pot funcționa cu Bootstrap, dar nu sunt acceptate de echipa noastră de bază.

Variabile

Variabilele sunt utilizate pe parcursul întregului proiect ca o modalitate de a centraliza și partaja valorile utilizate în mod obișnuit, cum ar fi culorile, spațierea sau stivele de fonturi. Pentru o defalcare completă, consultați Personalizatorul .

Culori

Folosiți cu ușurință două scheme de culori: tonuri de gri și semantice. Culorile în tonuri de gri oferă acces rapid la nuanțele de negru utilizate în mod obișnuit, în timp ce semantice includ diverse culori atribuite unor valori contextuale semnificative.

@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;

Utilizați oricare dintre aceste variabile de culoare așa cum sunt sau reatribuiți-le unor variabile mai semnificative pentru proiectul dvs.

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

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

Schele

O mână de variabile pentru personalizarea rapidă a elementelor cheie ale scheletului site-ului dvs.

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

Legături

Modelați cu ușurință linkurile cu culoarea potrivită, cu o singură valoare.

// 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;
  }
}

Rețineți că @link-hover-colorfolosește o funcție, un alt instrument minunat de la Less, pentru a crea automat culoarea hover potrivită. Puteți utiliza darken, lighten, saturate, și desaturate.

Tipografie

Setați cu ușurință tipul de literă, dimensiunea textului, interfața și multe altele cu câteva variabile rapide. Bootstrap le folosește și pentru a oferi mixuri tipografice ușoare.

@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;

Pictograme

Două variabile rapide pentru personalizarea locației și a numelui fișierului pictogramelor dvs.

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

Componente

Componentele din Bootstrap folosesc unele variabile implicite pentru setarea valorilor comune. Iată cele mai des folosite.

@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;

Mixuri de furnizori

Mixin-urile de furnizori sunt mix-uri pentru a ajuta la suportarea mai multor browsere prin includerea tuturor prefixelor de furnizori relevante în CSS-ul dvs. compilat.

Dimensiunea cutiei

Resetați modelul cutiei componentelor dvs. cu un singur mixin. Pentru context, consultați acest articol util de la Mozilla .

Mixin-ul este depreciat începând cu v3.2.0, odată cu introducerea Autoprefixer. Pentru a păstra compatibilitatea cu înapoi, Bootstrap va continua să folosească mixin-ul intern până la Bootstrap v4.

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

Colturi rotunjite

Astăzi, toate browserele moderne acceptă proprietatea fără prefix border-radius. Ca atare, nu există .border-radius()mixin, dar Bootstrap include comenzi rapide pentru rotunjirea rapidă a două colțuri pe o anumită parte a unui obiect.

.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;
}

Cutie (Drop) umbre

Dacă publicul dvs. țintă folosește cele mai recente și mai bune browsere și dispozitive, asigurați-vă că utilizați box-shadowproprietatea pe cont propriu. Dacă aveți nevoie de suport pentru dispozitive Android mai vechi (pre-v4) și iOS (pre-iOS 5), utilizați mixin-ul depreciat pentru a prelua -webkitprefixul necesar.

Mixin-ul este depreciat începând cu v3.1.0, deoarece Bootstrap nu acceptă oficial platformele învechite care nu acceptă proprietatea standard. Pentru a păstra compatibilitatea cu înapoi, Bootstrap va continua să folosească mixin-ul intern până la Bootstrap v4.

Asigurați-vă că utilizați rgba()culori în umbrele casetei dvs., astfel încât acestea să se îmbine cât mai perfect cu fundalul.

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

Tranziții

Mixine multiple pentru flexibilitate. Setați toate informațiile de tranziție cu una sau specificați o întârziere și o durată separate, după cum este necesar.

Mixin-urile sunt depreciate începând cu v3.2.0, odată cu introducerea Autoprefixer. Pentru a păstra compatibilitatea inversă, Bootstrap va continua să folosească mixin-urile intern până la 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;
}

Transformări

Rotiți, scalați, translați (mutați) sau înclinați orice obiect.

.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;
}

Animații

Un singur mixin pentru utilizarea tuturor proprietăților de animație CSS3 într-o declarație și alte mixin pentru proprietăți individuale.

.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;
}

Opacitate

Setați opacitatea pentru toate browserele și oferiți o filterrezervă pentru IE8.

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

Text substituent

Furnizați context pentru controalele formularului în fiecare câmp.

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

Coloane

Generați coloane prin CSS într-un singur element.

.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;
}

Gradiente

Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.

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

You can also specify the angle of a standard two-color, linear gradient:

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

If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.

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

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:

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

Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using the .reset-filter() mixin alongside background-image: none;.

Utility mixins

Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.

Clearfix

Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallagher.

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

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

Horizontal centering

Quickly center any element within its parent. Requires width or max-width to be set.

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

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

Sizing helpers

Specify the dimensions of an object more easily.

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

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

Resizable textareas

Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).

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

Truncating text

Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.

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

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

Retina images

Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.

.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);
}

While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.

What's included

Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.

Path	Description
`lib/`	Ruby gem code (Sass configuration, Rails and Compass integrations)
`tasks/`	Converter scripts (turning upstream Less to Sass)
`test/`	Compilation tests
`templates/`	Manifestul pachetului busolă
`vendor/assets/`	Fișiere Sass, JavaScript și fonturi
`Rakefile`	Sarcini interne, cum ar fi greblarea și conversia

Vizitați depozitul GitHub al portului Sass pentru a vedea aceste fișiere în acțiune.

Instalare

Pentru informații despre cum să instalați și să utilizați Bootstrap pentru Sass, consultați depozitul GitHub readme . Este cea mai actualizată sursă și include informații pentru utilizarea cu șine, busolă și proiecte standard Sass.

Bootstrap pentru Sass

CSS

Prezentare generală

HTML5 doctype

În primul rând mobil

Tipografie și link-uri

Normalize.css

Containere

Sistem grilă

Introducere

Interogări media

Opțiuni de grilă

Exemplu: stivuite la orizontală

Exemplu: Recipient de lichid

Exemplu: mobil și desktop

Exemplu: mobil, tabletă, desktop

Exemplu: împachetarea coloanei

Resetează coloana receptivă

Coloane compensate

Cuibări coloane

Ordinea coloanelor

Mai puține mixuri și variabile

Variabile

Mixine

Exemplu de utilizare

Tipografie

Titluri

h1. Titlu bootstrap

h2. Titlu bootstrap

h3. Titlu bootstrap

h4. Titlu bootstrap

h5. Titlu bootstrap

h6. Titlu bootstrap

h1. Titlu Bootstrap Text secundar

h2. Titlu Bootstrap Text secundar

h3. Titlu Bootstrap Text secundar

h4. Titlu Bootstrap Text secundar

h5. Titlu Bootstrap Text secundar

h6. Titlu Bootstrap Text secundar

Copie a corpului

Copia corpului principal

Construit cu Mai puțin

Elemente de text inline

Text marcat

Text șters

Text barat

Text inserat

Text subliniat

Text mic

Îndrăzneţ

Cursive

Elemente alternative

Clasele de aliniere

Clasele de transformare

Abrevieri

Abreviere de bază

Inițialism

Adrese

Citate bloc

Citate bloc implicită

Opțiuni pentru citate blocate

Denumirea unei surse

Afișări alternative

Liste

Neordonat

Ordonat

Nestilat

In linie

Descriere

Descriere orizontală

Auto-truncare

Cod

In linie

Intrarea utilizatorului

Bloc de bază

Variabile

Eșantion de ieșire

Mese

Exemplu de bază

Rânduri în dungi

Compatibilitate între browsere

Demo`:focus`Stare

Avertisment cu privire la funcționalitatea link-ului`<a>`

Pictograme opționale cu `.sr-only`etichete ascunse