Ikseb l-aktar dettalji dwar il-biċċiet ewlenin tal-infrastruttura ta' Bootstrap, inkluż l-approċċ tagħna għal żvilupp tal-web aħjar, aktar mgħaġġel u aktar b'saħħtu.

Doctype HTML5

Bootstrap jagħmel użu minn ċerti elementi HTML u proprjetajiet CSS li jeħtieġu l-użu tad-doctype HTML5. Inkludiha fil-bidu tal-proġetti kollha tiegħek.

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

Mobile l-ewwel

Bil-Bootstrap 2, żidna stili mhux obbligatorji favur il-mowbajl għal aspetti ewlenin tal-qafas. Bil-Bootstrap 3, ktibna mill-ġdid il-proġett biex ikun faċli għall-mowbajl mill-bidu. Minflok ma żżid stili mobbli fakultattivi, huma moħmija fil-qalba. Fil-fatt, Bootstrap huwa l-ewwel mobbli . L-ewwel stili mobbli jistgħu jinstabu fil-librerija kollha minflok f'fajls separati.

Biex tiżgura rendering xieraq u touch zooming, żid il-meta tag tal-viewport ma' <head>.

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

Tista' tiddiżattiva l-kapaċitajiet ta' zooming fuq apparat mobbli billi żżid user-scalable=nomal-meta tag tal-viewport. Dan iwaqqaf iż-żum, li jfisser li l-utenti jistgħu jiskrolljaw biss, u jirriżulta fis-sit tiegħek iħossu daqsxejn aktar bħal applikazzjoni nattiva. B'mod ġenerali, aħna ma nirrakkomandawx dan fuq kull sit, għalhekk oqgħod attent!

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

Tipografija u links

Bootstrap jistabbilixxi stili ta' wiri, tipografija u link globali bażiċi. Speċifikament, aħna:

Issettja background-color: #fff;fuq ilbody
Uża l- @font-family-base, @font-size-base, u l- @line-height-baseattributi bħala l-bażi tipografika tagħna
Issettja l-kulur tal-link globali permezz @link-coloru applika s-sottolinja tal-link fuq biss:hover

Dawn l-istili jistgħu jinstabu fi ħdan scaffolding.less.

Normalizza.css

Għal rendering imtejjeb bejn il-browser, nużaw Normalize.css , proġett minn Nicolas Gallagher u Jonathan Neal .

Kontenituri

Bootstrap jeħtieġ element li jkun fih biex ikebbeb il-kontenut tas-sit u jospita s-sistema tal-grilja tagħna. Tista' tagħżel wieħed miż-żewġ kontenituri biex tużah fil-proġetti tiegħek. Innota li, minħabba paddingu aktar, l-ebda kontenitur ma huwa nestable.

Uża .containergħal kontenitur b'wisa' fiss li jirrispondu.

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

Uża .container-fluidgħal kontenitur wisa 'sħiħ, li jkopri l-wisa' kollu tal-vetrina tiegħek.

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

Bootstrap jinkludi sistema ta 'grilja tal-fluwidu tal-ewwel li tirreaġixxi u mobbli li tiskala sa 12-il kolonna kif jiżdied id-daqs tal-apparat jew tal-vetrina. Jinkludi klassijiet predefiniti għal għażliet ta 'tqassim faċli, kif ukoll mixins b'saħħithom għall-ġenerazzjoni ta' layouts aktar semantiċi .

Introduzzjoni

Is-sistemi tal-grilja jintużaw għall-ħolqien ta’ layouts tal-paġni permezz ta’ serje ta’ ringieli u kolonni li fihom il-kontenut tiegħek. Hawn kif taħdem is-sistema tal-grilja Bootstrap:

Ir-ringieli għandhom jitqiegħdu fi ħdan .container(wisa 'fiss) jew .container-fluid(wisa' sħiħ) għal allinjament u ikkuttunar xierqa.
Uża ringieli biex toħloq gruppi orizzontali ta 'kolonni.
Il-kontenut għandu jitqiegħed f'kolonni, u l-kolonni biss jistgħu jkunu tfal immedjati ta' ringieli.
Klassijiet tal-grilja predefiniti bħal .rowu .col-xs-4huma disponibbli biex isiru malajr layouts tal-grilja. Inqas mixins jistgħu jintużaw ukoll għal layouts aktar semantiċi.
Kolonni joħolqu kanali (lakuni bejn il-kontenut tal-kolonna) permezz ta' padding. Dak il-kuttunar huwa kkumpensat f'ringieli għall-ewwel u l-aħħar kolonna permezz ta 'marġni negattiv fuq .rows.
Il-marġni negattiv huwa għaliex l-eżempji ta' hawn taħt huma barra. Huwa sabiex il-kontenut fi ħdan il-kolonni tal-grilja jkun inlinjat b'kontenut mhux tal-grilja.
Kolonni tal-grilja jinħolqu billi jiġi speċifikat in-numru ta' tnax-il kolonna disponibbli li tixtieq tifrex. Pereżempju, tliet kolonni ugwali jużaw tliet .col-xs-4.
Jekk aktar minn 12-il kolonna jitqiegħdu f'ringiela waħda, kull grupp ta' kolonni żejda se, bħala unità waħda, jgħaqqad fuq linja ġdida.
Il-klassijiet tal-grilja japplikaw għal apparati b'wisa' ta' skrins akbar minn jew daqs id-daqsijiet tal-punti ta' waqfien, u jegħlbu l-klassijiet tal-grilja mmirati lejn apparati iżgħar. Għalhekk, eż. l-applikazzjoni ta' kwalunkwe .col-md-*klassi għal element mhux biss se taffettwa l-istil tiegħu fuq apparati medji iżda wkoll fuq apparati kbar jekk .col-lg-*klassi ma tkunx preżenti.

Ħares lejn l-eżempji biex tapplika dawn il-prinċipji għall-kodiċi tiegħek.

Mistoqsijiet tal-midja

Aħna nużaw il-mistoqsijiet tal-midja li ġejjin fil-fajls Inqas tagħna biex noħolqu l-punti ta 'waqfien ewlenin fis-sistema tal-grilja tagħna.

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

Kultant nespandu fuq dawn il-mistoqsijiet tal-midja biex jinkludu max-widthtillimita CSS għal sett idjaq ta 'apparati.

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

Għażliet tal-grilja

Ara kif l-aspetti tas-sistema tal-grilja Bootstrap jaħdmu fuq diversi apparati b'tabella utli.

	Apparati żgħar żejda Telefowns (<768px)	Tagħmir żgħir Pilloli (≥768px)	Apparat medju Desktops (≥992px)	Apparat kbir Desktops (≥1200px)
Imġieba tal-grilja	Orizzontali f'kull ħin	Kollass biex tibda, orizzontali 'l fuq mill-punti ta' waqfien
Wisa' tal-kontenitur	Xejn (awto)	750px	970px	1170px
Prefiss tal-klassi	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ta’ kolonni	12
Wisa' tal-kolonna	Auto	~62px	~81px	~97px
Wisa' tal-kanal	30px (15px fuq kull naħa ta' kolonna)
Nestable	Iva
Offsets	Iva
L-ordni tal-kolonna	Iva

Eżempju: Stacked-to-orizzontali

Bl-użu ta 'sett wieħed ta' .col-md-*klassijiet ta 'grilja, tista' toħloq sistema ta 'grilja bażika li tibda f'munzelli fuq apparat mobbli u tagħmir tat-tablet (il-firxa żejjed żgħira għal żgħira) qabel ma ssir orizzontali fuq apparat tad-desktop (medju). Poġġi kolonni tal-grilja fi kwalunkwe .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>

Eżempju: Kontenitur tal-fluwidu

Dawwar kwalunkwe tqassim tal-grilja ta 'wisa' fissa f'tqassim ta 'wisa' sħiħ billi tbiddel l-aktar 'il barra tiegħek .containergħal .container-fluid.

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

Eżempju: Mobile u desktop

Ma tridx li l-kolonni tiegħek sempliċiment jinstammu f'apparat iżgħar? Uża l-klassijiet ta 'grilja ta' apparat żgħir u medju żejjed billi żżid .col-xs-* .col-md-*mal-kolonni tiegħek. Ara l-eżempju hawn taħt għal idea aħjar ta' kif jaħdem kollox.

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

Eżempju: Mobile, tablet, desktop

Ibni fuq l-eżempju preċedenti billi toħloq layouts saħansitra aktar dinamiċi u qawwija bil- .col-sm-*klassijiet tat-tablet.

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

