Iegūstiet informāciju par galvenajiem Bootstrap infrastruktūras elementiem, tostarp mūsu pieeju labākai, ātrākai un spēcīgākai tīmekļa izstrādei.

HTML5 doktips

Bootstrap izmanto noteiktus HTML elementus un CSS rekvizītus, kuriem nepieciešams izmantot HTML5 doctype. Iekļaujiet to visu savu projektu sākumā.

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

Vispirms mobilais

Izmantojot Bootstrap 2, mēs pievienojām izvēles mobilajām ierīcēm piemērotus stilus galvenajiem sistēmas aspektiem. Izmantojot Bootstrap 3, mēs jau no paša sākuma esam pārrakstījuši projektu, lai tas būtu piemērots mobilajām ierīcēm. Tā vietā, lai pievienotu izvēles mobilos stilus, tie tiek pilnībā iestrādāti. Faktiski Bootstrap vispirms ir mobilais . Mobilie pirmie stili ir atrodami visā bibliotēkā, nevis atsevišķos failos.

Lai nodrošinātu pareizu renderēšanu un pieskāriena tālummaiņu, pievienojiet skatvietas metatagu savam <head>.

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

Varat atspējot tālummaiņas iespējas mobilajās ierīcēs, pievienojot user-scalable=noskata loga metatagu. Tādējādi tiek atspējota tālummaiņa, kas nozīmē, ka lietotāji var tikai ritināt, un rezultātā jūsu vietne šķiet vairāk līdzīga vietējai lietojumprogrammai. Kopumā mēs neiesakām to izmantot katrā vietnē, tāpēc esiet piesardzīgs!

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

Tipogrāfija un saites

Bootstrap iestata pamata globālo displeju, tipogrāfiju un saišu stilus. Konkrēti, mēs:

Iestatiet background-color: #fff;uzbody
Izmantojiet atribūtus , un kā mūsu @font-family-basetipogrāfisko @font-size-basebāzi@line-height-base
Iestatiet globālās saites krāsu @link-colorun izmantojiet tikai saites pasvītrojumus:hover

Šos stilus var atrast sadaļā scaffolding.less.

Normalize.css

Lai uzlabotu pārrobežu atveidošanu, mēs izmantojam Normalize.css , Nikolā Galahera un Džonatana Nīla projektu .

Konteineri

Bootstrap ir nepieciešams saturošs elements, lai aplauztu vietnes saturu un ievietotu mūsu režģa sistēmu. Jūs varat izvēlēties vienu no diviem konteineriem, ko izmantot savos projektos. Ņemiet vērā, ka paddingvairāku iemeslu dēļ neviens konteiners nav ligzdots.

Izmantojiet .containeratsaucīgam fiksēta platuma konteineram.

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

Izmantojiet .container-fluidpilna platuma konteineram, kas aptver visu skatvietas platumu.

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

Bootstrap ir iekļauta atsaucīga, mobila pirmā šķidruma režģa sistēma, kas atbilstoši mērogojas līdz 12 kolonnām, palielinoties ierīces vai skata loga izmēram. Tajā ir iekļautas iepriekš noteiktas klases ērtām izkārtojuma opcijām, kā arī jaudīgi mixins semantisku izkārtojumu ģenerēšanai .

Ievads

Režģa sistēmas tiek izmantotas, lai izveidotu lapu izkārtojumus, izmantojot virkni rindu un kolonnu, kurās atrodas jūsu saturs. Lūk, kā darbojas Bootstrap režģa sistēma:

Rindas ir jāievieto .container(fiksēta platuma) vai .container-fluid(pilna platuma) robežās, lai tās būtu pareizi izlīdzinātas un polsterētas.
Izmantojiet rindas, lai izveidotu horizontālas kolonnu grupas.
Saturs ir jāievieto kolonnās, un tikai kolonnas var būt tiešie rindu atvasinājumi.
Iepriekš noteiktas režģa klases, piemēram, .rowun .col-xs-4ir pieejamas, lai ātri izveidotu režģa izkārtojumus. Mazāk miksīnu var izmantot arī semantiskiem izkārtojumiem.
Kolonnas izveido notekas (atstarpes starp kolonnu saturu), izmantojot padding. Šis polsterējums ir nobīdīts rindās pirmajā un pēdējā kolonnā, izmantojot negatīvu piemali uz .rows.
Negatīvā starpība ir iemesls, kāpēc tālāk minētie piemēri ir izvilkti. Tas ir paredzēts, lai saturs režģa kolonnās tiktu sakārtots ar saturu, kas nav režģis.
Režģa kolonnas tiek izveidotas, norādot divpadsmit pieejamo kolonnu skaitu, kuras vēlaties aptvert. Piemēram, trīs vienādas kolonnas izmantotu trīs .col-xs-4.
Ja vienā rindā ir ievietotas vairāk nekā 12 kolonnas, katra papildu kolonnu grupa kā viena vienība tiks aplauzta jaunā rindā.
Režģa klases attiecas uz ierīcēm, kuru ekrāna platums ir lielāks par pārtraukuma punktu izmēriem vai vienāds ar tiem, un tās ignorē režģa klases, kas paredzētas mazākām ierīcēm. Tāpēc, piemēram, jebkuras .col-md-*klases izmantošana elementam ietekmēs tā stilu ne tikai vidējās ierīcēs, bet arī lielās ierīcēs, ja .col-lg-*klases nav.

Apskatiet piemērus šo principu piemērošanai savam kodam.

Mediju vaicājumi

Mēs izmantojam tālāk norādītos multivides vaicājumus savos failos Mazāk, lai izveidotu galvenos pārtraukumpunktus mūsu režģa sistēmā.

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

Mēs laiku pa laikam paplašinām šos multivides vaicājumus, iekļaujot a max-width, lai ierobežotu CSS līdz šaurākai ierīču kopai.

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

Režģa iespējas

Skatiet, kā Bootstrap režģa sistēmas aspekti darbojas vairākās ierīcēs, izmantojot ērtu tabulu.

	Īpaši mazas ierīces Tālruņi (<768 pikseļi)	Mazas ierīces , planšetdatori (≥768 pikseļi)	Vidējas ierīces , galddatori (≥ 992 pikseļi)	Lielas ierīces , galddatori (≥1200 pikseļi)
Režģa uzvedība	Visu laiku horizontāli	Sakļauts, lai sāktu, horizontāli virs pārtraukuma punktiem
Konteinera platums	Nav (automātiski)	750 pikseļi	970 pikseļi	1170 pikseļi
Klases prefikss	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Kolonnu skaits	12
Kolonnas platums	Auto	~62 pikseļi	~81px	~97 pikseļi
Notekas platums	30 pikseļi (15 pikseļi katrā kolonnas pusē)
Nestabils	Jā
Nobīdes	Jā
Kolonnu sakārtošana	Jā

Piemērs: Sakrauts līdz horizontāli

Izmantojot vienu .col-md-*režģa klašu kopu, varat izveidot pamata režģa sistēmu, kas sāk darboties mobilajās ierīcēs un planšetdatoros (īpaši mazs vai mazs diapazons), pirms tā kļūst horizontāla galddatoru (vidējās) ierīcēs. Novietojiet režģa kolonnas jebkurā .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>

Piemērs: šķidruma tvertne

Pārvērtiet jebkuru fiksēta platuma režģa izkārtojumu par pilna platuma izkārtojumu, mainot attālāko .containeruz .container-fluid.

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

Piemērs: mobilais un galddators

Vai nevēlaties, lai jūsu kolonnas vienkārši sakrātos mazākās ierīcēs? Izmantojiet īpaši mazo un vidējo ierīču režģa klases, pievienojot .col-xs-* .col-md-*to savām kolonnām. Skatiet tālāk sniegto piemēru, lai iegūtu labāku priekšstatu par to, kā tas viss darbojas.

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

Piemērs: mobilais tālrunis, planšetdators, galddators

Izmantojiet iepriekšējo piemēru, izveidojot vēl dinamiskākus un jaudīgākus izkārtojumus ar planšetdatoru .col-sm-*klasēm.

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

Piemērs: kolonnu ietīšana

