Spoznajte ključne dele Bootstrapove infrastrukture, vključno z našim pristopom k boljšemu, hitrejšemu in močnejšemu spletnemu razvoju.

HTML5 doctype

Bootstrap uporablja določene elemente HTML in lastnosti CSS, ki zahtevajo uporabo dokumenta HTML5. Vključite ga na začetku vseh vaših projektov.

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

Najprej mobilni

Z Bootstrap 2 smo dodali izbirne sloge, prijazne do mobilnih naprav, za ključne vidike ogrodja. Z Bootstrap 3 smo projekt že od samega začetka preoblikovali tako, da je prijazen do mobilnih naprav. Namesto da bi dodali izbirne mobilne sloge, so zapečeni naravnost v jedro. Pravzaprav je Bootstrap najprej mobilni . Sloge Mobile First je mogoče najti v celotni knjižnici namesto v ločenih datotekah.

Če želite zagotoviti pravilno upodabljanje in povečavo na dotik, dodajte metaoznako vidnega polja v svoj <head>.

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

Zmožnosti povečave na mobilnih napravah lahko onemogočite tako, da dodate user-scalable=nometa oznaki vidnega polja. To onemogoči povečavo, kar pomeni, da se lahko uporabniki samo pomikajo, zaradi česar se vaše spletno mesto počuti nekoliko bolj kot domača aplikacija. Na splošno tega ne priporočamo na vseh spletnih mestih, zato bodite previdni!

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

Tipografija in povezave

Bootstrap nastavi osnovni globalni prikaz, tipografijo in sloge povezav. Natančneje, mi:

Nastavite background-color: #fff;nabody
Uporabite atribute @font-family-base, @font-size-base, in @line-height-basekot našo tipografsko osnovo
Nastavite barvo globalne povezave prek @link-colorin uporabite podčrtaje povezave samo na:hover

Te sloge lahko najdete znotraj scaffolding.less.

Normaliziraj.css

Za izboljšano upodabljanje med brskalniki uporabljamo Normalize.css , projekt Nicolasa Gallagherja in Jonathana Neala .

Zabojniki

Bootstrap zahteva vsebovalni element za ovijanje vsebine spletnega mesta in namestitev našega mrežnega sistema. Izberete lahko enega od dveh vsebnikov za uporabo v svojih projektih. Upoštevajte, da zaradi paddingin še več noben vsebnik ni stabilen.

Uporabite .containerza odziven vsebnik s fiksno širino.

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

Uporabite .container-fluidza vsebnik polne širine, ki zajema celotno širino vašega vidnega polja.

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

Bootstrap vključuje odziven, mobile first fluid grid sistem, ki ustrezno poveča do 12 stolpcev, ko se poveča velikost naprave ali vidnega polja. Vključuje vnaprej določene razrede za enostavne možnosti postavitve, pa tudi zmogljive mešanice za ustvarjanje bolj semantičnih postavitev .

Uvod

Mrežni sistemi se uporabljajo za ustvarjanje postavitev strani skozi vrsto vrstic in stolpcev, v katerih je vaša vsebina. Takole deluje mrežni sistem Bootstrap:

Vrstice morajo biti postavljene znotraj .container(fiksne širine) ali .container-fluid(polne širine) za pravilno poravnavo in oblazinjenje.
Uporabite vrstice za ustvarjanje vodoravnih skupin stolpcev.
Vsebina mora biti umeščena znotraj stolpcev in samo stolpci so lahko neposredni podrejeni vrsticam.
Vnaprej določeni mrežni razredi, kot sta .rowin .col-xs-4, so na voljo za hitro izdelavo mrežnih postavitev. Manj miksinov je mogoče uporabiti tudi za bolj semantične postavitve.
Stolpci ustvarjajo žlebove (vrzeli med vsebino stolpcev) prek padding. To polnjenje je zamaknjeno v vrsticah za prvi in zadnji stolpec prek negativnega roba na .rows.
Zaradi negativne marže so spodnji primeri zamaknjeni. Tako je vsebina znotraj mrežnih stolpcev poravnana z vsebino, ki ni mreža.
Stolpce mreže ustvarite tako, da določite število dvanajstih razpoložljivih stolpcev, ki jih želite zajeti. Na primer, trije enaki stolpci bi uporabili tri .col-xs-4.
Če je v eni vrstici več kot 12 stolpcev, bo vsaka skupina dodatnih stolpcev kot ena enota prešla v novo vrstico.
Mrežni razredi veljajo za naprave s širino zaslona, ki je večja ali enaka velikosti prelomnih točk, in preglasijo mrežne razrede, namenjene manjšim napravam. Zato npr. uporaba katerega koli .col-md-*razreda za element ne bo vplivala le na njegov slog na srednjih napravah, ampak tudi na velikih napravah, če .col-lg-*razred ni prisoten.

Oglejte si primere za uporabo teh načel v vaši kodi.

Medijska vprašanja

Za ustvarjanje ključnih prelomnih točk v našem mrežnem sistemu uporabljamo naslednje medijske poizvedbe v naših datotekah Less.

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

Občasno razširimo te medijske poizvedbe, da vključimo max-widthomejitev CSS na ožji nabor naprav.

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

Možnosti mreže

Oglejte si, kako vidiki mrežnega sistema Bootstrap delujejo v več napravah s priročno tabelo.

	Zelo majhne naprave Telefoni (<768 slikovnih pik)	Majhne naprave Tablični računalniki (≥768 slikovnih pik)	Srednje velike naprave Namizni računalniki (≥992 slikovnih pik)	Velike naprave Namizni računalniki (≥1200 slikovnih pik)
Obnašanje mreže	Ves čas vodoravno	Strnjeno na začetek, vodoravno nad prelomnimi točkami
Širina posode	Brez (samodejno)	750 slikovnih pik	970 slikovnih pik	1170 slikovnih pik
Predpona razreda	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# stolpcev	12
Širina stolpca	Avto	~62 slikovnih pik	~81px	~97 slikovnih pik
Širina žleba	30 slikovnih pik (15 slikovnih pik na vsaki strani stolpca)
Nestabilen	ja
Odmiki	ja
Urejanje stolpcev	ja

Primer: Zloženo v vodoravno

Z uporabo enega samega nabora .col-md-*mrežnih razredov lahko ustvarite osnovni mrežni sistem, ki je na začetku zložen na mobilnih napravah in tabličnih napravah (izjemno majhen do majhen obseg), preden postane vodoraven na namiznih (srednjih) napravah. Postavite mrežne stolpce v kateri koli .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>

Primer: Posoda za tekočino

Spremenite katero koli postavitev mreže s fiksno širino v postavitev polne širine, tako da spremenite najbolj oddaljeno .containerv .container-fluid.

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

Primer: mobilni in namizni računalnik

Ali ne želite, da se vaši stolpci preprosto nalagajo v manjše naprave? Uporabite dodatne razrede mreže majhnih in srednjih naprav z dodajanjem .col-xs-* .col-md-*v svoje stolpce. Oglejte si spodnji primer za boljšo predstavo o tem, kako vse skupaj deluje.

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

Primer: mobilni telefon, tablica, namizni računalnik

Nadgradite prejšnji primer z ustvarjanjem še bolj dinamičnih in zmogljivih postavitev z .col-sm-*razredi tabličnih računalnikov.

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