Eżempju: It-tgeżwir tal-kolonna

Jekk aktar minn 12-il kolonna jitqiegħdu f'ringiela waħda, kull grupp ta' kolonni żejda se, bħala unità waħda, jgħaqqad fuq linja ġdida.

.col-xs-9

.col-xs-4
Peress li 9 + 4 = 13 > 12, dan id-div 4-kolonni kollha jitgeżwer fuq linja ġdida bħala unità waħda kontigwa.

.col-xs-6
Kolonni sussegwenti jkomplu tul il-linja l-ġdida.

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

Resets tal-kolonna li jirrispondu

Bl-erba' saffi ta' grilji disponibbli int marbut li tiltaqa' ma' kwistjonijiet fejn, f'ċerti breakpoints, il-kolonni tiegħek ma jiċċarawx sewwa peress li wieħed huwa ogħla mill-ieħor. Biex tirranġa dan, uża kombinazzjoni ta 'a .clearfixu l- klassijiet ta' utilità reattivi tagħna .

.col-xs-6 .col-sm-3 Id-daqs tal-
viewport tiegħek jew iċċekkjaha fuq it-telefon tiegħek għal eżempju.

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

Minbarra l-ikklerjar tal-kolonna f'punti ta' waqfien li jirrispondu, jista' jkollok bżonn tirrisettja l-offsets, pushes, jew pulls . Ara dan fl-azzjoni fl -eżempju tal-grilja .

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

Neħħi l-kanali

Neħħi l-kanali minn ringiela u kolonni mal- .row-no-guttersklassi.

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

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

.col-xs-6

<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Kolonni ta' tpaċija

Mexxi l-kolonni lejn il-lemin billi tuża .col-md-offset-*klassijiet. Dawn il-klassijiet iżidu l-marġni tax-xellug ta’ kolonna *b’kolonni. Per eżempju, .col-md-offset-4jiċċaqlaq .col-md-4fuq erba 'kolonni.

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

Tista' wkoll taqbeż l-offsets minn livelli ta' grilja aktar baxxi bi .col-*-offset-0klassijiet.

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

Kolonni li jbejtu

Biex tbejta l-kontenut tiegħek mal-grilja default, żid kolonni ġodda .rowu sett ta .col-sm-*' kolonna eżistenti .col-sm-*. Ringieli mdaħħla għandhom jinkludu sett ta’ kolonni li jammontaw għal 12 jew inqas (mhux meħtieġ li tuża t-12-il kolonna kollha disponibbli).

Livell 1: .col-sm-9

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

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

L-ordni tal-kolonna

Ibdel faċilment l-ordni tal-kolonni tal-grilja integrati tagħna bi klassijiet .col-md-push-*u .col-md-pull-*modifikaturi.

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

Inqas mixins u varjabbli

Minbarra l -klassijiet tal-grilja mibnija minn qabel għal layouts veloċi, Bootstrap jinkludi Inqas varjabbli u mixins biex tiġġenera malajr layouts sempliċi u semantiċi tiegħek.

Varjabbli

Varjabbli jiddeterminaw in-numru ta 'kolonni, il-wisa' tal-kanal, u l-punt ta 'mistoqsija tal-midja li fih jibdew il-kolonni f'wiċċ l-ilma. Aħna nużaw dawn biex niġġeneraw il-klassijiet tal-grilja predefiniti dokumentati hawn fuq, kif ukoll għall-mixins personalizzati elenkati hawn taħt.

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

Mixins

Mixins jintużaw flimkien mal-varjabbli tal-grilja biex jiġġeneraw CSS semantiċi għal kolonni tal-grilja individwali.

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

Eżempju ta' użu

Tista 'timmodifika l-varjabbli għall-valuri tad-dwana tiegħek stess, jew sempliċement tuża l-mixins bil-valuri awtomatiċi tagħhom. Hawn eżempju ta 'użu tas-settings default biex jinħoloq tqassim ta' żewġ kolonni b'vojt bejniethom.

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

Intestaturi

L-intestaturi HTML kollha, <h1>sa <h6>, huma disponibbli. .h1permezz ta' .h6klassijiet huma wkoll disponibbli, għal meta trid tqabbel l-istil tat-tipa ta' intestatura imma xorta trid li t-test tiegħek jintwera inline.

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

Oħloq test eħfef u sekondarju fi kwalunkwe intestatura <small>b'tikketta ġenerika jew il- .smallklassi.

h1. Intestatura Bootstrap Test sekondarju

h2. Intestatura Bootstrap Test sekondarju

h3. Intestatura Bootstrap Test sekondarju

h4. Intestatura Bootstrap Test sekondarju

h5. Intestatura Bootstrap Test sekondarju

h6. Intestatura Bootstrap Test sekondarju

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

Kopja tal-korp