Ja vienā rindā ir ievietotas vairāk nekā 12 kolonnas, katra papildu kolonnu grupa kā viena vienība tiks aplauzta jaunā rindā.

.col-xs-9

.col-xs-4
Tā kā 9 + 4 = 13 > 12, šis 4 kolonnu platums tiek ietīts jaunā rindā kā viena blakus vienība.

.col-xs-6
Nākamās kolonnas turpinās pa jauno līniju.

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

Adaptīvās kolonnas atiestatīšana

Izmantojot četrus pieejamos režģu līmeņus, jūs noteikti saskarsities ar problēmām, kad noteiktos pārtraukuma punktos jūsu kolonnas nav notīrītas pareizi, jo viena ir garāka par otru. Lai to novērstu, izmantojiet kombināciju a .clearfixun mūsu adaptīvās lietderības klases .

.col-xs-6 .col-sm-3
Mainiet skata loga izmēru vai pārbaudiet to savā tālrunī, lai iegūtu piemēru.

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

Papildus kolonnu notīrīšanai adaptīvajos pārtraukuma punktos, iespējams, būs jāatiestata nobīdes, nobīdes vai vilkšana . Skatiet to darbībā režģa piemērā .

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

Noņemiet notekcaurules

Noņemiet notekas no rindas un tās kolonnas ar .row-no-guttersklasi.

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

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

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Kolonnu nobīde

Pārvietojiet kolonnas pa labi, izmantojot .col-md-offset-*klases. Šīs klases palielina kolonnas kreiso malu par *kolonnām. Piemēram, .col-md-offset-4pārvietojas .col-md-4pa četrām kolonnām.

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

Varat arī ignorēt nobīdes no zemākiem režģa līmeņiem ar .col-*-offset-0klasēm.

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

Ligzdošanas kolonnas

Lai ligzdotu saturu ar noklusējuma režģi, esošajā kolonnā pievienojiet jaunu kolonnu .rowkopu . Ligzdotajās rindās ir jāietver kolonnu kopa, kurā ir 12 vai mazāk (nav obligāti jāizmanto visas 12 pieejamās kolonnas)..col-sm-*.col-sm-*

1. līmenis: .col-sm-9

2. līmenis: .col-xs-8 .col-sm-6

2. līmenis: .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>

Kolonnu sakārtošana

Viegli mainiet mūsu iebūvēto režģa kolonnu secību ar .col-md-push-*un .col-md-pull-*modifikatoru klasēm.

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

Mazāk miksīnu un mainīgo

Papildus iepriekš izveidotajām režģa klasēm ātriem izkārtojumiem, Bootstrap ietver mazāk mainīgo un kombināciju, lai ātri ģenerētu savus vienkāršos, semantiskos izkārtojumus.

Mainīgie lielumi

Mainīgie lielumi nosaka kolonnu skaitu, notekas platumu un multivides vaicājuma punktu, kurā sākt peldošās kolonnas. Mēs tos izmantojam, lai ģenerētu iepriekš definētās režģa klases, kas dokumentētas iepriekš, kā arī tālāk uzskaitītajiem pielāgotajiem maisījumiem.

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

Maisījumi

Mixins tiek izmantoti kopā ar režģa mainīgajiem, lai ģenerētu semantisko CSS atsevišķām režģa kolonnām.

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

Lietošanas piemērs

Varat modificēt mainīgos uz savām pielāgotajām vērtībām vai vienkārši izmantot mixinus ar to noklusējuma vērtībām. Šeit ir piemērs noklusējuma iestatījumu izmantošanai, lai izveidotu divu kolonnu izkārtojumu ar atstarpi.

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

Virsraksti

Ir pieejami visi HTML virsraksti <h1>līdz <h6>. .h1ir pieejamas arī .h6klases, ja vēlaties saskaņot virsraksta fonta stilu, taču vēlaties, lai teksts tiktu parādīts iekļauts.

h1. Bootstrap virsraksts	Daļēji trekns 36 pikseļi
h2. Bootstrap virsraksts	Daļēji trekns 30 pikseļi
h3. Bootstrap virsraksts	Daļēji trekns 24 pikseļi
h4. Bootstrap virsraksts	Daļēji trekns 18 pikseļi
h5. Bootstrap virsraksts	Daļēji trekns 14 pikseļi
h6. Bootstrap virsraksts	Daļēji trekns 12 pikseļi

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

Izveidojiet vieglāku, sekundāru tekstu jebkurā virsrakstā, izmantojot vispārīgu <small>tagu vai .smallklasi.

h1. Bootstrap virsraksts Sekundārais teksts

h2. Bootstrap virsraksts Sekundārais teksts

h3. Bootstrap virsraksts Sekundārais teksts

h4. Bootstrap virsraksts Sekundārais teksts

h5. Bootstrap virsraksts Sekundārais teksts

h6. Bootstrap virsraksts Sekundārais teksts

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

Ķermeņa kopija

Bootstrap globālais noklusējuma izmērs font-sizeir 14 pikseļi ar 1,428 pikseļiemline-height . Tas attiecas uz un visām rindkopām. Turklāt (rindkopas) saņem apakšējās malas pusi no aprēķinātā līnijas augstuma (pēc noklusējuma 10 pikseļi).<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 un eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Galvenā pamatteksta kopija

Izceliet rindkopu, pievienojot .lead.

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

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

Būvēts ar mazāk

Tipogrāfiskā skala ir balstīta uz diviem Less mainīgajiem mainīgajos.mazāk : @font-size-baseun @line-height-base. Pirmais ir visā izmantotais pamata fonta lielums, bet otrais ir bāzes līnijas augstums. Mēs izmantojam šos mainīgos lielumus un vienkāršu matemātiku, lai izveidotu visu veidu piemales, polsterējumus un līniju augstumus un daudz ko citu. Pielāgojiet tos, un Bootstrap pielāgojas.

Iekļautie teksta elementi

Atzīmēts teksts

Lai izceltu teksta rindu tā atbilstības dēļ citā kontekstā, izmantojiet <mark>tagu.

Varat izmantot atzīmes tagu, laiizcelttekstu.

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

Izdzēsts teksts

Lai norādītu dzēstos teksta blokus, izmantojiet <del>tagu.

~~Šo teksta rindiņu ir paredzēts uzskatīt par dzēstu tekstu.~~

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

Pārsvītrots teksts

Lai norādītu teksta blokus, kas vairs nav aktuāli, izmantojiet <s>tagu.

~~Šo teksta rindiņu ir paredzēts uzskatīt par neprecīzu.~~

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

Ievietots teksts

Lai norādītu papildinājumus dokumentā, izmantojiet <ins>tagu.

Šī teksta rindiņa ir uzskatāma par dokumenta papildinājumu.

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

Pasvītrots teksts

Lai pasvītrotu tekstu, izmantojiet <u>tagu.

Šī teksta rindiņa tiks atveidota kā pasvītrota

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

Izmantojiet HTML noklusējuma uzsvara tagus ar vieglajiem stiliem.

Mazs teksts

Lai samazinātu teksta vai teksta bloku uzsvaru, izmantojiet <small>tagu, lai iestatītu teksta lielumu 85% apmērā no vecākvērtības. Virsrakstu elementi saņem savu font-sizeligzdotajiem <small>elementiem.

Varat arī izmantot iekļauto elementu ar .smalljebkura <small>.

Šī teksta rindiņa ir jāuzskata par sīku druku.

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

Treknrakstā

Lai uzsvērtu teksta fragmentu ar lielāku fonta svaru.

Šis teksta fragments tiek atveidots kā treknraksts .

<strong>rendered as bold text</strong>

Slīpraksts

Lai uzsvērtu teksta fragmentu ar slīprakstu.

Šis teksta fragments tiek atveidots kā teksts slīprakstā .

<em>rendered as italicized text</em>

Alternatīvie elementi

Jūtieties brīvi izmantot <b>un <i>HTML5. <b>ir paredzēts, lai izceltu vārdus vai frāzes, nepiešķirot papildu nozīmi, bet <i>galvenokārt balss, tehniskie termini utt.

Izlīdzināšanas nodarbības

Viegli pielāgojiet tekstu komponentiem, izmantojot teksta līdzināšanas klases.

