Sužinokite apie pagrindines „Bootstrap“ infrastruktūros dalis, įskaitant mūsų požiūrį į geresnį, greitesnį ir stipresnį žiniatinklio kūrimą.

HTML5 doctype

„Bootstrap“ naudoja tam tikrus HTML elementus ir CSS ypatybes, kurioms reikia naudoti HTML5 dokumento tipą. Įtraukite jį į visų savo projektų pradžią.

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

Pirmiausia mobilusis

Naudodami „Bootstrap 2“ pridėjome pasirenkamų mobiliesiems pritaikytų stilių, skirtų pagrindiniams sistemos aspektams. Naudodami „Bootstrap 3“ projektą perrašėme, kad jis nuo pat pradžių būtų pritaikytas mobiliesiems. Užuot pridėję pasirenkamų mobiliųjų stilių, jie įdedami tiesiai į šerdį. Tiesą sakant, „ Bootstrap“ pirmiausia yra mobilusis . Pirmuosius mobiliuosius stilius galima rasti visoje bibliotekoje, o ne atskiruose failuose.

Norėdami užtikrinti tinkamą atvaizdavimą ir mastelio keitimą liečiant, pridėkite peržiūros srities metažymą prie savo <head>.

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

Galite išjungti mastelio keitimo galimybes mobiliuosiuose įrenginiuose pridėję user-scalable=noperžiūros srities metažymą. Taip išjungiamas mastelio keitimas, o tai reiškia, kad naudotojai gali tik slinkti, todėl jūsų svetainė atrodo labiau panaši į vietinę programą. Apskritai, mes rekomenduojame tai ne visose svetainėse, todėl būkite atsargūs!

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

Tipografija ir nuorodos

„Bootstrap“ nustato pagrindinius pasaulinius rodymo, tipografijos ir nuorodų stilius. Tiksliau, mes:

Nustatykite background-color: #fff;antbody
Kaip tipografinę bazę naudokite atributus @font-family-base, @font-size-base, ir@line-height-base
Nustatykite visuotinės nuorodos spalvą @link-colorir pritaikykite tik nuorodos pabraukimus:hover

Šiuos stilius galima rasti scaffolding.less.

Normalize.css

Norėdami pagerinti kelių naršyklių atvaizdavimą, naudojame Normalize.css , Nicolas Gallagher ir Jonathan Neal projektą .

Konteineriai

„Bootstrap“ reikalingas elementas, kuriame yra svetainės turinys ir talpinama mūsų tinklelio sistema. Galite pasirinkti vieną iš dviejų konteinerių, kuriuos naudosite savo projektuose. Atminkite, kad dėl paddingir daugiau nei vienas konteineris nėra įdėtas.

Naudokite .containerreaguojančiam fiksuoto pločio konteineriui.

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

Naudokite .container-fluidviso pločio konteineriui, apimančiam visą peržiūros srities plotį.

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

„Bootstrap“ apima jautrią, mobilią pirmojo skysčio tinklelio sistemą, kuri, didėjant įrenginio arba peržiūros srities dydžiui, atitinkamai padidina iki 12 stulpelių. Jame yra iš anksto nustatytų klasių , skirtų paprastoms išdėstymo parinktims, taip pat galingų mišinių, skirtų semantiniams išdėstymams generuoti .

Įvadas

Tinklelio sistemos naudojamos puslapių išdėstymui kurti naudojant eilutes ir stulpelius, kuriuose yra jūsų turinys. Štai kaip veikia „Bootstrap“ tinklelio sistema:

Eilutės turi būti išdėstytos .container(fiksuoto pločio) arba .container-fluid(viso pločio), kad būtų tinkamai išlygiuotos ir užpildytos.
Norėdami sukurti horizontalias stulpelių grupes, naudokite eilutes.
Turinys turi būti dedamas į stulpelius ir tik stulpeliai gali būti tiesioginiai eilučių antriniai elementai.
Iš anksto nustatytos tinklelio klasės patinka .rowir .col-xs-4yra prieinamos, kad būtų galima greitai sukurti tinklelio išdėstymą. Mažiau mišinių taip pat galima naudoti semantiškesniems išdėstymams.
Stulpeliai sukuria latakus (tarpus tarp stulpelių turinio) per padding. Šis užpildymas pirmojo ir paskutinio stulpelio eilutėse perkeliamas per neigiamą paraštę .rows.
Dėl neigiamos paraštės toliau pateikti pavyzdžiai yra išbraukti. Taip yra, kad turinys tinklelio stulpeliuose būtų suderintas su ne tinklelio turiniu.
Tinklelio stulpeliai sukuriami nurodant dvylikos galimų stulpelių, kuriuos norite apimti, skaičių. Pavyzdžiui, trijuose vienoduose stulpeliuose būtų naudojami trys .col-xs-4.
Jei vienoje eilutėje yra daugiau nei 12 stulpelių, kiekviena papildomų stulpelių grupė kaip vienas vienetas bus apvyniotas nauja eilute.
Tinklelio klasės taikomos įrenginiams, kurių ekrano plotis yra didesnis arba lygus lūžio taško dydžiui, ir nepaiso tinklelio klasių, skirtų mažesniems įrenginiams. Todėl, pvz., bet kurios .col-md-*klasės taikymas elementui turės įtakos ne tik jo stiliui vidutiniuose įrenginiuose, bet ir dideliuose įrenginiuose, jei .col-lg-*klasės nėra.

Peržiūrėkite šių principų taikymo savo kodui pavyzdžius.

Žiniasklaidos užklausos

Mes naudojame toliau pateiktas medijos užklausas savo failuose Mažiau, kad sukurtume pagrindinius tinklelio sistemos lūžio taškus.

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

Retkarčiais išplečiame šias medijos užklausas, max-widthkad apribotume CSS tik siauresniam įrenginių rinkiniui.

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

Tinklelio parinktys

Sužinokite, kaip Bootstrap tinklelio sistemos aspektai veikia keliuose įrenginiuose, naudodami patogią lentelę.

	Itin maži įrenginiai Telefonai (<768px)	Maži įrenginiai, planšetiniai kompiuteriai (≥ 768 piks.)	Vidutiniai įrenginiai, staliniai kompiuteriai (≥ 992 piks.)	Dideli įrenginiai, staliniai kompiuteriai (≥ 1200 pikselių)
Tinklelio elgesys	Visada horizontaliai	Sutraukta, kad būtų pradėta, horizontaliai virš lūžio taškų
Konteinerio plotis	Nėra (automatinis)	750 taškų	970 pikselių	1170 taškų
Klasės priešdėlis	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# stulpelių	12
Stulpelio plotis	Automatinis	~62px	~81px	~97px
Latakų plotis	30 piks. (15 piks. kiekvienoje stulpelio pusėje)
Nestabilus	Taip
Užskaitymai	Taip
Stulpelių užsakymas	Taip

Pavyzdys: sukrauti iki horizontalios

Naudodami vieną .col-md-*tinklelio klasių rinkinį, galite sukurti pagrindinę tinklelio sistemą, kuri pradedama sukrauti mobiliuosiuose įrenginiuose ir planšetiniuose įrenginiuose (nuo ypač mažo iki mažo diapazono), o tada staliniuose (vidutiniuose) įrenginiuose tampa horizontalia. Įdėkite tinklelio stulpelius į bet kurį .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>

Pavyzdys: skysčių talpykla

Paverskite bet kokį fiksuoto pločio tinklelio išdėstymą viso pločio išdėstymu, pakeisdami atokiausią .containerį .container-fluid.

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

Pavyzdys: mobilusis ir stalinis kompiuteris

Nenorite, kad jūsų stulpeliai būtų tiesiog sukrauti mažesniuose įrenginiuose? Naudokite ypač mažo ir vidutinio įrenginio tinklelio klases pridėdami .col-xs-* .col-md-*prie stulpelių. Norėdami geriau suprasti, kaip visa tai veikia, žiūrėkite toliau pateiktą pavyzdį.

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

Pavyzdys: mobilusis, planšetinis kompiuteris, stalinis kompiuteris

