Tutvuge Bootstrapi infrastruktuuri põhiosadega, sealhulgas meie lähenemisviisiga paremale, kiiremale ja tugevamale veebiarendusele.

HTML5 doktüüp

Bootstrap kasutab teatud HTML-i elemente ja CSS-i atribuute, mis nõuavad HTML5 doctype'i kasutamist. Lisage see kõigi oma projektide algusesse.

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

Esmalt mobiil

Bootstrap 2-ga lisasime raamistiku põhiaspektide jaoks valikulised mobiilisõbralikud stiilid. Bootstrap 3 abil oleme projekti algusest peale mobiilisõbralikuks ümber kirjutanud. Valikuliste mobiilistiilide lisamise asemel küpsetatakse need otse sisusse. Tegelikult on Bootstrap esmalt mobiilne . Mobiilse esimesed stiilid leiate kogu teegist, mitte eraldi failidest.

Õige renderdamise ja puutetundliku suumimise tagamiseks lisage vaateava metasilt oma <head>.

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

Saate mobiilseadmetes suumimisvõimalused keelata, lisades user-scalable=noselle vaateava metasildile. See keelab suumimise, mis tähendab, et kasutajad saavad ainult kerida ja teie sait tunneb end veidi rohkem omarakendusena. Üldiselt me ei soovita seda igal saidil, seega olge ettevaatlik!

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

Tüpograafia ja lingid

Bootstrap määrab põhilised globaalsed kuvamis-, tüpograafia- ja linkistiilid. Täpsemalt, me:

Seadke background-color: #fff;pealebody
Kasutage oma tüpograafilise alusena atribuute @font-family-base, @font-size-base, ja@line-height-base
Määrake globaalse lingi värv läbi @link-colorja rakendage ainult lingi allakriipsutusi:hover

Need stiilid leiate jaotisest scaffolding.less.

Normaliseeri.css

Paremaks brauseriüleseks renderdamiseks kasutame Nicolas Gallagheri ja Jonathan Neali projekti Normalize.css .

Konteinerid

Bootstrap vajab saidi sisu mähkimiseks ja meie ruudustikusüsteemi majutamiseks sisaldavat elementi. Saate valida oma projektides kasutamiseks ühe kahest konteinerist. Pange tähele, et paddingja muu tõttu ei ole kumbki konteiner pesastav.

Kasutage .containertundliku fikseeritud laiusega konteineri jaoks.

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

Kasutage .container-fluidtäislaiuse konteineri jaoks, mis katab kogu teie vaateava laiuse.

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

Bootstrap sisaldab tundliku, mobiilse esimese vedeliku võrgusüsteemi, mis skaleerib vastavalt seadme või vaateava suuruse suurenemisel kuni 12 veergu. See sisaldab eelmääratletud klasse lihtsate paigutusvalikute jaoks, aga ka võimsaid segusid semantiliste paigutuste loomiseks .

Sissejuhatus

Ruudustiksüsteeme kasutatakse lehepaigutuste loomiseks ridade ja veergude kaudu, mis sisaldavad teie sisu. Bootstrapi ruudustiku süsteem töötab järgmiselt.

Õigeks joondamiseks ja polsterdamiseks tuleb read paigutada .container(fikseeritud laiusega) või (täislaiusega)..container-fluid
Kasutage ridu veergude horisontaalsete rühmade loomiseks.
Sisu tuleks paigutada veergudesse ja ainult veerud võivad olla ridade vahetuteks järelteks.
Eelmääratletud ruudustikuklassid meeldivad .rowja .col-xs-4on saadaval kiireks ruudustikupaigutuste tegemiseks. Semantilisemate paigutuste jaoks saab kasutada ka vähem mixine.
Veerud loovad rennid (lüngad veeru sisu vahel) kaudu padding. See polsterdus nihutatakse esimese ja viimase veeru ridades .rows negatiivse veerise kaudu.
Negatiivne marginaal on põhjus, miks allolevad näited on taandatud. See on nii, et ruudustiku veergude sisu on reastatud mitteruudustiku sisuga.
Ruudustiku veerud luuakse, määrates kaheteistkümne saadaoleva veeru arvu, mida soovite katta. Näiteks kolm võrdset veergu kasutaksid kolme .col-xs-4.
Kui ühte ritta paigutatakse rohkem kui 12 veergu, murrab iga lisaveergude rühm ühe üksusena uuele reale.
Võrguklassid kehtivad seadmetele, mille ekraanilaiused on katkestuspunktide suurusest suuremad või nendega võrdsed, ja alistavad väiksematele seadmetele suunatud ruudustikuklassid. Seetõttu .col-md-*ei mõjuta nt elemendile mis tahes klassi rakendamine mitte ainult selle stiili keskmistes seadmetes, vaid ka suurtes seadmetes, kui .col-lg-*klassi pole.

Vaadake näiteid nende põhimõtete oma koodile rakendamiseks.

Meedia päringud

Kasutame oma vähemate failides järgmisi meediumipäringuid, et luua oma ruudustikusüsteemis peamised katkestuspunktid.

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

Aeg-ajalt laiendame neid meediumipäringuid, et hõlmata max-widthCSS-i piiramiseks kitsama hulga seadmetega.

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

Võrgu valikud

Vaadake käepärase tabeli abil, kuidas Bootstrapi ruudustikusüsteemi aspektid mitmes seadmes töötavad.

	Eriti väikesed seadmed Telefonid (<768 pikslit)	Väikesed seadmed, tahvelarvutid (≥ 768 pikslit)	Keskmised seadmed lauaarvutid (≥ 992 pikslit)	Suured seadmed lauaarvutid (≥1200 pikslit)
Võrgu käitumine	Horisontaalne kogu aeg	Alustamiseks ahendatud, horisontaalne murdepunktide kohal
Mahuti laius	Puudub (automaatne)	750 pikslit	970 pikslit	1170 pikslit
Klassi eesliide	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# veergudest	12
Veeru laius	Automaatne	~62 pikslit	~81 pikslit	~97 pikslit
Renni laius	30 pikslit (15 pikslit veeru mõlemal küljel)
Pesastav	Jah
Tasumised	Jah
Veergude järjestamine	Jah

Näide: virnastatud-horisontaalne

Kasutades ühte .col-md-*ruudustikuklasside komplekti, saate luua põhivõrgusüsteemi, mis algab virnastatuna mobiilseadmetes ja tahvelarvutites (eriti väike kuni väike vahemik), enne kui see muutub lauaarvutites (keskmistes) seadmetes horisontaalseks. Asetage ruudustiku veerud mis tahes .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>

Näide: vedelikumahuti

Muutke mis tahes fikseeritud laiusega ruudustikupaigutus täislaiuseks, muutes oma äärepoolseima .containerpaigutuseks .container-fluid.

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

Näide: mobiil ja lauaarvuti

Kas te ei soovi, et teie veerud virnastaks väiksemates seadmetes? .col-xs-* .col-md-*Kasutage oma veergudesse lisades eriti väikese ja keskmise seadme ruudustiku klasse . Vaadake allolevat näidet, et paremini mõista, kuidas see kõik toimib.

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

Näide: mobiil, tahvelarvuti, lauaarvuti

Tuginege eelmisele näitele, luues tahvelarvutiklassidega veelgi dünaamilisemaid ja võimsamaid paigutusi .col-sm-*.

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

Näide: veeru mähkimine