Primer: zavijanje stolpcev

Če je v eni vrstici več kot 12 stolpcev, bo vsaka skupina dodatnih stolpcev kot ena enota prešla v novo vrstico.

.col-xs-9

.col-xs-4
Ker je 9 + 4 = 13 > 12, se ta div s 4 stolpci zavije v novo vrstico kot ena sosednja enota.

.col-xs-6
Naslednji stolpci se nadaljujejo v novi vrstici.

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

Odzivni stolpec se ponastavi

S štirimi stopnjami mrež, ki so na voljo, boste zagotovo naleteli na težave, ko se na določenih prelomnih točkah vaši stolpci ne počistijo povsem pravilno, saj je eden višji od drugega. Če želite to popraviti, uporabite kombinacijo a .clearfixin naših odzivnih uporabnih razredov .

.col-xs-6 .col-sm-3
Spremenite velikost vidnega polja ali si ga za primer oglejte v telefonu.

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

Poleg čiščenja stolpcev na odzivnih prelomnih točkah boste morda morali ponastaviti odmike, potiske ali vlečenja . Oglejte si to v akciji v primeru mreže .

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

Odstranite žlebove

Odstranite žlebove iz vrstice in njenih stolpcev z .row-no-guttersrazredom.

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

Poravnalni stolpci

Premaknite stolpce v desno z uporabo .col-md-offset-*razredov. Ti razredi povečujejo levi rob stolpca za *stolpcem. Na primer, .col-md-offset-4premika se .col-md-4po štirih stolpcih.

.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-0Z razredi lahko tudi preglasite odmike od nižjih ravni mreže .

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

Gnezdenje stolpcev

Če želite svojo vsebino ugnezditi s privzeto mrežo, dodajte nov .rowin nabor .col-sm-*stolpcev znotraj obstoječega .col-sm-*stolpca. Ugnezdene vrstice morajo vključevati nabor stolpcev, katerih seštevek je 12 ali manj (ni potrebno, da uporabite vseh 12 razpoložljivih stolpcev).

Raven 1: .col-sm-9

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

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

Urejanje stolpcev

Preprosto spremenite vrstni red naših vgrajenih stolpcev mreže z razredi .col-md-push-*in modifikatorji..col-md-pull-*

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

Manj mešanic in spremenljivk

Poleg vnaprej pripravljenih mrežnih razredov za hitre postavitve Bootstrap vključuje Less spremenljivke in mešanice za hitro ustvarjanje lastnih preprostih semantičnih postavitev.

Spremenljivke

Spremenljivke določajo število stolpcev, širino žleba in točko medijske poizvedbe, pri kateri se začnejo plavajoči stolpci. Uporabljamo jih za ustvarjanje vnaprej določenih razredov mreže, dokumentiranih zgoraj, kot tudi za mešanice po meri, navedene spodaj.

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

Mixins

Miksini se uporabljajo v povezavi s spremenljivkami mreže za ustvarjanje semantičnega CSS za posamezne stolpce mreže.

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

Primer uporabe

Spremenljivke lahko spremenite v svoje lastne vrednosti po meri ali preprosto uporabite miksine z njihovimi privzetimi vrednostmi. Tukaj je primer uporabe privzetih nastavitev za ustvarjanje postavitve v dveh stolpcih z vrzeljo med njima.

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

Naslovi

Na voljo so vsi naslovi HTML <h1>do <h6>. .h1na voljo so tudi prek .h6razredov, kadar želite uskladiti slog pisave z naslovom, vendar še vedno želite, da je vaše besedilo prikazano v vrstici.

h1. Naslov Bootstrap	Polkrepko 36px
h2. Naslov Bootstrap	Polkrepko 30px
h3. Naslov Bootstrap	Polkrepko 24px
h4. Naslov Bootstrap	Polkrepko 18px
h5. Naslov Bootstrap	Polkrepko 14px
h6. Naslov Bootstrap	Polkrepko 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Ustvarite lahkotnejše sekundarno besedilo v katerem koli naslovu z generično <small>oznako ali .smallrazredom.

h1. Bootstrap naslov Sekundarno besedilo

h2. Bootstrap naslov Sekundarno besedilo

h3. Bootstrap naslov Sekundarno besedilo

h4. Bootstrap naslov Sekundarno besedilo

h5. Bootstrap naslov Sekundarno besedilo

h6. Bootstrap naslov Sekundarno besedilo

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

Kopija telesa

Globalna privzeta vrednost Bootstrapa font-sizeje 14px , line-heightz 1,428 . To velja za <body>in vse odstavke. Poleg tega <p>(odstavki) prejmejo spodnji rob polovice izračunane višine vrstice (privzeto 10 slikovnih pik).

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.

Mecen sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Glavna kopija telesa

Naj odstavek izstopa z dodajanjem .lead.

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

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

Zgrajeno z manj

Tipografska lestvica temelji na dveh spremenljivkah Less v spremenljivkah.less : @font-size-basein @line-height-base. Prva je osnovna velikost pisave, ki se uporablja povsod, druga pa je osnovna višina vrstice. Te spremenljivke in nekaj preproste matematike uporabljamo za ustvarjanje robov, obrob in višin vrstic vseh naših vrst in še več. Prilagodite jih in Bootstrap se prilagodi.

Besedilni elementi v vrstici

Označeno besedilo

Če želite označiti niz besedila zaradi njegove pomembnosti v drugem kontekstu, uporabite <mark>oznako.

Oznako oznake lahko uporabite zaoznačitebesedilo.

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

Izbrisano besedilo

Za označevanje blokov besedila, ki so bili izbrisani, uporabite <del>oznako.

~~Ta vrstica besedila naj bi se obravnavala kot izbrisano besedilo.~~

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

Prečrtano besedilo

Za označevanje delov besedila, ki niso več pomembni, uporabite <s>oznako.

~~Ta vrstica besedila naj bi se obravnavala kot netočna.~~

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

Vstavljeno besedilo

Za označevanje dodatkov k dokumentu uporabite <ins>oznako.

Ta vrstica besedila naj bi se obravnavala kot dodatek k dokumentu.

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

Podčrtano besedilo

Če želite podčrtati besedilo, uporabite <u>oznako.

Ta vrstica besedila bo prikazana kot podčrtana

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

Uporabite privzete oznake za poudarjanje HTML z lahkimi slogi.

Majhno besedilo

Za zmanjšanje poudarka v vrstici ali blokih besedila uporabite <small>oznako za nastavitev besedila na 85 % velikosti nadrejenega. Elementi naslovov dobijo svoje font-sizeza ugnezdene <small>elemente.

Lahko pa uporabite element v vrstici z .smallnamesto katerega koli <small>.

Ta vrstica besedila naj bi bila obravnavana kot drobni tisk.

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

Krepko

Za poudarjanje delčka besedila z večjo težo pisave.

Naslednji delček besedila je upodobljen kot krepko besedilo .

<strong>rendered as bold text</strong>

Poševno

Za poudarjanje delčka besedila s poševnim tiskom.

Naslednji delček besedila je upodobljen kot ležeče besedilo .

<em>rendered as italicized text</em>

Nadomestni elementi