Teksts līdzināts pa kreisi.

Centrā līdzināts teksts.

Pa labi līdzināts teksts.

Pamatots teksts.

Nav teksta aplauzuma.

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

Transformācijas nodarbības

Pārveidojiet tekstu komponentos ar teksta lielo burtu lietojuma klasēm.

Teksts ar mazajiem burtiem.

Teksts ar lielajiem burtiem.

Teksts ar lielo burtu.

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

Saīsinājumi

Stilizēta HTML <abbr>elementa ieviešana saīsinājumiem un akronīmiem, lai parādītu izvērsto versiju, novietojot kursoru. Saīsinājumiem ar titleatribūtu ir gaiša punktēta apakšējā apmale un palīdzības kursors, novietojot kursoru, nodrošinot papildu kontekstu, novietojot kursoru un palīgtehnoloģiju lietotājiem.

Pamata saīsinājums

Vārda atribūts saīsinājums ir attr .

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

Inicialisms

Pievienojiet .initialismsaīsinājumam nedaudz mazākam fonta izmēram.

HTML ir labākā lieta kopš sagrieztas maizes.

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

Adreses

Norādiet tuvākā senča kontaktinformāciju vai visu darbu. Saglabājiet formatējumu, visas rindiņas beidzot ar <br>.

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

Pilns vārds
[email protected]

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

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

Bloķēt citātus

Satura bloku citēšanai no cita dokumenta avota.

Noklusējuma citāts

Aptiniet <blockquote>jebkuru HTML kā citātu. Tiešām pēdiņām mēs iesakām <p>.

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

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

Blockquote opcijas

Stilu un satura izmaiņas vienkāršām standarta variācijām <blockquote>.

Avota nosaukšana

Pievienojiet <footer>avota identificēšanai. Aptiniet avota darba nosaukumu <cite>.

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

Kāds slavens avota nosaukumā

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

Alternatīvi displeji

Pievienojiet .blockquote-reversebloka citātu ar saturu, kas līdzināts pa labi.

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

Kāds slavens avota nosaukumā

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

Saraksti

Nesakārtots

To vienumu saraksts, kuru secībai nav nepārprotamas nozīmes.

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

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

Pasūtīts

To vienumu saraksts, kuru secībai ir nepārprotama nozīme.

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

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

Bez stila

Noņemiet noklusējuma list-styleun kreiso piemali saraksta vienumiem (tikai tiešajiem bērniem). Tas attiecas tikai uz tūlītējiem pakārtoto saraksta vienumiem , kas nozīmē, ka jums būs jāpievieno klase arī visiem ligzdotajiem sarakstiem.

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

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

Rindā

Novietojiet visus saraksta vienumus vienā rindā ar display: inline-block;nelielu polsterējumu.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Apraksts

Terminu saraksts ar tiem saistītajiem aprakstiem.

Aprakstu saraksti: Aprakstu saraksts ir lieliski piemērots terminu definēšanai.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida un eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Horizontālais apraksts

Sarindojiet terminus un aprakstus <dl>blakus. Sākas kā noklusējuma <dl>s, bet, kad navigācijas josla tiek izvērsta, rīkojieties šādi.

Aprakstu saraksti: Aprakstu saraksts ir lieliski piemērots terminu definēšanai.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida un 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>

Automātiska saīsināšana

Horizontālo aprakstu sarakstos tiks saīsināti termini, kas ir pārāk gari, lai ietilptu kreisajā kolonnā ar text-overflow. Šaurākos skata portos tie tiks mainīti uz noklusējuma grupēto izkārtojumu.

Rindā

Aptiniet iekļautos koda fragmentus ar <code>.

Piemēram, <section>jāiesaiņo kā iekļauts.

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

Lietotāja ievade

Izmantojiet, <kbd>lai norādītu ievadi, kas parasti tiek ievadīta, izmantojot tastatūru.

Lai pārslēgtu direktorijus, ierakstiet cdpēc tam direktorija nosaukumu.
Lai rediģētu iestatījumus, nospiediet 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>

Pamata bloks

Izmantojiet <pre>vairākām koda rindām. Lai nodrošinātu pareizu renderēšanu, kodā noteikti neizmantojiet leņķiekavas.

<p>Teksta paraugs šeit...</p>

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

Pēc izvēles varat pievienot .pre-scrollableklasi, kas iestatīs 350 pikseļu maksimālo augstumu un nodrošinās y ass ritjoslu.

Mainīgie lielumi

Lai norādītu mainīgos, izmantojiet <var>tagu.

y = m x + b

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

Parauga izvade

Lai norādītu bloku parauga izvadi no programmas, izmantojiet <samp>tagu.

Šis teksts ir paredzēts kā datorprogrammas izvades paraugs.

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

Pamatpiemērs

Pamata stilam — viegls polsterējums un tikai horizontāli sadalītāji — pievienojiet bāzes klasi .tablejebkuram <table>. Tas var šķist ļoti lieks, taču, ņemot vērā tabulu plašo izmantošanu citiem spraudņiem, piemēram, kalendāriem un datumu atlasītājiem, mēs esam izvēlējušies izolēt savus pielāgotos tabulu stilus.

Tabulas paraksts pēc izvēles.
#	Vārds	Uzvārds	Lietotājvārds
1	Atzīmēt	Otto	@mdo
2	Jēkabs	Torntons	@resns
3	Lerijs	putns	@twitter

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

Svītrainas rindas

Izmantojiet .table-striped, lai pievienotu zebras svītras jebkurai tabulas rindai <tbody>.

Saderība starp pārlūkprogrammām

Svītrainās tabulas tiek veidotas, izmantojot :nth-childCSS atlasītāju, kas nav pieejams pārlūkprogrammā Internet Explorer 8.

#	Vārds	Uzvārds	Lietotājvārds
1	Atzīmēt	Otto	@mdo
2	Jēkabs	Torntons	@resns
3	Lerijs	putns	@twitter

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

Galds ar malām

Pievienojiet .table-borderedapmalēm visās tabulas un šūnu pusēs.

#	Vārds	Uzvārds	Lietotājvārds
1	Atzīmēt	Otto	@mdo
2	Jēkabs	Torntons	@resns
3	Lerijs	putns	@twitter

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

Virziet kursoru rindas

Pievienot .table-hover, lai iespējotu kursora novietošanu tabulas rindās <tbody>.

#	Vārds	Uzvārds	Lietotājvārds
1	Atzīmēt	Otto	@mdo
2	Jēkabs	Torntons	@resns
3	Lerijs	putns	@twitter

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

Saīsināts galds

Pievienojiet .table-condensed, lai padarītu tabulas kompaktākas, pārgriežot šūnu polsterējumu uz pusēm.

#	Vārds	Uzvārds	Lietotājvārds
1	Atzīmēt	Otto	@mdo
2	Jēkabs	Torntons	@resns
3	Lerijs Putns		@twitter

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

Kontekstuālās klases

Izmantojiet kontekstuālās klases, lai krāsotu tabulas rindas vai atsevišķas šūnas.

Klase	Apraksts
`.active`	Lietojiet kursora virzīšanas krāsu noteiktai rindai vai šūnai
`.success`	Norāda uz veiksmīgu vai pozitīvu darbību
`.info`	Norāda uz neitrālu informatīvu izmaiņu vai darbību
`.warning`	Norāda brīdinājumu, kam var būt nepieciešama uzmanība
`.danger`	Norāda uz bīstamu vai potenciāli negatīvu darbību

#	Kolonnas virsraksts	Kolonnas virsraksts	Kolonnas virsraksts
1	Kolonnas saturs	Kolonnas saturs	Kolonnas saturs
2	Kolonnas saturs	Kolonnas saturs	Kolonnas saturs
3	Kolonnas saturs	Kolonnas saturs	Kolonnas saturs
4	Kolonnas saturs	Kolonnas saturs	Kolonnas saturs
5	Kolonnas saturs	Kolonnas saturs	Kolonnas saturs
6	Kolonnas saturs	Kolonnas saturs	Kolonnas saturs
7	Kolonnas saturs	Kolonnas saturs	Kolonnas saturs
8	Kolonnas saturs	Kolonnas saturs	Kolonnas saturs
9	Kolonnas saturs	Kolonnas saturs	Kolonnas saturs

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