Remkitės ankstesniu pavyzdžiu kurdami dar dinamiškesnius ir galingesnius planšetinių kompiuterių .col-sm-*klasių išdėstymus.

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

Pavyzdys: stulpelių apvyniojimas

Jei vienoje eilutėje yra daugiau nei 12 stulpelių, kiekviena papildomų stulpelių grupė kaip vienas vienetas bus apvyniotas nauja eilute.

.col-xs-9

.col-xs-4
Kadangi 9 + 4 = 13 > 12, šis 4 stulpelių pločio dalinys perkeliamas į naują eilutę kaip vienas gretimas vienetas.

.col-xs-6
Tolesni stulpeliai tęsiasi pagal naują eilutę.

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

Atsakingas stulpelis nustatomi iš naujo

Turėdami keturių lygių tinklelius, jūs tikrai susidursite su problemomis, kai tam tikrais lūžio taškais jūsų stulpeliai nėra visiškai išvalomi, nes vienas yra aukštesnis už kitą. Norėdami tai išspręsti, naudokite a .clearfixir mūsų interaktyvių naudingumo klasių derinį .

.col-xs-6 .col-sm-3
Pakeiskite peržiūros srities dydį arba patikrinkite pavyzdį telefone.

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

Be stulpelių išvalymo reaguojančiose pertraukos taškuose, gali reikėti iš naujo nustatyti poslinkius, stūmimus ar traukimus . Žr. tai veikiant tinklelio pavyzdyje .

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

Stulpelių užskaitymas

Perkelkite stulpelius į dešinę naudodami .col-md-offset-*klases. Šios klasės padidina kairiąją stulpelio paraštę *stulpeliais. Pavyzdžiui, .col-md-offset-4perkeliama .col-md-4per keturis stulpelius.

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

Taip pat galite nepaisyti poslinkių iš žemesnių tinklelio pakopų naudodami .col-*-offset-0klases.

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

Įdėti stulpelius

Jei norite įtraukti turinį į numatytąjį tinklelį, esamame stulpelyje pridėkite naują .rowir stulpelių rinkinį . Įdėtose eilutėse turėtų būti stulpelių rinkinys, kurį sudaro 12 ar mažiau (nebūtina naudoti visų 12 galimų stulpelių)..col-sm-*.col-sm-*

1 lygis: .col-sm-9

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

2 lygis: .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>

Stulpelių užsakymas

Lengvai pakeiskite mūsų įtaisytųjų tinklelio stulpelių tvarką naudodami .col-md-push-*ir .col-md-pull-*modifikavimo klases.

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

Mažiau mišinių ir kintamųjų

Be iš anksto sukurtų tinklelio klasių , skirtų greitam išdėstymui, „Bootstrap“ apima mažiau kintamųjų ir mišinių, skirtų greitai sukurti savo paprastus, semantinius išdėstymus.

Kintamieji

Kintamieji nustato stulpelių skaičių, latako plotį ir medijos užklausos tašką, nuo kurio pradėti slankiojantys stulpeliai. Naudojame juos kurdami iš anksto nustatytas tinklelio klases, aprašytas aukščiau, taip pat toliau išvardytiems pasirinktiniams deriniams.

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

Mišiniai

Mišiniai naudojami kartu su tinklelio kintamaisiais, kad būtų generuojamas atskirų tinklelio stulpelių semantinis CSS.

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

Naudojimo pavyzdys

Galite modifikuoti kintamuosius į savo pasirinktines reikšmes arba tiesiog naudoti mišinius su numatytosiomis reikšmėmis. Štai pavyzdys, kaip naudoti numatytuosius nustatymus, kad būtų sukurtas dviejų stulpelių išdėstymas su tarpais.

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

Antraštės

Galimos visos HTML antraštės <h1>iki <h6>. .h1Taip pat yra per .h6klases, kai norite suderinti antraštės šrifto stilių, bet vis tiek norite, kad tekstas būtų rodomas eilute.

h1. Bootstrap antraštė	Pusiau paryškintas 36 pikseliai
h2. Bootstrap antraštė	Pusiau paryškintas 30 pikselių
h3. Bootstrap antraštė	Pusiau paryškintas 24 pikseliai
h4. Bootstrap antraštė	Pusiau paryškintas 18 pikselių
h5. Bootstrap antraštė	Pusiau paryškintas 14 pikselių
h6. Bootstrap antraštė	Pusiau paryškintas 12 pikselių

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

Kurkite lengvesnį, antrinį tekstą bet kurioje antraštėje naudodami bendrą <small>žymą arba .smallklasę.

h1. Bootstrap antraštė Antrinis tekstas

h2. Bootstrap antraštė Antrinis tekstas

h3. Bootstrap antraštė Antrinis tekstas

h4. Bootstrap antraštė Antrinis tekstas

h5. Bootstrap antraštė Antrinis tekstas

h6. Bootstrap antraštė Antrinis tekstas

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

Kūno kopija

„Bootstrap“ visuotinis numatytasis dydis font-sizeyra 14 pikselių , o 1,428line-height . Tai taikoma ir visoms pastraipoms. Be to, (straipsniai) gauna apatinę paraštę, kuri yra pusė apskaičiuoto linijos aukščio (pagal numatytuosius nustatymus 10 pikselių).<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>

Pagrindinio teksto kopija

Išryškinkite pastraipą pridėdami .lead.

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

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

Sukurta naudojant mažiau

Tipografinė skalė remiasi dviem Mažiau kintamaisiais kintamuosiuose.mažiau : @font-size-baseir @line-height-base. Pirmasis yra pagrindinis šrifto dydis, naudojamas visame pasaulyje, o antrasis yra pagrindinės linijos aukštis. Naudojame tuos kintamuosius ir tam tikrą paprastą matematiką, kad sukurtume visų tipų paraštes, užpildus ir linijų aukštį ir dar daugiau. Tinkinkite juos ir „Bootstrap“ prisitaikys.

Eilutiniai teksto elementai

Pažymėtas tekstas

Jei norite paryškinti teksto eigą dėl jo aktualumo kitame kontekste, naudokite <mark>žymą.

Galite naudoti žymėjimo žymąparyškintitekstą.

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

Ištrintas tekstas

Jei norite nurodyti ištrintus teksto blokus, naudokite <del>žymą.

~~Ši teksto eilutė turi būti traktuojama kaip ištrintas tekstas.~~

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

Perbrauktas tekstas

Jei norite nurodyti nebeaktualius teksto blokus, naudokite <s>žymą.

~~Ši teksto eilutė turi būti traktuojama kaip netiksli.~~

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

Įterptas tekstas

Norėdami nurodyti dokumento papildymus, naudokite <ins>žymą.

Ši teksto eilutė turi būti traktuojama kaip dokumento priedas.

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

Pabrauktas tekstas

Norėdami pabraukti tekstą, naudokite <u>žymą.

Ši teksto eilutė bus pateikta kaip pabraukta

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

Naudokite HTML numatytąsias paryškinimo žymas su lengvaisiais stiliais.

Mažas tekstas

Norėdami sumažinti eilutę arba teksto blokus, naudokite <small>žymą, kad nustatytumėte 85 % pirminio teksto dydžio. font-sizeAntraštės elementai įdėtiems elementams gauna savo <small>.

Arba galite naudoti įterptinį elementą su .smallvietoje bet kurio <small>.

Ši teksto eilutė turi būti traktuojama kaip smulkiu šriftu.

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

Paryškintas

Norėdami pabrėžti teksto fragmentą su didesniu šriftu.

Šis teksto fragmentas pateikiamas kaip paryškintas tekstas .

<strong>rendered as bold text</strong>

Kursyvas

Už teksto fragmento paryškinimą kursyvu.

Šis teksto fragmentas pateikiamas kursyvu .

<em>rendered as italicized text</em>

Alternatyvūs elementai

Nesivaržykite naudoti <b>ir <i>HTML5. <b>skirtas paryškinti žodžius ar frazes, nesuteikiant papildomos svarbos, o <i>dažniausiai skirtas balsui, techniniams terminams ir pan.

Lyginimo klasės