Kui ühte ritta paigutatakse rohkem kui 12 veergu, murrab iga lisaveergude rühm ühe üksusena uuele reale.

.col-xs-9

.col-xs-4
Kuna 9 + 4 = 13 > 12, mähitakse see 4 veeru laiune jaotus ühe külgneva üksusena uuele reale.

.col-xs-6
Järgmised veerud jätkavad uut rida.

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

Responsiivne veerg lähtestab

Saadaolevate nelja tasandi ruudustikuga puutute kokku probleemidega, kus teatud katkestuspunktides ei tühjenda veerud päris õigesti, kuna üks on teisest kõrgem. Selle parandamiseks kasutage a .clearfixja meie reageerivate utiliidiklasside kombinatsiooni .

.col-xs-6 .col-sm-3
Muutke oma vaateava suurust või vaadake seda näiteks oma telefonis.

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

Lisaks reageerivate katkestuspunktide veergude tühjendamisele peate võib-olla lähtestama nihkeid, tõuke või tõmbamisi . Vaadake seda tegevuses ruudustiku näites .

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

Eemaldage vihmaveerennid

Eemaldage rennid reast ja selle veergudest koos .row-no-guttersklassiga.

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

Veergude tasaarvestamine

.col-md-offset-*Liigutage veerge klasside abil paremale . Need klassid suurendavad veeru vasakut veerist *veergude kaupa. Näiteks .col-md-offset-4liigub .col-md-4üle nelja veeru.

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

.col-*-offset-0Samuti saate klassidega alistada nihked madalamatelt ruudustikutasanditelt .

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

Pesastusveerud

Sisu pesastamiseks vaikeruudustikuga lisage olemasolevasse veergu uus veergude .rowkomplekt . Pesastatud read peaksid sisaldama veergude komplekti, mille kogum on kuni 12 (ei ole nõutav, et kasutaksite kõiki 12 saadaolevat veergu)..col-sm-*.col-sm-*

1. tase: .col-sm-9

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

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

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

Veergude järjestamine

Muutke hõlpsalt meie sisseehitatud ruudustiku veergude järjekorda klasside .col-md-push-*ja .col-md-pull-*modifikaatorite abil.

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

Vähem mixine ja muutujaid

Lisaks eelehitatud ruudustikuklassidele kiirete paigutuste jaoks sisaldab Bootstrap vähem muutujaid ja segusid oma lihtsate semantiliste paigutuste kiireks genereerimiseks.

Muutujad

Muutujad määravad veergude arvu, renni laiuse ja meediumipäringu punkti, millest alustada veergude ujumist. Kasutame neid ülalkirjeldatud eelmääratletud ruudustikuklasside loomiseks, samuti allpool loetletud kohandatud segude jaoks.

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

Segud

Miksiine kasutatakse koos ruudustiku muutujatega üksikute ruudustiku veergude jaoks semantilise CSS-i genereerimiseks.

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

Kasutamise näide

Saate muuta muutujaid oma kohandatud väärtusteks või kasutada lihtsalt segusid nende vaikeväärtustega. Siin on näide vaikesätete kasutamisest kahe veeru paigutuse loomiseks, mille vahel on vahe.

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

Pealkirjad

Saadaval on kõik HTML-i pealkirjad <h1>kuni <h6>. .h1läbi .h6klasside on saadaval ka siis, kui soovite sobitada pealkirja fondi stiili, kuid soovite siiski, et teie tekst kuvatakse tekstisiseselt.

h1. Bootstrapi pealkiri	Poolpaks 36 pikslit
h2. Bootstrapi pealkiri	Poolpaks 30 pikslit
h3. Bootstrapi pealkiri	Poolpaks 24 pikslit
h4. Bootstrapi pealkiri	Poolpaks 18 pikslit
h5. Bootstrapi pealkiri	Poolpaks 14 pikslit
h6. Bootstrapi pealkiri	Poolpaks 12 pikslit

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

Looge üldise <small>märgendi või .smallklassiga mis tahes päises kergem, teisene tekst.

h1. Bootstrap pealkiri Sekundaarne tekst

h2. Bootstrap pealkiri Sekundaarne tekst

h3. Bootstrap pealkiri Sekundaarne tekst

h4. Bootstrap pealkiri Sekundaarne tekst

h5. Bootstrap pealkiri Sekundaarne tekst

h6. Bootstrap pealkiri Sekundaarne tekst

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

Keha koopia

Bootstrapi globaalne vaikeväärtus font-sizeon 14 pikslit ja 1,428line-height . Seda rakendatakse lõikude ja kõigi lõikude kohta. Lisaks saavad (lõigud) alumise veerise poole nende arvutatud reakõrgusest (vaikimisi 10 pikslit).<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 ja eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Põhiteksti koopia

Muutke lõik silmapaistvaks, lisades .lead.

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

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

Ehitatud vähemaga

Tüpograafiline skaala põhineb kahel muutujatel Less in variables.less : @font-size-baseja @line-height-base. Esimene on läbivalt kasutatav põhifondi suurus ja teine on baasjoone kõrgus. Me kasutame neid muutujaid ja mõnda lihtsat matemaatikat, et luua kõigi meie tüüpide veerised, polstrid ja joonekõrgused ning palju muud. Kohandage neid ja Bootstrap kohandub.

Tekstisisesed elemendid

Märgistatud tekst

Tekstisarja esiletõstmiseks selle asjakohasuse tõttu teises kontekstis kasutage <mark>märgendit.

Saate kasutada märgistustesiletekst.

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

Kustutatud tekst

Kustutatud tekstiplokkide märkimiseks kasutage <del>silti.

~~Seda tekstirida tuleb käsitleda kustutatud tekstina.~~

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

Läbikriipsutatud tekst

Tekstiplokkide näitamiseks, mis pole enam asjakohased, kasutage <s>silti.

~~Seda tekstirida tuleb käsitleda ebatäpsena.~~

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

Sisestatud tekst

Dokumendi täienduste märkimiseks kasutage <ins>silti.

Seda tekstirida tuleb käsitleda dokumendi lisana.

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

Allajoonitud tekst

Teksti allajoonimiseks kasutage <u>silti.

See tekstirida renderdatakse allajoonituna

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

Kasutage kergete stiilidega HTML-i vaikimisi esiletõstmise silte.

Väike tekst

Tekstisiseste või tekstiplokkide rõhu vähendamiseks kasutage <small>märgendit, et määrata teksti 85% suurusest ülem. Pealkirjaelemendid saavad font-sizepesastatud <small>elementide jaoks oma.

Alternatiivina võite kasutada mis .smalltahes elemendi asemel tekstisisest elementi <small>.

Seda tekstirida tuleb käsitleda peenes kirjas.

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

Julge

Suurema fondikaaluga tekstijupi rõhutamiseks.

Järgmine tekstilõik renderdatakse paksus kirjas tekstina .

<strong>rendered as bold text</strong>

Kaldkiri

Tekstilõigu kaldkirjaga rõhutamiseks.

Järgmine tekstilõik renderdatakse kaldkirjas tekstina .

<em>rendered as italicized text</em>

Alternatiivsed elemendid

Kasutage julgelt <b>ja <i>HTML5-s. <b>on mõeldud sõnade või fraaside esiletõstmiseks ilma täiendavat tähtsust andmata, samas kui <i>see on enamasti mõeldud hääle, tehniliste terminite jms jaoks.

Joondamisklassid

Joondage tekst hõlpsalt komponentideks teksti joondusklasside abil.