Prosto uporabite <b>in <i>v HTML5. <b>je namenjeno poudarjanju besed ali besednih zvez brez izražanja dodatnega pomena, medtem ko <i>je večinoma za glas, tehnične izraze itd.

Razredi poravnave

Preprosto ponovno poravnajte besedilo s komponentami z razredi za poravnavo besedila.

Levo poravnano besedilo.

Sredinsko poravnano besedilo.

Desno poravnano besedilo.

Uravnoteženo besedilo.

Brez preloma besedila.

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

Razredi transformacije

Pretvorite besedilo v komponentah z razredi za uporabo velikih črk v besedilu.

Besedilo z malimi črkami.

Besedilo z velikimi črkami.

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

Okrajšave

Stilizirana izvedba <abbr>elementa HTML za okrajšave in akronime za prikaz razširjene različice ob lebdenju. Okrajšave z titleatributom imajo svetlo pikčasto spodnjo obrobo in kazalec pomoči pri lebdenju, kar zagotavlja dodaten kontekst pri lebdenju in uporabnikom podpornih tehnologij.

Osnovna okrajšava

Okrajšava besede atribut je attr .

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

Inicializem

Dodajte .initialismkratici za nekoliko manjšo velikost pisave.

HTML je najboljša stvar od narezanega kruha.

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

Naslovi

Predstavite kontaktne podatke za najbližjega prednika ali celotno delo. Ohranite oblikovanje tako, da končate vse vrstice z <br>.

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

Polno ime
[email protected]

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

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

Blockquotes

Za citiranje blokov vsebine iz drugega vira v vašem dokumentu.

Privzeti citat bloka

Zavijte <blockquote>kateri koli HTML kot citat. Za čiste citate priporočamo <p>.

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

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

Možnosti blokovnih citatov

Spremembe sloga in vsebine za preproste različice standarda <blockquote>.

Poimenovanje vira

Dodajte <footer>za identifikacijo vira. Zavijte ime izvornega dela v <cite>.

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

Nekdo znan v naslovu vira

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

Nadomestni prikazi

Dodajte .blockquote-reverseza navedbo bloka z desno poravnano vsebino.

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

Nekdo znan v naslovu vira

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

Seznami

Neurejeno

Seznam postavk, pri katerih vrstni red ni izrecno pomemben.

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

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

Naročeno

Seznam postavk, pri katerih je vrstni red izrecno pomemben.

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

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

Brez sloga

Odstranite privzeti list-stylein levi rob na elementih seznama (samo neposredni podrejeni).To velja samo za elemente seznama neposrednih podrejenih elementov , kar pomeni, da boste morali razred dodati tudi za vse ugnezdene sezname.

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

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

V vrsti

Vse elemente seznama postavite v eno vrstico z display: inline-block;nekaj lahkega odmika.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Opis

Seznam izrazov z njihovimi pripadajočimi opisi.

Seznami opisov: Opisni seznam je kot nalašč za definiranje izrazov.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Horizontalni opis

Izraze in opise <dl>postavite drug ob drugem. Začne se zloženo kot privzeti <dl>s, toda ko se navbar razširi, se razširijo tudi ti.

Seznami opisov: Opisni seznam je kot nalašč za definiranje izrazov.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Samodejno prirezovanje

Horizontalni seznami opisov bodo z text-overflow. V ožjih pogledih se bodo spremenili v privzeto naloženo postavitev.

V vrsti

Zavijte vstavljene delčke kode z <code>.

Na primer, <section>mora biti zavit kot vstavljeni.

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

Uporabniški vnos

Uporabite <kbd>za označevanje vnosa, ki se običajno vnese s tipkovnico.

Če želite zamenjati imenike, vnesite cdin nato ime imenika.
Za urejanje nastavitev pritisnite 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>

Osnovni blok

Uporabite <pre>za več vrstic kode. Prepričajte se, da ste izognili morebitnim oglatim oklepajem v kodi za pravilno upodabljanje.

<p>Tukaj je primer besedila ...</p>

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

Po želji lahko dodate .pre-scrollablerazred, ki bo nastavil največjo višino 350 slikovnih pik in zagotovil drsni trak na osi y.

Spremenljivke

Za označevanje spremenljivk uporabite <var>oznako.

y = m x + b

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

Vzorčni izhod

Za označevanje vzorčnega izhoda blokov iz programa uporabite <samp>oznako.

To besedilo naj bi se obravnavalo kot vzorčni rezultat iz računalniškega programa.

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

Osnovni primer

Za osnovno oblikovanje – rahlo oblazinjenje in le vodoravne pregrade – dodajte osnovni razred .tablekateremu koli <table>. Morda se zdi super odvečno, toda glede na široko uporabo tabel za druge vtičnike, kot so koledarji in izbirniki datumov, smo se odločili izolirati naše sloge tabel po meri.

Izbirni napis tabele.
#	Ime	Priimek	Uporabniško ime
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Larry	ptica	@twitter

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

Črtaste vrstice

Uporabite .table-stripedza dodajanje zebrastih črt v katero koli vrstico tabele znotraj <tbody>.

Združljivost med brskalniki

Črtaste tabele so oblikovane prek :nth-childizbirnika CSS, ki ni na voljo v Internet Explorerju 8.

#	Ime	Priimek	Uporabniško ime
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Larry	ptica	@twitter

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

Obrobljena miza

Dodajte .table-borderedza robove na vseh straneh tabele in celic.

#	Ime	Priimek	Uporabniško ime
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Larry	ptica	@twitter

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

Lebdenje vrstic

Dodajte .table-hover, da omogočite stanje lebdenja nad vrsticami tabele znotraj <tbody>.

#	Ime	Priimek	Uporabniško ime
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Larry	ptica	@twitter

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

Zgoščena tabela

Dodajte .table-condensed, da naredite mize bolj kompaktne, tako da prepolovite oblazinjenje celic.

#	Ime	Priimek	Uporabniško ime
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Kontekstualni razredi

Uporabite kontekstualne razrede za barvanje vrstic tabele ali posameznih celic.

Razred	Opis
`.active`	Uporabi barvo lebdenja v določeni vrstici ali celici
`.success`	Označuje uspešno ali pozitivno dejanje
`.info`	Označuje nevtralno informativno spremembo ali dejanje
`.warning`	Označuje opozorilo, ki bi morda zahtevalo pozornost
`.danger`	Označuje nevarno ali potencialno negativno dejanje

#	Naslov stolpca	Naslov stolpca	Naslov stolpca
1	Vsebina stolpca	Vsebina stolpca	Vsebina stolpca
2	Vsebina stolpca	Vsebina stolpca	Vsebina stolpca
3	Vsebina stolpca	Vsebina stolpca	Vsebina stolpca
4	Vsebina stolpca	Vsebina stolpca	Vsebina stolpca
5	Vsebina stolpca	Vsebina stolpca	Vsebina stolpca
6	Vsebina stolpca	Vsebina stolpca	Vsebina stolpca
7	Vsebina stolpca	Vsebina stolpca	Vsebina stolpca
8	Vsebina stolpca	Vsebina stolpca	Vsebina stolpca
9	Vsebina stolpca	Vsebina stolpca	Vsebina stolpca

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

Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena vrstici tabele ali posamezni celici zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (vidno besedilo v ustrezni vrstici/celici tabele) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .sr-onlyrazredom.