Lengvai suderinkite tekstą su komponentais naudodami teksto lygiavimo klases.

Kairėje sulygiuotas tekstas.

Sulygiuotas tekstas centre.

Dešinėje sulygiuotas tekstas.

Pagrįstas tekstas.

Jokio vyniojimo teksto.

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

Transformacijos klasės

Transformuokite tekstą į komponentus naudodami didžiųjų raidžių rašymo klases.

Tekstas mažosiomis raidėmis.

Tekstas didžiosiomis raidėmis.

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

Santrumpos

Stilizuotas <abbr>sutrumpinimų ir akronimų HTML elemento įgyvendinimas, kad būtų rodoma išplėstinė versija užvedus pelės žymeklį. Santrumpos su titleatributu turi šviesiai punktyruotą apatinę kraštinę ir pagalbos žymeklį užvedus pelės žymeklį, suteikiant papildomo konteksto užvedus pelės žymeklį ir pagalbinių technologijų naudotojams.

Pagrindinė santrumpa

Žodžio atributas santrumpa yra attr .

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

Inicializmas

Pridėkite .initialismprie santrumpos, kad sumažintumėte šrifto dydį.

HTML yra geriausias dalykas nuo pjaustytos duonos.

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

Adresai

Pateikite artimiausio protėvio arba viso darbo kontaktinę informaciją. Išsaugokite formatavimą užbaigdami visas eilutes su <br>.

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

Visas vardas
pirmas.paskutinė@example.com

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

Blokinės citatos

Jei norite cituoti turinio blokus iš kito dokumento šaltinio.

Numatytoji blokinė citata

Apvyniokite <blockquote>bet kurį HTML kaip citatą. Tiesių kabučių atveju rekomenduojame <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante.

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

Citatos blokavimo parinktys

Stilius ir turinys keičiami paprastiems standarto variantams <blockquote>.

Šaltinio įvardijimas

Pridėkite a <footer>, kad nustatytumėte šaltinį. Įtraukite šaltinio darbo pavadinimą į <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante.

Kažkas žinomas šaltinio antraštėje

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

Alternatyvūs ekranai

Pridėkite .blockquote-reverse, jei norite gauti citatą su dešinėje lygiuojamu turiniu.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante.

Kažkas žinomas šaltinio antraštėje

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

Sąrašai

Neužsakyta

Elementų, kurių eilės tvarka nėra aiškiai svarbi, sąrašas.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ir masa
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>

Užsakyta

Elementų, kurių tvarka yra aiškiai svarbi, sąrašas.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ir masa
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>

Nestiliuotas

Pašalinkite numatytąją list-styleir kairiąją sąrašo elementų paraštę (tik antriniams). Tai taikoma tik tiesioginiams antrinio sąrašo elementams , o tai reiškia, kad klasę turėsite pridėti ir prie bet kokių įdėtųjų sąrašų.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ir masa
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>

Inline

Įdėkite visus sąrašo elementus į vieną eilutę su display: inline-block;lengvu užpildu.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

apibūdinimas

Terminų sąrašas su susijusiais aprašymais.

Aprašų sąrašai: Aprašų sąrašas puikiai tinka terminams apibrėžti.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Horizontalus aprašymas

Sudėkite terminus ir aprašymus <dl>greta. Prasideda sukrauti kaip numatytasis <dl>s, bet kai naršymo juosta išsiplečia, darykite tai.

Aprašų sąrašai: Aprašų sąrašas puikiai tinka terminams apibrėžti.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Automatinis sutrumpinimas

Horizontaliuose aprašų sąrašuose bus sutrumpinti terminai, kurie yra per ilgi, kad tilptų kairiajame stulpelyje su text-overflow. Siauresnėse peržiūros srityse jie pasikeis į numatytąjį sudėtinį išdėstymą.

Inline

Įterptuosius kodo fragmentus apvyniokite <code>.

Pavyzdžiui, <section>turėtų būti suvyniota kaip įterpta.

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

Vartotojo įvestis

Naudokite , <kbd>kad nurodytumėte įvestį, kuri paprastai įvedama klaviatūra.

Norėdami perjungti katalogus, įveskite cdir katalogo pavadinimą.
Norėdami redaguoti nustatymus, paspauskite 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>

Pagrindinis blokas

Naudokite <pre>kelioms kodo eilutėms. Kad būtų galima tinkamai atvaizduoti, kode būtinai pašalinkite kampinius skliaustus.

<p>Teksto pavyzdys čia...</p>

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

Pasirinktinai galite pridėti .pre-scrollableklasę, kuri nustatys maksimalų 350 pikselių aukštį ir pateiks y ašies slinkties juostą.

Kintamieji

Kintamiesiems nurodyti naudokite <var>žymą.

y = m x + b

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

Mėginio išvestis

Programos išvesties pavyzdžių blokams nurodyti naudokite <samp>žymą.

Šis tekstas turi būti traktuojamas kaip kompiuterio programos išvesties pavyzdys.

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

Pagrindinis pavyzdys

Jei norite sukurti pagrindinį stilių – lengvą kamšalą ir tik horizontalias pertvaras – pridėkite bazinę klasę .tableprie bet kurio <table>. Tai gali atrodyti labai perteklinė, bet kadangi plačiai naudojamos lentelės kitiems papildiniams, pvz., kalendoriams ir datos rinktuvams, pasirinkome atskirti savo tinkintus lentelių stilius.

Neprivaloma lentelės antraštė.
#	Pirmas vardas	Pavardė	Vartotojo vardas
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris	paukštis	@twitter

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

Dryžuotos eilutės

Naudokite .table-stripednorėdami pridėti zebro juosteles į bet kurią lentelės eilutę <tbody>.

Suderinamumas tarp naršyklių

Dryžuotos lentelės formuojamos naudojant :nth-childCSS parinkiklį, kurio nėra Internet Explorer 8.

#	Pirmas vardas	Pavardė	Vartotojo vardas
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris	paukštis	@twitter

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

Stalas su apvadu

Pridėkite .table-borderedkraštines visose lentelės ir langelių pusėse.

#	Pirmas vardas	Pavardė	Vartotojo vardas
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris	paukštis	@twitter

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

Užveskite pelės žymeklį

Pridėti .table-hover, kad įgalintumėte pelės žymeklio būseną lentelės eilutėse, esančiose <tbody>.

#	Pirmas vardas	Pavardė	Vartotojo vardas
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris	paukštis	@twitter

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

Kondensuotas stalas

Pridėkite .table-condensed, kad lentelės būtų kompaktiškesnės, perpjaunant ląstelių užpildą per pusę.

#	Pirmas vardas	Pavardė	Vartotojo vardas
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

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

Kontekstinės klasės

Naudokite kontekstines klases, kad nuspalvintumėte lentelės eilutes arba atskirus langelius.

Klasė	apibūdinimas
`.active`	Taikoma žymeklio spalva tam tikrai eilutei arba langeliui
`.success`	Nurodo sėkmingą arba teigiamą veiksmą
`.info`	Nurodo neutralų informacinį pokytį ar veiksmą
`.warning`	Nurodo įspėjimą, į kurį gali prireikti dėmesio
`.danger`	Nurodo pavojingą arba galimai neigiamą veiksmą

#	Stulpelio antraštė	Stulpelio antraštė	Stulpelio antraštė
1	Stulpelio turinys	Stulpelio turinys	Stulpelio turinys
2	Stulpelio turinys	Stulpelio turinys	Stulpelio turinys
3	Stulpelio turinys	Stulpelio turinys	Stulpelio turinys
4	Stulpelio turinys	Stulpelio turinys	Stulpelio turinys
5	Stulpelio turinys	Stulpelio turinys	Stulpelio turinys
6	Stulpelio turinys	Stulpelio turinys	Stulpelio turinys
7	Stulpelio turinys	Stulpelio turinys	Stulpelio turinys
8	Stulpelio turinys	Stulpelio turinys	Stulpelio turinys
9	Stulpelio turinys	Stulpelio turinys	Stulpelio turinys

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

Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas lentelės eilutei arba atskiram langeliui suteikti tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (matomas tekstas atitinkamoje lentelės eilutėje/ląstelėje), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą su .sr-onlyklase.