Nozīmes nodošana palīgtehnoloģijām

Krāsu izmantošana, lai tabulas rindai vai atsevišķai šūnai pievienotu nozīmi, nodrošina tikai vizuālu norādi, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem. Nodrošiniet, lai informācija, kas apzīmēta ar krāsu, būtu vai nu acīmredzama no paša satura (redzamais teksts attiecīgajā tabulas rindā/šūnā), vai arī tā ir iekļauta, izmantojot alternatīvus līdzekļus, piemēram, ar .sr-onlyklasi paslēptu papildu tekstu.

Atsaucīgas tabulas

Izveidojiet adaptīvas tabulas, iesaiņojot tās .table, .table-responsivelai tās ritinātu horizontāli mazās ierīcēs (mazāk nekā 768 pikseļi). Skatoties uz jebko, kas ir lielāks par 768 pikseļiem, šajās tabulās jūs neredzēsiet nekādas atšķirības.

Vertikālā apgriešana/saīsināšana

Adaptīvajās tabulās tiek izmantots overflow-y: hidden, kas nogriež visu saturu, kas pārsniedz tabulas apakšējo vai augšējo malu. Tas jo īpaši var izgriezt nolaižamās izvēlnes un citus trešo pušu logrīkus.

Firefox un lauku kopas

Firefox ir daži neērti lauku kopas stils, widthkas traucē atsaucīgo tabulu. To nevar ignorēt bez Firefox specifiska uzlaušanas, ko mēs nenodrošinām Bootstrap:

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

Lai iegūtu papildinformāciju, izlasiet šo Stack Overflow atbildi .

#	Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts
1	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna
2	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna
3	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna

#	Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts
1	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna
2	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna
3	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna

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

Pamatpiemērs

Atsevišķas veidlapas vadīklas automātiski iegūst globālu stilu. Visi teksta elementi <input>, <textarea>, un <select>elementi pēc noklusējuma .form-controlir iestatīti uz . width: 100%;Aptiniet etiķetes un vadīklas, .form-grouplai nodrošinātu optimālu atstarpi.

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

Nesajauciet veidlapu grupas ar ievades grupām

Nejauciet veidlapu grupas tieši ar ievades grupām . Tā vietā ievietojiet ievades grupu veidlapu grupā.

Iekļautā forma

Pievienojiet .form-inlinesavai veidlapai (kurai nav jābūt <form>), lai iegūtu līdzinājumu pa kreisi un iekļautu bloķēšanas vadīklas. Tas attiecas tikai uz veidlapām skatvietās, kuru platums ir vismaz 768 pikseļi.

Var būt nepieciešami pielāgoti platumi

Ievades un width: 100%;atlases lietotnē Bootstrap ir lietotas pēc noklusējuma. Iekļautajās veidlapās mēs to atiestatām, width: auto;lai vairākas vadīklas varētu atrasties vienā rindā. Atkarībā no jūsu izkārtojuma var būt nepieciešami papildu pielāgoti platumi.

Vienmēr pievienojiet etiķetes

Ekrāna lasītājiem būs problēmas ar jūsu veidlapām, ja katrai ievadei neiekļausiet etiķeti. Šo iekļauto veidlapu etiķetes varat paslēpt, izmantojot .sr-onlyklasi. Ir arī citas alternatīvas metodes, kā nodrošināt marķējumu palīgtehnoloģijām, piemēram, aria-label, aria-labelledbyvai titleatribūts. Ja neviena no tām nav, ekrāna lasītāji var izmantot placeholderatribūtu, ja tāds ir, taču ņemiet vērā, ka placeholdernav ieteicams izmantot atribūtu kā citu marķēšanas metožu aizstājēju.

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

Horizontālā forma

Izmantojiet Bootstrap iepriekš definētās režģa klases, lai līdzinātu etiķetes un veidlapu vadīklu grupas horizontālā izkārtojumā, pievienojot .form-horizontalto veidlapai (kurai nav jābūt <form>). Šādi rīkojoties, .form-groups tiks rādītas kā režģa rindas, tāpēc nav nepieciešams .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>

Atbalstītās vadīklas

Standarta veidlapas vadīklu piemēri, kas tiek atbalstīti veidlapas izkārtojuma piemērā.

Ievades

Visizplatītākā veidlapas vadība, teksta ievades lauki. Ietver atbalstu visiem HTML5 veidiem: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, un color.

Nepieciešama tipa deklarācija

Ievades tiks pilnībā veidotas tikai tad, ja tās typeir pareizi deklarētas.

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

Ievades grupas

Lai pievienotu integrētu tekstu vai pogas pirms un/vai pēc jebkura uz tekstu balstīta <input>, pārbaudiet ievades grupas komponentu .

Teksta apgabals

Veidlapas vadīkla, kas atbalsta vairākas teksta rindiņas. Ja nepieciešams, mainiet rowsatribūtu.

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

Izvēles rūtiņas un radio

Izvēles rūtiņas ir paredzētas, lai sarakstā atlasītu vienu vai vairākas opcijas, savukārt radio ir paredzētas vienas opcijas atlasei no daudzām.

Atspējotās izvēles rūtiņas un radioaparāti tiek atbalstīti, taču, lai kursoru rādītu “neatļauts”, novietojot kursoru uz vecākvirsmas <label>, jums ir jāpievieno .disabledklase vecākam .radio, .radio-inline, .checkbox, vai .checkbox-inline.

Noklusējums (stacked)

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

Iekļautās izvēles rūtiņas un radio

Izmantojiet .checkbox-inlinevai .radio-inlineklases vairākās izvēles rūtiņās vai radio, lai kontrolētu vadīklas, kas tiek rādītas tajā pašā rindā.

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

Izvēles rūtiņas un radio bez etiķetes teksta