Id-default globali ta' Bootstrap font-sizehuwa 14px , b'1.428 . Dan huwa applikat għall- u l-paragrafi kollha. Barra minn hekk, (il-paragrafi) jirċievu marġini t'isfel ta' nofs l-għoli tal-linja kkalkulat tagħhom (10px b'mod awtomatiku).line-height<body><p>

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>

Kopja tal-korp taċ-ċomb

Agħmel paragrafu jispikkaw billi żżid .lead.

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

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

Mibnija b'Inqas

L-iskala tipografika hija bbażata fuq żewġ varjabbli Inqas fil- varjabbli.less : @font-size-baseu @line-height-base. L-ewwel hija d-daqs tat-tipa bażi użata matul u t-tieni hija l-għoli tal-linja bażi. Aħna nużaw dawk il-varjabbli u xi matematika sempliċi biex noħolqu l-marġini, paddings, u line-heights tat-tip kollu tagħna u aktar. Ippersonalizzahom u Bootstrap jadatta.

Elementi tat-test inline

Test immarkat

Biex tenfasizza ġirja ta' test minħabba r-rilevanza tagħha f'kuntest ieħor, uża t- <mark>tikketta.

Tista' tuża t-tikketta tal-marka biexjenfasizzawtest.

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

Test imħassar

Biex tindika blokok ta' test li tħassru uża t- <del>tikketta.

~~Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala test imħassra.~~

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

Test barrat

Biex tindika blokok ta' test li m'għadhomx rilevanti uża t- <s>tikketta.

~~Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala li m'għadhiex preċiża.~~

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

Test imdaħħal

Biex tindika żidiet għad-dokument uża t- <ins>tikketta.

Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala żieda mad-dokument.

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

Test issottolinjat

Biex tissottolinja t-test uża t- <u>tikketta.

Din il-linja tat-test se tirrendi kif issottolinjat

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

Agħmel użu mit-tags ta' enfasi default ta' HTML bi stili ħfief.

Test żgħir

Biex tneħħi l-enfasi fuq inline jew blokki ta 'test, uża t- <small>tikketta biex tissettja t-test għal 85% tad-daqs tal-ġenitur. Elementi ta 'intestatura jirċievu tagħhom stess font-sizegħal nested<small> .

Tista' alternattivament tuża element inline ma .small' minflok kwalunkwe <small>.

Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala stampar fini.

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

Bold

Għall-enfasi ta' snippet ta' test b'tipa-piż itqal.

Is-snippet tat-test li ġej hija mogħtija bħala test b'tipa grassa .

<strong>rendered as bold text</strong>

Korsiv

Għall-enfasi ta' snippet ta' test bil-korsiv.

Is-snippet tat-test li ġej huwa mogħti bħala test korsiv .

<em>rendered as italicized text</em>

Elementi alternattivi

Ħossok liberu li tuża <b>u <i>fl-HTML5. <b>huwa maħsub biex jenfasizza kliem jew frażijiet mingħajr ma jwassal importanza addizzjonali filwaqt li <i>huwa l-aktar għal vuċi, termini tekniċi, eċċ.

Klassijiet ta' allinjament

Allinja mill-ġdid it-test faċilment għal komponenti bi klassijiet ta 'allinjament tat-test.

Test allinjat max-xellug.

Test allinjat fiċ-ċentru.

Test allinjat mal-lemin.

Test ġustifikat.

Ebda wrap test.

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

Klassijiet ta' trasformazzjoni

Ittrasforma t-test f'komponenti bi klassijiet ta' kapitalizzazzjoni tat-test.

Test imnaqqas.

Test b'majju.

Test b'kapital.

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

Abbrevjazzjonijiet

Implimentazzjoni stilizzata tal- <abbr>element tal-HTML għall-abbrevjazzjonijiet u l-akronimi biex turi l-verżjoni estiża fuq il-post. L-abbrevjazzjonijiet titleb'attribut għandhom bordura ta' isfel ħafifa bit-tikek u cursor ta' għajnuna fuq id-depożitu, li jipprovdu kuntest addizzjonali meta jduru u lill-utenti ta' teknoloġiji ta' assistenza.

Abbrevjazzjoni bażika

Abbrevjazzjoni tal-kelma attribut hija attr .

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

Inizjalizmu

Żid .initialismma' abbrevjazzjoni għal font-size kemmxejn iżgħar.

HTML huwa l-aħjar ħaġa peress ħobż imqatta '.

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

Indirizzi

Ippreżenta informazzjoni ta 'kuntatt għall-eqreb antenat jew il-korp kollu tax-xogħol. Ippreserva l-ifformattjar billi tispiċċa l-linji kollha b' <br>.

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

Isem sħiħ
[email protected]

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

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

Blockquotes

Biex tikkwota blokki ta' kontenut minn sors ieħor fid-dokument tiegħek.

Blockquote default

Kebbeb <blockquote>madwar kwalunkwe HTML bħala l-kwotazzjoni. Għal kwotazzjonijiet dritti, nirrakkomandaw <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>

Għażliet ta 'blockquote

Bidliet fl-istil u fil-kontenut għal varjazzjonijiet sempliċi fuq standard <blockquote>.

Ismijiet sors

Żid a <footer>għall-identifikazzjoni tas-sors. Kebbeb l-isem tax-xogħol tas-sors fi <cite>.

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

Xi ħadd famuż fit- Titolu Sors

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

Wirjiet alternattivi

Żid .blockquote-reversegħal blockquote b'kontenut allinjat mal-lemin.

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

Xi ħadd famuż fit- Titolu Sors

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

Listi

Mhux ordnat

Lista ta' oġġetti li fihom l-ordni ma jimpurtax b'mod espliċitu.

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>

Ordnat

Lista ta' oġġetti li fihom l-ordni espliċitament importanti.

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>

Unstyled

Neħħi l-marġni default list-styleu tax-xellug fuq l-oġġetti tal-lista (tfal immedjati biss). Dan japplika biss għal oġġetti tal-lista tat-tfal immedjati , li jfisser li jkollok bżonn iżżid il-klassi għal kwalunkwe listi mnaqqsa wkoll.

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>

F'konformità

Poġġi l-oġġetti kollha tal-lista fuq linja waħda bi display: inline-block;u ftit padding ħafif.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Deskrizzjoni

Lista ta' termini bid-deskrizzjonijiet assoċjati tagħhom.

Listi ta' deskrizzjoni: Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.
Euismod: Vestibulum id ligula porta felis euismod sempre 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>

Deskrizzjoni orizzontali

Agħmel termini u deskrizzjonijiet <dl>f'linja maġenb xulxin. Jibda f'munzelli bħal default <dl>s, iżda meta n-navbar tespandi, hekk jagħmlu dawn.

Listi ta' deskrizzjoni: Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.
Euismod: Vestibulum id ligula porta felis euismod sempre 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 sempre eget lacinia: Fusce dapibus, tellus ac cursus commodo, torttor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Awto-maqtugħin

Listi ta' deskrizzjoni orizzontali se jaqtgħu termini li huma twal wisq biex jidħlu fil-kolonna tax-xellug b' text-overflow. F'viewports idjaq, se jinbidlu għat-tqassim default stacked.

F'konformità

Kebbeb snippets inline ta 'kodiċi ma'<code> .

Per eżempju, <section>għandhom ikunu mgeżwra bħala inline.

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

Input tal-utent

Uża l-<kbd> biex tindika input li tipikament jiddaħħal permezz tat-tastiera.

Biex taqleb direttorji, ittajpja cdsegwit bl-isem tad-direttorju.
Biex teditja s-settings, agħfas 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>

Blokk bażiku

Uża <pre>għal linji multipli ta 'kodiċi. Kun żgur li taħrab kwalunkwe parentesi angolari fil-kodiċi għal rendering xieraq.

<p>Kampjun ta' test hawn...</p>

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

Tista' b'għażla żżid il- .pre-scrollableklassi, li tistabbilixxi għoli massimu ta' 350px u tipprovdi scrollbar tal-assi y.

Varjabbli

Biex tindika varjabbli uża t- <var>tikketta.

y = m x + b

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

Output tal-kampjun

Biex tindika l-output tal-kampjun tal-blokki minn programm uża t- <samp>tikketta.

Dan it-test huwa maħsub biex jiġi ttrattat bħala output ta' kampjun minn programm tal-kompjuter.

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

Eżempju bażiku

Għal stil bażiku—ikkuttunar ħafif u diviżuri orizzontali biss—żid il-klassi bażi .tablema' kwalunkwe <table>. Jista 'jidher super żejda, iżda minħabba l-użu mifrux ta' tabelli għal plugins oħra bħal kalendarji u pickers tad-data, għażilna li niżolaw l-istili ta 'tabelli tad-dwana tagħna.

It-tabella mhux obbligatorja.
#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@twitter

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

Ringieli strixxi

Uża .table-stripedbiex iżżid zebra-striping ma' kwalunkwe ringiela tal-mejda fi ħdan il- <tbody>.

Kompatibilità bejn il-browser

It-tabelli b'istrixxi huma stilati permezz tas- :nth-childselettur CSS, li mhuwiex disponibbli fl-Internet Explorer 8.

#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@twitter

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

Mejda mdawra

Żid .table-borderedgħall-fruntieri fuq in-naħat kollha tat-tabella u ċ-ċelloli.

#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@twitter

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

Hover ringieli

Żid .table-hoverbiex tippermetti stat ta' hover fuq ringieli tal-mejda fi ħdan <tbody>.

#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@twitter

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

Tabella kondensata

Żid .table-condensedbiex tagħmel it-tabelli aktar kompatti billi taqta' l-ikkuttunar taċ-ċelluli bin-nofs.

#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

Klassijiet kuntestwali

Uża klassijiet kuntestwali biex ikkulurit ringieli tat-tabella jew ċelloli individwali.

Klassi	Deskrizzjoni
`.active`	Japplika l-kulur tal-hover għal ringiela jew ċellula partikolari
`.success`	Tindika azzjoni ta' suċċess jew pożittiva
`.info`	Tindika bidla jew azzjoni newtrali informattiva
`.warning`	Tindika twissija li tista' teħtieġ attenzjoni
`.danger`	Jindika azzjoni perikoluża jew potenzjalment negattiva

#	Intestatura tal-kolonna	Intestatura tal-kolonna	Intestatura tal-kolonna
1	Kontenut tal-kolonna	Kontenut tal-kolonna	Kontenut tal-kolonna
2	Kontenut tal-kolonna	Kontenut tal-kolonna	Kontenut tal-kolonna
3	Kontenut tal-kolonna	Kontenut tal-kolonna	Kontenut tal-kolonna
4	Kontenut tal-kolonna	Kontenut tal-kolonna	Kontenut tal-kolonna
5	Kontenut tal-kolonna	Kontenut tal-kolonna	Kontenut tal-kolonna
6	Kontenut tal-kolonna	Kontenut tal-kolonna	Kontenut tal-kolonna
7	Kontenut tal-kolonna	Kontenut tal-kolonna	Kontenut tal-kolonna
8	Kontenut tal-kolonna	Kontenut tal-kolonna	Kontenut tal-kolonna
9	Kontenut tal-kolonna	Kontenut tal-kolonna	Kontenut tal-kolonna

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

Twassal tifsira għal teknoloġiji ta' assistenza

L-użu tal-kulur biex iżżid it-tifsira għal ringiela ta' tabella jew ċellula individwali tipprovdi biss indikazzjoni viżwali, li mhux se tingħata lill-utenti ta' teknoloġiji ta' assistenza – bħal qarrejja tal-iskrin. Żgura li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (it-test viżibbli fir-ringiela/ċellula rilevanti tat-tabella), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .sr-onlyklassi.

Tabelli li jirrispondu

Oħloq tabelli li jirreaġixxu billi tgeżwer kwalunkwe .tablebiex .table-responsivetagħmilhom iscroll orizzontalment fuq apparati żgħar (taħt 768px). Meta tara fuq xi ħaġa akbar minn 768px wiesgħa, ma tara ebda differenza f'dawn it-tabelli.

Qtugħ/qtugħ vertikali

It-tabelli li jirrispondu jagħmlu użu minn overflow-y: hidden, li jaqta' kull kontenut li jmur lil hinn mit-truf ta' isfel jew ta' fuq tat-tabella. B'mod partikolari, dan jista' jaqtgħu menus dropdown u widgets oħra ta 'partijiet terzi.

Firefox u fieldsets

Firefox għandu xi stil ta 'fieldset skomdi li jinvolvi widthli jinterferixxi mat-tabella li tirreaġixxi. Dan ma jistax jiġi megħlub mingħajr Hack speċifiku għal Firefox li aħna ma nagħmlux nipprovdux f'Bootstrap:

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

Għal aktar informazzjoni, aqra din it-tweġiba Stack Overflow .

#	Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda
1	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda
2	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda
3	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda

#	Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda
1	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda
2	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda
3	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda

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

Eżempju bażiku

Kontrolli tal-forma individwali awtomatikament jirċievu xi stil globali. L-elementi kollha testwali <input>, <textarea>, u <select>bi .form-controlhuma ssettjati bħala width: 100%;awtomatikament. Kebbeb it-tikketti u l-kontrolli .form-groupgħall-ispazjar ottimali.

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

Tħallatx forma gruppi ma 'gruppi input

Tħallatx gruppi ta' forma direttament ma ' gruppi ta' input . Minflok, bejta l-grupp tad-dħul ġewwa l-grupp tal-formola.

Formola inline

Żid .form-inlinemal-formola tiegħek (li m'għandhiex għalfejn tkun a <form>) għal kontrolli allinjati max-xellug u inline-block. Dan japplika biss għall-formoli fi ħdan viewports li huma wiesgħa mill-inqas 768px.

Jistgħu jeħtieġu wisgħat tad-dwana

Inputs u selezzjonijiet width: 100%;applikaw awtomatikament f'Bootstrap. Fi ħdan il-formoli inline, aħna reset li width: auto;sabiex kontrolli multipli jistgħu jirrisjedu fuq l-istess linja. Skont it-tqassim tiegħek, jistgħu jkunu meħtieġa wisgħat tad-dwana addizzjonali.

Dejjem żid it-tikketti

Screen readers se jkollhom problemi bil-formoli tiegħek jekk ma tinkludix tikketta għal kull input. Għal dawn il-formoli inline, tista 'taħbi t-tikketti billi tuża l- .sr-onlyklassi. Hemm metodi alternattivi oħra biex tiġi pprovduta tikketta għal teknoloġiji ta' assistenza, bħall- aria-label, aria-labelledbyjew l- titleattribut. Jekk l-ebda wieħed minn dawn ma jkun preżenti, il-qarrejja tal-iskrin jistgħu jirrikorru għall-użu tal- placeholderattribut, jekk ikun preżenti, iżda innota li l-użu ta’ placeholderbħala sostitut għal metodi oħra ta’ tikkettjar mhuwiex rakkomandat.

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

Uża l-klassijiet tal-grilja predefiniti ta' Bootstrap biex tallinja tikketti u gruppi ta' kontrolli tal-formoli f'tqassim orizzontali billi żżid .form-horizontalmal-formola (li m'għandhiex għalfejn tkun <form>). Jekk tagħmel hekk tibdel .form-groups biex iġib ruħu bħala ringieli tal-grilja, għalhekk l-ebda ħtieġa għal .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>

Kontrolli appoġġjati

Eżempji ta' kontrolli ta' formola standard appoġġjati f'format ta' formola eżempju.

Inputs

Il-kontroll tal-forma l-aktar komuni, oqsma ta' input ibbażati fuq it-test. Jinkludi appoġġ għat-tipi kollha HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, u color.

Dikjarazzjoni tat-tip meħtieġa

L-inputs jiġu stiljati bis-sħiħ biss jekk typeikunu ddikjarati kif suppost.

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

Gruppi ta' input

Biex iżżid test integrat jew buttuni qabel u/jew wara kwalunkwe test ibbażat fuq <input>, iċċekkja l-komponent tal-grupp ta' input .

Textarea

Kontroll tal-formola li jappoġġja linji multipli ta 'test. Ibdel l- rowsattribut kif meħtieġ.

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

Checkboxes u radjijiet

Il-kaxxi ta' kontroll huma biex tagħżel għażla waħda jew diversi f'lista, filwaqt li r-radjijiet huma biex tagħżel għażla waħda minn ħafna.

Il-kaxxi ta' kontroll u r-radjijiet b'diżabbiltà huma appoġġjati, iżda biex tipprovdi cursor "mhux permess" fuq il-passaġġ tal-ġenitur <label>, ikollok bżonn iżżid il- .disabledklassi mal-ġenitur .radio, .radio-inline, .checkbox, jew .checkbox-inline.

Default (munzelli)

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

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

Inline checkboxes u radjijiet

Uża l- klassijiet .checkbox-inlinejew .radio-inlinefuq serje ta' kaxxi ta' kontroll jew radjijiet għal kontrolli li jidhru fuq l-istess linja.

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

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

Checkboxes u radjijiet mingħajr test tat-tikketta

Jekk ma jkollokx test fi ħdan il- <label>, l-input jitqiegħed kif tistenna. Bħalissa jaħdem biss fuq checkboxes u radjijiet mhux inline. Ftakar li xorta tipprovdi xi forma ta' tikketta għal teknoloġiji ta' assistenza (pereżempju, billi tuża 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>

Jagħżel

Innota li ħafna menus tal-għażla indiġeni—jiġifieri f'Safari u Chrome—għandhom kantunieri fit-tond li ma jistgħux jiġu modifikati permezz ta' border-radiusproprjetajiet.

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

Għal <select>kontrolli bl- multipleattribut, jintwerew għażliet multipli awtomatikament.

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

Kontroll statiku

Meta jkollok bżonn tpoġġi test sempliċi ħdejn tikketta tal-formola fi ħdan formola, uża l- .form-control-staticklassi fuq <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>

Iffoka l-istat

outlineAħna nneħħu l- istili default fuq xi kontrolli tal-formola u napplikaw a box-shadowminfloku għal :focus.

Demo`:focus`Stat

L-input eżempju ta 'hawn fuq juża stili tad-dwana fid-dokumentazzjoni tagħna biex juri l- :focusistat fuq .form-control.

Stat b'diżabilità

Żid l- disabledattribut boolean fuq input biex tevita l-interazzjonijiet tal-utent. Inputs b'diżabilità jidhru eħfef u żid not-allowedcursor.

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

Fieldsets b'diżabilità

Żid l- disabledattribut ma 'a <fieldset>biex tiddiżattiva l-kontrolli kollha fi ħdan il <fieldset>f'daqqa.

Avviż dwar il-funzjonalità tal-link ta'`<a>`

B'mod awtomatiku, il-browsers se jittrattaw il-kontrolli tal-forma nattiva kollha ( <input>, <select>u l- <button>elementi) ġewwa <fieldset disabled>bħala diżattivati, u jipprevjenu kemm it-tastiera kif ukoll l-interazzjonijiet tal-maws fuqhom. Madankollu, jekk il-formola tiegħek tinkludi wkoll <a ... class="btn btn-*">elementi, dawn jingħataw biss stil ta' pointer-events: none. Kif innutat fit-taqsima dwar l-istat diżabbli għall-buttuni (u speċifikament fis-subsezzjoni għall-elementi tal-ankra), din il-proprjetà CSS għadha mhix standardizzata u mhix appoġġjata bis-sħiħ f'Opera 18 u taħt, jew f'Internet Explorer 11, u rebħet ma tipprevjenix lill-utenti tat-tastiera milli jkunu jistgħu jiffokaw jew jattivaw dawn il-links. Allura biex tkun sigura, uża JavaScript personalizzat biex tiddiżattiva links bħal dawn.

Kompatibilità bejn il-browser

Filwaqt li Bootstrap se japplika dawn l-istili fil-brawżers kollha, l-Internet Explorer 11 u inqas ma jappoġġjawx bis-sħiħ l- disabledattribut fuq <fieldset>. Uża JavaScript personalizzat biex tiddiżattiva l-fieldset f'dawn il-browsers.

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

Qari biss stat

Żid l- readonlyattribut boolean fuq input biex tevita l-modifika tal-valur tal-input. Inputs li jinqraw biss jidhru eħfef (bħal inputs b'diżabilità), iżda jżommu l-cursor standard.

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

Test ta' għajnuna

Test ta' għajnuna fil-livell tal-blokk għall-kontrolli tal-formoli.

Assoċja test ta' għajnuna mal-kontrolli tal-formoli

It-test tal-għajnuna għandu jkun assoċjat b'mod espliċitu mal-kontroll tal-forma li jirrelata mal-użu tal- aria-describedbyattribut. Dan se jiżgura li t-teknoloġiji ta’ assistenza – bħal qarrejja tal-iskrin – se jħabbru dan it-test ta’ għajnuna meta l-utent jiffoka jew jidħol fil-kontroll.

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

Stati ta' validazzjoni

Bootstrap jinkludi stili ta' validazzjoni għal stati ta' żball, twissija u suċċess fuq il-kontrolli tal-formoli. Biex tuża, żid .has-warning, .has-error, jew .has-successmal-element ġenitur. Kwalunkwe .control-label, .form-control, u .help-blockfi ħdan dak l-element se jirċievu l-istili ta 'validazzjoni.

It-twassil tal-istat tal-validazzjoni lil teknoloġiji ta' assistenza u lill-utenti tal-colorblind

L-użu ta' dawn l-istili ta' validazzjoni biex jindika l-istat ta' kontroll ta' formola jipprovdi biss indikazzjoni viżwali, ibbażata fuq il-kulur, li mhux se tintbagħat lill-utenti ta' teknoloġiji ta' assistenza - bħal qarrejja tal-iskrin - jew lill-utenti bla kulur.

Tiżgura li tiġi pprovduta wkoll indikazzjoni alternattiva tal-istat. Pereżempju, tista' tinkludi ħjiel dwar l-istat fit- <label>test tal-kontroll tal-forma innifsu (kif inhu l-każ fl-eżempju tal-kodiċi li ġej), tinkludi Glyphicon (b'test alternattiv xieraq bl-użu tal- .sr-onlyklassi - ara l- eżempji Glyphicon ), jew billi tipprovdi blokk ta' test ta' għajnuna addizzjonali . Speċifikament għal teknoloġiji ta' assistenza, il-kontrolli tal-formoli invalidi jistgħu wkoll jiġu assenjati aria-invalid="true"attribut.

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

B'ikoni fakultattivi

Tista 'wkoll iżżid ikoni ta' feedback fakultattivi biż-żieda ta ' .has-feedbacku l-ikona t-tajba.

Ikoni ta 'feedback jaħdmu biss b'elementi testwali <input class="form-control">.

Ikoni, tikketti, u gruppi ta' input

Pożizzjonament manwali ta 'ikoni ta' feedback huwa meħtieġ għal inputs mingħajr tikketta u għal gruppi ta 'input b'add-on fuq il-lemin. Inti mħeġġa ħafna li tipprovdi tikketti għall-inputs kollha għal raġunijiet ta' aċċessibbiltà. Jekk tixtieq tevita li jintwerew it-tikketti, aħbihom mal- .sr-onlyklassi. Jekk trid tagħmel mingħajr tikketti, aġġusta l- topvalur tal-ikona tal-feedback. Għal gruppi ta 'input, aġġusta l- rightvalur għal valur tal-pixel xieraq skont il-wisa' tal-addon tiegħek.

Twassal it-tifsira tal-ikona għal teknoloġiji ta' assistenza

Biex jiġi żgurat li t-teknoloġiji ta’ assistenza – bħall-qarrejja tal-iskrin – iwasslu b’mod korrett it-tifsira ta’ ikona, għandu jiġi inkluż test moħbi addizzjonali mal-.sr-only klassi u assoċjat b'mod espliċitu mal-kontroll tal-forma li jirrelata mal-użu aria-describedby. Alternattivament, kun żgur li t-tifsira (pereżempju, il-fatt li hemm twissija għal qasam partikolari ta' dħul ta' test) titwassal f'xi forma oħra, bħall-bidla tat-test tat-test attwali <label>assoċjat mal-kontroll tal-formola.

Għalkemm l-eżempji li ġejjin diġà jsemmu l-istat tal-validazzjoni tal-kontrolli tal-forma rispettivi tagħhom fit- <label>test innifsu, it-teknika ta’ hawn fuq (bl -użu .sr-onlytat-test u aria-describedby) ġiet inkluża għal skopijiet illustrattivi.

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

Ikoni fakultattivi f'forom orizzontali u 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>

Ikoni mhux obbligatorji bil-moħbija`.sr-only`Ikoni fakultattivi b'tikketti

Jekk tuża l- .sr-onlyklassi biex taħbi kontroll tal-formola <label>(minflok tuża għażliet oħra ta 'tikkettar, bħall- aria-labelattribut), Bootstrap jaġġusta awtomatikament il-pożizzjoni tal-ikona ladarba din tkun ġiet miżjuda.

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

Kontroll tad-daqs

Issettja l-għoli billi tuża klassijiet bħal .input-lg, u ssettja l-wisa 'bl-użu ta' klassijiet tal-kolonni tal-grilja simili.col-lg-* .

Id-daqs tal-għoli

Oħloq kontrolli tal-forma ogħla jew iqsar li jaqblu mad-daqsijiet tal-buttuni.

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

Daqsijiet tal-grupp tal-forma orizzontali

Daqs malajr it-tikketti u l-kontrolli tal-forma fi ħdan .form-horizontalbilli żżid .form-group-lgjew .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>

Daqs tal-kolonna

Kebbeb inputs f'kolonni tal-grilja, jew kwalunkwe element ġenitur tad-dwana, biex jinforza faċilment il-wisgħat mixtieqa.

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

Tikketti tal-buttuni

Uża l-klassijiet tal-buttuni fuq element <a>, <button>, jew <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">

Użu speċifiku għall-kuntest

Filwaqt li l-klassijiet tal-buttuni jistgħu jintużaw fuq <a>u <button>elementi, l- <button>elementi biss huma appoġġjati fi ħdan il-komponenti tan-nav u navbar tagħna.

Links li jaġixxu bħala buttuni

Jekk l- <a>elementi jintużaw biex jaġixxu bħala buttuni – li jqanqlu l-funzjonalità fil-paġna, aktar milli jinnavigaw għal dokument jew sezzjoni oħra fil-paġna kurrenti – għandhom jingħataw ukoll role="button".

Rendiment cross-browser

Bħala l-aħjar prattika, nirrakkomandaw ħafna li tuża l- <button>element kull meta jkun possibbli biex tiżgura t-tqabbil tar-rendi cross-browser.

Fost affarijiet oħra, hemm bug f'Firefox <30 li ma tħalliniex nissettjaw il- buttuni bbażati fuq l- line-heightof <input>, li ġġiegħelhom ma jaqblux eżattament mal-għoli ta 'buttuni oħra fuq Firefox.

Għażliet

Uża kwalunkwe waħda mill-klassijiet tal-buttuni disponibbli biex toħloq malajr buttuna 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>

Twassal tifsira għal teknoloġiji ta' assistenza

L-użu tal-kulur biex iżżid it-tifsira ta' buttuna jipprovdi biss indikazzjoni viżwali, li mhux se tingħata lill-utenti ta' teknoloġiji ta' assistenza – bħal qarrejja tal-iskrin. Kun żgur li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (it-test viżibbli tal-buttuna), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .sr-onlyklassi.

Daqsijiet

Fancy buttuni akbar jew iżgħar? Żid .btn-lg, .btn-sm, jew .btn-xsgħal daqsijiet addizzjonali.

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

Oħloq buttuni tal-livell tal-blokki—dawk li jkopru l-wisa’ sħiħa ta’ ġenitur— billi żżid .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>

Stat attiv

Il-buttuni jidhru ppressati (bi sfond aktar skur, fruntiera aktar skura, u dell inset) meta jkunu attivi. Għall <button>-elementi, dan isir permezz ta' :active. Għall <a>-elementi, dan isir bi .active. Madankollu, tista 'tuża .activefuq <button>s (u tinkludi l- aria-pressed="true"attribut) jekk ikollok bżonn tirreplika l-istat attiv b'mod programmatiku.

Element tal-buttuna

M'hemmx għalfejn iżżid :activeperess li hija psewdo-klassi, imma jekk għandek bżonn tisforza l-istess dehra, kompli u żid .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 tal-ankra

Żid il- .activeklassi mal- <a>buttuni.

Link primarju Link

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

Stat b'diżabilità

Agħmel il-buttuni jidhru li ma jistgħux jiġu kklikkjati billi sfumahom lura b' opacity.

Element tal-buttuna

Żid l- disabledattribut mal - <button>buttuni.

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

Kompatibilità bejn il-browser

Jekk iżżid l- disabledattribut ma' <button>, Internet Explorer 9 u hawn taħt se jirrendi t-test griż b'dell diżgustanti li ma nistgħux nirranġaw.

Element tal-ankra

Żid il- .disabledklassi mal- <a>buttuni.

Link primarju Link

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

Aħna nużaw .disabledbħala klassi ta 'utilità hawn, simili għall- .activeklassi komuni, għalhekk l-ebda prefiss mhu meħtieġ.

Twissija dwar il-funzjonalità tal-link

Din il-klassi tuża pointer-events: nonebiex tipprova tiddiżattiva l-funzjonalità tal-link ta ' <a>s, iżda dik il-proprjetà CSS għadha mhix standardizzata u mhix appoġġjata bis-sħiħ f'Opera 18 u taħt, jew fl-Internet Explorer 11. Barra minn hekk, anke fil-browsers li jappoġġjaw pointer-events: noneit-tastiera in-navigazzjoni tibqa' mhux affettwata, li jfisser li l-utenti tat-tastiera b'vista u l-utenti tat-teknoloġiji ta' assistenza xorta jkunu jistgħu jattivaw dawn il-links. Allura biex tkun sigura, uża JavaScript personalizzat biex tiddiżattiva links bħal dawn.

Immaġini li jirrispondu

Immaġini f'Bootstrap 3 jistgħu jsiru responsive-friendly permezz taż-żieda tal- .img-responsiveklassi. Dan japplika max-width: 100%;, height: auto;u display: block;għall-immaġni sabiex tiskala tajjeb għall-element ġenitur.

Biex tiċċentra immaġini li jużaw il- .img-responsiveklassi, uża .center-blockminflok .text-center. Ara t-taqsima tal-klassijiet tal-helper għal aktar dettalji dwar .center-blockl-użu.

Immaġini SVG u IE 8-10

Fl-Internet Explorer 8-10, l-immaġini SVG .img-responsivegħandhom daqs sproporzjonat. Biex tirranġa dan, żid width: 100% \9;fejn meħtieġ. Bootstrap ma japplikax dan awtomatikament peress li jikkawża kumplikazzjonijiet għal formati oħra tal-immaġni.

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

Forom tal-immaġni

Żid klassijiet ma ' <img>element biex faċilment stil immaġini fi kwalunkwe proġett.

Kompatibilità bejn il-browser

Żomm f'moħħok li l-Internet Explorer 8 m'għandux appoġġ għall-kantunieri fit-tond.

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

Kuluri kuntestwali

Iwassal tifsira permezz tal-kulur b'numru żgħir ta 'klassijiet ta' utilità ta 'enfasi. Dawn jistgħu wkoll jiġu applikati għall-links u jiskuraw meta jdur l-istess bħall-istili tal-link default tagħna.

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>

Jittrattaw l-ispeċifiċità

Kultant klassijiet ta 'enfasi ma jistgħux jiġu applikati minħabba l-ispeċifiċità ta' selettur ieħor. Fil-biċċa l-kbira tal-każijiet, soluzzjoni suffiċjenti hija li tkebbeb it-test tiegħek fi <span>mal-klassi.

Twassal tifsira għal teknoloġiji ta' assistenza

L-użu tal-kulur biex iżżid it-tifsira jipprovdi biss indikazzjoni viżwali, li mhux se tingħata lill-utenti ta’ teknoloġiji ta’ assistenza – bħal screen readers. Żgura li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (il-kuluri kuntestwali jintużaw biss biex isaħħu t-tifsira li diġà hija preżenti fit-test/markup), jew tkun inkluża permezz ta’ mezzi alternattivi, bħal test addizzjonali moħbi mal- .sr-onlyklassi .

Sfondi kuntestwali

Simili għall-klassijiet tal-kulur tat-test kuntestwali, issettja faċilment l-isfond ta 'element għal kwalunkwe klassi kuntestwali. Il-komponenti tal-ankra se jiskuraw meta jduru, bħall-klassijiet tat-test.

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>

Jittrattaw l-ispeċifiċità

Xi drabi klassijiet ta' sfond kuntestwali ma jistgħux jiġu applikati minħabba l-ispeċifiċità ta' selettur ieħor. F'xi każijiet, soluzzjoni suffiċjenti hija li wrap il-kontenut ta ' <div>l-element tiegħek fil-klassi.

Twassal tifsira għal teknoloġiji ta' assistenza

Bħal fil-każ tal -kuluri kuntestwali , kun żgur li kwalunkwe tifsira mogħtija permezz tal-kulur hija wkoll imwassla f'format li mhuwiex purament preżentazzjoni.

Agħlaq l-ikona

Uża l-ikona ġenerika tal-qrib biex tiċħad kontenut bħal modals u twissijiet.

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

Carets

Uża carets biex tindika l-funzjonalità u d-direzzjoni dropdown. Innota li l-caret default ser ireġġa 'lura awtomatikament fil -menus dropup .

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

Sufruni malajr

Float element lejn ix-xellug jew il-lemin bi klassi. !importanthija inkluża biex jiġu evitati kwistjonijiet ta' speċifiċità. Il-klassijiet jistgħu jintużaw ukoll bħala mixins.

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

Blokki tal-kontenut taċ-ċentru

Issettja element għal display: blocku ċentru permezz margin. Disponibbli bħala mixin u klassi.

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

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

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

Clearfix

Faċilment ċara floats billi żżid .clearfix mal-element ġenitur . Jutilizza l-mikro clearfix kif popolarizzat minn Nicolas Gallagher. Jista 'jintuża wkoll bħala 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();
}

Li juri u jaħbi l-kontenut

Ġiegħel element li jintwera jew moħbi ( inkluż għal screen readers ) bl-użu ta ' .showu .hiddenklassijiet. Dawn il-klassijiet jużaw !importantbiex jevitaw kunflitti ta 'speċifiċità, bħad- sufruni ta' malajr . Huma disponibbli biss għal toggling fil-livell tal-blokk. Jistgħu jintużaw ukoll bħala mixins.

.hidehija disponibbli, iżda mhux dejjem taffettwa lill-qarrejja tal-iskrin u hija deprecata minn v3.0.1. Uża .hiddenjew .sr-onlyminflok.

Barra minn hekk, .invisiblejista 'jintuża biex taqleb biss il-viżibilità ta' element, li jfisser displayli mhuwiex modifikat u l-element xorta jista 'jaffettwa l-fluss tad-dokument.

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

Screen reader u kontenut ta' navigazzjoni bit-tastiera

Aħbi element għall-apparati kollha ħlief screen readers b' .sr-only. Għaqqad .sr-onlyma .sr-only-focusable' biex turi l-element mill-ġdid meta jkun iffukat (eż. minn utent tat-tastiera biss). Meħtieġa biex isegwu l- aħjar prattiki ta' aċċessibbiltà . Jista 'jintuża wkoll bħala mixins.

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

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

Sostituzzjoni tal-immaġni

Uża l- .text-hideklassi jew mixin biex tgħin tissostitwixxi l-kontenut tat-test ta 'element b'immaġni fl-isfond.

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

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

Għal żvilupp aktar mgħaġġel li jiffavorixxi l-mowbajl, uża dawn il-klassijiet ta’ utilità biex turi u taħbi l-kontenut skont l-apparat permezz ta’ query tal-midja. Inklużi wkoll klassijiet ta' utilità għat-toggling tal-kontenut meta jiġi stampat.

Ipprova uża dawn fuq bażi limitata u evita li toħloq verżjonijiet kompletament differenti tal-istess sit. Minflok, użahom biex tikkumplimenta l-preżentazzjoni ta 'kull apparat.

Klassijiet disponibbli

Uża klassi waħda jew kombinazzjoni tal-klassijiet disponibbli biex taqleb il-kontenut bejn punti ta' waqfien tal-vista.

	Apparati żgħar żejdaTelefowns (<768px)	Apparat żgħirPilloli (≥768px)	Apparat medjuDesktops (≥992px)	Apparati kbarDesktops (≥1200px)
`.visible-xs-*`	Viżibbli	Moħbija	Moħbija	Moħbija
`.visible-sm-*`	Moħbija	Viżibbli	Moħbija	Moħbija
`.visible-md-*`	Moħbija	Moħbija	Viżibbli	Moħbija
`.visible-lg-*`	Moħbija	Moħbija	Moħbija	Viżibbli
`.hidden-xs`	Moħbija	Viżibbli	Viżibbli	Viżibbli
`.hidden-sm`	Viżibbli	Moħbija	Viżibbli	Viżibbli
`.hidden-md`	Viżibbli	Viżibbli	Moħbija	Viżibbli
`.hidden-lg`	Viżibbli	Viżibbli	Viżibbli	Moħbija

Minn v3.2.0, il- .visible-*-*klassijiet għal kull breakpoint jiġu fi tliet varjazzjonijiet, waħda għal kull displayvalur tal-proprjetà CSS elenkat hawn taħt.

Grupp ta' klassijiet	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Allura, għal skrins żgħar żejda ( xs) pereżempju, il- .visible-*-*klassijiet disponibbli huma: .visible-xs-block, .visible-xs-inline, u .visible-xs-inline-block.

Il-klassijiet .visible-xs, .visible-sm, .visible-md, u .visible-lgjeżistu wkoll, iżda huma deprecati minn v3.2.0 . Huma bejn wieħed u ieħor ekwivalenti għal .visible-*-block, ħlief b'każijiet speċjali addizzjonali għal <table>elementi relatati mat-toggling.

Klassijiet stampati

Simili għall-klassijiet responsivi regolari, uża dawn biex taqleb il-kontenut għall-istampar.

Klassijiet	Browser	Stampa
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Moħbija	Viżibbli
`.hidden-print`	Viżibbli	Moħbija

Il-klassi .visible-printteżisti wkoll iżda hija deprecata minn v3.2.0. Huwa bejn wieħed u ieħor ekwivalenti għal .visible-print-block, ħlief b'każijiet speċjali addizzjonali għal <table>elementi relatati.

Każijiet tat-test

Id-daqs tal-brawżer tiegħek jew tagħbija fuq apparati differenti biex tittestja l-klassijiet ta 'utilità li jirrispondu.

Viżibbli fuq...

Marki ta' kontroll ħodor jindikaw li l-element huwa viżibbli fil-vetrina attwali tiegħek.

Żgħir żejjed ✔ Viżibbli fuq x-żgħir

Żgħir ✔ Viżibbli fuq iż-żgħar

Medju ✔ Viżibbli fuq medju

Kbir ✔ Viżibbli fuq il-kbar

Żgħar u żgħar żejda ✔ Viżibbli fuq x-żgħar u żgħar

Medji u kbar ✔ Viżibbli fuq medju u kbir

Extra żgħar u medji ✔ Viżibbli fuq x-żgħar u medji

Żgħar u kbar ✔ Viżibbli fuq żgħar u kbar

Żgħar u kbar żejda ✔ Viżibbli fuq x-żgħar u kbar

Żgħar u medji ✔ Viżibbli fuq żgħar u medji

Moħbi fuq...

Hawnhekk, marki ħodor jindikaw ukoll li l-element huwa moħbi fil-vetrina attwali tiegħek.

Żgħir żejjed ✔ Moħbi fuq x-żgħir

Żgħir ✔ Moħbi fuq iż-żgħar

Medju ✔ Moħbi fuq medju

Kbir ✔ Moħbi fuq kbir

Żgħar u żgħar żejda ✔ Moħbi fuq x-żgħar u żgħar

Medji u kbar ✔ Moħbi fuq medju u kbir

Extra żgħar u medji ✔ Moħbi fuq x-żgħar u medju

Żgħar u kbar ✔ Moħbi fuq żgħar u kbar

Żgħar u kbar żejda ✔ Moħbi fuq x-żgħar u kbar

Żgħar u medji ✔ Moħbi fuq żgħar u medji

Is-CSS ta' Bootstrap huwa mibni fuq Less, preproċessur b'funzjonalità addizzjonali bħal varjabbli, mixins, u funzjonijiet għall-kumpilazzjoni tas-CSS. Dawk li qed ifittxu li jużaw is-sors Inqas fajls minflok il-fajls CSS ikkumpilati tagħna jistgħu jagħmlu użu mill-varjabbli numerużi u mixins li nużaw fil-qafas kollu.

Il-varjabbli tal-grilja u l-mixins huma koperti fit-taqsima tas-sistema tal-Grid .

Kumpilazzjoni Bootstrap

Bootstrap jista' jintuża f'mill-inqas żewġ modi: bis-CSS ikkumpilat jew bis-sors Less files. Biex tikkompila l-Inqas fajls, ikkonsulta t-taqsima Nibdew għal kif issettja l-ambjent tal-iżvilupp tiegħek biex tmexxi l-kmandi meħtieġa.

Għodod ta' kumpilazzjoni ta' partijiet terzi jistgħu jaħdmu ma' Bootstrap, iżda mhumiex appoġġjati mit-tim ewlieni tagħna.

Varjabbli

Il-varjabbli jintużaw matul il-proġett kollu bħala mod biex jiġu ċentralizzati u jaqsmu l-valuri użati b'mod komuni bħall-kuluri, l-ispazjar jew il-munzell tat-tipa. Għal tqassim sħiħ, jekk jogħġbok ara l-Customizer .

Kuluri

Faċilment tagħmel użu minn żewġ skemi ta 'kuluri: skala griża u semantika. Kuluri fuq skala griża jipprovdu aċċess rapidu għal sfumaturi ta' iswed użati b'mod komuni filwaqt li s-semantiċi jinkludu diversi kuluri assenjati għal valuri kuntestwali sinifikanti.

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

Uża xi waħda minn dawn il-varjabbli tal-kulur kif inhuma jew assenjahom mill-ġdid għal varjabbli aktar sinifikanti għall-proġett tiegħek.

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

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

Armar

Ftit ta' varjabbli biex jippersonalizzaw malajr elementi ewlenin tal-iskeletru tas-sit tiegħek.

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

Links

Faċilment stili r-rabtiet tiegħek bil-kulur it-tajjeb b'valur wieħed biss.

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

Innota li l- @link-hover-colorużi funzjoni, għodda oħra tal-biża 'minn Inqas, biex awtomaġikament toħloq il-kulur id-dritt hover. Tista' tuża darken, lighten, saturate, u desaturate.

Tipografija

Issettja faċilment it-tipa tiegħek, id-daqs tat-test, it-tmexxija, u aktar bi ftit varjabbli malajr. Bootstrap jagħmel użu minn dawn ukoll biex jipprovdi mixins tipografiċi faċli.

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

Ikoni

Żewġ varjabbli ta' malajr biex tippersonalizza l-post u l-isem tal-fajl tal-ikoni tiegħek.

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

Komponenti

Komponenti matul Bootstrap jagħmlu użu minn xi varjabbli default għall-iffissar ta 'valuri komuni. Hawn huma l-aktar użati komunement.

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

Mixins tal-bejjiegħ

Il-mixins tal-bejjiegħ huma mixins biex jgħinu jappoġġaw browsers multipli billi jinkludu l-prefissi kollha rilevanti tal-bejjiegħ fis-CSS ikkumpilat tiegħek.

Kaxxa-daqs

Irrisettja l-mudell tal-kaxxa tal-komponenti tiegħek b'mixin wieħed. Għall-kuntest, ara dan l- artikolu utli minn Mozilla .

Il-mixin huwa deprecated minn v3.2.0, bl-introduzzjoni ta 'Autoprefixer. Biex tippreserva l-kompatibilità b'lura, Bootstrap se jkompli juża l-mixin internament sakemm Bootstrap v4.

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

Kantunieri arrotondati

Illum il-browsers moderni kollha jappoġġjaw il- border-radiusproprjetà mhux prefissata. Bħala tali, m'hemm l-ebda .border-radius()mixin, iżda Bootstrap jinkludi shortcuts biex jiġu arrotondati malajr żewġ kantunieri fuq naħa partikolari ta 'oġġett.

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

Kaxxa (Drop) dellijiet

Jekk l-udjenza fil-mira tiegħek qed tuża l-aħħar u l-aqwa browsers u apparati, kun żgur li tuża biss il- box-shadowproprjetà waħedha. Jekk għandek bżonn appoġġ għal apparati anzjani Android (pre-v4) u iOS (pre-iOS 5), uża l- mixin deprecated-webkit biex tieħu l- prefiss meħtieġ.

Il-mixin huwa deprecated minn v3.1.0, peress li Bootstrap ma jappoġġjax uffiċjalment il-pjattaformi skaduti li ma jappoġġjawx il-proprjetà standard. Biex tippreserva l-kompatibilità b'lura, Bootstrap se jkompli juża l-mixin internament sakemm Bootstrap v4.

Kun żgur li tuża rgba()kuluri fid-dellijiet tal-kaxxa tiegħek sabiex jitħalltu kemm jista 'jkun bla xkiel mal-isfond.

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

Transizzjonijiet

Mixins multipli għall-flessibilità. Issettja l-informazzjoni kollha tat-tranżizzjoni b'waħda, jew speċifika dewmien u tul separati kif meħtieġ.

Il-mixins huma deprecati minn v3.2.0, bl-introduzzjoni ta 'Autoprefixer. Biex tippreserva l-kompatibilità b'lura, Bootstrap se jkompli juża l-mixins internament sa 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;
}

Trasformazzjonijiet

Dawwar, iskala, ittraduċi (ċaqlaq), jew tgħawweġ kwalunkwe oġġett.

Il-mixins huma deprecati minn v3.2.0, bl-introduzzjoni ta 'Autoprefixer. Biex tippreserva l-kompatibilità b'lura, Bootstrap se jkompli juża l-mixins internament sa Bootstrap v4.

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

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

Animazzjonijiet

Mixin wieħed għall-użu tal-proprjetajiet kollha ta 'animazzjoni ta' CSS3 f'dikjarazzjoni waħda u mixins oħra għal proprjetajiet individwali.

Il-mixins huma deprecati minn v3.2.0, bl-introduzzjoni ta 'Autoprefixer. Biex tippreserva l-kompatibilità b'lura, Bootstrap se jkompli juża l-mixins internament sa Bootstrap v4.

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

Opaċità

Issettja l-opaċità għall-browsers kollha u ipprovdi filterriżerva għal IE8.

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

Test ta' placeholder

Ipprovdi kuntest għall-kontrolli tal-formoli f'kull qasam.

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

Kolonni

Iġġenera kolonni permezz tas-CSS fi ħdan element wieħed.

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

Gradjenti

Faċilment dawwar kwalunkwe żewġ kuluri fi gradjent fl-isfond. Ikseb aktar avvanzat u waqqaf direzzjoni, uża tliet kuluri, jew uża gradjent radjali. B'mixin wieħed ikollok is-sintassi kollha prefissati li jkollok bżonn.

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

Tista 'wkoll tispeċifika l-angolu ta' gradjent lineari standard b'żewġ kuluri:

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

Jekk għandek bżonn ta 'gradjent stil barber-stripe, li huwa faċli, wisq. Eżatt speċifika kulur wieħed u aħna ser overlay strixxa bajda trasluċida.

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

Up the ante u uża tliet kuluri minflok. Issettja l-ewwel kulur, it-tieni kulur, il-waqfien tal-kulur tat-tieni kulur (valur perċentwali bħal 25%), u t-tielet kulur b'dawn il-mixins:

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

Irjus up! Jekk qatt ikollok bżonn tneħħi gradjent, kun żgur li tneħħi kwalunkwe IE speċifiku filterli jista 'jkollok żidt. Tista 'tagħmel dan billi tuża l- .reset-filter()mixin flimkien background-image: none;.

Mixins ta' utilità

Mixins ta 'utilità huma mixins li jgħaqqdu proprjetajiet CSS li kieku ma jkunux relatati biex jiksbu għan jew kompitu speċifiku.

Clearfix

Tinsa li żżid class="clearfix"ma 'kwalunkwe element u minflok żid il- .clearfix()mixin fejn xieraq. Juża l- mikro clearfix minn Nicolas Gallagher .

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

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

Centering orizzontali

Iċċentra malajr kwalunkwe element fil-ġenitur tiegħu. Jeħtieġ widthjew max-widthgħandu jiġi stabbilit.

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

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

Helpers tad-daqs

Speċifika d-dimensjonijiet ta 'oġġett aktar faċilment.

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

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

Oqsma tat-testi li jistgħu jinbidlu

Ikkonfigura faċilment l-għażliet tad-daqs għal kwalunkwe textarea, jew kwalunkwe element ieħor. Defaults għall-imġieba normali tal-browser ( both).

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

It-test maqtugħ

Aqta' t-test faċilment b'ellipsis b'mixin wieħed. Jeħtieġ li l-element ikun blockjew inline-blocklivell.

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

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

Immaġini tar-retina

Speċifika żewġ mogħdijiet tal-immaġni u d-dimensjonijiet tal-immaġni @1x, u Bootstrap jipprovdi mistoqsija tal-midja @2x. Jekk għandek ħafna immaġini x'tservi, ikkunsidra li tikteb is-CSS tal-immaġni tar-retina tiegħek manwalment f'mistoqsija waħda tal-midja.

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

Filwaqt li Bootstrap huwa mibni fuq Less, għandu wkoll port Sass uffiċjali . Aħna nżommuh f'repożitorju separat GitHub u nittrattaw l-aġġornamenti bi skript ta 'konverżjoni.

X'inhu inkluż

Peress li l-port Sass għandu repo separat u jservi udjenza kemmxejn differenti, il-kontenut tal-proġett ivarja ħafna mill-proġett prinċipali Bootstrap. Dan jiżgura li l-port Sass ikun kompatibbli ma 'kemm jista' jkun sistemi bbażati fuq Sass.

Mogħdija	Deskrizzjoni
`lib/`	Kodiċi tal-ġemgħa Ruby (konfigurazzjoni Sass, integrazzjoni tal-binarji u l-Compass)
`tasks/`	Skripts tal-konvertitur (li jduru 'l fuq minn Less għal Sass)
`test/`	Testijiet ta' kumpilazzjoni
`templates/`	Manifest tal-pakkett tal-boxxla
`vendor/assets/`	Sass, JavaScript, u fajls tat-tipa
`Rakefile`	Ħidmiet interni, bħal rake and convert

Żur ir -repożitorju GitHub tal-port Sass biex tara dawn il-fajls fl-azzjoni.

Installazzjoni

Għal informazzjoni dwar kif tinstalla u tuża Bootstrap għal Sass, ikkonsulta l- readme tar- repożitorju GitHub . Huwa l-aktar sors aġġornat u jinkludi informazzjoni għall-użu mal-proġetti Rails, Compass, u Sass standard.

Bootstrap għal Sass

CSS

Ħarsa ġenerali

Doctype HTML5

Mobile l-ewwel

Tipografija u links

Normalizza.css

Kontenituri

Sistema tal-grilja

Introduzzjoni

Mistoqsijiet tal-midja

Għażliet tal-grilja

Eżempju: Stacked-to-orizzontali

Eżempju: Kontenitur tal-fluwidu

Eżempju: Mobile u desktop

Eżempju: Mobile, tablet, desktop

Eżempju: It-tgeżwir tal-kolonna

Resets tal-kolonna li jirrispondu

Neħħi l-kanali

Kolonni ta' tpaċija

Kolonni li jbejtu

L-ordni tal-kolonna

Inqas mixins u varjabbli

Varjabbli

Mixins

Eżempju ta' użu

Tipografija

Intestaturi

h1. Intestatura Bootstrap

h2. Intestatura Bootstrap

h3. Intestatura Bootstrap

h4. Intestatura Bootstrap

h5. Intestatura Bootstrap

h6. Intestatura Bootstrap

h1. Intestatura Bootstrap Test sekondarju

h2. Intestatura Bootstrap Test sekondarju

h3. Intestatura Bootstrap Test sekondarju

h4. Intestatura Bootstrap Test sekondarju

h5. Intestatura Bootstrap Test sekondarju

h6. Intestatura Bootstrap Test sekondarju

Kopja tal-korp

Kopja tal-korp taċ-ċomb

Mibnija b'Inqas

Elementi tat-test inline

Test immarkat

Test imħassar

Test barrat

Test imdaħħal

Test issottolinjat

Test żgħir

Bold

Korsiv

Elementi alternattivi

Klassijiet ta' allinjament

Klassijiet ta' trasformazzjoni

Abbrevjazzjonijiet

Abbrevjazzjoni bażika

Inizjalizmu

Indirizzi

Blockquotes

Blockquote default

Għażliet ta 'blockquote

Ismijiet sors

Wirjiet alternattivi

Listi

Mhux ordnat

Ordnat

Unstyled

F'konformità

Deskrizzjoni

Deskrizzjoni orizzontali

Awto-maqtugħin

Kodiċi

F'konformità

Input tal-utent

Blokk bażiku

Varjabbli

Output tal-kampjun

Tabelli

Eżempju bażiku

Ringieli strixxi

Demo`:focus`Stat

Avviż dwar il-funzjonalità tal-link ta'`<a>`

Ikoni mhux obbligatorji bil-moħbija`.sr-only`Ikoni fakultattivi b'tikketti