Responsive lentelės

Kurkite interaktyvias lenteles suvyniodami bet kurią .tableį kitą .table-responsive, kad jos slinktų horizontaliai mažuose įrenginiuose (mažiau nei 768 piks.). Žiūrėdami daugiau nei 768 piks. pločio, šiose lentelėse nepastebėsite jokio skirtumo.

Vertikalus kirpimas / sutrumpinimas

Interaktyviosiose lentelėse naudojama overflow-y: hidden, kuri nupjauna bet kokį turinį, esantį už apatinio arba viršutinio lentelės krašto. Visų pirma, tai gali iškirpti išskleidžiamuosius meniu ir kitus trečiųjų šalių valdiklius.

Firefox ir laukų rinkiniai

„Firefox“ turi tam tikrą nepatogų laukų rinkinio stilių, widthkuris trikdo reaguojančią lentelę. To negalima nepaisyti be „Firefox“ įsilaužimo, kurio nepateikiame „Bootstrap“:

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

Norėdami gauti daugiau informacijos, perskaitykite šį Stack Overflow atsakymą .

#	Lentelės antraštė	Lentelės antraštė	Lentelės antraštė	Lentelės antraštė	Lentelės antraštė	Lentelės antraštė
1	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis
2	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis
3	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis

#	Lentelės antraštė	Lentelės antraštė	Lentelės antraštė	Lentelės antraštė	Lentelės antraštė	Lentelės antraštė
1	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis
2	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis
3	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis

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

Pagrindinis pavyzdys

Atskiri formų valdikliai automatiškai įgauna tam tikrą visuotinį stilių. Pagal numatytuosius nustatymus visi tekstiniai <input>, <textarea>, ir <select>elementai .form-controlyra nustatyti į width: 100%;. Apvyniokite etiketes ir valdiklius, .form-groupkad būtų optimalus tarpas.

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

Nemaišykite formų grupių su įvesties grupėmis

Nemaišykite formų grupių tiesiogiai su įvesties grupėmis . Vietoj to, įdėkite įvesties grupę formos grupės viduje.

Įdėta forma

Pridėkite .form-inlineprie savo formos (kuri nebūtinai turi būti <form>), kad galėtumėte sulygiuoti kairėje ir eilutinio blokavimo valdiklius. Tai taikoma tik formoms peržiūros srityse, kurios yra bent 768 pikselių pločio.

Gali prireikti pasirinktinio pločio

Įvestys ir pasirinkimai buvo width: 100%;taikomi pagal numatytuosius nustatymus „Bootstrap“. Eilutinėse formose iš naujo nustatome tai, width: auto;kad keli valdikliai galėtų būti vienoje eilutėje. Atsižvelgiant į jūsų išdėstymą, gali prireikti papildomų pasirinktinių pločių.

Visada pridėkite etiketes

Ekrano skaitytuvai turės problemų su formomis, jei neįtrauksite kiekvienos įvesties etiketės. Šių eilutinių formų etiketes galite paslėpti naudodami .sr-onlyklasę. Yra ir kitų alternatyvių metodų, kaip suteikti etiketę pagalbinėms technologijoms, pvz., aria-label, aria-labelledbyarba titleatributas. Jei nė vieno iš jų nėra, ekrano skaitytuvai gali naudoti placeholderatributą, jei yra, tačiau atminkite, kad naudoti placeholderkaip kitų ženklinimo metodų pakaitalą nepatartina.

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

Horizontali forma

Naudokite „Bootstrap“ iš anksto nustatytas tinklelio klases, kad lygiuotumėte etiketes ir formų valdiklių grupes horizontaliame išdėstyme, pridėdami .form-horizontalprie formos (kuri nebūtinai turi būti <form>). Tai padarius, .form-groups elgsis kaip tinklelio eilutės, todėl nereikia .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>

Palaikomi valdikliai

Standartinių formos valdiklių pavyzdžiai, palaikomi formos išdėstymo pavyzdyje.

Įėjimai

Dažniausiai naudojamas formų valdymas, teksto įvesties laukai. Apima visų HTML5 tipų palaikymą: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telir color.

Reikalinga tipo deklaracija

Įvesčių stilius bus pilnas tik tuo atveju, jei jie typebus tinkamai deklaruoti.

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

Įvesties grupės

Norėdami pridėti integruotą tekstą arba mygtukus prieš ir (arba) po bet kurio teksto pagrįsto <input>, peržiūrėkite įvesties grupės komponentą .

Textarea

Formos valdiklis, kuris palaiko kelias teksto eilutes. Jei reikia, pakeiskite rowsatributą.

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

Žymės langeliai ir radijo imtuvai

Žymieji langeliai yra skirti pasirinkti vieną ar kelias parinktis sąraše, o radijo imtuvai skirti pasirinkti vieną iš daugelio.

Palaikomi išjungti žymimieji laukeliai ir radijo imtuvai, tačiau norėdami pateikti „neleidžiamą“ žymeklį ant pirminio žymeklio <label>, turėsite pridėti .disabledklasę prie pirminės klasės .radio, .radio-inline, .checkbox, arba .checkbox-inline.

Numatytasis (sudarytas)

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

Įterpti žymės langeliai ir radijo imtuvai

Naudokite .checkbox-inlinearba .radio-inlineklases žymimuosiuose laukeliuose arba radijo imtuvuose, kad valdikliai būtų rodomi toje pačioje eilutėje.

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

Žymės langeliai ir radijo imtuvai be etiketės teksto