Ja laukā nav teksta <label>, ievade tiek novietota tā, kā jūs gaidāt. Pašlaik darbojas tikai neiekļautās izvēles rūtiņās un radio. Atcerieties nodrošināt kādu palīgtehnoloģiju etiķeti (piemēram, izmantojot 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>

Atlasa

Ņemiet vērā, ka daudzām vietējām atlasītajām izvēlnēm, proti, pārlūkprogrammā Safari un Chrome, ir noapaļoti stūri, kurus nevar mainīt, izmantojot border-radiusrekvizītus.

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

Vadīklām <select>ar multipleatribūtu pēc noklusējuma tiek rādītas vairākas opcijas.

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

Statiskā vadība

Ja veidlapā blakus veidlapas iezīmei ir jāievieto vienkāršs teksts, izmantojiet .form-control-staticklasi <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>

Fokusa stāvoklis

Mēs noņemam noklusējuma outlinestilus no dažām veidlapas vadīklām un lietojam box-shadowto vietā :focus.

Demonstrācijas `:focus`stāvoklis

Iepriekš minētajā ievades piemērā mūsu dokumentācijā tiek izmantoti pielāgoti stili, lai parādītu :focusstāvokli .form-control.

Atspējots stāvoklis

Pievienojiet disabledievadei Būla atribūtu, lai novērstu lietotāja mijiedarbību. Atspējotās ievades ir gaišākas un pievieno not-allowedkursoru.

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

Atspējotas lauku kopas

Pievienojiet disabledatribūtu a <fieldset>, lai vienlaikus atspējotu visas vadīklas <fieldset>.

Brīdinājums par saites funkcionalitāti`<a>`

<input>Pēc noklusējuma pārlūkprogrammas visas vietējās veidlapas vadīklas ( un elementus) apstrādās <select>kā atspējotas, novēršot gan tastatūras, gan peles mijiedarbību. Tomēr, ja jūsu veidlapā ir iekļauti arī elementi, tiem tiks piešķirts tikai stils . Kā norādīts sadaļā par pogu atspējošanas stāvokli (un īpaši enkura elementu apakšsadaļā), šis CSS rekvizīts vēl nav standartizēts un netiek pilnībā atbalstīts operētājsistēmā Opera 18 un jaunākās versijās, kā arī pārlūkprogrammā Internet Explorer 11, un ieguva. neliedz tastatūras lietotājiem fokusēt vai aktivizēt šīs saites. Tāpēc drošības labad izmantojiet pielāgotu JavaScript, lai atspējotu šādas saites.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Saderība starp pārlūkprogrammām

Lai gan Bootstrap lietos šos stilus visās pārlūkprogrammās, pārlūkprogramma Internet Explorer 11 un vecākas versijas pilnībā neatbalsta disabledatribūtu <fieldset>. Izmantojiet pielāgotu JavaScript, lai atspējotu lauku kopu šajās pārlūkprogrammās.

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

Tikai lasāms stāvoklis

Pievienojiet readonlyievadei Būla atribūtu, lai novērstu ievades vērtības izmaiņas. Tikai lasāmās ievades šķiet gaišākas (tāpat kā atspējotas ievades), bet saglabā standarta kursoru.

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

Palīdzības teksts

Bloka līmeņa palīdzības teksts veidlapas vadīklām.

Palīdzības teksta saistīšana ar veidlapas vadīklām

Palīdzības tekstam jābūt skaidri saistītam ar formas vadīklu, kas ir saistīta ar aria-describedbyatribūta lietošanu. Tas nodrošinās, ka palīgtehnoloģijas, piemēram, ekrāna lasītāji, paziņos šo palīdzības tekstu, kad lietotājs fokusēsies vai ievadīs vadīklu.

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

Validācijas stāvokļi

Bootstrap ietver validācijas stilus kļūdu, brīdinājumu un panākumu stāvokļiem veidlapas vadīklās. Lai izmantotu, pievienojiet .has-warning, .has-error, vai .has-successvecākelementam. Jebkurš .control-label, .form-control, un .help-blockšajā elementā saņems validācijas stilus.

Validācijas stāvokļa nodošana palīgtehnoloģiju un daltoniķu lietotājiem

Izmantojot šos validācijas stilus, lai apzīmētu veidlapas vadīklas stāvokli, tiek nodrošināta tikai vizuāla, uz krāsām balstīta norāde, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem, vai daltoniķiem.

Nodrošiniet, lai tiktu nodrošināta arī alternatīva stāvokļa norāde. Piemēram, varat iekļaut mājienu par stāvokli pašā veidlapas vadīklas <label>tekstā (kā tas ir šajā koda piemērā), iekļaut Glyphicon (ar atbilstošu alternatīvu tekstu, izmantojot .sr-onlyklasi — skatiet Glyphicon piemērus ) vai sniedzot papildu palīdzības teksta bloks. Īpaši palīgtehnoloģijām aria-invalid="true"atribūtu var piešķirt arī nederīgām veidlapu vadīklām.

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

Ar izvēles ikonām

Varat arī pievienot izvēles atsauksmju ikonas, pievienojot .has-feedbackun labo ikonu.

Atsauksmju ikonas darbojas tikai ar teksta <input class="form-control">elementiem.

Ikonas, etiķetes un ievades grupas

Manuāla atgriezeniskās saites ikonu pozicionēšana ir nepieciešama ievadēm bez etiķetes un ievades grupām ar papildinājumu labajā pusē. Pieejamības apsvērumu dēļ ļoti ieteicams nodrošināt etiķetes visiem ievades datiem. Ja vēlaties novērst etiķešu rādīšanu, paslēpiet tās .sr-onlyklasē. Ja jums jāiztiek bez etiķetēm, pielāgojiet topatsauksmes ikonas vērtību. Ievades grupām pielāgojiet rightvērtību atbilstoši pikseļa vērtībai atkarībā no papildinājuma platuma.

Ikonas nozīmes nodošana palīgtehnoloģijām

Lai nodrošinātu, ka palīgtehnoloģijas, piemēram, ekrāna lasītāji, pareizi izsaka ikonas nozīmi, klasē ir jāiekļauj papildu slēptais teksts .sr-onlyun tiešā veidā jāsaista ar veidlapas vadīklu, uz kuru tā attiecas aria-describedby. <label>Alternatīvi, nodrošiniet, lai nozīme (piemēram, fakts, ka konkrētam teksta ievades laukam ir brīdinājums) tiktu nodota citā formā, piemēram, mainot ar veidlapas vadīklu saistītā faktiskā teksta tekstu .

Lai gan turpmākajos piemēros jau ir minēts to attiecīgo formu vadīklu validācijas stāvoklis pašā <label>tekstā, iepriekšminētais paņēmiens (izmantojot .sr-onlytekstu un aria-describedby) ir iekļauts ilustratīviem nolūkiem.

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

Izvēles ikonas horizontālā un iekļautā formā

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

Izvēles ikonas ar slēptām `.sr-only`etiķetēm

Ja izmantojat .sr-onlyklasi, lai paslēptu veidlapas vadīklas <label>(nevis izmantojot citas marķēšanas opcijas, piemēram, aria-labelatribūtu), Bootstrap automātiski pielāgos ikonas pozīciju, tiklīdz tā tiks pievienota.

<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ējiet izmērus

Iestatiet augstumus, izmantojot tādas klases kā .input-lg, un platumu, izmantojot režģa kolonnu klases, piemēram, .col-lg-*.

Augstuma izmēra noteikšana

Izveidojiet garākas vai īsākas formas vadīklas, kas atbilst pogu izmēriem.

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

Horizontālās formas grupu izmēri

Ātri izmēriet etiķetes un veidlapas vadīklas .form-horizontal, pievienojot .form-group-lgvai .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>

Kolonnu izmēra noteikšana

Aptiniet ievades režģa kolonnās vai jebkurā pielāgotā vecākelementā, lai viegli ieviestu vēlamo platumu.

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

Pogu atzīmes

Izmantojiet pogu klases elementā <a>, <button>, vai .<input>

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

Kontekstam atbilstošs lietojums

Lai gan pogu klases var izmantot elementos <a>un , mūsu navigācijas un navigācijas joslas komponentos tiek atbalstīti <button>tikai <button>elementi.

Saites, kas darbojas kā pogas

Ja <a>elementi tiek izmantoti, lai darbotos kā pogas, aktivizējot lapas funkcionalitāti, nevis pārejot uz citu dokumentu vai sadaļu pašreizējā lapā, tiem arī jāpiešķir atbilstošs role="button".

Pārrobežu pārlūkprogrammu renderēšana

Kā paraugpraksi mēs ļoti iesakām izmantot <button>elementu, kad vien iespējams , lai nodrošinātu atbilstošu vairāku pārlūkprogrammu renderēšanu.

Cita starpā, pārlūkprogrammā Firefox <30 ir kļūda, kas neļauj mums iestatīt pogas line-height, kuru <input>pamatā ir -, kā rezultātā tās precīzi neatbilst citu Firefox pogu augstumam.

Iespējas

Izmantojiet jebkuru no pieejamajām pogu klasēm, lai ātri izveidotu stilizētu pogu.

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

Nozīmes nodošana palīgtehnoloģijām

Krāsu izmantošana pogai nozīmes piešķiršanai nodrošina tikai vizuālu norādi, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem. Nodrošiniet, lai informācija, kas apzīmēta ar krāsu, būtu vai nu acīmredzama no paša satura (pogas redzamā teksta), vai arī tā ir iekļauta, izmantojot alternatīvus līdzekļus, piemēram, ar .sr-onlyklasi paslēptu papildu tekstu.

Izmēri

Vai vēlaties lielākas vai mazākas pogas? Pievienojiet .btn-lg, .btn-sm, vai .btn-xspapildu izmēriem.

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

Izveidojiet bloka līmeņa pogas — tās, kas aptver visu vecāka platumu, pievienojot .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>

Aktīvs stāvoklis

Pogas būs nospiestas (ar tumšāku fonu, tumšāku apmali un iestrādātu ēnu), kad tās būs aktīvas. Elementiem <button>tas tiek darīts, izmantojot :active. Elementiem <a>tas tiek darīts ar .active. Tomēr varat izmantot .actives <button>(un iekļaut aria-pressed="true"atribūtu), ja nepieciešams programmatiski replicēt aktīvo stāvokli.

Pogas elements

Nav nepieciešams pievienot :active, jo tā ir pseidoklase, bet, ja jums ir nepieciešams piespiest to pašu izskatu, turpiniet un pievienojiet .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>

Enkura elements

Pievienojiet .activeklasi <a>pogām.

Primārā saite Saite

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

Atspējots stāvoklis

Padariet pogas neklikšķināmas, izbalējot tās atpakaļ, izmantojot opacity.

Pogas elements

Pievienojiet disabledatribūtu <button>pogām.

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

Saderība starp pārlūkprogrammām

Ja pievienosit disabledatribūtu atribūtam <button>, pārlūkprogrammā Internet Explorer 9 un vecākās versijās teksts tiks padarīts pelēks ar nepatīkamu teksta ēnu, ko nevaram novērst.

Enkura elements

Pievienojiet .disabledklasi <a>pogām.

Primārā saite Saite

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

Šeit mēs izmantojam .disabledkā lietderības klasi, kas ir līdzīga parastajai .activeklasei, tāpēc prefikss nav nepieciešams.

Saites funkcionalitātes brīdinājums

Šī klase izmanto pointer-events: none, lai mēģinātu atspējot <a>s saites funkcionalitāti, taču šis CSS rekvizīts vēl nav standartizēts un netiek pilnībā atbalstīts operētājsistēmā Opera 18 un jaunākās versijās vai Internet Explorer 11. Turklāt pat pārlūkprogrammās, kas atbalsta pointer-events: nonetastatūru Navigācija paliek nemainīga, kas nozīmē, ka redzīgi tastatūras lietotāji un palīgtehnoloģiju lietotāji joprojām varēs aktivizēt šīs saites. Tāpēc drošības labad izmantojiet pielāgotu JavaScript, lai atspējotu šādas saites.

Atsaucīgi attēli

Attēlus programmā Bootstrap 3 var padarīt atsaucīgus, pievienojot .img-responsiveklasi. Tas attiecas uz max-width: 100%;, height: auto;un display: block;uz attēlu, lai tas būtu labi mērogots līdz vecākajam elementam.

Lai centrētu attēlus, kuros tiek izmantota .img-responsiveklase, .center-blockizmantojiet .text-center. Plašāku informāciju par lietošanu skatiet palīgu nodarbību sadaļā ..center-block

SVG attēli un IE 8-10

Programmā Internet Explorer 8–10 SVG attēli ar .img-responsiveir nesamērīgi lieli. Lai to labotu, pievienojiet, width: 100% \9;kur nepieciešams. Bootstrap to neizmanto automātiski, jo tas rada sarežģījumus citiem attēlu formātiem.

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

Attēlu formas

Pievienojiet elementam klases, <img>lai ērti veidotu attēlus jebkurā projektā.

Saderība starp pārlūkprogrammām

Ņemiet vērā, ka pārlūkprogrammai Internet Explorer 8 trūkst atbalsta noapaļotiem stūriem.

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

Kontekstuālās krāsas

Norādiet nozīmi, izmantojot krāsas, izmantojot dažas uzsvara lietderības klases. Tie var tikt lietoti arī saitēm, un tie kļūst tumšāki, virzot kursoru tāpat kā mūsu noklusējuma saišu stili.

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>

Nodarbojas ar specifiku

Dažkārt uzsvara klases nevar piemērot cita atlasītāja specifikas dēļ. Vairumā gadījumu pietiekams risinājums ir ietīt tekstu <span>ar klasi.

Nozīmes nodošana palīgtehnoloģijām

Krāsu izmantošana nozīmes pievienošanai nodrošina tikai vizuālu norādi, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem. Pārliecinieties, ka informācija, kas apzīmēta ar krāsu, ir vai nu acīmredzama no paša satura (kontekstuālās krāsas tiek izmantotas tikai, lai pastiprinātu nozīmi, kas jau ir tekstā/marķējumā), vai arī tiek iekļauta, izmantojot citus līdzekļus, piemēram, papildu tekstu, kas paslēpts kopā ar .sr-onlyklasi . .

Kontekstuālais fons

Līdzīgi kā kontekstuālā teksta krāsu klasēs, elementa fonu var viegli iestatīt uz jebkuru kontekstuālo klasi. Enkura komponenti kļūs tumšāki, virzot kursoru, tāpat kā teksta klases.

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>

Nodarbojas ar specifiku

Dažreiz kontekstuālās fona klases nevar lietot cita atlasītāja specifikas dēļ. Dažos gadījumos pietiekams risinājums ir iekļaut elementa saturu <div>klasē.

Nozīmes nodošana palīgtehnoloģijām

Tāpat kā kontekstuālās krāsas gadījumā, nodrošiniet, lai jebkura nozīme, kas tiek nodota ar krāsu palīdzību, tiktu nodota arī formātā, kas nav tikai prezentācija.

Aizvērt ikonu

Izmantojiet vispārīgo aizvēršanas ikonu, lai noraidītu saturu, piemēram, modālus un brīdinājumus.

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

Carets

Izmantojiet taustiņus, lai norādītu nolaižamās izvēlnes funkcionalitāti un virzienu. Ņemiet vērā, ka nolaižamajās izvēlnēs automātiski tiks mainīta noklusējuma vērtība .

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

Ātri pludiņi

Peldiet elementu pa kreisi vai pa labi ar klasi. !importantir iekļauts, lai izvairītos no specifiskuma problēmām. Nodarbības var izmantot arī kā mixinus.

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

Centrēt satura blokus

Iestatiet elementu uz display: blockun centrējiet, izmantojot margin. Pieejams kā mixin un klases.

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

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

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

Clearfix

Viegli notīriet floats, pievienojot .clearfix vecākajam elementam . Izmanto Nicolas Gallagher popularizēto micro clearfix . Var izmantot arī kā maisītāju.

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

Satura rādīšana un slēpšana

Piespiediet elementu rādīt vai paslēpt ( tostarp ekrāna lasītājos ), izmantojot .showun .hiddenklases. Šīs klases tiek izmantotas !important, lai izvairītos no specifiskuma konfliktiem, tāpat kā ātrie pludiņi . Tie ir pieejami tikai bloka līmeņa pārslēgšanai. Tos var izmantot arī kā maisījumus.

.hideir pieejams, taču tas ne vienmēr ietekmē ekrāna lasītājus un ir novecojis no v3.0.1. Izmantojiet .hiddenvai .sr-onlyvietā.

Turklāt .invisiblevar izmantot, lai pārslēgtu tikai elementa redzamību, kas nozīmē, ka displaytas netiek mainīts un elements joprojām var ietekmēt dokumenta plūsmu.

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

Ekrāna lasītājs un tastatūras navigācijas saturs

Slēpt elementu visās ierīcēs, izņemot ekrāna lasītājus ar .sr-only. Apvienojiet .sr-onlyar .sr-only-focusable, lai elementu atkal rādītu, kad tas ir fokusēts (piem., ja lietotājs izmanto tikai tastatūru). Nepieciešams, lai ievērotu pieejamības paraugpraksi . Var izmantot arī kā miksus.

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

Attēlu nomaiņa

Izmantojiet .text-hideklasi vai miksu, lai palīdzētu aizstāt elementa teksta saturu ar fona attēlu.

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

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

Ātrākai mobilajām ierīcēm draudzīgai izstrādei izmantojiet šīs utilītas klases satura rādīšanai un slēpšanai ierīcē, izmantojot multivides vaicājumu. Iekļautas arī lietderības klases satura pārslēgšanai drukāšanas laikā.

Mēģiniet tos izmantot ierobežotā daudzumā un izvairieties no vienas un tās pašas vietnes pilnīgi atšķirīgu versiju izveides. Tā vietā izmantojiet tos, lai papildinātu katras ierīces prezentāciju.

Pieejamās nodarbības

Izmantojiet vienu pieejamo klasi vai to kombināciju, lai pārslēgtu saturu starp skatu punkta pārtraukumpunktiem.

	Īpaši mazas ierīcesTālruņi (<768 pikseļi)	Mazas ierīcesPlanšetdatori (≥768 pikseļi)	Vidējas ierīcesGalddatori (≥ 992 pikseļi)	Lielas ierīcesGalddatori (≥1200 pikseļi)
`.visible-xs-*`	Redzams	Slēpts	Slēpts	Slēpts
`.visible-sm-*`	Slēpts	Redzams	Slēpts	Slēpts
`.visible-md-*`	Slēpts	Slēpts	Redzams	Slēpts
`.visible-lg-*`	Slēpts	Slēpts	Slēpts	Redzams
`.hidden-xs`	Slēpts	Redzams	Redzams	Redzams
`.hidden-sm`	Redzams	Slēpts	Redzams	Redzams
`.hidden-md`	Redzams	Redzams	Slēpts	Redzams
`.hidden-lg`	Redzams	Redzams	Redzams	Slēpts

Sākot ar versiju 3.2.0, .visible-*-*katra pārtraukuma punkta klasēm ir trīs varianti — viena katrai displaytālāk norādītajai CSS īpašuma vērtībai.

Nodarbību grupa	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Piemēram, īpaši maziem ( xs) ekrāniem pieejamās .visible-*-*klases ir: .visible-xs-block, .visible-xs-inline, un .visible-xs-inline-block.

Klases .visible-xs, .visible-sm, .visible-mdun .visible-lgarī pastāv, taču no v3.2.0 ir novecojušas . Tie ir aptuveni līdzvērtīgi .visible-*-block, izņemot īpašus papildu gadījumus ar <table>elementu pārslēgšanai.

Drukas nodarbības

Līdzīgi kā parastajās adaptīvajās klasēs, izmantojiet tās, lai pārslēgtu saturu drukāšanai.

Klases	Pārlūkprogramma	Drukāt
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Slēpts	Redzams
`.hidden-print`	Redzams	Slēpts

Klase .visible-printarī pastāv, taču no v3.2.0 ir novecojusi . Tas ir aptuveni līdzvērtīgs .visible-print-block, izņemot īpašus papildu gadījumus ar <table>saistītiem elementiem.

Pārbaudes gadījumi

Mainiet pārlūkprogrammas izmērus vai ielādējiet dažādas ierīces, lai pārbaudītu adaptīvās utilītas klases.

Redzams uz...

Zaļās atzīmes norāda, ka elements ir redzams jūsu pašreizējā skata logā.

Īpaši mazs ✔ Redzams uz x-small

Mazs ✔ Redzams uz maziem

Vidēja ✔ Redzams uz vidēja

Liels ✔ Redzams uz liela izmēra

Īpaši mazs un mazs ✔ Redzams uz x-small un small

Vidēja un liela ✔ Redzams uz vidējiem un lieliem

Īpaši mazs un vidējs ✔ Redzams uz x-small un medium

Mazi un lieli ✔ Redzams gan maziem, gan lieliem

Īpaši mazs un liels ✔ Redzams uz x-small un large

Mazs un vidējs ✔ Redzams maziem un vidējiem

Paslēpts uz...

Šeit zaļās atzīmes arī norāda, ka elements ir paslēpts jūsu pašreizējā skata logā.

Īpaši mazs ✔ Paslēpts uz x-small

Mazs ✔ Paslēpts uz maziem

Vidēja ✔ Paslēpts vidē

Liels ✔ Paslēpts uz liela

Īpaši mazs un mazs ✔ Paslēpts uz x-maziem un maziem

Vidēja un liela ✔ Paslēpts uz vidējiem un lieliem

Īpaši mazs un vidējs ✔ Paslēpts uz x-small un medium

Mazi un lieli ✔ Paslēpts uz maziem un lieliem

Īpaši mazs un liels ✔ Paslēpts uz x-maziem un lieliem

Mazs un vidējs ✔ Paslēpts uz maziem un vidējiem

Bootstrap CSS pamatā ir Less — priekšapstrādātājs ar papildu funkcionalitāti, piemēram, mainīgajiem, mixiniem un CSS kompilēšanas funkcijām. Tie, kas vēlas izmantot avota Less failus, nevis mūsu apkopotos CSS failus, var izmantot daudzos mainīgos un miksus, ko mēs izmantojam visā sistēmā.

Režģa mainīgie un mixins ir ietverti sadaļā Režģa sistēma .

Bootstrap kompilēšana

Bootstrap var izmantot vismaz divos veidos: ar kompilēto CSS vai ar avota Less failus. Lai apkopotu mazāk failu, skatiet sadaļu Darba sākšana , lai uzzinātu, kā iestatīt izstrādes vidi, lai palaistu nepieciešamās komandas.

Trešās puses apkopošanas rīki var darboties ar Bootstrap, taču mūsu galvenā komanda tos neatbalsta.

Mainīgie lielumi

Mainīgie tiek izmantoti visā projektā, lai centralizētu un koplietotu bieži lietotās vērtības, piemēram, krāsas, atstarpes vai fontu kopas. Lai iegūtu pilnīgu sadalījumu, lūdzu, skatiet pielāgotāju .

Krāsas

Ērti izmantojiet divas krāsu shēmas: pelēktoņu un semantisko. Pelēktoņu krāsas nodrošina ātru piekļuvi bieži izmantotajiem melnās krāsas toņiem, savukārt semantiskās krāsas ietver dažādas krāsas, kas piešķirtas nozīmīgām kontekstuālajām vērtībām.

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

Izmantojiet jebkuru no šiem krāsu mainīgajiem tādiem, kādi tie ir, vai atkārtoti piešķiriet tos nozīmīgākiem sava projekta mainīgajiem.

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

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

Sastatnes

Saujiņa mainīgo, lai ātri pielāgotu vietnes skeleta galvenos elementus.

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

Saites

Viegli veidojiet savas saites ar pareizo krāsu ar tikai vienu vērtību.

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

Ņemiet vērā, ka @link-hover-colortiek izmantota funkcija, kas ir vēl viens lielisks rīks no Less, lai automātiski izveidotu pareizo kursora krāsu. Varat izmantot darken, lighten, saturateun desaturate.

Tipogrāfija

Ērti iestatiet burtveidolu, teksta lielumu, sākumlapu un daudz ko citu, izmantojot dažus ātrus mainīgos. Bootstrap izmanto arī tos, lai nodrošinātu vienkāršu tipogrāfisku sajaukumu.

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

Ikonas

Divi ātri mainīgie, lai pielāgotu ikonu atrašanās vietu un faila nosaukumu.

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

Sastāvdaļas

Komponenti visā Bootstrap izmanto dažus noklusējuma mainīgos kopējo vērtību iestatīšanai. Šeit ir visbiežāk izmantotie.

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

Pārdevēju maisījumi

Pārdevēju mixins ir mixins, kas palīdz atbalstīt vairākas pārlūkprogrammas, iekļaujot visus atbilstošos piegādātāju prefiksus jūsu apkopotajā CSS.

Kastes izmēra noteikšana

Atiestatiet savu komponentu kastes modeli ar vienu sajaukšanu. Lai iegūtu kontekstu, skatiet šo noderīgo Mozilla rakstu .

Sajaukšana ir novecojusi no v3.2.0, ieviešot Autoprefixer. Lai saglabātu atpakaļsaderību, Bootstrap turpinās izmantot mixin iekšēji līdz Bootstrap v4.

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

Noapaļoti stūri

Mūsdienās visas mūsdienu pārlūkprogrammas atbalsta border-radiusrekvizītu bez prefiksa. Tādējādi nav .border-radius()sajaukšanas, taču Bootstrap ietver saīsnes, lai ātri noapaļotu divus stūrus noteiktā objekta pusē.

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

Box (Drop) ēnas

Ja jūsu mērķauditorija izmanto jaunākās un labākās pārlūkprogrammas un ierīces, noteikti izmantojiet box-shadowīpašumu atsevišķi. Ja jums ir nepieciešams atbalsts vecākām Android (pirms v4) un iOS ierīcēm (pirms iOS 5), izmantojiet novecojušo kombināciju, lai iegūtu nepieciešamo.-webkit prefiksu.

No v3.1.0 mixin ir novecojis , jo Bootstrap oficiāli neatbalsta novecojušas platformas, kas neatbalsta standarta īpašumu. Lai saglabātu atpakaļsaderību, Bootstrap turpinās izmantot mixin iekšēji līdz Bootstrap v4.

Noteikti izmantojiet rgba()krāsas kastes ēnās, lai tās pēc iespējas nevainojami saplūstu ar 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;
}