Vasakule joondatud tekst.

Keskele joondatud tekst.

Paremale joondatud tekst.

Põhjendatud tekst.

Teksti murdmine puudub.

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

Ümberkujundamise klassid

Teisendage tekst komponentideks teksti suurtähtede kasutamise klassidega.

Väiketähtedega tekst.

Suurtähtedega tekst.

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

Lühendid

HTML-i elemendi stiliseeritud rakendamine <abbr>lühendite ja akronüümide jaoks, et näidata laiendatud versiooni hõljutamisel. Atribuudiga lühenditel titleon hele punktiirjoonega alumine ääris ja abikursor hõljutamisel, pakkudes hõljutamisel ja abitehnoloogiate kasutajatele täiendavat konteksti.

Põhiline lühend

Sõna atribuut lühend on attr .

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

Initsialism

.initialismVeidi väiksema fondi suuruse saamiseks lisage lühendile.

HTML on parim asi pärast viilutatud leiba.

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

Aadressid

Esitage lähima esivanema või kogu töökoha kontaktandmed. Säilitage vorming, lõpetades kõik read tähega <br>.

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

Täisnimi
[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>

Plokktsitaadid

Sisuplokkide tsiteerimiseks teie dokumendis teisest allikast.

Vaikimisi plokktsitaat

Mähkige tsitaadina mis <blockquote>tahes HTML -i ümber. Sirgete tsitaatide jaoks soovitame <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

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

Blockquote valikud

Stiili ja sisu muudatused standardi lihtsate variatsioonide jaoks <blockquote>.

Allika nimetamine

Lisage <footer>allika tuvastamiseks a. Mähi lähtetöö nimi sisse <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

Keegi kuulus allika pealkirjas

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

Alternatiivsed kuvad

.blockquote-reverseParemale joondatud sisuga tsitaadi lisamiseks .

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

Keegi kuulus allika pealkirjas

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

Loendid

Tellimata

Üksuste loend, mille puhul järjekord ei oma tähtsust .

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

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

Tellitud

Üksuste loend, mille puhul on järjekord selgesõnaliselt oluline.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Täisarv molestie lorem ja mass
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>

Stiilita

Eemaldage list-styleloendiüksustel vaike- ja vasak veeris (ainult kohesed alajärgud). See kehtib ainult vahetute alamloendi üksuste kohta , mis tähendab, et peate klassi lisama ka kõigi pesastatud loendite jaoks.

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

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

Järjekorras

Asetage kõik loendi üksused ühele reale display: inline-block;kerge polsterdusega.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Kirjeldus

Terminite loend koos nendega seotud kirjeldustega.

Kirjeldusloendid: Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida ja eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Horisontaalne kirjeldus

Pange terminid ja kirjeldused <dl>kõrvuti ritta. Algab virnastatud kujul nagu vaikimisi <dl>s, kuid kui navigeerimisriba laieneb, tehke ka neid.

Kirjeldusloendid: Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida ja 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>

Automaatne kärpimine

Horisontaalsed kirjeldusloendid kärbivad termineid, mis on liiga pikad, et vasakpoolsesse veergu mahtuda, märgiga text-overflow. Kitsamates vaateavades muutuvad need virnastatud vaikepaigutuseks.

Järjekorras

Mähi tekstisisesed koodilõigud märgiga <code>.

Näiteks <section>tuleks mähitud sees.

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

Kasutaja sisend

Kasutage <kbd>sisendi tähistamiseks, mis tavaliselt sisestatakse klaviatuuri kaudu.

Kataloogide vahetamiseks tippige cdja seejärel kataloogi nimi.
Seadete muutmiseks vajutage 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>

Põhiplokk

Kasutage <pre>mitme koodirea jaoks. Korralikuks renderdamiseks jätke koodis kindlasti kõik nurksulud.

<p>Näidistekst siin...</p>

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

Soovi korral saate lisada .pre-scrollableklassi, mis määrab maksimaalseks kõrguseks 350 pikslit ja pakub y-telje kerimisriba.

Muutujad

Muutujate näitamiseks kasutage <var>silti.

y = m x + b

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

Näidisväljund

Programmi näidisväljundi plokkide näitamiseks kasutage <samp>silti.

Seda teksti tuleb käsitleda arvutiprogrammi näidisväljundina.

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

Põhiline näide

Põhistiili jaoks – kerge polsterdus ja ainult horisontaalsed jaoturid – lisage põhiklass .tablemis tahes <table>. See võib tunduda üliliigne, kuid arvestades tabelite laialdast kasutamist muude pistikprogrammide (nt kalendrid ja kuupäevavalijad) jaoks, oleme otsustanud oma kohandatud tabelistiilid eraldada.

Valikuline tabeli pealkiri.
#	Eesnimi	Perekonnanimi	Kasutajanimi
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Larry	lind	@twitter

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

Triibulised read

Kasutage .table-stripedsebraribade lisamiseks mis tahes tabelireale <tbody>.

Brauseriülene ühilduvus

Triibulised tabelid kujundatakse :nth-childCSS-i valija kaudu, mis pole Internet Explorer 8-s saadaval.

#	Eesnimi	Perekonnanimi	Kasutajanimi
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Larry	lind	@twitter

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

Äärisega tabel

.table-borderedTabeli ja lahtrite kõikide külgede ääriste lisamine .

#	Eesnimi	Perekonnanimi	Kasutajanimi
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Larry	lind	@twitter

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

Hõljutage read

Lisa .table-hover, et lubada hõljutusoleku tabeliridadel <tbody>.

#	Eesnimi	Perekonnanimi	Kasutajanimi
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Larry	lind	@twitter

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

Kondenseeritud laud

Lisage .table-condensed, et muuta lauad kompaktsemaks, lõigates lahtri polsterduse pooleks.

#	Eesnimi	Perekonnanimi	Kasutajanimi
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

Kontekstuaalsed klassid

Kasutage tabeli ridade või üksikute lahtrite värvimiseks kontekstuaalseid klasse.

Klass	Kirjeldus
`.active`	Rakendab hõljutusvärvi konkreetsele reale või lahtrile
`.success`	Tähistab edukat või positiivset tegevust
`.info`	Tähistab neutraalset informatiivset muudatust või toimingut
`.warning`	Viitab hoiatusele, mis võib vajada tähelepanu
`.danger`	Tähistab ohtlikku või potentsiaalselt negatiivset tegevust

#	Veeru pealkiri	Veeru pealkiri	Veeru pealkiri
1	Veeru sisu	Veeru sisu	Veeru sisu
2	Veeru sisu	Veeru sisu	Veeru sisu
3	Veeru sisu	Veeru sisu	Veeru sisu
4	Veeru sisu	Veeru sisu	Veeru sisu
5	Veeru sisu	Veeru sisu	Veeru sisu
6	Veeru sisu	Veeru sisu	Veeru sisu
7	Veeru sisu	Veeru sisu	Veeru sisu
8	Veeru sisu	Veeru sisu	Veeru sisu
9	Veeru sisu	Veeru sisu	Veeru sisu

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

Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tabelireale või üksikule lahtrile tähenduse lisamiseks annab ainult visuaalse viite, mida abitehnoloogiate (nt ekraanilugejate) kasutajatele ei edastata. .sr-onlyVeenduge, et värviga tähistatud teave oleks kas sisust enesest ilmne (nähtav tekst vastavas tabelireas/lahtris) või oleks kaasatud alternatiivsete vahenditega, nagu klassiga peidetud lisatekst .

Vastuvõtlikud tabelid

Looge tundlikud tabelid, mähkides need .tablesisse , et need keriksid väikestes seadmetes (alla 768 piksli) horisontaalselt. .table-responsiveKui vaatate midagi suuremat kui 768 pikslit, ei näe te nendes tabelites mingit erinevust.

Vertikaalne lõikamine/kärpimine

Tundlikud tabelid kasutavad funktsiooni overflow-y: hidden, mis lõikab ära igasuguse sisu, mis ulatub tabeli alumisest või ülemisest servast kaugemale. Eelkõige võib see välja lõigata rippmenüüd ja muud kolmanda osapoole vidinad.

Firefox ja väljakomplektid

Firefoxil on mõni ebamugav väljakomplekti stiil, widthmis segab tundliku tabeli tööd. Seda ei saa tühistada ilma Firefoxispetsiifilise häkkimiseta, mida me Bootstrapis ei paku:

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

Lisateabe saamiseks lugege seda Stack Overflow vastust .

#	Tabeli pealkiri	Tabeli pealkiri	Tabeli pealkiri	Tabeli pealkiri	Tabeli pealkiri	Tabeli pealkiri
1	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter
2	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter
3	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter

#	Tabeli pealkiri	Tabeli pealkiri	Tabeli pealkiri	Tabeli pealkiri	Tabeli pealkiri	Tabeli pealkiri
1	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter
2	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter
3	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter

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

Põhiline näide

Üksikud vormi juhtelemendid saavad automaatselt üldise stiili. Kõik tekstilised <input>, <textarea>, ja <select>elemendid .form-controlon vaikimisi seatud väärtusele width: 100%;. .form-groupOptimaalse vahemaa saamiseks mähkige sildid ja juhtnupud sisse .

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

Ärge segage vormirühmi sisendrühmadega

Ärge segage vormirühmi otse sisendrühmadega . Selle asemel pesastage sisendrühm vormirühma sisse.

Tekstisisene vorm

Lisage .form-inlineoma vormile (mis ei pea olema <form>) vasakule joondatud ja reasiseste ploki juhtelementide jaoks. See kehtib ainult vormidele, mis asuvad vaateavades, mille laius on vähemalt 768 pikslit.

Võib vajada kohandatud laiusi

Sisendid ja valikud on width: 100%;Bootstrapis vaikimisi rakendatud. Tekstisiseses vormis lähtestame selle width: auto;nii, et mitu juhtelementi saaks asuda samal real. Olenevalt paigutusest võib vaja minna täiendavaid kohandatud laiusi.

Lisage alati sildid

Ekraanilugejatel on teie vormidega probleeme, kui te ei lisa igale sisendile silti. Nende tekstisiseste vormide puhul saate .sr-onlyklassi abil sildid peita. Abitehnoloogiate märgistamiseks on veel alternatiivseid meetodeid, näiteks atribuut aria-label, aria-labelledbyvõi titleatribuut. Kui ükski neist puudub, võivad ekraanilugejad kasutada placeholderatribuuti, kui see on olemas, kuid pidage meeles, et selle kasutamine placeholdermuude märgistamismeetodite asendajana ei ole soovitatav.

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

Horisontaalne vorm

Kasutage Bootstrapi eelmääratletud ruudustiku klasse, et joondada silte ja vormi juhtelementide rühmi horisontaalses paigutuses, lisades .form-horizontalvormile (mis ei pea olema <form>). See muudab .form-groups käituma ruudustiku ridadena, seega pole vaja .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>

Toetatud juhtnupud

Näidisvormide paigutuse toetatud standardvormi juhtelementide näited.

Sisendid

Levinuim vormikontroll, tekstipõhised sisestusväljad. Sisaldab kõigi HTML5 tüüpide tuge: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telja color.

Nõutav tüübideklaratsioon

Sisendeid kujundatakse täielikult ainult siis, kui need typeon õigesti deklareeritud.

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

Sisestusrühmad

Integreeritud teksti või nuppude lisamiseks enne ja/või pärast tekstipõhist <input>, vaadake sisestusrühma komponenti .

Tekstiala

Vormi juhtseade, mis toetab mitut tekstirida. Muutke rowsatribuuti vastavalt vajadusele.

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

Märkeruudud ja raadiod

Märkeruudud on mõeldud loendis ühe või mitme valiku valimiseks, raadiod aga ühe valiku valimiseks paljude hulgast.

Keelatud märkeruudud ja raadiod on toetatud, kuid selleks, et näidata kursorit "keelatud" kursoril vanemal <label>, peate .disabledklassi lisama vanemale .radio, .radio-inline, .checkbox, või .checkbox-inline.

Vaikimisi (virnastatud)

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

Tekstisisesed märkeruudud ja raadiod

Kasutage samal real kuvatavate juhtelementide jaoks märkeruutude või raadiote seeria klasse või .checkbox-inline..radio-inline

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

Märkeruudud ja raadiod ilma sildi tekstita

Kui teil pole teksti sees <label>, asetatakse sisend ootuspäraselt. Praegu töötab ainult mitte-inline märkeruutude ja raadiote puhul. aria-labelÄrge unustage abitehnoloogiate (nt kasutades ) jaoks ikkagi mingit sildi vormingut .

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

Valib

Pange tähele, et paljudel omamenüüdel – nimelt Safaris ja Chrome’is – on ümarad nurgad, mida ei saa border-radiusatribuutide kaudu muuta.

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

<select>Atribuudiga juhtelementide puhul kuvatakse multiplevaikimisi mitu valikut.

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

Staatiline juhtimine

Kui teil on vaja vormi sees vormisildi kõrvale lihtteksti paigutada, kasutage .form-control-staticklassi <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>

Fookuse olek

Eemaldame outlinemõnelt vormi juhtelemendilt vaikelaadid ja rakendame box-shadowselle asemel :focus.

Demo `:focus`olek

Ülaltoodud näidissisend kasutab meie dokumentatsioonis kohandatud stiile, et demonstreerida :focusolekut .form-control.

Puudega olek

Lisage disabledsisendile tõeväärtusatribuut, et vältida kasutaja interaktsioone. Keelatud sisendid paistavad heledamad ja lisavad not-allowedkursori.

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

Keelatud väljakomplektid

Kõikide juhtelementide korraga keelamiseks lisage disabledatribuut atribuudile a .<fieldset><fieldset>

Hoiatus lingi funktsionaalsuse kohta`<a>`

Vaikimisi käsitlevad brauserid kõiki a-s olevaid vormijuhtelemente ( <input>ja elemente) keelatuna <select>, vältides nii klaviatuuri kui ka hiire interaktsioone. Kui aga teie vorm sisaldab ka elemente, antakse neile ainult stiil . Nagu on märgitud nuppude keelatud olekut käsitlevas jaotises (ja eriti ankurelementide alamjaotises), ei ole see CSS-i atribuut veel standarditud ja seda ei toetata täielikult Opera 18 ja vanemates versioonides ega Internet Explorer 11-s ning võitis. Ärge takistage klaviatuuri kasutajatel neid linke fokuseerimast või aktiveerimast. Nii et turvalisuse huvides kasutage selliste linkide keelamiseks kohandatud JavaScripti.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Brauseriülene ühilduvus

Kuigi Bootstrap rakendab neid stiile kõigis brauserites, ei toeta Internet Explorer 11 ja vanemad disabledatribuuti täielikult <fieldset>. Kasutage kohandatud JavaScripti väljakomplekti keelamiseks nendes brauserites.

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

Kirjutuskaitstud olek

Lisage readonlysisendile Boolean atribuut, et vältida sisendi väärtuse muutmist. Kirjutuskaitstud sisendid näivad heledamad (nagu keelatud sisendid), kuid säilitavad standardse kursori.

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

Abitekst

Blokeerimistaseme abitekst vormi juhtelementide jaoks.

Abiteksti seostamine vormi juhtelementidega

Abitekst peaks olema selgesõnaliselt seotud vormi juhtelemendiga, millega see aria-describedbyatribuudi kasutamisega seotud on. See tagab, et abitehnoloogiad (nt ekraanilugejad) teavitavad sellest abitekstist, kui kasutaja keskendub või juhtnupule siseneb.

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

Valideerimisolekud

Bootstrap sisaldab vormi juhtelementide vea-, hoiatus- ja õnnestumisolekute valideerimisstiile. Kasutamiseks lisage emaelemendile .has-warning, .has-errorvõi .has-success. Kõik .control-label, .form-control, ja .help-blockselle elemendi sees saavad valideerimisstiilid.

Valideerimisoleku edastamine abitehnoloogiatele ja värvipimedatele kasutajatele

Nende valideerimisstiilide kasutamine vormi juhtelemendi oleku tähistamiseks annab ainult visuaalse, värvipõhise indikatsiooni, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele ega värvipimedatele kasutajatele.

Veenduge, et esitataks ka alternatiivne olekunäitaja. Näiteks saate lisada vihje oleku kohta vormi juhtelemendi <label>teksti endasse (nagu on järgmises koodinäites), lisada Glyphiconi (koos klassi kasutades sobiva alternatiivse tekstiga .sr-only– vaadake Glyphiconi näiteid ) või esitades lisaabi tekstiplokk . Spetsiaalselt abitehnoloogiate jaoks saab kehtetutele vormijuhtelementidele määrata ka aria-invalid="true"atribuudi.

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

Valikuliste ikoonidega

Saate lisada ka valikulisi tagasisideikoone, lisades .has-feedbackparempoolse ikooni ja.

Tagasiside ikoonid töötavad ainult tekstielementidega <input class="form-control">.

Ikoonid, sildid ja sisestusrühmad

Tagasisideikoonide käsitsi positsioneerimine on vajalik sildita sisendite ja paremal asuva lisandmooduliga sisendirühmade jaoks . Juurdepääsetavuse huvides soovitame tungivalt lisada kõikidele sisenditele sildid. Kui soovite takistada siltide kuvamist, peitke need .sr-onlyklassiga. Kui peate tegema ilma siltideta, reguleerige toptagasisideikooni väärtust. Sisestusrühmade jaoks kohandage rightväärtus sobivaks piksliväärtuseks, olenevalt lisandmooduli laiusest.

Ikooni tähenduse edastamine abitehnoloogiatele

Tagamaks, et abitehnoloogiad (nt ekraanilugejad) annaksid ikooni tähenduse õigesti edasi, tuleks .sr-onlyklassi lisada täiendav peidetud tekst ja see tuleb selgelt seostada vormijuhtimisega, millega see on seotud aria-describedby. Teise võimalusena veenduge, et tähendus (näiteks asjaolu, et konkreetse tekstisisestusvälja jaoks on hoiatus) edastatakse mõnel muul kujul, näiteks <label>vormi juhtelemendiga seotud tegeliku teksti muutmine.

Kuigi järgmistes näidetes on juba tekstis endas mainitud vastavate vormijuhtelementide valideerimisolekut <label>, on ülaltoodud tehnika (kasutades .sr-onlyteksti ja aria-describedby) lisatud illustratiivsetel eesmärkidel.

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

Valikulised ikoonid horisontaalses ja tekstisiseses vormis

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

Valikulised peidetud `.sr-only`siltidega ikoonid

Kui kasutate .sr-onlyklassi vormi juhtelementide peitmiseks <label>(selle asemel, et kasutada muid sildistamisvalikuid, näiteks aria-labelatribuuti), kohandab Bootstrap automaatselt ikooni asukohta, kui see on lisatud.

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

Kontrolli suurust

Määrake kõrgused selliste klasside abil .input-lgja laiused, kasutades ruudustiku veergude klasse, nagu .col-lg-*.

Kõrguse mõõtmine

Looge kõrgemaid või lühemaid vormi juhtelemente, mis vastavad nuppude suurusele.

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

Horisontaalsed vormirühma suurused

Suurendage kiiresti silte ja vormi juhtelemente .form-horizontal, lisades .form-group-lgvõi .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>

Veeru suuruse määramine

Soovitud laiuste hõlpsaks jõustamiseks mähkige sisendid ruudustiku veergudesse või mis tahes kohandatud põhielemendisse.

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

Nuppude sildid

Kasutage nuppude klasse <a>, <button>, või <input>elemendil.

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

Kontekstispetsiifiline kasutus

Kuigi nupuklasse saab kasutada elementide <a>ja elementide puhul, toetatakse meie navigeerimis- ja navigeerimisriba komponentides <button>ainult elemente.<button>

Nuppudena toimivad lingid

Kui <a>elemente kasutatakse nuppudena toimimiseks – käivitavad lehesisesed funktsioonid, mitte ei liigu praegusel lehel teisele dokumendile või jaotisele –, tuleks neile anda ka sobiv role="button".

Brauseriülene renderdamine

Parima tavana soovitame tungivalt kasutada <button>elementi igal võimalusel , et tagada sobiv brauseriülene renderdus.

Muuhulgas on Firefoxis <30 viga, mis takistab meil põhinevaid nuppe seadistamast line-height, <input>mistõttu need ei vasta täpselt Firefoxi teiste nuppude kõrgusele.

Valikud

Stiiliga nupu kiireks loomiseks kasutage mõnda saadaolevatest nupuklassidest.

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

Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine nupule tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. Veenduge, et värviga tähistatud teave oleks sisust enesest ilmne (nupu nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks .sr-onlyklassiga peidetud lisatekst.

Suurused

Kas soovite suuremaid või väiksemaid nuppe? Lisage .btn-lg, .btn-smvõi .btn-xslisasuuruste jaoks.

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

Looge plokitaseme nupud – need, mis katavad kogu vanema laiust – lisades .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>

Aktiivne olek

Kui need on aktiivsed, kuvatakse nupud vajutatuna (tumedama tausta, tumedama äärise ja varjundiga). Elementide puhul <button>tehakse seda :active. Elementide puhul <a>tehakse seda .active. Kui teil on vaja aktiivset olekut programmiliselt kopeerida , võite siiski kasutada .actives- <button>s (ja lisada atribuuti).aria-pressed="true"

Nupu element

Pole vaja lisada :active, kuna see on pseudoklass, kuid kui teil on vaja sama välimust sundida, lisage .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>

Ankru element

Lisage .activeklass <a>nuppudele.

Peamine link Link

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

Puudega olek

Muutke nupud klõpsamatuks, tuhmudes need tagasi nupuga opacity.

Nupu element

Lisage nuppudele disabledatribuut .<button>

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

Brauseriülene ühilduvus

Kui lisate disabledatribuudi atribuudile <button>, muudab Internet Explorer 9 ja vanemad versioonid teksti halliks koos ebameeldiva tekstivarjuga, mida me ei saa parandada.

Ankru element

Lisage .disabledklass <a>nuppudele.

Peamine link Link

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

Kasutame .disabledsiin sarnaselt tavalisele klassile kasuliku klassina .active, seega pole eesliidet vaja.

Lingi funktsionaalsuse hoiatus

See klass kasutab s-i pointer-events: nonelingifunktsioonide keelamiseks <a>, kuid see CSS-i atribuut pole veel standarditud ning seda ei toetata täielikult operatsioonisüsteemides Opera 18 ja vanemates versioonides ega Internet Explorer 11-s. Lisaks on isegi brauserites, mis toetavad pointer-events: none, klaviatuuri. navigeerimine jääb muutumatuks, mis tähendab, et nägemisega klaviatuurikasutajad ja abitehnoloogiate kasutajad saavad neid linke siiski aktiveerida. Nii et turvalisuse huvides kasutage selliste linkide keelamiseks kohandatud JavaScripti.

Reageerivad pildid

Bootstrap 3 pilte saab .img-responsiveklassi lisamisega muuta tundlikuks. See kehtib max-width: 100%;, height: auto;ja display: block;pildi kohta, nii et see skaleeruks kenasti põhielemendiga.

.img-responsiveKlassi kasutavate piltide tsentreerimiseks .center-blockkasutage .text-center. Lisateavet kasutamise kohta leiate abiklasside jaotisest.center-block .

SVG-pildid ja IE 8-10

Internet Exploreris 8–10 on SVG-kujutised .img-responsiveebaproportsionaalselt suured. Selle parandamiseks lisage width: 100% \9;vajadusel. Bootstrap ei rakenda seda automaatselt, kuna see põhjustab probleeme muude pildivormingutega.

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

Pildi kujundid

Lisage <img>elemendile klassid, et hõlpsasti kujundada pilte mis tahes projektis.

Brauseriülene ühilduvus

Pidage meeles, et Internet Explorer 8-l puudub ümarate nurkade tugi.

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

Kontekstuaalsed värvid

Edastage tähendust värvide kaudu, kasutades käputäie rõhuasetusega kasulikke klasse. Neid võidakse rakendada ka linkidele ja need tumenevad hõljumisel täpselt nagu meie vaikelingilaadid.

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>

Konkreetsusega tegelemine

Mõnikord ei saa rõhuklasse mõne teise valija spetsiifilisuse tõttu rakendada. Enamikul juhtudel on piisav lahendus, kui pakkida tekst <span>klassiga a-sse.

Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. Veenduge, et värviga tähistatud teave oleks sisust enesest ilmne (kontekstivärve kasutatakse ainult tekstis/märgistuses juba esineva tähenduse tugevdamiseks) või lisatakse alternatiivsete vahenditega, näiteks .sr-onlyklassiga peidetud lisatekst. .

Kontekstuaalsed taustad

Sarnaselt kontekstuaalse teksti värviklassidega saate hõlpsalt määrata elemendi tausta mis tahes kontekstiklassi. Ankurkomponendid tumenevad hõljumisel, täpselt nagu tekstiklassid.

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>

Konkreetsusega tegelemine

Mõnikord ei saa kontekstuaalseid taustaklasse mõne teise valija spetsiifilisuse tõttu rakendada. Mõnel juhul on piisav lahendus elemendi sisu pakkimine <div>klassiga.

Abitehnoloogiate tähenduse edasiandmine

Nagu kontekstipõhiste värvide puhul, veenduge, et mis tahes värvi kaudu edastatav tähendus edastataks ka vormingus, mis ei ole ainult esitluslik.

Sule ikoon

Kasutage üldist sulgemisikooni sisust, nagu modaalid ja hoiatused, loobumiseks.

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

Carets

Kasutage rippmenüü funktsioonide ja suuna märkimiseks noolenuppe. Pange tähele, et vaikeseade pöördub rippmenüüdes automaatselt tagasi .

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

Kiired ujukid

Ujutage elementi koos klassiga vasakule või paremale.!importanton lisatud spetsiifilisuse probleemide vältimiseks. Klasse saab kasutada ka mixinidena.

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

Keskendage sisuplokke

Määra elemendiks display: blockja tsentreeri selle kaudu margin. Saadaval mixinina ja klassina.

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

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

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

Clearfix

Tühjendage floats hõlpsalt, lisades .clearfix emaelemendile . Kasutab Nicolas Gallagheri populariseeritavat micro clearfixi . Võib kasutada ka seguna.

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

Sisu kuvamine ja peitmine

Elementi sundimine kuvama või peitma ( sh ekraanilugejate puhul ) klasside .showja kasutamisega. .hiddenNeid klasse kasutatakse !importantspetsiifilisuse konfliktide vältimiseks, nagu ka kiirujukid . Need on saadaval ainult ploki taseme vahetamiseks. Neid saab kasutada ka segudena.

.hideon saadaval, kuid see ei mõjuta alati ekraanilugejaid ja on alates versioonist 3.0.1 aegunud . Kasutage .hiddenvõi .sr-onlyselle asemel.

Lisaks .invisiblesaab seda kasutada ainult elemendi nähtavuse ümberlülitamiseks, mis tähendab, et displayseda ei muudeta ja element võib siiski mõjutada dokumendi voogu.

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

Ekraanilugeja ja klaviatuuriga navigeerimise sisu

Peida element kõigis seadmetes, välja arvatud ekraanilugejad , millel on .sr-only. Kombineerige .sr-only, .sr-only-focusableet kuvada element uuesti, kui see on teravdatud (nt ainult klaviatuuri kasutajal). Vajalik juurdepääsetavuse parimate tavade järgimiseks . Võib kasutada ka segudena.

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

Pildi asendamine

Kasutage .text-hideklassi või mixini, et asendada elemendi tekstisisu taustpildiga.

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

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

Kiiremaks mobiilisõbralikuks arendamiseks kasutage neid utiliidiklasse sisu kuvamiseks ja peitmiseks seadme kaupa meediumipäringu kaudu. Siia kuuluvad ka utiliidiklassid sisu vahetamiseks printimisel.

Proovige neid kasutada piiratud arvul ja vältige samast saidist täiesti erinevate versioonide loomist. Selle asemel kasutage neid iga seadme esitluse täiendamiseks.

Saadaolevad klassid

Sisu vahetamiseks vaateava murdepunktide vahel kasutage ühte olemasolevat klassi või nende kombinatsiooni.

	Eriti väikesed seadmedTelefonid (<768 pikslit)	Väikesed seadmedTahvelarvutid (≥ 768 pikslit)	Keskmised seadmedLauaarvutid (≥ 992 pikslit)	Suured seadmedLauaarvutid (≥ 1200 pikslit)
`.visible-xs-*`	Nähtav	Peidetud	Peidetud	Peidetud
`.visible-sm-*`	Peidetud	Nähtav	Peidetud	Peidetud
`.visible-md-*`	Peidetud	Peidetud	Nähtav	Peidetud
`.visible-lg-*`	Peidetud	Peidetud	Peidetud	Nähtav
`.hidden-xs`	Peidetud	Nähtav	Nähtav	Nähtav
`.hidden-sm`	Nähtav	Peidetud	Nähtav	Nähtav
`.hidden-md`	Nähtav	Nähtav	Peidetud	Nähtav
`.hidden-lg`	Nähtav	Nähtav	Nähtav	Peidetud

Alates versioonist 3.2.0 on .visible-*-*iga murdepunkti klassid kolmes variandis, üks iga displayallpool loetletud CSS-i atribuudi väärtuse kohta.

Klasside rühm	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Näiteks eriti väikeste ( xs) ekraanide jaoks on saadaval järgmised .visible-*-*klassid: .visible-xs-block, .visible-xs-inline, ja .visible-xs-inline-block.

Klassid .visible-xs, .visible-sm, .visible-mdja .visible-lgon samuti olemas, kuid on alates versioonist 3.2.0 aegunud . Need on ligikaudu samaväärsed elemendiga .visible-*-block, välja arvatud täiendavate erijuhtumitega <table>seotud elementide ümberlülitamiseks.

Trükiklassid

Sarnaselt tavaliste tundlike klassidega kasutage neid sisu printimiseks ümberlülitamiseks.

klassid	Brauser	Prindi
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Peidetud	Nähtav
`.hidden-print`	Nähtav	Peidetud

Klass .visible-printon samuti olemas, kuid on alates versioonist 3.2.0 aegunud . See on ligikaudu samaväärne .visible-print-block, välja arvatud täiendavate erijuhtudega <table>seotud elementide puhul.

Testjuhtumid

Reageerivate utiliidiklasside testimiseks muutke brauseri suurust või laadige see erinevatesse seadmetesse.

Nähtav aadressil...

Rohelised linnukesed näitavad, et element on teie praeguses vaateaknas nähtav .

Eriti väike ✔ Nähtav x-smallil

Väike ✔ Nähtav väikestel

Keskmine ✔ Nähtav keskmisel

Suur ✔ Nähtav suurelt

Ekstra väike ja väike ✔ Nähtav x-smallil ja väikesel

Keskmine ja suur ✔ Nähtav keskmisel ja suurel

Eriti väike ja keskmine ✔ Nähtav x-smallil ja keskmisel

Väikesed ja suured ✔ Nähtav nii väikestele kui suurtele

Eriti väike ja suur ✔ Nähtav x-väikestel ja suurtel

Väikesed ja keskmised ✔ Nähtav väikestele ja keskmistele

Peidetud...

Siin näitavad rohelised linnukesed ka, et element on teie praeguses vaateaknas peidetud .

Eriti väike ✔ Peidetud x-smallil

Väike ✔ Peidetud väikesele

Keskmine ✔ Peidetud kandjal

Suur ✔ Suurele peidetud

Ekstra väike ja väike ✔ Peidetud x-small ja väike

Keskmine ja suur ✔ Peidetud keskmisele ja suurele

Eriti väike ja keskmine ✔ Peidetud x-smallil ja keskmisel

Väikesed ja suured ✔ Peidetud väikestele ja suurtele

Eriti väike ja suur ✔ Peidetud x-small ja suur

Väikesed ja keskmised ✔ Peidetud väikestele ja keskmistele

Bootstrapi CSS põhineb Lessil, eelprotsessoril, millel on lisafunktsioonid, nagu muutujad, mikserid ja funktsioonid CSS-i kompileerimiseks. Need, kes soovivad meie kompileeritud CSS-failide asemel kasutada lähtefaile Less, saavad kasutada arvukaid muutujaid ja segusid, mida me kogu raamistikus kasutame.

Võrgustiku muutujaid ja segusid käsitletakse jaotises Grid system .

Bootstrapi koostamine

Bootstrapi saab kasutada vähemalt kahel viisil: koos kompileeritud CSS-i või lähtefailidega Less. Failide Vähem kompileerimiseks vaadake jaotisest Alustamine , kuidas seadistada arenduskeskkond vajalike käskude käivitamiseks.

Kolmanda osapoole kompileerimistööriistad võivad Bootstrapiga töötada, kuid meie põhimeeskond neid ei toeta.

Muutujad

Muutujaid kasutatakse kogu projekti vältel, et tsentraliseerida ja jagada sagedamini kasutatavaid väärtusi, nagu värvid, vahed või fondivirnad. Täieliku ülevaate saamiseks vaadake kohandajat .

Värvid

Kasutage hõlpsalt kahte värviskeemi: halltoonid ja semantiline. Halltoonides värvid pakuvad kiiret juurdepääsu sageli kasutatavatele mustadele toonidele, semantilised aga sisaldavad erinevaid värve, mis on määratud tähenduslikele kontekstiväärtustele.

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

Kasutage mõnda neist värvimuutujatest sellisel kujul, nagu nad on, või määrake need ümber oma projekti jaoks tähendusrikkamateks muutujateks.

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

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

Tellingud

Käputäis muutujaid saidi skeleti põhielementide kiireks kohandamiseks.

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

Lingid

Stiilige oma lingid hõlpsalt õige värviga ainult ühe väärtusega.

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

Pange tähele, et see @link-hover-colorkasutab funktsiooni, mis on veel üks suurepärane tööriist firmalt Less, et luua automaatselt õige hõljukvärv. Võite kasutada darken, lighten, saturateja desaturate.

Tüpograafia

Mõne kiire muutuja abil saate hõlpsalt määrata kirjatüübi, teksti suuruse, esiteksti ja palju muud. Bootstrap kasutab neid ka lihtsate tüpograafiliste segude pakkumiseks.

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

Ikoonid

Kaks kiiret muutujat ikoonide asukoha ja failinime kohandamiseks.

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

Komponendid

Bootstrapi komponendid kasutavad ühiste väärtuste määramiseks vaikemuutujaid. Siin on kõige sagedamini kasutatavad.

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

Müüja segud

Tarnija miksinid on segud, mis aitavad toetada mitut brauserit, lisades teie kompileeritud CSS-i kõik asjakohased hankija eesliited.

Karbi suuruse määramine

Lähtestage oma komponentide kasti mudel ühe segamisega. Konteksti saamiseks vaadake seda kasulikku Mozilla artiklit .

Sexin on alates versioonist 3.2.0 aegunud , kuna kasutusele võeti Autoprefixer. Tagasiühilduvuse säilitamiseks jätkab Bootstrap mixini sisemist kasutamist kuni Bootstrap v4-ni.

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

Ümardatud nurgad

Tänapäeval toetavad kõik kaasaegsed brauserid prefiksita border-radiusatribuuti. Sellisena pole .border-radius()segamist, kuid Bootstrap sisaldab otseteid objekti teatud külje kahe nurga kiireks ümardamiseks.

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

Kasti (Drop) varjud

Kui teie sihtrühm kasutab uusimaid ja parimaid brausereid ja seadmeid, kasutage seda box-shadowatribuuti kindlasti eraldi. Kui vajate tuge vanematele Androidi (enne v4) ja iOS-i seadmetele (eel-iOS 5), kasutage nõutava eesliide leidmiseks aegunud mixini .-webkit

Miksin on alates versioonist 3.1.0 aegunud , kuna Bootstrap ei toeta ametlikult aegunud platvorme, mis ei toeta standardset atribuuti. Tagasiühilduvuse säilitamiseks jätkab Bootstrap mixini sisemist kasutamist kuni Bootstrap v4-ni.

Kasutage kasti varjudes kindlasti rgba()värve, et need seguneksid võimalikult sujuvalt taustaga.

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

Üleminekud

Mitmed segud paindlikkuse tagamiseks. Määrake kogu üleminekuteave ühega või määrake vajadusel eraldi viivitus ja kestus.

Segud on alates versioonist 3.2.0 aegunud , võttes kasutusele Autoprefixer . Tagasiühilduvuse säilitamiseks jätkab Bootstrap mixinide kasutamist sisemiselt kuni Bootstrap v4-ni.

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

Transformatsioonid

Pöörake, skaleerige, tõlkige (teisaldage) või kallutage mis tahes objekti.

Segud on alates versioonist 3.2.0 aegunud , võttes kasutusele Autoprefixer . Tagasiühilduvuse säilitamiseks jätkab Bootstrap mixinide kasutamist sisemiselt kuni Bootstrap v4-ni.

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

Animatsioonid

Üks miksin kõigi CSS3 animatsiooni omaduste kasutamiseks ühes deklaratsioonis ja muud mixinid üksikute atribuutide jaoks.

Segud on alates versioonist 3.2.0 aegunud , võttes kasutusele Autoprefixer . Tagasiühilduvuse säilitamiseks jätkab Bootstrap mixinide kasutamist sisemiselt kuni Bootstrap v4-ni.

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

Läbipaistmatus

Määrake kõigi brauserite läbipaistmatus ja filterpakkuge IE8 jaoks varuvarianti.

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

Kohatäite tekst

Andke iga välja vormi juhtelementide kontekst.

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

Veerud

Looge veerge CSS-i kaudu ühes elemendis.

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

Gradiendid

Muutke mis tahes kaks värvi hõlpsalt tausta gradiendiks. Minge edasi ja määrake suund, kasutage kolme värvi või radiaalset gradienti. Ühe miksiniga saate kõik vajalikud eesliitega süntaksid.

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

Samuti saate määrata standardse kahevärvilise lineaarse gradiendi nurga:

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

Kui vajate barber-tripe stiilis gradienti, on see ka lihtne. Lihtsalt määrake üks värv ja me katame poolläbipaistva valge triibu.

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

Tõstke ante üles ja kasutage selle asemel kolme värvi. Määrake esimene värv, teine värv, teise värvi värvipiir (protsentuaalne väärtus nagu 25%) ja kolmas värv järgmiste segudega:

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

Pea püsti! Kui teil on kunagi vaja gradient eemaldada, eemaldage kindlasti kõik IE-spetsiifilised andmed , mille filterolete lisanud. Seda saate teha, kui kasutate .reset-filter()koos mixini background-image: none;.

Kasulikud segud

Utility mixinid on mixinid, mis kombineerivad muidu mitteseotud CSS-i atribuute konkreetse eesmärgi või ülesande saavutamiseks.

Clearfix

Unustage class="clearfix"ühelegi elemendile lisamine ja lisage .clearfix()vajadusel segu. Kasutab Nicolas Gallagheri micro clearfixi .

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

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

Horisontaalne tsentreerimine

Keskendage mis tahes element kiiresti selle vanema sees. Nõuab widthvõi max-widthtuleb määrata.

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

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

Abilised suuruse määramisel

Määrake objekti mõõtmed lihtsamalt.

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

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

Muudetava suurusega tekstialad

Saate hõlpsalt konfigureerida mis tahes tekstiala või mis tahes muu elemendi suuruse muutmise valikuid. Vaikimisi tavaline brauseri käitumine ( both).

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

Teksti kärpimine

Kärbige teksti lihtsalt ühe segamisega ellipsiga. Nõuab, et element oleks blockvõi inline-blocktasemel.

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

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

Võrkkesta kujutised

Määrake kaks pilditeed ja @1x pildi mõõtmed ning Bootstrap esitab @2x meediumipäringu. Kui teil on esitada palju pilte, kaaluge võrkkesta kujutise CSS-i käsitsi kirjutamist ühes meediumipäringus.

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

Kuigi Bootstrap on ehitatud Lessile, on sellel ka ametlik Sassi port . Hoiame seda eraldi GitHubi hoidlas ja käsitleme värskendusi konversiooniskriptiga.

Mis on kaasas

Kuna Sassi portil on eraldi repo ja see teenindab veidi teistsugust vaatajaskonda, erineb projekti sisu oluliselt Bootstrapi põhiprojektist. See tagab, et Sassi port ühildub võimalikult paljude Sassi-põhiste süsteemidega.

Tee	Kirjeldus
`lib/`	Ruby gem kood (Sassi konfiguratsioon, rööbaste ja kompassi integratsioonid)
`tasks/`	Konverteri skriptid (vastuvoolu Lessi muutmine Sassiks)
`test/`	Koostamise testid
`templates/`	Kompassi paketi manifest
`vendor/assets/`	Sassi, JavaScripti ja fondifailid
`Rakefile`	Sisemised ülesanded, nagu reha ja teisendamine

Nende failide töös nägemiseks külastage Sassi pordi GitHubi hoidlat .

Paigaldamine

Lisateavet Bootstrap for Sassi installimise ja kasutamise kohta leiate GitHubi hoidlast readme . See on kõige ajakohasem allikas ja sisaldab teavet rööbaste, kompassi ja standardsete Sassi projektide jaoks.

Bootstrap Sassile

CSS

Ülevaade

HTML5 doktüüp

Esmalt mobiil

Tüpograafia ja lingid

Normaliseeri.css

Konteinerid

Võrgusüsteem

Sissejuhatus

Meedia päringud

Võrgu valikud

Näide: virnastatud-horisontaalne

Näide: vedelikumahuti

Näide: mobiil ja lauaarvuti

Näide: mobiil, tahvelarvuti, lauaarvuti

Näide: veeru mähkimine

Responsiivne veerg lähtestab

Eemaldage vihmaveerennid

Veergude tasaarvestamine

Pesastusveerud

Veergude järjestamine

Vähem mixine ja muutujaid

Muutujad

Segud

Kasutamise näide

Tüpograafia

Pealkirjad

h1. Bootstrapi pealkiri

h2. Bootstrapi pealkiri

h3. Bootstrapi pealkiri

h4. Bootstrapi pealkiri

h5. Bootstrapi pealkiri

h6. Bootstrapi pealkiri

h1. Bootstrap pealkiri Sekundaarne tekst

h2. Bootstrap pealkiri Sekundaarne tekst

h3. Bootstrap pealkiri Sekundaarne tekst

h4. Bootstrap pealkiri Sekundaarne tekst

h5. Bootstrap pealkiri Sekundaarne tekst

h6. Bootstrap pealkiri Sekundaarne tekst

Keha koopia

Põhiteksti koopia

Ehitatud vähemaga

Tekstisisesed elemendid

Märgistatud tekst

Kustutatud tekst

Läbikriipsutatud tekst

Sisestatud tekst

Allajoonitud tekst

Väike tekst

Julge

Kaldkiri

Alternatiivsed elemendid

Joondamisklassid

Ümberkujundamise klassid

Lühendid

Põhiline lühend

Initsialism

Aadressid

Plokktsitaadid

Vaikimisi plokktsitaat

Blockquote valikud

Allika nimetamine

Alternatiivsed kuvad

Loendid

Tellimata

Tellitud

Stiilita

Järjekorras

Kirjeldus

Horisontaalne kirjeldus

Automaatne kärpimine

Kood

Järjekorras

Kasutaja sisend

Põhiplokk

Muutujad

Näidisväljund

Tabelid

Põhiline näide

Triibulised read

Demo `:focus`olek

Hoiatus lingi funktsionaalsuse kohta`<a>`

Valikulised peidetud `.sr-only`siltidega ikoonid