Jei neturite teksto <label>, įvestis pateikiama taip, kaip tikitės. Šiuo metu veikia tik netiesioginiuose žymimuosiuose laukeliuose ir radijo imtuvuose. Nepamirškite pateikti tam tikros formos pagalbinių technologijų etiketės (pvz., naudojant 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>

Parenka

Atminkite, kad daugelis vietinių pasirinktų meniu – būtent „Safari“ ir „Chrome“ – turi užapvalintus kampus, kurių negalima keisti naudojant border-radiusypatybes.

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

<select>Valdikliams su atributu multiplepagal numatytuosius nustatymus rodomos kelios parinktys.

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

Statinis valdymas

Kai formoje šalia formos etiketės reikia įdėti paprastą tekstą, naudokite .form-control-staticklasę <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>

Fokusavimo būsena

Pašaliname numatytuosius outlinekai kurių formų valdiklių stilius ir box-shadowvietoj jų pritaikome :focus.

Demo `:focus`būsena

Aukščiau pateiktame įvesties pavyzdyje naudojami pasirinktiniai stiliai mūsų dokumentacijoje, kad parodytų :focusbūseną .form-control.

Neįgalus būsena

Pridėkite disabledloginį atributą įvestyje, kad išvengtumėte vartotojo sąveikos. Išjungtos įvestys atrodo šviesesnės ir pridedamas not-allowedžymeklis.

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

Išjungti laukų rinkiniai

Pridėkite disabledatributą prie a <fieldset>, kad vienu metu išjungtumėte visus valdiklius <fieldset>.

Įspėjimas dėl nuorodos funkcionalumo`<a>`

<input>Pagal numatytuosius nustatymus naršyklės visus savuosius formų valdiklius ( , <select>ir <button>elementus), esančius a viduje , laikys <fieldset disabled>išjungtais, užkertant kelią klaviatūros ir pelės sąveikai. Tačiau jei jūsų formoje taip pat yra <a ... class="btn btn-*">elementų, jiems bus suteiktas tik stilius pointer-events: none. Kaip pažymėta skiltyje apie mygtukų išjungimo būseną (ir konkrečiai inkaro elementų poskyryje), ši CSS nuosavybė dar nėra standartizuota ir nėra visiškai palaikoma Opera 18 ir senesnėse versijose arba Internet Explorer 11 ir laimėjo. Netrukdykite klaviatūros naudotojams sutelkti dėmesį arba suaktyvinti šias nuorodas. Taigi, kad būtumėte saugūs, naudokite tinkintą JavaScript, kad išjungtumėte tokias nuorodas.

Suderinamumas tarp naršyklių

Nors „Bootstrap“ taikys šiuos stilius visose naršyklėse, „Internet Explorer 11“ ir senesnės versijos visiškai nepalaiko disabledatributo <fieldset>. Naudokite tinkintą JavaScript, kad išjungtumėte laukų rinkinį šiose naršyklėse.

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

Tik skaitymo būsena

Pridėkite readonlyloginį atributą prie įvesties, kad išvengtumėte įvesties vertės pakeitimo. Tik skaitomos įvestys atrodo šviesesnės (kaip ir išjungtos įvestys), tačiau išlaiko standartinį žymeklį.

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

Pagalbos tekstas

Bloko lygio pagalbos tekstas formų valdikliams.

Pagalbos teksto susiejimas su formos valdikliais

Pagalbos tekstas turi būti aiškiai susietas su formos valdikliu, su kuriuo jis susijęs su aria-describedbyatributo naudojimu. Taip bus užtikrinta, kad pagalbinės technologijos, pvz., ekrano skaitytuvai, praneštų šį pagalbos tekstą, kai vartotojas sufokusuos arba įeis į valdiklį.

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

Patvirtinimo būsenos

„Bootstrap“ apima klaidų, įspėjimų ir sėkmės būsenų patvirtinimo stilius formos valdikliuose. Norėdami naudoti, pridėkite .has-warning, .has-error, arba .has-successprie pirminio elemento. Bet kuris .control-label, .form-control, ir .help-blocktame elemente gaus patvirtinimo stilius.

Patvirtinimo būsenos perdavimas pagalbinėms technologijoms ir daltonikams naudotojams

Naudojant šiuos patvirtinimo stilius formos valdiklio būsenai žymėti, pateikiama tik vaizdinė, spalvomis pagrįsta nuoroda, kuri nebus perduota pagalbinių technologijų naudotojams, pvz., ekrano skaitytuvams, arba daltonistams.

Užtikrinkite, kad būtų pateikta ir alternatyvi būsenos nuoroda. Pavyzdžiui, galite įtraukti užuominą apie būseną į patį formos valdiklio <label>tekstą (kaip yra toliau pateiktame kodo pavyzdyje), įtraukti Glyphicon (su atitinkamu alternatyviu tekstu naudojant .sr-onlyklasę – žr. Glyphicon pavyzdžius ) arba pateikdami papildomas pagalbos teksto blokas. Konkrečiai pagalbinėms technologijoms, netinkamoms formų valdikliams taip pat gali būti priskirtas aria-invalid="true"atributas.

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

Su pasirenkamomis piktogramomis

Taip pat galite pridėti pasirenkamų atsiliepimų piktogramų, pridėdami .has-feedbackir dešiniąją piktogramą.

Atsiliepimų piktogramos veikia tik su tekstiniais <input class="form-control">elementais.

Piktogramos, etiketės ir įvesties grupės

Neautomatinis grįžtamojo ryšio piktogramų išdėstymas reikalingas įvestims be etiketės ir įvesties grupėms su priedu dešinėje. Dėl prieinamumo primygtinai rekomenduojame pateikti etiketes visoms įvestims. Jei norite, kad etiketės nebūtų rodomos, paslėpkite jas .sr-onlyklasėje. Jei turite apsieiti be etikečių, pakoreguokite topatsiliepimo piktogramos reikšmę. Jei naudojate įvesties grupes, nustatykite rightatitinkamą pikselių reikšmę, atsižvelgdami į priedo plotį.

Piktogramos reikšmės perteikimas pagalbinėms technologijoms

Siekiant užtikrinti, kad pagalbinės technologijos, pvz., ekrano skaitytuvai, teisingai perteiktų piktogramos reikšmę, papildomas paslėptas tekstas turėtų būti įtrauktas į .sr-onlyklasę ir aiškiai susietas su formos valdikliu, su kuriuo jis susijęs aria-describedby. Arba įsitikinkite, kad prasmė (pavyzdžiui, faktas, kad tam tikrame teksto įvesties lauke yra įspėjimas) būtų perteikta kita forma, pvz., pakeitus faktinio, <label>susieto su formos valdikliu, tekstą.

Nors toliau pateiktuose pavyzdžiuose jau minima atitinkamų formų valdiklių patvirtinimo būsena pačiame <label>tekste, aukščiau pateikta technika (naudojant .sr-onlytekstą ir aria-describedby) buvo įtraukta iliustravimo tikslais.

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

Neprivalomos piktogramos horizontaliose ir įterptose formose

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

Pasirenkamos piktogramos su paslėptomis `.sr-only`etiketėmis

Jei naudojate .sr-onlyklasę, kad paslėptumėte formos valdiklį <label>(o ne naudotumėte kitas ženklinimo parinktis, pvz., aria-labelatributą), „Bootstrap“ automatiškai pakoreguos piktogramos padėtį, kai ji bus pridėta.

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

Kontrolės dydis

Nustatykite aukštį naudodami tokias klases, kaip .input-lg, ir pločius naudodami tinklelio stulpelių klases, pvz ., .col-lg-*.

Aukščio dydis

Kurkite aukštesnius arba trumpesnius formos valdiklius, atitinkančius mygtukų dydžius.

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

Horizontalios formos grupių dydžiai

Greitai pakeiskite etikečių dydį ir formų valdiklius .form-horizontalpridėdami .form-group-lgarba .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>

Stulpelių dydžio nustatymas

Apvyniokite įvestis į tinklelio stulpelius arba bet kurį pasirinktinį pagrindinį elementą, kad lengvai pritaikytumėte norimus pločius.

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

Mygtukų žymos

Naudokite mygtukų klases <a>, <button>, arba <input>elemente.

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

Kontekstui būdingas naudojimas

Nors mygtukų klases galima naudoti <a>ir <button>elementuose, mūsų naršymo ir naršymo juostos komponentuose palaikomi tik <button>elementai.

Nuorodos, veikiančios kaip mygtukai

Jei <a>elementai naudojami kaip mygtukai – suaktyvina puslapio funkcijas, o ne pereina į kitą dokumentą ar skiltį dabartiniame puslapyje – jiems taip pat turėtų būti suteiktas atitinkamas role="button".

Atvaizdavimas keliose naršyklėse

Kaip geriausią praktiką primygtinai rekomenduojame naudoti <button>elementą, kai tik įmanoma , kad būtų užtikrintas suderinamas kelių naršyklių pateikimas.

Be kita ko, yra „ Firefox“ <30 klaida , neleidžianti mums nustatyti mygtukų line-height, <input>pagrįstų mygtukais, todėl jie tiksliai neatitinka kitų „Firefox“ mygtukų aukščio.

Galimybės

Naudokite bet kurią iš galimų mygtukų klasių, kad greitai sukurtumėte stiliaus mygtuką.

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

Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas mygtuko reikšmei suteikti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Įsitikinkite, kad informacija, pažymėta spalva, yra akivaizdi iš paties turinio (matomas mygtuko tekstas), arba įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą su .sr-onlyklase.

Dydžiai

Mėgstate didesnius ar mažesnius mygtukus? Pridėkite .btn-lg, .btn-sm, arba .btn-xspapildomų dydžių.

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

Sukurkite bloko lygio mygtukus – tuos, kurie apima visą pirminio plotį – pridėdami .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>

Aktyvi būsena

Mygtukai bus rodomi paspausti (su tamsesniu fonu, tamsesniu kraštu ir įterptu šešėliu), kai jie bus aktyvūs. <button>Elementams tai atliekama :activeper . <a>Elementams tai daroma .activenaudojant . Tačiau galite naudoti .actives <button>(ir įtraukti aria-pressed="true"atributą), jei reikia programiškai pakartoti aktyvią būseną.

Mygtuko elementas

Nereikia pridėti :active, nes tai yra pseudoklasė, bet jei reikia priverstinai atrodyti taip pat, eikite į priekį ir pridėkite .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>

Inkaro elementas

Pridėkite .activeklasę prie <a>mygtukų.

Pirminė nuoroda Nuoroda

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

Neįgalus būsena

Kad mygtukai atrodytų nespustelėti, panaikinkite juos atgal naudodami opacity.

Mygtuko elementas

Pridėkite disabledatributą prie <button>mygtukų.

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

Suderinamumas tarp naršyklių

Jei pridėsite disabledatributą prie <button>, Internet Explorer 9 ir senesnės versijos tekstas bus pilkas su bjauriu teksto šešėliu, kurio negalime ištaisyti.

Inkaro elementas

Pridėkite .disabledklasę prie <a>mygtukų.

Pirminė nuoroda Nuoroda

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

Čia mes naudojame .disabledkaip naudingumo klasę, panašią į bendrą .activeklasę, todėl priešdėlio nereikia.

Nuorodos funkcijos įspėjimas

Ši klasė naudojama pointer-events: nonebandant išjungti s nuorodos funkcionalumą <a>, tačiau ta CSS ypatybė dar nėra standartizuota ir nėra visiškai palaikoma Opera 18 ir senesnėse versijose arba Internet Explorer 11. Be to, net naršyklėse, kurios palaiko pointer-events: none, klaviatūrą navigacija lieka nepakitusi, o tai reiškia, kad regintys klaviatūros ir pagalbinių technologijų naudotojai vis tiek galės suaktyvinti šias nuorodas. Taigi, kad būtumėte saugūs, naudokite tinkintą JavaScript, kad išjungtumėte tokias nuorodas.

Atsakingi vaizdai

„Bootstrap 3“ vaizdus galima padaryti taip, kad jie būtų jautrūs pridedant .img-responsiveklasę. Tai taikoma max-width: 100%;ir vaizdui height: auto;, display: block;kad jis gražiai atitiktų pagrindinį elementą.

Norėdami centruoti vaizdus, kuriuose naudojama .img-responsiveklasė, naudokite .center-blockvietoj .text-center. Daugiau informacijos apie naudojimą rasite pagalbinių klasių skyriuje ..center-block

SVG vaizdai ir IE 8-10

„Internet Explorer 8-10“ SVG vaizdai .img-responsiveyra neproporcingai dideli. Norėdami tai išspręsti, pridėkite, width: 100% \9;kur reikia. „Bootstrap“ to netaiko automatiškai, nes tai sukelia kitų vaizdo formatų komplikacijų.

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

Vaizdo formos

Pridėkite klasių prie <img>elemento, kad galėtumėte lengvai formuoti bet kurio projekto vaizdus.

Suderinamumas tarp naršyklių

Atminkite, kad „Internet Explorer 8“ nepalaiko užapvalintų kampų.

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

Kontekstinės spalvos

Perteikite prasmę spalvomis naudodami keletą naudingumo klasių. Jie taip pat gali būti taikomi nuorodoms ir užvedus pelės žymeklį tamsės, kaip ir numatytieji nuorodų stiliai.

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>

Susidoroti su konkretumu

Kartais kirčiavimo klasės negali būti taikomos dėl kito parinkiklio specifikos. Daugeliu atvejų pakanka apeiti tekstą į <span>klase.

Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Įsitikinkite, kad spalva pažymėta informacija yra akivaizdi iš paties turinio (kontekstinės spalvos naudojamos tik norint sustiprinti reikšmę, kuri jau yra tekste / žymėjime), arba įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą su .sr-onlyklase . .

Kontekstiniai fonai

Panašiai kaip kontekstinio teksto spalvų klasėse, lengvai nustatykite elemento foną į bet kurią kontekstinę klasę. Inkaro komponentai patamsės užvedus pelės žymeklį, kaip ir teksto klasės.

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>

Susidoroti su konkretumu

Kartais kontekstinės fono klasės negali būti taikomos dėl kito parinkiklio specifikos. Kai kuriais atvejais pakankamas sprendimas yra sudėti elemento turinį į <div>klasę.

Pagalbinių technologijų prasmės perteikimas

Kaip ir kontekstinės spalvos , užtikrinkite, kad bet kokia spalvomis perteikiama reikšmė taip pat būtų perteikiama ne tik pristatymo formatu.

Uždaryti piktogramą

Jei norite atsisakyti turinio, pvz., modalų ir įspėjimų, naudokite bendrąją uždarymo piktogramą.

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

Carets

Norėdami nurodyti išskleidžiamojo meniu funkcijas ir kryptį, naudokite taškelius. Atkreipkite dėmesį, kad numatytasis žymeklis automatiškai pasikeis išskleidžiamuosiuose meniu .

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

Greitos plūdės

Paslinkite elementą į kairę arba dešinę su klase. !importantyra įtrauktas, kad būtų išvengta specifiškumo problemų. Klasės taip pat gali būti naudojamos kaip miksai.

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

Centruoti turinio blokus

Nustatykite elementą į display: blockir centre per margin. Galima įsigyti kaip mišinį ir klasę.

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

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

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

Clearfix

Lengvai išvalykite floats pridėdami .clearfix prie pagrindinio elemento . Naudoja Nicolas Gallagher išpopuliarintą mikro clearfix . Galima naudoti ir kaip mišinį.

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

Turinio rodymas ir slėpimas

Priverskite elementą rodyti arba paslėpti ( įskaitant ekrano skaitytuvus ) naudojant .showir .hiddenklases. Šios klasės naudojamos !importantsiekiant išvengti konkretumo konfliktų, kaip ir greitosios plūdės . Jie galimi tik perjungiant bloko lygį. Jie taip pat gali būti naudojami kaip mišiniai.

.hideyra prieinama, tačiau ji ne visada turi įtakos ekrano skaitytuvams ir yra nebenaudojama nuo 3.0.1 versijos. Naudokite .hiddenarba .sr-onlyvietoj.

Be to, .invisiblegali būti naudojamas tik elemento matomumui perjungti, o tai reiškia, kad displayjis nėra pakeistas ir elementas vis tiek gali paveikti dokumento eigą.

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

Ekrano skaitytuvo ir klaviatūros naršymo turinys

Slėpti elementą visuose įrenginiuose, išskyrus ekrano skaitytuvus su .sr-only. Sujunkite .sr-onlysu .sr-only-focusable, kad vėl būtų rodomas elementas, kai jis sufokusuotas (pvz., tik klaviatūrą turintis vartotojas). Būtina laikytis geriausios pritaikymo neįgaliesiems praktikos pavyzdžiais . Taip pat gali būti naudojami kaip mišiniai.

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

Vaizdo keitimas

Naudokite .text-hideklasę arba miksą, kad pakeistumėte elemento teksto turinį fono paveikslėliu.

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

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

Norėdami greičiau kurti mobiliesiems pritaikytą, naudokite šias paslaugų klases, kad rodytumėte ir slėptumėte turinį pagal įrenginį naudodami medijos užklausą. Taip pat įtrauktos naudingumo klasės, skirtos perjungti turinį spausdinant.

Stenkitės juos naudoti ribotai ir nekurkite visiškai skirtingų tos pačios svetainės versijų. Vietoj to naudokite juos, kad papildytumėte kiekvieno įrenginio pristatymą.

Galimos klasės

Naudokite vieną galimą klasių arba jų derinį, kad perjungtumėte turinį per peržiūros srities lūžio taškus.

	Itin maži įrenginiaiTelefonai (<768 piks.)	Maži prietaisaiPlanšetiniai kompiuteriai (≥ 768 piks.)	Vidutiniai įrenginiaiStaliniai kompiuteriai (≥ 992 piks.)	Dideli įrenginiaiStaliniai kompiuteriai (≥ 1200 piks.)
`.visible-xs-*`	Matomas	Paslėpta	Paslėpta	Paslėpta
`.visible-sm-*`	Paslėpta	Matomas	Paslėpta	Paslėpta
`.visible-md-*`	Paslėpta	Paslėpta	Matomas	Paslėpta
`.visible-lg-*`	Paslėpta	Paslėpta	Paslėpta	Matomas
`.hidden-xs`	Paslėpta	Matomas	Matomas	Matomas
`.hidden-sm`	Matomas	Paslėpta	Matomas	Matomas
`.hidden-md`	Matomas	Matomas	Paslėpta	Matomas
`.hidden-lg`	Matomas	Matomas	Matomas	Paslėpta

Nuo 3.2.0 versijos .visible-*-*kiekvienos lūžio taško klasės yra trijų variantų, po vieną kiekvienai displaytoliau nurodytai CSS nuosavybės vertei.

Klasių grupė	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Taigi, pavyzdžiui, ypač mažiems ( xs) ekranams galimos .visible-*-*klasės yra: .visible-xs-block, .visible-xs-inline, ir .visible-xs-inline-block.

Klasės .visible-xs, .visible-sm, .visible-mdir .visible-lgtaip pat egzistuoja, bet yra nebenaudojamos nuo 3.2.0 versijos . Jie yra maždaug lygiaverčiai .visible-*-block, išskyrus papildomus specialius atvejus, susijusius su <table>elementų perjungimu.

Spausdinimo klasės

Panašiai kaip ir įprastas reaguojančias klases, naudokite jas norėdami perjungti turinį spausdinti.

Klasės	Naršyklė	Spausdinti
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Paslėpta	Matomas
`.hidden-print`	Matomas	Paslėpta

Klasė .visible-printtaip pat egzistuoja, bet yra nebenaudojama nuo 3.2.0 versijos. Jis yra maždaug lygiavertis .visible-print-block, išskyrus papildomus specialius atvejus <table>susijusiems elementams.

Bandomieji atvejai

Pakeiskite naršyklės dydį arba įkelkite į skirtingus įrenginius, kad išbandytumėte reaguojančias paslaugų klases.

Matoma...

Žalios varnelės rodo, kad elementas matomas dabartinėje peržiūros srityje.

Labai mažas ✔ Matosi ant x-small

Mažas ✔ Matosi ant mažų

Vidutinis ✔ Matoma ant vidutinės

Didelis ✔ Matosi ant didelių

Itin mažas ir mažas ✔ Matosi ant x-small ir small

Vidutinis ir didelis ✔ Matosi ant vidutinių ir didelių

Itin mažas ir vidutinis ✔ Matoma ant x-small ir medium

Maži ir dideli ✔ Matosi ant mažų ir didelių

Itin mažas ir didelis ✔ Matoma ant x mažo ir didelio

Mažas ir vidutinis ✔ Matoma ant mažų ir vidutinių

Paslėpta ant...

Čia žalios varnelės taip pat rodo, kad elementas yra paslėptas dabartinėje peržiūros srityje.

Labai mažas ✔ Paslėpta ant x-small

Mažas ✔ Paslėptas ant mažo

Vidutinis ✔ Paslėpta ant vidutinės

Didelis ✔ Paslėpta ant didelių

Itin mažas ir mažas ✔ Paslėpta ant x-small ir small

Vidutinis ir didelis ✔ Paslėpta ant vidutinių ir didelių

Itin mažas ir vidutinis ✔ Hidden on x-small and medium

Small and large ✔ Paslėptas ant mažų ir didelių

Extra small and large ✔ Paslėpta ant x mažų ir didelių

Mažas ir vidutinis ✔ Hidden on small and medium

„Bootstrap“ CSS sukurta remiantis „Less“ – išankstiniu procesoriumi, turinčiu papildomų funkcijų, tokių kaip kintamieji, deriniai ir CSS kompiliavimo funkcijos. Tie, kurie nori naudoti šaltinį Less files, o ne mūsų sudarytus CSS failus, gali pasinaudoti daugybe kintamųjų ir derinių, kuriuos naudojame visoje sistemoje.

Tinklelio kintamieji ir mišiniai aprašyti Tinklelio sistemos skyriuje .

Bootstrap kompiliavimas

Bootstrap gali būti naudojamas bent dviem būdais: su sudarytu CSS arba su šaltinio Less failais. Norėdami sudaryti mažiau failų, skaitykite skyrių Darbo pradžia , kaip nustatyti kūrimo aplinką, kad būtų paleistos reikiamos komandos.

Trečiųjų šalių kompiliavimo įrankiai gali veikti su „Bootstrap“, tačiau mūsų pagrindinė komanda jų nepalaiko.

Kintamieji

Kintamieji naudojami visame projekte kaip būdas centralizuoti ir bendrinti dažniausiai naudojamas reikšmes, pvz., spalvas, tarpus ar šriftų krūvas. Norėdami gauti išsamų suskirstymą, žr . tinkinimo priemonę .

Spalvos

Lengvai naudokite dvi spalvų schemas: pilkos spalvos ir semantines. Pilkos atspalvių spalvos suteikia greitą prieigą prie dažniausiai naudojamų juodos spalvos atspalvių, o semantinės apima įvairias spalvas, priskirtas reikšmingoms konteksto reikšmėms.

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

Naudokite bet kurį iš šių spalvų kintamųjų tokius, kokie jie yra, arba perskirkite juos reikšmingesniems projekto kintamiesiems.

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

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

Pastoliai

Keletas kintamųjų, skirtų greitai tinkinti pagrindinius svetainės skeleto elementus.

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

Nuorodos

Lengvai formuokite nuorodas tinkama spalva, turėdami tik vieną vertę.

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

Atkreipkite dėmesį, kad @link-hover-colornaudojama funkcija, dar vienas puikus įrankis iš Less, kad automatiškai sukurtų tinkamą užvedimo spalvą. Galite naudoti darken, lighten, saturateir desaturate.

Tipografija

Naudodami kelis greitus kintamuosius lengvai nustatykite šriftą, teksto dydį, pradinį tekstą ir kt. „Bootstrap“ jas taip pat naudoja, kad pateiktų lengvus tipografinius mišinius.

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

Piktogramos

Du greiti kintamieji, skirti tinkinti piktogramų vietą ir failo pavadinimą.

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

Komponentai

Viso Bootstrap komponentai naudoja kai kuriuos numatytuosius kintamuosius bendroms reikšmėms nustatyti. Čia yra dažniausiai naudojami.

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

Pardavėjų mišiniai

Tiekėjų rinkiniai yra deriniai, padedantys palaikyti kelias naršykles, įtraukiant visus atitinkamus tiekėjo priešdėlius į jūsų sudarytą CSS.

Dėžutės dydžio nustatymas

Iš naujo nustatykite komponentų dėžutės modelį vienu maišytuvu. Dėl konteksto žr. šį naudingą Mozilla straipsnį .

„Mixin“ nebenaudojama nuo 3.2.0 versijos, įdiegus „Autoprefixer“. Siekdama išsaugoti atgalinį suderinamumą, „Bootstrap“ ir toliau naudos „mixin“ viduje iki „Bootstrap v4“.

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

Apvalūs kampai

Šiandien visos šiuolaikinės naršyklės palaiko border-radiusypatybę be priešdėlio. Iš esmės nėra .border-radius()maišymo, tačiau „Bootstrap“ apima sparčiuosius klavišus, leidžiančius greitai suapvalinti du kampus tam tikroje objekto pusėje.

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

Dėžutės (Drop) šešėliai

Jei jūsų tikslinė auditorija naudoja naujausias ir geriausias naršykles bei įrenginius, būtinai naudokite box-shadownuosavybę atskirai. Jei reikia senesnių „Android“ (iki 4 versijos) ir „iOS“ įrenginių (iki 5 versijos „iOS“) palaikymo, naudokite nebenaudojamą mišinį, kad pasirinktumėte reikiamą -webkitpriešdėlį.

„Mixin“ nebenaudojama nuo 3.1.0 versijos, nes „Bootstrap“ oficialiai nepalaiko pasenusių platformų, kurios nepalaiko standartinės nuosavybės. Kad išsaugotų atgalinį suderinamumą, „Bootstrap“ ir toliau naudos „mixin“ viduje iki „Bootstrap v4“.

Dėžutės šešėliuose būtinai naudokite rgba()spalvas, kad jie kuo sklandžiau susilietų su fonu.

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

Perėjimai

Keli mišiniai lankstumui. Visą perėjimo informaciją nustatykite vienu arba, jei reikia, nurodykite atskirą delsą ir trukmę.

Mišiniai nebenaudojami nuo 3.2.0 versijos, įdiegus Autoprefixer. Siekdama išsaugoti atgalinį suderinamumą, „Bootstrap“ ir toliau naudos mišinius viduje iki „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;
}