Pārejas

Vairāki maisījumi elastībai. Iestatiet visu pārejas informāciju ar vienu vai pēc vajadzības norādiet atsevišķu aizkavi un ilgumu.

Sajaukumu darbība ir novecojusi no v3.2.0, ieviešot Autoprefixer. Lai saglabātu atpakaļejošu saderību, Bootstrap turpinās izmantot mixins iekšēji līdz 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;
}

Pārvērtības

Pagrieziet, mērogojiet, tulkojiet (pārvietojiet) vai sašķiebiet jebkuru objektu.

Sajaukumu darbība ir novecojusi no v3.2.0, ieviešot Autoprefixer. Lai saglabātu atpakaļejošu saderību, Bootstrap turpinās izmantot mixins iekšēji līdz 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;
}

Animācijas

Viens mixins visu CSS3 animācijas rekvizītu izmantošanai vienā deklarācijā un citi mixins atsevišķiem rekvizītiem.

Sajaukumu darbība ir novecojusi no v3.2.0, ieviešot Autoprefixer. Lai saglabātu atpakaļejošu saderību, Bootstrap turpinās izmantot mixins iekšēji līdz 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;
}

Necaurredzamība

Iestatiet necaurredzamību visām pārlūkprogrammām un nodrošiniet filteratkāpšanos IE8.

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