Odzivne mize

Ustvarite odzivne tabele tako, da ovijete poljubno .table, .table-responsiveda se na majhnih napravah (manj kot 768 slikovnih pik) premikajo vodoravno. Ko gledate kar koli, kar je večje od 768 slikovnih pik, v teh tabelah ne boste opazili nobene razlike.

Navpično striženje/prirezovanje

Odzivne mize uporabljajo overflow-y: hiddenfunkcijo , ki izreže vso vsebino, ki presega spodnji ali zgornji rob tabele. To lahko zlasti izloči spustne menije in druge pripomočke tretjih oseb.

Firefox in fieldsets

Firefox ima nekaj nerodnega stila nabora polj, widthki moti odzivno tabelo. Tega ni mogoče preglasiti brez vdora, specifičnega za Firefox, ki ga ne nudimo v Bootstrapu:

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

Za več informacij preberite ta odgovor Stack Overflow .

#	Naslov tabele	Naslov tabele	Naslov tabele	Naslov tabele	Naslov tabele	Naslov tabele
1	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele
2	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele
3	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele

#	Naslov tabele	Naslov tabele	Naslov tabele	Naslov tabele	Naslov tabele	Naslov tabele
1	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele
2	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele
3	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele	Celica tabele

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

Osnovni primer

Posamezni kontrolniki obrazcev samodejno prejmejo nekaj globalnega stila. Vsi besedilni elementi <input>, <textarea>in <select>elementi z .form-controlso width: 100%;privzeto nastavljeni na . .form-groupZa optimalen razmik zavijte oznake in kontrolnike .

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

Ne mešajte skupin obrazcev z vnosnimi skupinami

Ne mešajte skupin obrazcev neposredno z vnosnimi skupinami . Namesto tega ugnezdite vnosno skupino znotraj skupine obrazcev.

Inline oblika

Dodajte .form-inlinesvojemu obrazcu (ki ni nujno, da je <form>) za levo poravnane kontrolnike in kontrolnike v bloku v vrstici. To velja samo za obrazce v vidnih oknih, ki so široki vsaj 768 slikovnih pik.

Morda bodo potrebne širine po meri

Vnosi in izbire so width: 100%;privzeto uporabljeni v programu Bootstrap. Znotraj vstavljenih obrazcev to ponastavimo na width: auto;tako, da lahko več kontrolnikov prebiva v isti vrstici. Odvisno od vaše postavitve bodo morda potrebne dodatne širine po meri.

Vedno dodajte oznake

Bralniki zaslona bodo imeli težave z vašimi obrazci, če ne vključite oznake za vsak vnos. Za te vgrajene obrazce lahko skrijete oznake z uporabo .sr-onlyrazreda. Obstajajo še drugi alternativni načini zagotavljanja oznake za podporne tehnologije, kot je aria-labelatribut ali aria-labelledby. titleČe nobeden od teh ni prisoten, lahko bralniki zaslona uporabijo placeholderatribut, če je prisoten, vendar upoštevajte, da uporaba placeholderkot nadomestilo za druge metode označevanja ni priporočljiva.

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

Horizontalna oblika

Uporabite Bootstrapove vnaprej določene mrežne razrede za poravnavo nalepk in skupin kontrolnikov obrazca v vodoravni postavitvi z dodajanjem .form-horizontalv obrazec (ki ni nujno, da je <form>). S tem spremeni .form-groups tako, da se obnašajo kot mrežne vrstice, zato ni potrebe po .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>

Podprti kontrolniki

Primeri standardnih kontrolnikov obrazca, podprtih v vzorčni postavitvi obrazca.

Vložki

Najpogostejši kontrolnik obrazca, besedilna vnosna polja. Vključuje podporo za vse vrste HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, in color.

Zahtevana je deklaracija tipa

Vnosi bodo v celoti oblikovani le, če typeso pravilno deklarirani.

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

Vhodne skupine

Če želite dodati integrirano besedilo ali gumbe pred in/ali za katero koli besedilno vsebino <input>, preverite komponento vnosne skupine .

Textarea

Kontrolnik obrazca, ki podpira več vrstic besedila. Po potrebi spremenite rowsatribut.

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

Potrditvena polja in radijski sprejemniki

Potrditvena polja so namenjena izbiri ene ali več možnosti na seznamu, medtem ko so radijski sprejemniki namenjeni izbiri ene možnosti izmed mnogih.

Podprta so onemogočena potrditvena polja in radijski sprejemniki, a če želite zagotoviti »nedovoljeno« kazalko ob lebdenju nad nadrejenim elementom <label>, boste morali .disabledrazred dodati nadrejenemu elementu .radio, .radio-inline, .checkboxali .checkbox-inline.

Privzeto (naloženo)

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

Vgrajena potrditvena polja in radijski sprejemniki

Uporabite razrede .checkbox-inlineali .radio-inlinena vrsti potrditvenih polj ali radijskih elementov za kontrolnike, ki se pojavijo v isti vrstici.

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

Potrditvena polja in radii brez besedila oznake