Transformacijos

Pasukite, pakeiskite mastelį, išverskite (perkelkite) arba pakreipkite bet kurį objektą.

Mišiniai nebenaudojami nuo 3.2.0 versijos, įdiegus Autoprefixer. Siekdama išsaugoti atgalinį suderinamumą, „Bootstrap“ ir toliau naudos mišinius viduje iki „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;
}

Animacijos

Vienas mišinys, skirtas naudoti visas CSS3 animacijos ypatybes vienoje deklaracijoje ir kiti mišiniai atskiroms savybėms.

Mišiniai nebenaudojami nuo 3.2.0 versijos, įdiegus Autoprefixer. Siekdama išsaugoti atgalinį suderinamumą, „Bootstrap“ ir toliau naudos mišinius viduje iki „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;
}

Neskaidrumas

Nustatykite visų naršyklių neskaidrumą ir pateikite filteratsarginę versiją IE8.

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

Vietos rezervavimo tekstas

Pateikite kiekvieno lauko formos valdiklių kontekstą.

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

Stulpeliai

Generuokite stulpelius per CSS viename elemente.

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

Gradientai

Lengvai paverskite bet kurias dvi spalvas fono gradientu. Patobulinkite ir nustatykite kryptį, naudokite tris spalvas arba naudokite radialinį gradientą. Su vienu miksu gausite visas jums reikalingas sintakses su priešdėliu.

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