Viettura teksts

Nodrošiniet kontekstu veidlapas vadīklām katrā laukā.

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

Kolonnas

Vienā elementā ģenerējiet kolonnas, izmantojot CSS.

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

Gradienti

Ērti pārvērtiet jebkuras divas krāsas fona gradientā. Uzlabojiet un iestatiet virzienu, izmantojiet trīs krāsas vai radiālo gradientu. Ar vienu sajaukšanu jūs iegūstat visas nepieciešamās sintakses ar prefiksu.

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

Varat arī norādīt standarta divu krāsu lineāra gradienta leņķi:

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

Ja jums ir nepieciešams friziera svītru stila gradients, arī tas ir vienkārši. Vienkārši norādiet vienu krāsu, un mēs pārklāsim caurspīdīgu baltu svītru.

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

Palieliniet sākotnējo līmeni un tā vietā izmantojiet trīs krāsas. Iestatiet pirmo krāsu, otro krāsu, otrās krāsas krāsas pieturu (procentuālo vērtību, piemēram, 25%) un trešo krāsu, izmantojot šos miksus:

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

Uzmanību! Ja jums kādreiz ir jānoņem gradients, noteikti noņemiet visus IE, filterko esat pievienojis. To var izdarīt, izmantojot .reset-filter()maisītāju kopā ar background-image: none;.