Če v polju nimate besedila <label>, je vnos postavljen tako, kot bi pričakovali. Trenutno deluje samo na neinline potrditvenih poljih in radiih. Ne pozabite zagotoviti neke oblike oznake za podporne tehnologije (na primer uporaba aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Izbira

Upoštevajte, da ima veliko izvirnih izbirnih menijev – namreč v Safariju in Chromu – zaobljene vogale, ki jih ni mogoče spreminjati prek border-radiuslastnosti.

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

Za <select>kontrolnike z multipleatributom je privzeto prikazanih več možnosti.

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

Statični nadzor

Ko morate navadno besedilo postaviti poleg oznake obrazca znotraj obrazca, uporabite .form-control-staticrazred na <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>

Stanje fokusa

Na nekaterih kontrolnikih obrazca odstranimo privzete outlinesloge in box-shadownamesto njih uporabimo a za :focus.

Demo `:focus`stanje

Zgornji primer vnosa uporablja sloge po meri v naši dokumentaciji za prikaz :focusstanja na .form-control.

Onemogočeno stanje

Vnosu dodajte disabledlogični atribut, da preprečite interakcije uporabnikov. Onemogočeni vnosi so videti svetlejši in dodajo not-allowedkazalec.

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

Onemogočeni nizi polj

Dodajte disabledatribut v a <fieldset>, da onemogočite vse kontrole <fieldset>naenkrat.

Opozorilo glede funkcionalnosti povezave`<a>`

Brskalniki bodo privzeto obravnavali vse izvorne kontrolnike obrazca ( <input>, <select>in <button>elemente) znotraj <fieldset disabled>kot onemogočene, kar bo preprečilo interakcije s tipkovnico in miško na njih. Če pa vaš obrazec vključuje tudi <a ... class="btn btn-*">elemente, bodo ti dobili samo slog pointer-events: none. Kot je navedeno v razdelku o onemogočenem stanju za gumbe (in posebej v podrazdelku za sidrne elemente), ta lastnost CSS še ni standardizirana in ni v celoti podprta v Opera 18 in nižjih različicah ali v Internet Explorerju 11 in je zmagala Uporabnikom tipkovnice ne preprečuje, da bi se lahko fokusirali ali aktivirali te povezave. Če želite biti varni, uporabite JavaScript po meri, da onemogočite takšne povezave.

Združljivost med brskalniki

Medtem ko bo Bootstrap uporabil te sloge v vseh brskalnikih, Internet Explorer 11 in novejši ne podpirajo v celoti disabledatributa na <fieldset>. Uporabite JavaScript po meri, da onemogočite nabor polj v teh brskalnikih.

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

Stanje samo za branje

Vnosu dodajte readonlylogični atribut, da preprečite spreminjanje vrednosti vnosa. Vnosi samo za branje so videti svetlejši (tako kot onemogočeni vnosi), vendar ohranijo standardni kazalec.

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

Besedilo pomoči

Besedilo pomoči na ravni bloka za kontrolnike obrazca.

Povezovanje besedila pomoči s kontrolniki obrazca

Besedilo pomoči mora biti izrecno povezano s kontrolnikom obrazca, na katerega se nanaša z uporabo aria-describedbyatributa. To bo zagotovilo, da bodo podporne tehnologije – kot so bralniki zaslona – objavile to besedilo pomoči, ko se uporabnik osredotoči ali vstopi v kontrolnik.

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

Stanja veljavnosti

Bootstrap vključuje sloge preverjanja za napake, opozorila in stanja uspeha na kontrolnikih obrazcev. Za uporabo dodajte .has-warning, .has-errorali .has-successnadrejenemu elementu. Vsi .control-label, .form-controlin .help-blockznotraj tega elementa bodo prejeli sloge preverjanja.

Posredovanje stanja preverjanja podpornim tehnologijam in barvno slepim uporabnikom

Uporaba teh slogov preverjanja veljavnosti za označevanje stanja kontrolnika obrazca zagotavlja samo vizualno barvno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij - kot so bralniki zaslona - ali barvno slepim uporabnikom.

Zagotovite, da je na voljo tudi alternativna indikacija stanja. Namig o stanju lahko na primer vključite v samo besedilo kontrolnika obrazca <label>(kot je v primeru naslednjega primera kode), vključite Glyphicon (z ustreznim nadomestnim besedilom z uporabo .sr-onlyrazreda – glejte primere Glyphicon ) ali tako, da zagotovite dodaten besedilni blok pomoči. Posebej za podporne tehnologije je mogoče neveljavnim kontrolnikom obrazca dodeliti tudi aria-invalid="true"atribut.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Z neobveznimi ikonami

Dodate lahko tudi izbirne ikone za povratne informacije z dodatkom .has-feedbackin desno ikono.

Ikone za povratne informacije delujejo samo z besedilnimi <input class="form-control">elementi.

Ikone, oznake in vnosne skupine

Za vnose brez oznake in za skupine vnosov z dodatkom na desni je potrebno ročno pozicioniranje ikon za povratne informacije . Močno vas spodbujamo, da zagotovite oznake za vse vnose zaradi dostopnosti. Če želite preprečiti prikaz oznak, jih skrijte z .sr-onlyrazredom. Če morate brez oznak, prilagodite topvrednost ikone za povratne informacije. Za vnosne skupine prilagodite rightvrednost na ustrezno vrednost slikovnih pik glede na širino vašega dodatka.

Prenos pomena ikone na podporne tehnologije

Za zagotovitev, da podporne tehnologije – kot so bralniki zaslona – pravilno prenašajo pomen ikone, je treba v .sr-onlyrazred vključiti dodatno skrito besedilo in ga izrecno povezati s kontrolnikom obrazca, na katerega se nanaša z uporabo aria-describedby. Druga možnost je, da zagotovite, da je pomen (na primer dejstvo, da obstaja opozorilo za določeno polje za vnos besedila) posredovan v neki drugi obliki, kot je sprememba besedila dejanskega, <label>povezanega s kontrolnikom obrazca.

Čeprav naslednji primeri že omenjajo stanje preverjanja veljavnosti njihovih ustreznih kontrolnikov obrazca v samem <label>besedilu, je bila zgornja tehnika (z uporabo .sr-onlybesedila in aria-describedby) vključena v ilustrativne namene.

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

Izbirne ikone v vodoravni in vrstični obliki

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

Izbirne ikone s skritimi `.sr-only`oznakami

Če uporabite .sr-onlyrazred za skrivanje kontrolnikov obrazca <label>(namesto uporabe drugih možnosti označevanja, kot je aria-labelatribut), bo Bootstrap samodejno prilagodil položaj ikone, ko bo dodana.

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

Nadzor velikosti

Nastavite višine z uporabo razredov, kot .input-lgje , in nastavite širine z uporabo razredov mrežnih stolpcev, kot je .col-lg-*.

Dimenzioniranje višine

Ustvarite višje ali krajše kontrolnike obrazca, ki ustrezajo velikosti gumbov.

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

Velikosti skupin vodoravnih oblik

Hitro spremenite velikost nalepk in kontrolnikov obrazca znotraj .form-horizontaltako, da dodate .form-group-lgali .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>

Velikost stolpca

Zavijte vnose v stolpce mreže ali kateri koli nadrejeni element po meri, da preprosto uveljavite želene širine.

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

Oznake gumbov

Uporabite razrede gumbov na elementu <a>, <button>ali .<input>

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

Uporaba glede na kontekst

Medtem ko je mogoče razrede gumbov uporabiti na elementih <a>in <button>, so v naših komponentah nav in navbar podprti samo <button>elementi.

Povezave, ki delujejo kot gumbi

Če se <a>elementi uporabljajo kot gumbi – sprožijo funkcionalnost na strani, namesto da bi se pomaknili do drugega dokumenta ali odseka na trenutni strani – jim je treba dodeliti tudi ustrezen role="button".

Upodabljanje med brskalniki

Kot najboljšo prakso močno priporočamo uporabo <button>elementa, kadar koli je to mogoče , da zagotovite ujemajoče se upodabljanje med brskalniki.

Med drugim je v Firefoxu <30 napaka , ki nam preprečuje nastavitev gumbov na podlagi -, zaradi česar se ne ujemajo natančno z višino drugih gumbov v Firefoxu line-height.<input>

Opcije

Uporabite katerega koli od razpoložljivih razredov gumbov, da hitro ustvarite oblikovan gumb.

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

Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena gumbu zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (vidnega besedila gumba) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .sr-onlyrazredom.

Velikosti

Ste všeč večji ali manjši gumbi? Dodajte .btn-lg, .btn-smali .btn-xsza dodatne velikosti.

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

Ustvarite gumbe na ravni bloka – tiste, ki zajemajo celotno širino nadrejenega elementa – tako, da dodate .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>

Aktivno stanje

Gumbi bodo videti pritisnjeni (s temnejšim ozadjem, temnejšim robom in vstavljeno senco), ko so aktivni. Za <button>elemente se to izvede prek :active. Za <a>elemente je to opravljeno z .active. Vendar pa lahko uporabite .activena<button> s (in vključite aria-pressed="true"atribut), če morate aktivno stanje programsko posnemati.

Element gumba

Ni vam treba dodajati :active, saj gre za psevdorazred, če pa morate vsiliti enak videz, nadaljujte in dodajte .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>

Sidrni element

Dodajte .activerazred <a>gumbom.

Primarna povezava Povezava

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

Onemogočeno stanje

Naj gumbi izgledajo tako, da jih ni mogoče klikniti, tako da jih zbledite nazajopacity .

Element gumba

Dodajte disabledatribut <button>gumbom.

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

Združljivost med brskalniki

Če dodate disabledatribut v <button>, bo Internet Explorer 9 in novejše besedilo upodobil sivo z neprijetno senco besedila, ki je ne moremo popraviti.

Sidrni element

Dodajte .disabledrazred <a>gumbom.

Primarna povezava Povezava

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

Tu uporabljamo .disabledkot pomožni razred, podoben običajnemu .activerazredu, zato predpona ni potrebna.

Opozorilo glede funkcionalnosti povezave

Ta razred uporablja pointer-events: noneza poskus onemogočanja povezovalne funkcije <a>s, vendar ta lastnost CSS še ni standardizirana in ni v celoti podprta v Operi 18 in nižjih ali v Internet Explorerju 11. Poleg tega pointer-events: nonetipkovnica tudi v brskalnikih, ki podpirajo , navigacija ostane nespremenjena, kar pomeni, da bodo lahko videči uporabniki tipkovnic in uporabniki podpornih tehnologij še vedno aktivirali te povezave. Če želite biti varni, uporabite JavaScript po meri, da onemogočite takšne povezave.

Odzivne slike

Slike v Bootstrap 3 je mogoče narediti odzivne prijazne z dodatkom .img-responsiverazreda. To velja max-width: 100%;, height: auto;in display: block;za sliko, tako da se lepo prilagaja nadrejenemu elementu.

Za centriranje slik, ki uporabljajo .img-responsiverazred, uporabite .center-blocknamesto .text-center. Za več podrobnosti o uporabi glejte razdelek o pomožnih razredih ..center-block

Slike SVG in IE 8-10

V Internet Explorerju 8–10 so slike SVG .img-responsivenesorazmerno velike. Če želite to popraviti, dodajte, width: 100% \9;kjer je potrebno. Bootstrap tega ne uporabi samodejno, saj povzroča zaplete pri drugih formatih slik.

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

Oblike slik

Dodajte razrede <img>elementu za preprosto oblikovanje slik v katerem koli projektu.

Združljivost med brskalniki

Ne pozabite, da Internet Explorer 8 nima podpore za zaobljene vogale.

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

Kontekstualne barve

Prenesite pomen z barvo s peščico poudarjenih uporabnih razredov. Te se lahko uporabijo tudi za povezave in bodo ob premikanju kazalca potemnile tako kot naši privzeti slogi povezav.

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.

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

Ukvarjanje s specifičnostjo

Včasih poudarjenih razredov ni mogoče uporabiti zaradi specifičnosti drugega izbirnika. V večini primerov je zadostna rešitev, da svoje besedilo zavijete v a <span>z razredom.

Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (kontekstualne barve se uporabljajo samo za okrepitev pomena, ki je že prisoten v besedilu/oznaki), ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .sr-onlyrazredom .

Kontekstualna ozadja

Podobno kot pri kontekstualnih barvnih razredih besedila lahko preprosto nastavite ozadje elementa na kateri koli kontekstualni razred. Sidrne komponente bodo ob lebdenju potemnile, tako kot besedilni razredi.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

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

Ukvarjanje s specifičnostjo

Včasih kontekstualnih razredov ozadja ni mogoče uporabiti zaradi specifičnosti drugega izbirnika. V nekaterih primerih je zadostna rešitev, da vsebino elementa zavijete v a <div>z razredom.

Prenos pomena za podporne tehnologije

Tako kot pri kontekstualnih barvah zagotovite, da je vsak pomen, posredovan z barvo, posredovan tudi v obliki, ki ni zgolj predstavitvena.

Zapri ikono

Uporabite splošno ikono za zapiranje za opustitev vsebine, kot so modali in opozorila.

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

Carets

Uporabite kazalke za označevanje spustnega menija in smeri. Upoštevajte, da se bo privzeta kazalka samodejno obrnila v spustnih menijih .

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

Hitro lebdi

Lebdi element v levo ali desno z razredom.!importantje vključen, da bi se izognili težavam s specifičnostjo. Razredi se lahko uporabljajo tudi kot miksini.

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

Centrirajte vsebinske bloke

Nastavite element na display: blockin ga sredite prek margin. Na voljo kot mixin in razred.

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

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

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

Clearfix

Enostavno počistite floatz dodajanjem .clearfix nadrejenemu elementu . Uporablja mikro clearfix , kot ga je populariziral Nicolas Gallagher. Lahko se uporablja tudi kot mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

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

// Usage as a mixin
.element {
  .clearfix();
}

Prikazovanje in skrivanje vsebine

Prisilite, da se element prikaže ali skrije ( vključno za bralnike zaslona ) z uporabo .showin .hiddenrazredov. Ti razredi se uporabljajo !importantza izogibanje konfliktom specifičnosti, tako kot hitri lebdeči . Na voljo so samo za preklapljanje na ravni blokov. Uporabljajo se lahko tudi kot miksini.

.hideje na voljo, vendar ne vpliva vedno na bralnike zaslona in je od različice 3.0.1 opuščen . Namesto tega uporabite .hiddenali ..sr-only

Poleg tega .invisiblese lahko uporablja samo za preklop vidnosti elementa, kar pomeni, da displayni spremenjen in da lahko element še vedno vpliva na potek dokumenta.

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

Bralnik zaslona in navigacijska vsebina s tipkovnico

Skrij element za vse naprave razen za bralnike zaslona z .sr-only. Kombinirajte .sr-onlyz .sr-only-focusable, da znova prikažete element, ko je v fokusu (npr. uporabnik, ki uporablja samo tipkovnico). Potrebno za upoštevanje najboljših praks dostopnosti . Lahko se uporablja tudi kot mixins.

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

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

Zamenjava slike

Uporabite .text-hiderazred ali mixin, da zamenjate besedilno vsebino elementa s sliko ozadja.

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

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

Za hitrejši razvoj, prijazen do mobilnih naprav, uporabite te razrede pripomočkov za prikazovanje in skrivanje vsebine glede na napravo prek medijske poizvedbe. Vključeni so tudi razredi pripomočkov za preklapljanje vsebine med tiskanjem.

Poskusite jih uporabljati omejeno in se izogibajte ustvarjanju popolnoma različnih različic istega mesta. Namesto tega jih uporabite za dopolnitev predstavitve vsake naprave.

Razpoložljivi razredi

Uporabite enega ali kombinacijo razpoložljivih razredov za preklapljanje vsebine med prelomnimi točkami vidnega polja.

	Zelo majhne napraveTelefoni (<768 slikovnih pik)	Majhne napraveTablični računalniki (≥768 slikovnih pik)	Srednje napraveNamizni računalniki (≥992 slikovnih pik)	Velike napraveNamizni računalniki (≥1200 slikovnih pik)
`.visible-xs-*`	Vidno	Skrito	Skrito	Skrito
`.visible-sm-*`	Skrito	Vidno	Skrito	Skrito
`.visible-md-*`	Skrito	Skrito	Vidno	Skrito
`.visible-lg-*`	Skrito	Skrito	Skrito	Vidno
`.hidden-xs`	Skrito	Vidno	Vidno	Vidno
`.hidden-sm`	Vidno	Skrito	Vidno	Vidno
`.hidden-md`	Vidno	Vidno	Skrito	Vidno
`.hidden-lg`	Vidno	Vidno	Vidno	Skrito

Od različice 3.2.0 so .visible-*-*razredi za vsako prelomno točko na voljo v treh različicah, po ena za vsako displayspodaj navedeno vrednost lastnosti CSS.

Skupina razredov	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Tako so na xsprimer za izjemno majhne ( ) zaslone razpoložljivi .visible-*-*razredi: .visible-xs-block, .visible-xs-inlinein .visible-xs-inline-block.

Obstajajo tudi razredi .visible-xs, .visible-sm, .visible-mdin .visible-lg, vendar so od različice 3.2.0 opuščeni . So približno enakovredni .visible-*-block, razen z dodatnimi posebnimi primeri za <table>elemente, povezane s preklapljanjem.

Natisnite razrede

Podobno kot običajne odzivne razrede, jih uporabite za preklapljanje vsebine za tiskanje.

Razredi	Brskalnik	Tiskanje
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Skrito	Vidno
`.hidden-print`	Vidno	Skrito

Razred .visible-printtudi obstaja, vendar je od različice 3.2.0 opuščen . Je približno enakovreden .visible-print-block, razen z dodatnimi posebnimi primeri za <table>elemente, povezane z -.

Testni primeri

Spremenite velikost brskalnika ali naložite na različne naprave, da preizkusite odzivne razrede pripomočkov.

Vidno na...

Zelene kljukice označujejo, da je element viden v vašem trenutnem vidnem polju.

Zelo majhen ✔ Vidno na x-small

majhna ✔ Vidno na majhnem

Srednje ✔ Vidno na srednjem

Velik ✔ Vidno na velikem

Zelo majhen in majhen ✔ Vidno na x-small in small

Srednje in velike ✔ Vidno na srednjih in velikih

Zelo majhna in srednja ✔ Vidno na x-small in medium

Majhne in velike ✔ Vidno na majhnem in velikem

Zelo majhna in velika ✔ Vidno na x-small in large

Majhna in srednja ✔ Vidno na majhnih in srednjih

Skrit na...

Tukaj zelene kljukice tudi označujejo, da je element skrit v vašem trenutnem vidnem polju.

Zelo majhen ✔ Skrito na x-small

majhna ✔ Skrito na majhnem

Srednje ✔ Skrito na srednjem

Velik ✔ Skrit na velikem

Zelo majhen in majhen ✔ Skrito na x-small in small

Srednje in velike ✔ Skrito na srednjih in velikih

Zelo majhna in srednja ✔ Skrito na x-small in medium

Majhne in velike ✔ Skrito na male in velike

Zelo majhna in velika ✔ Skrito na x-majhnem in velikem

Majhna in srednja ✔ Skrito na majhnih in srednjih

Bootstrapov CSS je zgrajen na Lessu, predprocesorju z dodatnimi funkcijami, kot so spremenljivke, mixini in funkcije za prevajanje CSS. Tisti, ki želijo uporabiti izvorne datoteke Less namesto naših prevedenih datotek CSS, lahko uporabijo številne spremenljivke in mixine, ki jih uporabljamo v celotnem ogrodju.

Mrežne spremenljivke in miksini so zajeti v razdelku Mrežni sistem .

Prevajanje Bootstrapa

Bootstrap je mogoče uporabiti na vsaj dva načina: s prevedenim CSS ali z izvornimi datotekami Less. Če želite prevesti datoteke Less, si oglejte razdelek Kako začeti, da nastavite svoje razvojno okolje za izvajanje potrebnih ukazov.

Orodja za prevajanje tretjih oseb morda delujejo z Bootstrapom, vendar jih naša glavna ekipa ne podpira.

Spremenljivke

Spremenljivke se uporabljajo skozi celoten projekt kot način za centralizacijo in skupno rabo pogosto uporabljenih vrednosti, kot so barve, razmiki ali skladi pisav. Za popolno razčlenitev si oglejte orodje za prilagajanje .

Barve

Preprosto uporabite dve barvni shemi: sivinsko in semantično. Sivine barve omogočajo hiter dostop do pogosto uporabljenih odtenkov črne, medtem ko semantika vključuje različne barve, dodeljene pomembnim kontekstualnim vrednostim.

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

Uporabite katero koli od teh barvnih spremenljivk, kot so, ali jih prerazporedite na bolj pomembne spremenljivke za svoj projekt.

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

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

Gradbeni odri

Peščica spremenljivk za hitro prilagajanje ključnih elementov okostja vašega spletnega mesta.

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

Povezave

Preprosto stilizirajte svoje povezave s pravo barvo z eno samo vrednostjo.

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

Upoštevajte, da @link-hover-coloruporablja funkcijo, še eno izjemno orodje podjetja Less, za samodejno čarobno ustvarjanje prave barve lebdenja. Uporabite lahko darken, lighten, saturate, in desaturate.

Tipografija

Z nekaj hitrimi spremenljivkami preprosto nastavite pisavo, velikost besedila, vodila in drugo. Bootstrap jih uporablja tudi za zagotavljanje preprostih tipografskih mešanic.

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

Ikone

Dve hitri spremenljivki za prilagajanje lokacije in imena datoteke vaših ikon.

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

Komponente

Komponente celotnega programa Bootstrap uporabljajo nekatere privzete spremenljivke za nastavitev skupnih vrednosti. Tukaj so najpogosteje uporabljeni.

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

Miksini prodajalca

Miksini prodajalca so miksini, ki pomagajo podpirati več brskalnikov z vključitvijo vseh ustreznih predpon prodajalca v vaš prevedeni CSS.

Dimenzioniranje škatle

Ponastavite model škatle vaših komponent z enim mixinom. Za kontekst si oglejte ta koristen članek podjetja Mozilla .

Mixin je opuščen od različice 3.2.0 z uvedbo Autoprefixerja. Za ohranitev združljivosti za nazaj bo Bootstrap še naprej interno uporabljal mixin do Bootstrap v4.

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

Zaobljeni vogali

Danes vsi sodobni brskalniki podpirajo border-radiuslastnost brez predpone. Kot tak ne obstaja .border-radius()mixin, vendar Bootstrap vključuje bližnjice za hitro zaokroževanje dveh vogalov na določeni strani predmeta.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Box (Drop) sence

Če vaše ciljno občinstvo uporablja najnovejše in najboljše brskalnike in naprave, se prepričajte, da uporabljate box-shadowlastnost samostojno. Če potrebujete podporo za starejše naprave Android (pred v4) in iOS (pred iOS 5), uporabite zastareli mixin, da izberete zahtevano-webkit predpono.

Mixin je zastarel od različice 3.1.0, ker Bootstrap uradno ne podpira zastarelih platform, ki ne podpirajo standardne lastnosti. Za ohranitev združljivosti za nazaj bo Bootstrap še naprej interno uporabljal mixin do Bootstrap v4.

Bodite prepričani, da uporabite rgba()barve v sencah okvirjev, da se čim bolj neopazno zlijejo z ozadji.

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

Prehodi

Več mešanic za prilagodljivost. Vse informacije o prehodu nastavite z enim ali po potrebi določite ločeno zakasnitev in trajanje.

Miksini so opuščeni od različice 3.2.0 z uvedbo Autoprefixerja. Za ohranitev združljivosti za nazaj bo Bootstrap še naprej interno uporabljal mešanice do Bootstrap v4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Preobrazbe

Zavrtite, pomanjšajte, prestavite (premaknite) ali poševno poljubni predmet.

Miksini so opuščeni od različice 3.2.0 z uvedbo Autoprefixerja. Za ohranitev združljivosti za nazaj bo Bootstrap še naprej interno uporabljal mešanice do Bootstrap v4.

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

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

Animacije

En sam mixin za uporabo vseh lastnosti animacije CSS3 v eni deklaraciji in drugih mixins za posamezne lastnosti.

Miksini so opuščeni od različice 3.2.0 z uvedbo Autoprefixerja. Za ohranitev združljivosti za nazaj bo Bootstrap še naprej interno uporabljal mešanice do Bootstrap v4.

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

Motnost

Nastavite motnost za vse brskalnike in zagotovite filternadomestno možnost za IE8.

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

Nadomestno besedilo

Zagotovite kontekst za kontrolnike obrazca znotraj vsakega polja.

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

Stolpci

Ustvarite stolpce prek CSS znotraj enega elementa.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Gradienti

Enostavno spremenite kateri koli dve barvi v preliv ozadja. Postanite naprednejši in nastavite smer, uporabite tri barve ali uporabite radialni preliv. Z enim mixinom dobite vse predpone sintakse, ki jih potrebujete.

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

Določite lahko tudi kot standardnega dvobarvnega linearnega gradienta:

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

Če potrebujete preliv v stilu brivskih črt, je tudi to enostavno. Določite samo eno barvo in prekrili bomo prosojni bel trak.

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

Povečajte predračun in namesto tega uporabite tri barve. Nastavite prvo barvo, drugo barvo, barvno zaustavitev druge barve (odstotna vrednost, kot je 25 %), in tretjo barvo s temi mešanicami:

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

Glavo pokonci! Če boste kdaj morali odstraniti gradient, ne pozabite odstraniti vsega, filterkar ste morda dodali za IE. To lahko storite tako, da zraven uporabite .reset-filter()mixin background-image: none;.

Utility mixins

Utility mixins so mixini, ki združujejo sicer nepovezane lastnosti CSS za dosego določenega cilja ali naloge.

Clearfix

Pozabite na dodajanje class="clearfix"kateremu koli elementu in namesto tega dodajte .clearfix()mixin, kjer je to primerno. Uporablja mikro clearfix Nicolasa Gallagherja .

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

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

Horizontalno centriranje

Hitro centriranje katerega koli elementa znotraj njegovega nadrejenega. Zahteva widthali max-widthje treba nastaviti.

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

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

Pomočniki za določanje velikosti

Lažje določite dimenzije predmeta.

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

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

Spremenljiva velikost besedilnih območij

Preprosto konfigurirajte možnosti spreminjanja velikosti za katero koli besedilno polje ali kateri koli drug element. Privzeto je običajno vedenje brskalnika ( both).

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

Obrezovanje besedila

Enostavno skrajšajte besedilo z elipso z enim mixinom. Zahteva, da je element blockali inline-blockraven.

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

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

Slike mrežnice

Določite dve poti slike in dimenzije slike @1x in Bootstrap bo zagotovil medijsko poizvedbo @2x. Če želite ponuditi veliko slik, razmislite o ročnem zapisu CSS slike mrežnice v eni medijski poizvedbi.

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

Čeprav je Bootstrap zgrajen na Lessu, ima tudi uradna vrata Sass . Vzdržujemo ga v ločenem repozitoriju GitHub in urejamo posodobitve s skriptom za pretvorbo.

Kaj je vključeno

Ker ima vrata Sass ločen repo in služi nekoliko drugačnemu občinstvu, se vsebina projekta močno razlikuje od glavnega projekta Bootstrap. To zagotavlja, da so vrata Sass čim bolj združljiva s čim več sistemi, ki temeljijo na Sass.

Pot	Opis
`lib/`	Ruby gem koda (konfiguracija Sass, integracije Rails in Compass)
`tasks/`	Pretvorniški skripti (pretvorba navzgor v smeri Less v Sass)
`test/`	Kompilacijski testi
`templates/`	Manifest paketa Compass
`vendor/assets/`	Sass, JavaScript in datoteke s pisavami
`Rakefile`	Notranje naloge, kot sta rake in convert

Obiščite repozitorij GitHub vrat Sass in si oglejte te datoteke v akciji.

Namestitev

Za informacije o tem, kako namestiti in uporabljati Bootstrap za Sass, si oglejte datoteko Readme za repozitorij GitHub . Je najbolj posodobljen vir in vključuje informacije za uporabo z Rails, Compass in standardnimi projekti Sass.

Bootstrap za Sass

CSS

Pregled

HTML5 doctype

Najprej mobilni

Tipografija in povezave

Normaliziraj.css

Zabojniki

Mrežni sistem

Uvod

Medijska vprašanja

Možnosti mreže

Primer: Zloženo v vodoravno

Primer: Posoda za tekočino

Primer: mobilni in namizni računalnik

Primer: mobilni telefon, tablica, namizni računalnik

Primer: zavijanje stolpcev

Odzivni stolpec se ponastavi

Odstranite žlebove

Poravnalni stolpci

Gnezdenje stolpcev

Urejanje stolpcev

Manj mešanic in spremenljivk

Spremenljivke

Mixins

Primer uporabe

Tipografija

Naslovi

h1. Naslov Bootstrap

h2. Naslov Bootstrap

h3. Naslov Bootstrap

h4. Naslov Bootstrap

h5. Naslov Bootstrap

h6. Naslov Bootstrap

h1. Bootstrap naslov Sekundarno besedilo

h2. Bootstrap naslov Sekundarno besedilo

h3. Bootstrap naslov Sekundarno besedilo

h4. Bootstrap naslov Sekundarno besedilo

h5. Bootstrap naslov Sekundarno besedilo

h6. Bootstrap naslov Sekundarno besedilo

Kopija telesa

Glavna kopija telesa

Zgrajeno z manj

Besedilni elementi v vrstici

Označeno besedilo

Izbrisano besedilo

Prečrtano besedilo

Vstavljeno besedilo

Podčrtano besedilo

Majhno besedilo

Krepko

Poševno

Nadomestni elementi

Razredi poravnave

Razredi transformacije

Okrajšave

Osnovna okrajšava

Inicializem

Naslovi

Blockquotes

Privzeti citat bloka

Možnosti blokovnih citatov

Poimenovanje vira

Nadomestni prikazi

Seznami

Neurejeno

Naročeno

Brez sloga

V vrsti

Opis

Horizontalni opis

Samodejno prirezovanje

Koda

V vrsti

Uporabniški vnos

Osnovni blok

Spremenljivke

Vzorčni izhod

Mize

Osnovni primer

Črtaste vrstice

Demo `:focus`stanje

Opozorilo glede funkcionalnosti povezave`<a>`

Izbirne ikone s skritimi `.sr-only`oznakami