Taip pat galite nurodyti standartinio dviejų spalvų linijinio gradiento kampą:

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

Jei jums reikia kirpėjo juostelių stiliaus gradiento, tai taip pat paprasta. Tiesiog nurodykite vieną spalvą ir mes perdengsime permatomą baltą juostelę.

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

Pakelkite ante ir vietoj to naudokite tris spalvas. Nustatykite pirmąją spalvą, antrąją spalvą, antrosios spalvos stabdymą (procentinę reikšmę, pvz., 25%) ir trečią spalvą naudodami šiuos mišinius:

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

Galvas aukštyn! Jei kada nors reikės pašalinti gradientą, būtinai pašalinkite visus su IE susijusius elementus, filterkuriuos galbūt pridėjote. Tai galite padaryti naudodami .reset-filter()maišytuvą kartu su background-image: none;.

Komunaliniai mišiniai

Utility mixins yra mišiniai, kurie sujungia kitaip nesusijusias CSS savybes, kad pasiektų konkretų tikslą ar užduotį.

Clearfix

Pamirškite pridėti class="clearfix"prie bet kurio elemento ir, .clearfix()jei reikia, pridėkite mišinį. Naudoja Nicolas Gallagher mikro clearfix .

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

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

Horizontalus centravimas

Greitai centruokite bet kurį elementą pirminiame elemente. Reikalingas widtharba max-widthturi būti nustatytas.

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

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