Komunālie maisījumi

Lietderības miksīni ir miksīni, kas apvieno citādi nesaistītus CSS rekvizītus, lai sasniegtu konkrētu mērķi vai uzdevumu.

Clearfix

Aizmirstiet pievienot class="clearfix"jebkuram elementam un tā vietā pievienojiet .clearfix()maisītāju, ja nepieciešams. Izmanto Nicolas Gallagher mikro clearfix .

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

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

Horizontālā centrēšana

Ātri centrējiet jebkuru elementu tā vecākajā. Nepieciešams widthvai max-widthjāiestata.

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

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

Izmēru palīgi

Vienkāršāk norādiet objekta izmērus.

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

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

Teksta apgabali ar maināmu izmēru

Viegli konfigurējiet jebkura teksta apgabala vai jebkura cita elementa izmēru maiņas opcijas. Pēc noklusējuma ir parasta pārlūkprogrammas darbība ( both).

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

Teksta saīsināšana

Ērti saīsiniet tekstu ar elipsi ar vienu sajaukšanu. Nepieciešams, lai elements būtu blockvai inline-blocklīmenī.

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

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

Tīklenes attēli

Norādiet divus attēla ceļus un @1x attēla izmērus, un Bootstrap nodrošinās @2x multivides vaicājumu. Ja jums ir daudz attēlu, ko rādīt, apsveriet iespēju tīklenes attēla CSS sarakstīt manuāli vienā multivides vaicājumā.

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

Lai gan Bootstrap ir veidota uz Less, tai ir arī oficiāla Sass pieslēgvieta . Mēs to uzturam atsevišķā GitHub repozitorijā un apstrādājam atjauninājumus, izmantojot konvertēšanas skriptu.

Kas ir iekļauts

Tā kā Sass portam ir atsevišķs repo un tas apkalpo nedaudz citu auditoriju, projekta saturs ievērojami atšķiras no galvenā Bootstrap projekta. Tas nodrošina, ka Sass ports ir saderīgs ar pēc iespējas vairākām Sass sistēmām.

Ceļš	Apraksts
`lib/`	Ruby gem kods (Sass konfigurācija, Rails un Compass integrācijas)
`tasks/`	Pārveidotāja skripti (pārvēršot augšupvērsto Less uz Sass)
`test/`	Kompilācijas testi
`templates/`	Kompasa pakotnes manifests
`vendor/assets/`	Sass, JavaScript un fontu faili
`Rakefile`	Iekšējie uzdevumi, piemēram, grābšana un konvertēšana

Apmeklējiet Sass porta GitHub repozitoriju , lai skatītu šos failus darbībā.

Uzstādīšana

Lai iegūtu informāciju par to, kā instalēt un izmantot Bootstrap for Sass, skatiet GitHub repozitoriju readme . Tas ir visjaunākais avots, un tajā ir iekļauta informācija lietošanai ar Rails, Compass un standarta Sass projektiem.

Bootstrap priekš Sass

CSS

Pārskats

HTML5 doktips

Vispirms mobilais

Tipogrāfija un saites

Normalize.css

Konteineri

Režģa sistēma

Ievads

Mediju vaicājumi

Režģa iespējas

Piemērs: Sakrauts līdz horizontāli

Piemērs: šķidruma tvertne

Piemērs: mobilais un galddators

Piemērs: mobilais tālrunis, planšetdators, galddators

Piemērs: kolonnu ietīšana

Adaptīvās kolonnas atiestatīšana

Noņemiet notekcaurules

Kolonnu nobīde

Ligzdošanas kolonnas

Kolonnu sakārtošana

Mazāk miksīnu un mainīgo

Mainīgie lielumi

Maisījumi

Lietošanas piemērs

Tipogrāfija

Virsraksti

h1. Bootstrap virsraksts

h2. Bootstrap virsraksts

h3. Bootstrap virsraksts

h4. Bootstrap virsraksts

h5. Bootstrap virsraksts

h6. Bootstrap virsraksts

h1. Bootstrap virsraksts Sekundārais teksts

h2. Bootstrap virsraksts Sekundārais teksts

h3. Bootstrap virsraksts Sekundārais teksts

h4. Bootstrap virsraksts Sekundārais teksts

h5. Bootstrap virsraksts Sekundārais teksts

h6. Bootstrap virsraksts Sekundārais teksts

Ķermeņa kopija

Galvenā pamatteksta kopija

Būvēts ar mazāk

Iekļautie teksta elementi

Atzīmēts teksts

Izdzēsts teksts

Pārsvītrots teksts

Ievietots teksts

Pasvītrots teksts

Mazs teksts

Treknrakstā

Slīpraksts

Alternatīvie elementi

Izlīdzināšanas nodarbības

Transformācijas nodarbības

Saīsinājumi

Pamata saīsinājums

Inicialisms

Adreses

Bloķēt citātus

Noklusējuma citāts

Blockquote opcijas

Avota nosaukšana

Alternatīvi displeji

Saraksti

Nesakārtots

Pasūtīts

Bez stila

Rindā

Apraksts

Horizontālais apraksts

Automātiska saīsināšana

Kods

Rindā

Lietotāja ievade

Pamata bloks

Mainīgie lielumi

Parauga izvade

Tabulas

Pamatpiemērs

Svītrainas rindas

Demonstrācijas `:focus`stāvoklis

Brīdinājums par saites funkcionalitāti`<a>`

Izvēles ikonas ar slēptām `.sr-only`etiķetēm