Dydžių pagalbininkai

Lengviau nurodykite objekto matmenis.

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

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

Keičiamo dydžio tekstinės sritys

Lengvai sukonfigūruokite bet kurios teksto srities ar bet kurio kito elemento dydžio keitimo parinktis. Numatyta, kad naršyklė veikia normaliai ( both).

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

Teksto sutrumpinimas

Lengvai sutrumpinkite tekstą su elipsėmis vienu maišymu. Elementas turi būti blockarba inline-blocklygus.

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

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

Tinklainės vaizdai

Nurodykite du vaizdo kelius ir @1x vaizdo matmenis, o Bootstrap pateiks @2x medijos užklausą. Jei turite pateikti daug vaizdų, apsvarstykite galimybę tinklainės vaizdo CSS parašyti rankiniu būdu vienoje medijos užklausoje.

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

Nors „Bootstrap“ sukurtas „Less“, jis taip pat turi oficialų „Sass“ prievadą . Mes jį prižiūrime atskiroje „GitHub“ saugykloje ir tvarkome atnaujinimus naudodami konversijos scenarijų.

Kas įtraukta

Kadangi Sass prievadas turi atskirą repo ir aptarnauja šiek tiek kitokią auditoriją, projekto turinys labai skiriasi nuo pagrindinio Bootstrap projekto. Tai užtikrina, kad Sass prievadas būtų suderinamas su kuo daugiau Sass pagrįstų sistemų.

Kelias	apibūdinimas
`lib/`	„Ruby gem“ kodas („Sass“ konfigūracija, „Rails“ ir „Compass“ integracijos)
`tasks/`	Konvertavimo scenarijai (prieš srovę paverčiant Less į Sass)
`test/`	Kompiliavimo testai
`templates/`	Kompaso paketo manifestas
`vendor/assets/`	Sass, JavaScript ir šriftų failai
`Rakefile`	Vidinės užduotys, tokios kaip grėbimas ir konvertavimas

Apsilankykite „ Sass“ prievado „GitHub“ saugykloje , kad pamatytumėte, kaip šie failai veikia.

Montavimas

Norėdami gauti informacijos apie tai, kaip įdiegti ir naudoti „Bootstrap for Sass“, žr. „ GitHub“ saugyklą readme . Tai pats naujausias šaltinis ir apima informaciją, skirtą naudoti su Rails, Compass ir standartiniais Sass projektais.

Bootstrap Sass

CSS

Apžvalga

HTML5 doctype

Pirmiausia mobilusis

Tipografija ir nuorodos

Normalize.css

Konteineriai

Tinklelio sistema

Įvadas

Žiniasklaidos užklausos

Tinklelio parinktys

Pavyzdys: sukrauti iki horizontalios

Pavyzdys: skysčių talpykla

Pavyzdys: mobilusis ir stalinis kompiuteris

Pavyzdys: mobilusis, planšetinis kompiuteris, stalinis kompiuteris

Pavyzdys: stulpelių apvyniojimas

Atsakingas stulpelis nustatomi iš naujo

Stulpelių užskaitymas

Įdėti stulpelius

Stulpelių užsakymas

Mažiau mišinių ir kintamųjų

Kintamieji

Mišiniai

Naudojimo pavyzdys

Tipografija

Antraštės

h1. Bootstrap antraštė

h2. Bootstrap antraštė

h3. Bootstrap antraštė

h4. Bootstrap antraštė

h5. Bootstrap antraštė

h6. Bootstrap antraštė

h1. Bootstrap antraštė Antrinis tekstas

h2. Bootstrap antraštė Antrinis tekstas

h3. Bootstrap antraštė Antrinis tekstas

h4. Bootstrap antraštė Antrinis tekstas

h5. Bootstrap antraštė Antrinis tekstas

h6. Bootstrap antraštė Antrinis tekstas

Kūno kopija

Pagrindinio teksto kopija

Sukurta naudojant mažiau

Eilutiniai teksto elementai

Pažymėtas tekstas

Ištrintas tekstas

Perbrauktas tekstas

Įterptas tekstas

Pabrauktas tekstas

Mažas tekstas

Paryškintas

Kursyvas

Alternatyvūs elementai

Lyginimo klasės

Transformacijos klasės

Santrumpos

Pagrindinė santrumpa

Inicializmas

Adresai

Blokinės citatos

Numatytoji blokinė citata

Citatos blokavimo parinktys

Šaltinio įvardijimas

Alternatyvūs ekranai

Sąrašai

Neužsakyta

Užsakyta

Nestiliuotas

Inline

apibūdinimas

Horizontalus aprašymas

Automatinis sutrumpinimas

Kodas

Inline

Vartotojo įvestis

Pagrindinis blokas

Kintamieji

Mėginio išvestis

Lentelės

Pagrindinis pavyzdys

Dryžuotos eilutės

Suderinamumas tarp naršyklių

Demo `:focus`būsena

Įspėjimas dėl nuorodos funkcionalumo`<a>`

Pasirenkamos piktogramos su paslėptomis `.sr-only`etiketėmis