Upoznajte se s ključnim dijelovima Bootstrapove infrastrukture, uključujući naš pristup boljem, bržem i snažnijem web razvoju.

HTML5 doctype

Bootstrap koristi određene HTML elemente i CSS svojstva koja zahtijevaju upotrebu HTML5 doctype. Uključite ga na početku svih svojih projekata.

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

Mobitel na prvom mjestu

S Bootstrapom 2 dodali smo izborne stilove prilagođene mobilnim uređajima za ključne aspekte okvira. S Bootstrapom 3, ponovno smo napisali projekt da bude prilagođen mobilnim uređajima od samog početka. Umjesto dodavanja neobaveznih mobilnih stilova, oni su zapečeni ravno u srž. Zapravo, Bootstrap je prvo mobilni . Mobile first stilovi mogu se pronaći u cijeloj biblioteci umjesto u zasebnim datotekama.

Kako biste osigurali ispravno prikazivanje i zumiranje dodirom, dodajte meta oznaku okvira za prikaz u svoj <head>.

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

Možete onemogućiti mogućnosti zumiranja na mobilnim uređajima dodavanjem user-scalable=nometa oznake u polje za prikaz. Time se onemogućuje zumiranje, što znači da se korisnici mogu samo pomicati, a rezultira time da vaša web-lokacija izgleda više kao izvorna aplikacija. Općenito, ne preporučujemo ovo na svakoj stranici, stoga budite oprezni!

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

Tipografija i poveznice

Bootstrap postavlja osnovni globalni prikaz, tipografiju i stilove veza. Konkretno, mi:

Postavite background-color: #fff;nabody
Koristite atribute @font-family-base, @font-size-base, i @line-height-basekao našu tipografsku bazu
Postavite globalnu boju veze putem @link-colori primijenite podcrtane veze samo na:hover

Ovi se stilovi mogu pronaći unutar scaffolding.less.

Normaliziraj.css

Za poboljšano prikazivanje u više preglednika koristimo Normalize.css , projekt Nicolasa Gallaghera i Jonathana Neala .

Kontejneri

Bootstrap zahtijeva sadržavajući element za omotavanje sadržaja stranice i smještaj našeg mrežnog sustava. Možete odabrati jedan od dva spremnika za korištenje u svojim projektima. Imajte na umu da, zbog paddingi više od toga, nijedan spremnik nije nestabilan.

Koristi .containerse za odgovarajući spremnik fiksne širine.

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

Koristite .container-fluidza spremnik pune širine, koji obuhvaća cijelu širinu vašeg okvira za prikaz.

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

Bootstrap uključuje responzivni, mobilni prvi fluidni grid sustav koji se na odgovarajući način skalira do 12 stupaca kako se povećava veličina uređaja ili okvira za prikaz. Uključuje unaprijed definirane klase za jednostavne opcije izgleda, kao i moćne miksine za generiranje više semantičkih izgleda .

Uvod

Mrežni sustavi koriste se za kreiranje izgleda stranice kroz niz redaka i stupaca u kojima se nalazi vaš sadržaj. Evo kako funkcionira Bootstrap grid sustav:

Redovi moraju biti smješteni unutar .container(fiksne širine) ili .container-fluid(pune širine) radi pravilnog poravnanja i ispune.
Koristite retke za stvaranje horizontalnih grupa stupaca.
Sadržaj bi trebao biti smješten unutar stupaca, a samo stupci mogu biti neposredni potomci redaka.
Unaprijed definirane klase mreže kao što su .rowi .col-xs-4dostupne su za brzu izradu rasporeda mreže. Manje miksina također se može koristiti za više semantičkih izgleda.
Stupci stvaraju oluke (praznine između sadržaja stupaca) putem padding. To ispunjavanje je pomaknuto u recima za prvi i zadnji stupac preko negativne margine na .rows.
Negativna margina je razlog zašto su primjeri u nastavku izvučeni. To je tako da je sadržaj unutar stupaca mreže poredan sa sadržajem koji nije mreža.
Stupci rešetke stvaraju se određivanjem broja od dvanaest dostupnih stupaca koje želite obuhvatiti. Na primjer, tri jednaka stupca koristila bi tri .col-xs-4.
Ako je više od 12 stupaca postavljeno unutar jednog retka, svaka grupa dodatnih stupaca će se, kao jedna cjelina, prebaciti u novi redak.
Klase rešetke primjenjuju se na uređaje sa širinom zaslona većom ili jednakom veličini prijelomne točke i nadjačavaju klase rešetke namijenjene manjim uređajima. Stoga, npr. primjena bilo koje .col-md-*klase na element neće utjecati samo na njegov stil na srednjim uređajima nego i na velikim uređajima ako .col-lg-*klasa nije prisutna.

Pogledajte primjere za primjenu ovih načela na svoj kod.

Medijski upiti

Koristimo sljedeće medijske upite u našim Less datotekama za stvaranje ključnih prijelomnih točaka u našem mrežnom sustavu.

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

Povremeno proširujemo ove medijske upite kako bismo uključili max-widthograničenje CSS-a na uži skup uređaja.

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

Mogućnosti mreže

Pomoću praktične tablice pogledajte kako aspekti Bootstrap grid sustava funkcioniraju na više uređaja.

	Iznimno mali uređaji Telefoni (<768px)	Mali uređaji Tableti (≥768px)	Srednji uređaji Stolna računala (≥992px)	Veliki uređaji Stolna računala (≥1200px)
Ponašanje mreže	Vodoravno u svakom trenutku	Sažeto za početak, vodoravno iznad prijelomnih točaka
Širina spremnika	Ništa (automatski)	750 px	970 px	1170 px
Prefiks klase	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Broj stupaca	12
Širina stupca	Auto	~62px	~81px	~97px
Širina oluka	30px (15px sa svake strane stupca)
Nestabilan	Da
Pomaci	Da
Redoslijed stupaca	Da

Primjer: naslagano prema vodoravnom

Koristeći jedan skup .col-md-*klasa rešetke, možete stvoriti osnovni sustav rešetke koji počinje složen na mobilnim uređajima i tablet uređajima (ekstra mali do mali raspon) prije nego postane vodoravan na stolnim (srednjim) uređajima. Postavite stupce rešetke u bilo koji .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>

Primjer: Spremnik za tekućinu

Pretvorite bilo koji raspored rešetke fiksne širine u izgled pune širine mijenjanjem krajnjeg .containeru .container-fluid.

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

Primjer: mobitel i desktop

Ne želite da se vaši stupci jednostavno slažu u manje uređaje? Upotrijebite ekstra male i srednje klase mreže uređaja dodavanjem .col-xs-* .col-md-*u svoje stupce. Pogledajte primjer u nastavku za bolji uvid u to kako sve to funkcionira.

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

Primjer: mobitel, tablet, desktop

Nadogradite prethodni primjer stvaranjem još dinamičnijih i snažnijih izgleda s .col-sm-*klasama tableta.

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

Primjer: prelamanje stupaca

Ako je više od 12 stupaca postavljeno unutar jednog retka, svaka grupa dodatnih stupaca će se, kao jedna cjelina, prebaciti u novi redak.

.col-xs-9

.col-xs-4
Budući da je 9 + 4 = 13 > 12, ovaj div sa širinom od 4 stupca premotava se u novi redak kao jedna susjedna jedinica.

.col-xs-6
Sljedeći stupci nastavljaju duž novog retka.

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

Responzivni stupac resetira

S četiri dostupne razine rešetki sigurno ćete naići na probleme u kojima se, na određenim prijelomnim točkama, vaši stupci ne čiste baš kako treba jer je jedan viši od drugog. Da biste to popravili, upotrijebite kombinaciju a .clearfixi naših responzivnih korisnih klasa .

.col-xs-6 .col-sm-3
Promijenite veličinu okvira za prikaz ili ga pogledajte na svom telefonu za primjer.

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

Uz brisanje stupca na responzivnim prekidnim točkama, možda ćete morati ponovno postaviti pomake, guranja ili povlačenja . Pogledajte ovo na djelu u primjeru 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>

Uklonite oluke

Uklonite oluke iz reda i njegovih stupaca s .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>

Odstupanje stupaca

Pomaknite stupce udesno koristeći .col-md-offset-*klase. Ove klase povećavaju lijevu marginu stupca po *stupac. Na primjer, .col-md-offset-4pomiče se .col-md-4preko četiri stupca.

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

Također možete nadjačati pomake s nižih razina mreže s .col-*-offset-0klasama.

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

Gniježđenje stupaca

Da biste ugniježdili svoj sadržaj sa zadanom mrežom, dodajte novi .rowi skup .col-sm-*stupaca unutar postojećeg .col-sm-*stupca. Ugniježđeni retci trebaju uključivati skup stupaca koji zbroje 12 ili manje (nije potrebno da koristite svih 12 dostupnih stupaca).

Razina 1: .col-sm-9

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

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

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

Redoslijed stupaca

Jednostavno promijenite redoslijed naših ugrađenih stupaca rešetke pomoću .col-md-push-*i .col-md-pull-*modifikatorskih klasa.

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

Manje mixina i varijabli

Uz unaprijed izgrađene klase rešetki za brze izglede, Bootstrap uključuje Less varijable i mixins za brzo generiranje vlastitih jednostavnih, semantičkih izgleda.

Varijable

Varijable određuju broj stupaca, širinu međuprostora i točku medijskog upita na kojoj počinju plutajući stupci. Koristimo ih za generiranje unaprijed definiranih klasa rešetki koje su gore dokumentirane, kao i za prilagođene miksine navedene u nastavku.

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

Mixins

Miksini se koriste u kombinaciji s varijablama rešetke za generiranje semantičkog CSS-a za pojedinačne stupce rešetke.

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

Primjer upotrebe

Možete modificirati varijable prema vlastitim prilagođenim vrijednostima ili jednostavno koristiti miksine s njihovim zadanim vrijednostima. Evo primjera korištenja zadanih postavki za izradu izgleda u dva stupca s razmakom između.

.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

Svi HTML zaglavlja, <h1>do <h6>, su dostupni. .h1kroz .h6klase su također dostupne, za slučajeve kada želite uskladiti stil fonta s naslovom, ali još uvijek želite da vaš tekst bude prikazan u liniji.

h1. Bootstrap naslov	Poludebljano 36 px
h2. Bootstrap naslov	Poludebljano 30 px
h3. Bootstrap naslov	Poludebljano 24 px
h4. Bootstrap naslov	Poludebljano 18 px
h5. Bootstrap naslov	Poludebljano 14 px
h6. Bootstrap naslov	Poludebljano 12 px

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

Stvorite lakši, sekundarni tekst u bilo kojem naslovu s generičkom <small>oznakom ili .smallklasom.

h1. Bootstrap naslov Sekundarni tekst

h2. Bootstrap naslov Sekundarni tekst

h3. Bootstrap naslov Sekundarni tekst

h4. Bootstrap naslov Sekundarni tekst

h5. Bootstrap naslov Sekundarni tekst

h6. Bootstrap naslov Sekundarni tekst

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

Kopija tijela

Bootstrapova globalna zadana veličina font-sizeje 14pxline-height , s 1.428 . Ovo se primjenjuje na <body>i sve odlomke. Osim toga, <p>(odlomci) dobivaju donju marginu od polovine svoje izračunate visine retka (10 px prema zadanim postavkama).

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.

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

Istaknite odlomak dodavanjem .lead.

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

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

Izgrađeno s manje

Tipografska ljestvica temelji se na dvije Less varijable u varijablama.less : @font-size-basei @line-height-base. Prva je osnovna veličina fonta koja se koristi u cijelom tekstu, a druga je osnovna visina retka. Koristimo te varijable i neke jednostavne matematike za stvaranje margina, ispuna i visina redaka svih naših tipova i više. Prilagodite ih i Bootstrap će se prilagoditi.

Umetnuti tekstualni elementi

Označeni tekst

Za isticanje niza teksta zbog njegove relevantnosti u drugom kontekstu, koristite <mark>oznaku.

Oznaku oznake možete koristiti zaistaknutitekst.

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

Izbrisan tekst

Za označavanje blokova teksta koji su izbrisani koristite <del>oznaku.

~~Ovaj redak teksta trebao bi se tretirati kao izbrisani tekst.~~

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

Precrtani tekst

Za označavanje blokova teksta koji više nisu relevantni koristite <s>oznaku.

~~Ovaj redak teksta trebao bi se smatrati netočnim.~~

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

Umetnuti tekst

Za označavanje dodataka dokumentu koristite <ins>oznaku.

Ovaj redak teksta trebao bi se tretirati kao dodatak dokumentu.

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

Podcrtani tekst

Za podcrtavanje teksta koristite <u>oznaku.

Ovaj redak teksta prikazat će se kao podcrtan

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

Iskoristite zadane HTML oznake za naglašavanje s laganim stilovima.

Mali tekst

Za smanjivanje naglašavanja umetnutog teksta ili blokova teksta, upotrijebite <small>oznaku za postavljanje teksta na 85% veličine nadređenog. Elementi naslova dobivaju svoje font-sizeza ugniježđene <small>elemente.

Alternativno možete koristiti umetnuti element s .smallumjesto bilo kojeg <small>.

Ovaj redak teksta trebao bi se tretirati kao sitni tisak.

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

Podebljano

Za naglašavanje isječka teksta s većom težinom fonta.

Sljedeći isječak teksta prikazan je podebljanim tekstom .

<strong>rendered as bold text</strong>

Kurziv

Za naglašavanje isječka teksta kurzivom.

Sljedeći isječak teksta prikazuje se kao tekst u kurzivu .

<em>rendered as italicized text</em>

Alternativni elementi

Slobodno koristite <b>i <i>u HTML5. <b>namijenjen je isticanju riječi ili fraza bez prenošenja dodatne važnosti, dok <i>je uglavnom za glas, tehničke izraze itd.

Klase usklađivanja

Jednostavno poravnajte tekst s komponentama pomoću klasa za poravnanje teksta.

Lijevo poravnat tekst.

Tekst poravnat po sredini.

Tekst poravnat udesno.

Obostran tekst.

Bez prelamanja teksta.

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

Nastava transformacije

Transformirajte tekst u komponentama s klasama velikih slova u tekstu.

Tekst ispisan malim slovima.

Tekst napisan velikim slovima.

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

Kratice

Stilizirana implementacija HTML <abbr>elementa za kratice i akronime za prikaz proširene verzije pri lebdenju. Kratice s titleatributom imaju svijetlu točkastu donju granicu i pokazivač pomoći pri lebdenju, pružajući dodatni kontekst pri lebdenju i korisnicima pomoćnih tehnologija.

Osnovna kratica

Skraćenica riječi atribut je attr .

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

Inicijalizam

Dodajte .initialismkraticu za malo manju veličinu fonta.

HTML je najbolja stvar od rezanog kruha.

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

Adrese

Predstavite kontakt podatke za najbližeg pretka ili cjelokupno djelo. Sačuvajte formatiranje završavajući sve retke s <br>.

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

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

Blok citati

Za citiranje blokova sadržaja iz drugog izvora unutar vašeg dokumenta.

Zadani blok citat

Zamotajte <blockquote>bilo koji HTML kao citat. Za izravne citate preporučujemo <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>

Opcije blok citata

Promjene stila i sadržaja za jednostavne varijacije standarda <blockquote>.

Imenovanje izvora

Dodajte <footer>za identifikaciju izvora. Omotajte naziv izvornog djela u <cite>.

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

Netko poznat u naslovu izvora

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

Alternativni prikazi

Dodajte .blockquote-reverseza blok citat sa sadržajem poravnatim udesno.

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

Netko poznat u naslovu izvora

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

Popisi

Neuređeno

Popis stavki u kojima redoslijed nije izričito bitan.

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

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

Naručeno

Popis stavki u kojima je redoslijed izričito bitan.

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

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

Nestilizirano

Uklonite zadanu list-stylei lijevu marginu na stavkama popisa (samo neposredni potomci). Ovo se odnosi samo na neposredne podređene stavke popisa , što znači da ćete morati dodati klasu i za sve ugniježđene popise.

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

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

U redu

Stavite sve stavke popisa u jedan redak s display: inline-block;laganim ispunom.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Opis

Popis pojmova s pripadajućim opisima.

Liste opisa: Popis opisa savršen je za definiranje pojmova.
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

Napravite pojmove i opise <dl>poredane jedan do drugoga. Počinje složeno poput zadanih <dl>s, ali kada se navigacijska traka proširi, šire se i ove.

Liste opisa: Popis opisa savršen je za definiranje pojmova.
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>

Automatsko skraćivanje

Horizontalni popisi opisa skratit će pojmove koji su predugi da bi stali u lijevi stupac s text-overflow. U užim prikazima, oni će se promijeniti u zadani naslagani raspored.

U redu

Zamotajte ugrađene isječke koda s <code>.

Na primjer, <section>treba biti omotan kao inline.

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

Korisnički unos

Koristite <kbd>za označavanje unosa koji se obično unosi putem tipkovnice.

Za promjenu imenika upišite cdi zatim naziv imenika.
Za uređivanje postavki 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

Koristite <pre>za više redaka koda. Obavezno izbjegnite sve uglaste zagrade u kodu radi ispravnog prikazivanja.

<p>Uzorak teksta ovdje...</p>

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

Po izboru možete dodati .pre-scrollableklasu, koja će postaviti maksimalnu visinu od 350 px i pružiti traku za pomicanje osi y.

Varijable

Za označavanje varijabli koristite <var>oznaku.

y = m x + b

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

Uzorak izlaza

Za označavanje izlaza uzorka blokova iz programa koristite <samp>oznaku.

Ovaj tekst treba tretirati kao ogledni izlaz iz računalnog programa.

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

Osnovni primjer

Za osnovni stil—lagana podstava i samo horizontalni razdjelnici—dodajte osnovnu klasu .tablebilo kojem <table>. Možda se čini super suvišnim, ali s obzirom na široku upotrebu tablica za druge dodatke poput kalendara i birača datuma, odlučili smo izolirati naše prilagođene stilove tablica.

Dodatni naslov tablice.
#	Ime	Prezime	Korisničko ime
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Larry	ptica	@cvrkut

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

Prugasti redovi

Koristite .table-stripedza dodavanje zebrastih pruga bilo kojem retku tablice unutar <tbody>.

Kompatibilnost s različitim preglednicima

Prugaste tablice stiliziraju se putem :nth-childCSS selektora, koji nije dostupan u Internet Exploreru 8.

#	Ime	Prezime	Korisničko ime
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Larry	ptica	@cvrkut

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

Obrubljeni stol

Dodajte .table-borderedza obrube na svim stranama tablice i ćelija.

#	Ime	Prezime	Korisničko ime
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Larry	ptica	@cvrkut

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

Redovi lebdeći

Dodajte .table-hoverda omogućite stanje lebdenja na recima tablice unutar <tbody>.

#	Ime	Prezime	Korisničko ime
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Larry	ptica	@cvrkut

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

Sažeta tablica

Dodajte .table-condensedkako biste stolove učinili kompaktnijima rezanjem podloge na pola.

#	Ime	Prezime	Korisničko ime
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Ptica Larry		@cvrkut

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

Kontekstualne nastave

Koristite kontekstualne klase za bojanje redaka tablice ili pojedinačnih ćelija.

Klasa	Opis
`.active`	Primjenjuje boju lebdenja na određeni red ili ćeliju
`.success`	Označava uspješnu ili pozitivnu radnju
`.info`	Označava neutralnu informativnu promjenu ili radnju
`.warning`	Označava upozorenje koje bi moglo zahtijevati pozornost
`.danger`	Označava opasnu ili potencijalno negativnu radnju

#	Naslov stupca	Naslov stupca	Naslov stupca
1	Sadržaj stupca	Sadržaj stupca	Sadržaj stupca
2	Sadržaj stupca	Sadržaj stupca	Sadržaj stupca
3	Sadržaj stupca	Sadržaj stupca	Sadržaj stupca
4	Sadržaj stupca	Sadržaj stupca	Sadržaj stupca
5	Sadržaj stupca	Sadržaj stupca	Sadržaj stupca
6	Sadržaj stupca	Sadržaj stupca	Sadržaj stupca
7	Sadržaj stupca	Sadržaj stupca	Sadržaj stupca
8	Sadržaj stupca	Sadržaj stupca	Sadržaj stupca
9	Sadržaj stupca	Sadržaj stupca	Sadržaj stupca

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

Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja retku tablice ili pojedinačnoj ćeliji daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (vidljivi tekst u relevantnom retku/ćeliji tablice) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .sr-onlyklasom.

Responzivni stolovi

Izradite responzivne tablice umotavanjem bilo koje .tableda .table-responsivebi se vodoravno pomicale na malim uređajima (ispod 768 piksela). Kada gledate bilo što veće od 768px širine, nećete vidjeti nikakvu razliku u ovim tablicama.

Okomito rezanje/skraćivanje

Responzivni stolovi koriste overflow-y: hidden, koji izrezuje svaki sadržaj koji nadilazi donji ili gornji rub stola. Konkretno, ovo može isključiti padajuće izbornike i druge widgete trećih strana.

Firefox i fieldsets

Firefox ima neugodan stil skupa polja widthkoji ometa responzivnu tablicu. Ovo se ne može nadjačati bez hakiranja specifičnog za Firefox koje ne nudimo u Bootstrapu:

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

Za više informacija pročitajte ovaj odgovor Stack Overflowa .

#	Naslov tablice	Naslov tablice	Naslov tablice	Naslov tablice	Naslov tablice	Naslov tablice
1	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice
2	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice
3	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice

#	Naslov tablice	Naslov tablice	Naslov tablice	Naslov tablice	Naslov tablice	Naslov tablice
1	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice
2	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice
3	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice

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

Osnovni primjer

Pojedinačne kontrole obrazaca automatski dobivaju neki globalni stil. Svi tekstualni <input>, <textarea>, i <select>elementi s .form-controlpostavljeni su na width: 100%;prema zadanim postavkama. Zamotajte oznake i kontrole .form-groupza optimalan razmak.

<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 miješajte grupe obrazaca s grupama unosa

Ne miješajte grupe obrazaca izravno s grupama unosa . Umjesto toga, ugniježdite grupu unosa unutar grupe obrazaca.

Inline obrazac

Dodajte .form-inlinesvom obrascu (koji ne mora biti <form>) za lijevo poravnate i inline-block kontrole. Ovo se odnosi samo na forme unutar prozora koji su široki najmanje 768 piksela.

Mogu zahtijevati prilagođene širine

Unosi i odabiri width: 100%;primijenjeni su prema zadanim postavkama u Bootstrapu. Unutar inline obrazaca, to vraćamo na width: auto;tako da se više kontrola može nalaziti u istom retku. Ovisno o vašem izgledu, mogu biti potrebne dodatne prilagođene širine.

Uvijek dodajte oznake

Čitači zaslona imat će problema s vašim obrascima ako ne uključite oznaku za svaki unos. Za ove ugrađene obrasce možete sakriti oznake pomoću .sr-onlyklase. Postoje daljnje alternativne metode davanja oznake za pomoćne tehnologije, kao što je aria-labelatribut ili aria-labelledby. titleAko ništa od toga nije prisutno, čitači zaslona mogu pribjeći korištenju placeholderatributa, ako postoji, ali imajte na umu da placeholderse ne preporuča korištenje kao zamjena za druge metode označavanja.

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

Horizontalni oblik

Upotrijebite Bootstrapove unaprijed definirane klase rešetki za poravnavanje oznaka i grupa kontrola obrasca u horizontalnom rasporedu dodavanjem .form-horizontalu obrazac (što ne mora biti <form>). Na taj se način mijenja .form-groups da se ponaša kao redovi rešetke, tako da nema potrebe za .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>

Podržane kontrole

Primjeri standardnih kontrola obrasca podržanih u primjeru izgleda obrasca.

Unosi

Najčešća kontrola obrazaca, tekstualna polja za unos. Uključuje podršku za sve vrste HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, i color.

Potrebna deklaracija tipa

Unosi će biti potpuno stilizirani samo ako su typeispravno deklarirani.

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

Ulazne grupe

Da biste dodali integrirani tekst ili gumbe prije i/ili poslije bilo kojeg teksta temeljenog na tekstu <input>, provjerite komponentu ulazne grupe .

Textarea

Kontrola obrasca koja podržava više redaka teksta. Po potrebi promijenite rowsatribut.

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

Polje za potvrdu i radio

Potvrdni okviri služe za odabir jedne ili više opcija na popisu, dok radiji služe za odabir jedne opcije od više njih.

Onemogućeni potvrdni okviri i radio su podržani, ali da biste postavili "nedopušteni" kursor pri lebdenju iznad nadređenog <label>, morat ćete dodati .disabledklasu nadređenom .radio, .radio-inline, .checkboxili .checkbox-inline.

Zadano (slož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>

Inline potvrdni okviri i radio

Koristite klase .checkbox-inlineili .radio-inlinena nizu potvrdnih okvira ili radija za kontrole koje se pojavljuju u istom retku.

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

Polje za potvrdu i radio bez teksta oznake

Ako nemate teksta unutar <label>, unos je postavljen kako biste očekivali. Trenutno radi samo na potvrdnim okvirima i radijima koji nisu ugrađeni. Ne zaboravite i dalje osigurati neki oblik oznake za pomoćne tehnologije (na primjer, korištenje 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>

Odaberite% s

Imajte na umu da mnogi nativni odabirni izbornici—naime u Safariju i Chromeu—imaju zaobljene kutove koji se ne mogu mijenjati putem border-radiussvojstava.

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

Za <select>kontrole s multipleatributom prema zadanim postavkama prikazano je više opcija.

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

Statička kontrola

Kada trebate staviti običan tekst pored oznake obrasca unutar obrasca, koristite .form-control-staticklasu 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

Uklanjamo zadane outlinestilove na nekim kontrolama obrazaca i primjenjujemo box-shadowumjesto njih za :focus.

Demo `:focus`stanje

Gornji primjer unosa koristi prilagođene stilove u našoj dokumentaciji za demonstraciju :focusstanja na .form-control.

Onesposobljeno stanje

Dodajte disabledBooleov atribut na unos kako biste spriječili interakcije korisnika. Onemogućeni unosi izgledaju svjetlije i dodaju not-allowedkursor.

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

Onemogućeni skupovi polja

Dodajte disabledatribut u <fieldset>da biste onemogućili sve kontrole unutar <fieldset>odjednom.

Upozorenje o funkcionalnosti poveznice`<a>`

Prema zadanim postavkama, preglednici će tretirati sve izvorne kontrole obrasca ( <input>, <select>i <button>elemente) unutar <fieldset disabled>kao onemogućene, sprječavajući interakcije tipkovnice i miša na njima. Međutim, ako vaš obrazac također uključuje <a ... class="btn btn-*">elemente, oni će dobiti samo stil pointer-events: none. Kao što je navedeno u odjeljku o onemogućenom stanju za gumbe (i posebno u pododjeljku za elemente sidra), ovo CSS svojstvo još nije standardizirano i nije u potpunosti podržano u Operi 18 i nižim, ili u Internet Exploreru 11, i pobijedilo je Ne sprječava korisnike tipkovnice da se mogu fokusirati ili aktivirati ove veze. Da biste bili sigurni, upotrijebite prilagođeni JavaScript da onemogućite takve veze.

Kompatibilnost s različitim preglednicima

Iako će Bootstrap primijeniti ove stilove u svim preglednicima, Internet Explorer 11 i niže verzije ne podržavaju u potpunosti disabledatribut na <fieldset>. Koristite prilagođeni JavaScript da onemogućite skup polja u ovim preglednicima.

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

Dodajte readonlybooleov atribut na unos kako biste spriječili promjenu vrijednosti unosa. Unosi samo za čitanje izgledaju svjetlije (baš kao i onemogućeni ulazi), ali zadržavaju standardni kursor.

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

Tekst pomoći

Tekst pomoći na razini bloka za kontrole obrasca.

Povezivanje teksta pomoći s kontrolama obrasca

Tekst pomoći treba biti eksplicitno povezan s kontrolom obrasca na koju se odnosi pomoću aria-describedbyatributa. To će osigurati da će pomoćne tehnologije – poput čitača zaslona – najaviti ovaj tekst pomoći kada se korisnik fokusira ili uđe u kontrolu.

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

Bootstrap uključuje stilove provjere valjanosti za stanja pogreške, upozorenja i uspjeha na kontrolama obrazaca. Za korištenje dodajte .has-warning, .has-errorili .has-successnadređenom elementu. Svaki .control-label, .form-control, i .help-blockunutar tog elementa primit će stilove provjere valjanosti.

Prenošenje stanja provjere valjanosti korisnicima pomoćnih tehnologija i daltonistima

Korištenje ovih stilova provjere valjanosti za označavanje stanja kontrole obrasca daje samo vizualnu indikaciju temeljenu na boji, koja se neće prenijeti korisnicima pomoćnih tehnologija - kao što su čitači zaslona - ili daltonistima.

Osigurajte da je osigurana i alternativna indikacija stanja. Na primjer, možete uključiti savjet o stanju u sam <label>tekst kontrole obrasca (kao što je slučaj u sljedećem primjeru koda), uključiti Glyphicon (s odgovarajućim alternativnim tekstom pomoću .sr-onlyklase - pogledajte primjere Glyphicona ) ili pružanjem dodatni tekstualni blok pomoći. Posebno za pomoćne tehnologije, nevažećim kontrolama obrazaca također se može dodijeliti 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>

S opcijskim ikonama

Također možete dodati neobavezne ikone za povratne informacije uz dodatak ikone s .has-feedbackdesne strane.

Ikone povratnih informacija rade samo s tekstualnim <input class="form-control">elementima.

Ikone, oznake i grupe unosa

Ručno pozicioniranje ikona povratnih informacija potrebno je za ulaze bez oznake i za grupe unosa s dodatkom s desne strane. Preporučujemo vam da navedete oznake za sve unose zbog pristupačnosti. Ako želite spriječiti prikazivanje oznaka, sakrijte ih s .sr-onlyrazredom. Ako morate bez oznaka, prilagodite topvrijednost ikone povratne informacije. Za grupe unosa, podesite rightvrijednost na odgovarajuću vrijednost piksela ovisno o širini vašeg dodatka.

Prenošenje značenja ikone na pomoćne tehnologije

Kako bi se osiguralo da pomoćne tehnologije – kao što su čitači zaslona – ispravno prenose značenje ikone, dodatni skriveni tekst treba biti uključen u .sr-onlyklasu i eksplicitno povezan s kontrolom obrasca na koju se odnosi aria-describedby. Alternativno, osigurajte da se značenje (na primjer, činjenica da postoji upozorenje za određeno polje za unos teksta) prenese u nekom drugom obliku, kao što je promjena teksta stvarnog <label>povezanog s kontrolom obrasca.

Iako sljedeći primjeri već spominju stanje provjere valjanosti njihovih odgovarajućih kontrola obrasca u samom <label>tekstu, gornja tehnika (upotrebom .sr-onlyteksta i aria-describedby) uključena je u ilustrativne svrhe.

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

Izborne ikone u horizontalnom i inline obliku

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

Izborne ikone sa skrivenim `.sr-only`oznakama

Ako koristite .sr-onlyklasu za skrivanje kontrole obrasca <label>(umjesto korištenja drugih opcija označavanja, kao što je aria-labelatribut), Bootstrap će automatski prilagoditi položaj ikone nakon što je dodate.

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

Kontrola veličine

Postavite visine pomoću klasa kao što .input-lgje , a širine pomoću klasa stupaca mreže kao što je .col-lg-*.

Dimenzioniranje visine

Stvorite više ili kraće kontrole obrazaca koje odgovaraju veličini gumba.

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

Veličine skupina vodoravnih oblika

Brzo promijenite veličinu oznaka i kontrola obrasca unutar .form-horizontaldodavanjem .form-group-lgili .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>

Dimenzioniranje stupaca

Zamotajte unose u stupce rešetke ili bilo koji prilagođeni roditeljski element kako biste jednostavno nametnuli željene š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 gumba

Koristite klase gumba na elementu <a>, <button>, ili .<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">

Upotreba specifična za kontekst

Dok se klase gumba mogu koristiti na elementima <a>i <button>, samo <button>su elementi podržani unutar naših komponenti navigacije i navigacijske trake.

Veze koje djeluju kao gumbi

Ako se <a>elementi koriste kao gumbi – pokreću funkcionalnost unutar stranice, umjesto navigacije do drugog dokumenta ili odjeljka unutar trenutne stranice – također im treba dati odgovarajući role="button".

Renderiranje u različitim preglednicima

Kao najbolju praksu, preporučujemo korištenje <button>elementa kad god je to moguće kako biste osigurali podudarno prikazivanje u više preglednika.

Između ostalog, postoji greška u Firefoxu <30 koja nas sprječava da postavimo line-heightgumbe <input>na temelju -, uzrokujući da oni ne odgovaraju točno visini drugih gumba u Firefoxu.

Mogućnosti

Upotrijebite bilo koju od dostupnih klasa gumba za brzo stvaranje stiliziranog gumba.

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

Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja gumbu daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (vidljivi tekst gumba) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .sr-onlyklasom.

Veličine

Želite li veće ili manje gumbe? Dodajte .btn-lg, .btn-sm, ili .btn-xsza dodatne veličine.

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

Stvorite gumbe na razini bloka—one koji se protežu cijelom širinom nadređenog—dodavanjem .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 će izgledati pritisnuti (s tamnijom pozadinom, tamnijim obrubom i umetnutom sjenom) kada su aktivni. Za <button>elemente se to radi putem :active. Za <a>elemente, to je učinjeno s .active. Međutim, možete koristiti .activeon <button>s (i uključiti aria-pressed="true"atribut) ako trebate replicirati aktivno stanje programski.

Element gumba

Nema potrebe za dodavanjem :activejer je to pseudo-klasa, ali ako trebate nametnuti isti izgled, samo naprijed i 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>

Element sidra

Dodajte .activeklasu <a>gumbima.

Primarna veza Veza

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

Onesposobljeno stanje

Učinite da gumbi izgledaju nemoguće kliknuti tako da ih izblijedite pomoću opacity.

Element gumba

Dodajte disabledatribut <button>gumbima.

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

Kompatibilnost s različitim preglednicima

Ako dodate disabledatribut u <button>, Internet Explorer 9 i noviji će prikazati tekst sivim s gadnom sjenom teksta koju ne možemo popraviti.

Element sidra

Dodajte .disabledklasu <a>gumbima.

Primarna veza Veza

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

Ovdje koristimo .disabledkao uslužnu klasu, sličnu uobičajenoj .activeklasi, tako da nije potreban prefiks.

Upozorenje o funkcionalnosti veze

Ova klasa koristi pointer-events: nonese za pokušaj onemogućavanja funkcije povezivanja <a>s, ali to CSS svojstvo još nije standardizirano i nije u potpunosti podržano u Operi 18 i nižim verzijama ili u Internet Exploreru 11. Osim toga, čak i u preglednicima koji podržavaju pointer-events: none, tipkovnica navigacija ostaje nepromijenjena, što znači da će korisnici tipkovnice s vidom i korisnici pomoćnih tehnologija i dalje moći aktivirati ove veze. Da biste bili sigurni, upotrijebite prilagođeni JavaScript da onemogućite takve veze.

Responzivne slike

Slike u Bootstrapu 3 mogu se učiniti prilagođenima responzivnosti dodavanjem .img-responsiveklase. Ovo se odnosi na max-width: 100%;, height: auto;i display: block;na sliku kako bi se lijepo prilagodila nadređenom elementu.

Za centriranje slika koje koriste .img-responsiveklasu, koristite .center-blockumjesto .text-center. Za više detalja o korištenju pogledajte odjeljak pomoćnih klasa ..center-block

SVG slike i IE 8-10

U Internet Exploreru 8-10, SVG slike .img-responsivesu neproporcionalne veličine. Da biste to popravili, dodajte width: 100% \9;gdje je potrebno. Bootstrap to ne primjenjuje automatski jer uzrokuje komplikacije na druge formate slika.

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

Oblici slika

Dodajte klase <img>elementu kako biste jednostavno stilizirali slike u bilo kojem projektu.

Kompatibilnost s različitim preglednicima

Imajte na umu da Internet Explorer 8 nema podršku za zaobljene kutove.

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

Kontekstualne boje

Prenesite značenje bojom uz pregršt isticanja korisnih klasa. Oni se također mogu primijeniti na poveznice i potamnit će pri lebdenju, baš kao i naši zadani stilovi veza.

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.

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

Suočavanje sa specifičnošću

Ponekad se klase isticanja ne mogu primijeniti zbog specifičnosti drugog selektora. U većini slučajeva, dovoljno zaobilazno rješenje je omotati vaš tekst u <span>s klasom.

Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (kontekstualne boje koriste se samo za pojačavanje značenja koje je već prisutno u tekstu/oznaci) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .sr-onlyklasom .

Kontekstualne pozadine

Slično kontekstualnim klasama boja teksta, jednostavno postavite pozadinu elementa na bilo koju kontekstualnu klasu. Komponente sidra će potamniti kada lebdite, baš kao i tekstualne klase.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Suočavanje sa specifičnošću

Ponekad se kontekstualne pozadinske klase ne mogu primijeniti zbog specifičnosti drugog selektora. U nekim slučajevima, dovoljno zaobilazno rješenje je omotati sadržaj vašeg elementa u <div>s klasom.

Prenošenje značenja pomoćnim tehnologijama

Kao i kod kontekstualnih boja , osigurajte da se svako značenje koje se prenosi bojom također prenosi u formatu koji nije isključivo prezentacijski.

Ikona za zatvaranje

Upotrijebite generičku ikonu za zatvaranje za odbacivanje sadržaja poput modala i upozorenja.

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

Carets

Koristite umetanje za označavanje funkcionalnosti i smjera padajućeg izbornika. Imajte na umu da će se zadani kursor automatski obrnuti u padajućim izbornicima .

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

Brzi plovci

Pomaknite element ulijevo ili udesno pomoću klase. !importantje uključen kako bi se izbjegli problemi specifičnosti. Klase se također mogu koristiti kao 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 blokove sadržaja

Postavite element na display: blocki centrirajte ga preko margin. Dostupan kao mixin i klasa.

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

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

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

Clearfix

Lako izbrišite floats dodavanjem .clearfix nadređenom elementu . Koristi micro clearfix koji je popularizirao Nicolas Gallagher. Može se koristiti i kao 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();
}

Prikazivanje i skrivanje sadržaja

Prisilno prikazivanje ili sakrivanje elementa ( uključujući i za čitače zaslona ) pomoću klasa .showi . .hiddenOve se klase koriste !importantza izbjegavanje sukoba specifičnosti, baš kao i quick floats . Dostupni su samo za prebacivanje na razini bloka. Također se mogu koristiti kao miksini.

.hidedostupan je, ali ne utječe uvijek na čitače zaslona i zastario je od v3.0.1. Koristite .hiddenili .sr-onlyumjesto.

Nadalje, .invisiblemože se koristiti za promjenu samo vidljivosti elementa, što znači da displayse ne mijenja i da element i dalje može utjecati na tijek 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();
}

Čitač zaslona i navigacijski sadržaj tipkovnice

Sakrijte element za sve uređaje osim za čitače zaslona pomoću .sr-only. Kombinirajte .sr-onlys .sr-only-focusableda biste ponovno prikazali element kada je u fokusu (npr. korisnik koji koristi samo tipkovnicu). Neophodno za praćenje najboljih praksi pristupačnosti . Može se koristiti i kao 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();
}

Zamjena slike

Upotrijebite .text-hideklasu ili mixin kako biste zamijenili tekstualni sadržaj elementa pozadinskom slikom.

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

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

Za brži razvoj prilagođen mobilnim uređajima, koristite ove klase uslužnih programa za prikazivanje i skrivanje sadržaja po uređaju putem medijskog upita. Također su uključene uslužne klase za prebacivanje sadržaja prilikom ispisa.

Pokušajte ih koristiti ograničeno i izbjegavajte stvaranje potpuno različitih verzija iste stranice. Umjesto toga, koristite ih za nadopunu prezentacije svakog uređaja.

Dostupni razredi

Upotrijebite jednu ili kombinaciju dostupnih klasa za prebacivanje sadržaja između prijelomnih točaka prikaza.

	Ekstra mali uređajiTelefoni (<768px)	Mali uređajiTableti (≥768px)	Srednji uređajiStolna računala (≥992px)	Veliki uređajiStolna računala (≥1200 px)
`.visible-xs-*`	Vidljivo	Skriven	Skriven	Skriven
`.visible-sm-*`	Skriven	Vidljivo	Skriven	Skriven
`.visible-md-*`	Skriven	Skriven	Vidljivo	Skriven
`.visible-lg-*`	Skriven	Skriven	Skriven	Vidljivo
`.hidden-xs`	Skriven	Vidljivo	Vidljivo	Vidljivo
`.hidden-sm`	Vidljivo	Skriven	Vidljivo	Vidljivo
`.hidden-md`	Vidljivo	Vidljivo	Skriven	Vidljivo
`.hidden-lg`	Vidljivo	Vidljivo	Vidljivo	Skriven

Od verzije 3.2.0, .visible-*-*klase za svaku prijelomnu točku dolaze u tri varijacije, po jedna za svaku displayvrijednost CSS svojstva navedenu u nastavku.

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

Dakle, za posebno male ( xs) ekrane, na primjer, dostupne .visible-*-*klase su: .visible-xs-block, .visible-xs-inlinei .visible-xs-inline-block.

Klase .visible-xs, .visible-sm, .visible-md, i .visible-lgtakođer postoje, ali su zastarjele od v3.2.0 . Oni su približno ekvivalentni .visible-*-block, osim s dodatnim posebnim slučajevima za <table>elemente koji se odnose na prebacivanje.

Ispiši razrede

Slično uobičajenim responzivnim klasama, koristite ih za prebacivanje sadržaja za ispis.

Nastava	preglednik	Ispis
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Skriven	Vidljivo
`.hidden-print`	Vidljivo	Skriven

Klasa .visible-printtakođer postoji, ali je zastarjela od v3.2.0. Približno je ekvivalentan .visible-print-block, osim s dodatnim posebnim slučajevima za <table>-srodne elemente.

Test slučajevi

Promijenite veličinu preglednika ili učitajte na različitim uređajima kako biste testirali responzivne klase uslužnih programa.

Vidljivo na...

Zelene kvačice označavaju da je element vidljiv u vašem trenutnom prozoru.

Ekstra malo ✔ Vidljivo na x-small

Mali ✔ Vidljivo na malim

Srednji ✔ Vidljiv na srednjem

velika ✔ Vidljivo na velikoj površini

Ekstra mali i mali ✔ Vidljivo na x-small i small

Srednji i veliki ✔ Vidljivo na srednjem i velikom

Ekstra mali i srednji ✔ Vidljivo na x-small i medium

Mali i veliki ✔ Vidljivo na malo i veliko

Ekstra mali i veliki ✔ Vidljivo na x-malom i velikom

Mali i srednji ✔ Vidljivo na malim i srednjim

Skriveno na...

Ovdje zelene kvačice također označavaju da je element skriven u vašem trenutnom prozoru.

Ekstra malo ✔ Skriveno na x-small

Mali ✔ Skriveno na malom

Srednji ✔ Skriveno na srednjem

velika ✔ Skriveno na velikom

Ekstra mali i mali ✔ Skriveno na x-small i small

Srednji i veliki ✔ Skriveno na srednjem i velikom

Ekstra mali i srednji ✔ Skriveno na x-small i medium

Mali i veliki ✔ Skriveno na malo i veliko

Ekstra mali i veliki ✔ Skriveno na x-mali i veliki

Mali i srednji ✔ Skriveno na malim i srednjim

Bootstrapov CSS izgrađen je na Lessu, predprocesoru s dodatnim funkcijama poput varijabli, mixina i funkcija za kompajliranje CSS-a. Oni koji žele koristiti izvorne Less datoteke umjesto naših kompiliranih CSS datoteka mogu iskoristiti brojne varijable i miksine koje koristimo u cijelom okviru.

Grid varijable i miksini pokriveni su u odjeljku Grid sustav .

Kompajliranje Bootstrapa

Bootstrap se može koristiti na najmanje dva načina: s kompajliranim CSS-om ili s izvornim Less datotekama. Za kompajliranje Less datoteka, konzultirajte odjeljak Prvi koraci za postavljanje vaše razvojne okoline za izvođenje potrebnih naredbi.

Alati za kompilaciju treće strane mogu raditi s Bootstrapom, ali ih naš glavni tim ne podržava.

Varijable

Varijable se koriste kroz cijeli projekt kao način centralizacije i dijeljenja uobičajeno korištenih vrijednosti poput boja, razmaka ili nizova fontova. Za potpuni pregled pogledajte alat za prilagodbu .

Boje

Lako koristite dvije sheme boja: sivu i semantičku. Boje u sivim tonovima omogućuju brz pristup često korištenim nijansama crne dok semantika uključuje različite boje dodijeljene smislenim kontekstualnim vrijednostima.

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

Upotrijebite bilo koju od ovih varijabli boja kakve jesu ili ih dodijelite značajnijim varijablama 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;
}

Skele

Pregršt varijabli za brzo prilagođavanje ključnih elemenata kostura vaše web stranice.

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

Linkovi

Jednostavno stilizirajte svoje veze pravom bojom sa samo jednom vrijednošću.

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

Imajte na umu da @link-hover-colorkoristi funkciju, još jedan sjajan alat iz Lessa, za automatsko stvaranje prave boje lebdenja. Možete koristiti darken, lighten, saturatei desaturate.

Tipografija

S nekoliko brzih varijabli jednostavno postavite svoj tip slova, veličinu teksta, početnu stranu i još mnogo toga. Bootstrap ih također koristi za pružanje jednostavnih tipografskih mješavina.

@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

Dvije brze varijable za prilagodbu lokacije i naziva datoteke vaših ikona.

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

Komponente

Komponente u cijelom Bootstrapu koriste neke zadane varijable za postavljanje zajedničkih vrijednosti. Ovdje su najčešće korišteni.

@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 dobavljača

Miksini dobavljača su miksini koji pomažu u podržavanju višestrukih preglednika uključivanjem svih relevantnih prefiksa dobavljača u vaš kompilirani CSS.

Dimenzioniranje kutije

Resetirajte model kutije vaših komponenti s jednim mixinom. Za kontekst pogledajte ovaj koristan članak tvrtke Mozilla .

Mixin je zastario od verzije 3.2.0, s uvođenjem Autoprefixer-a. Kako bi se očuvala kompatibilnost unazad, Bootstrap će nastaviti interno koristiti 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 kutovi

Danas svi moderni preglednici podržavaju svojstvo bez prefiksa border-radius. Kao takav, ne postoji .border-radius()mixin, ali Bootstrap uključuje prečace za brzo zaokruživanje dva ugla na određenoj strani objekta.

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

Ako vaša ciljana publika koristi najnovije i najbolje preglednike i uređaje, nemojte zaboraviti koristiti samo box-shadowsvojstvo. Ako vam je potrebna podrška za starije Android (pre-v4) i iOS uređaje (pre-iOS 5), upotrijebite zastarjeli mixin da odaberete potrebni -webkitprefiks.

Mixin je zastario od v3.1.0, jer Bootstrap službeno ne podržava zastarjele platforme koje ne podržavaju standardno svojstvo. Kako bi se očuvala kompatibilnost unazad, Bootstrap će nastaviti interno koristiti mixin do Bootstrap v4.

Obavezno koristite rgba()boje u sjenkama okvira kako bi se što neprimjetno stopile s pozadinom.

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

Prijelazi

Više mixina za fleksibilnost. Postavite sve informacije o prijelazu s jednom ili navedite zasebnu odgodu i trajanje prema potrebi.

Miksini su zastarjeli od verzije 3.2.0, uvođenjem Autoprefixer-a. Kako bi se očuvala kompatibilnost unatrag, Bootstrap će nastaviti interno koristiti miksine 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;
}

Transformacije

Rotirajte, skalirajte, premjestite (pomaknite) ili nakosite bilo koji objekt.

Miksini su zastarjeli od verzije 3.2.0, uvođenjem Autoprefixer-a. Kako bi se očuvala kompatibilnost unatrag, Bootstrap će nastaviti interno koristiti miksine 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

Jedan miksin za korištenje svih svojstava animacije CSS3 u jednoj deklaraciji i drugi miksin za pojedinačna svojstva.

Miksini su zastarjeli od verzije 3.2.0, uvođenjem Autoprefixer-a. Kako bi se očuvala kompatibilnost unatrag, Bootstrap će nastaviti interno koristiti miksine 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;
}

Neprozirnost

Postavite neprozirnost za sve preglednike i osigurajte filterzamjenu za IE8.

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

Tekst rezerviranog mjesta

Osigurajte kontekst za kontrole obrasca unutar svakog 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
}

Stupci

Generirajte stupce putem CSS-a unutar jednog 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;
}

Gradijenti

Jednostavno pretvorite bilo koje dvije boje u pozadinski gradijent. Napredujte i postavite smjer, upotrijebite tri boje ili radijalni gradijent. S jednim mixinom dobivate sve prefiksirane sintakse koje su vam potrebne.

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

Također možete odrediti kut standardnog dvobojnog, linearnog gradijenta:

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

Ako vam je potreban gradijent u stilu brijačkih pruga, i to je jednostavno. Samo odredite jednu boju i mi ćemo prekriti prozirnu bijelu traku.

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

Povećajte ulog i umjesto toga upotrijebite tri boje. Postavite prvu boju, drugu boju, graničnik boje druge boje (vrijednost postotka poput 25%) i treću boju pomoću ovih miksina:

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

Glavu gore! Ako ikad trebate ukloniti gradijent, svakako uklonite sve filteršto ste dodali specifično za IE. To možete učiniti korištenjem .reset-filter()mixina uz background-image: none;.

Uslužni miksini

Uslužni mixini su mixini koji kombiniraju inače nepovezana CSS svojstva za postizanje određenog cilja ili zadatka.

Clearfix

Zaboravite dodavanje class="clearfix"bilo kojem elementu i umjesto toga dodajte .clearfix()mixin gdje je to prikladno. Koristi mikro clearfix od Nicolasa Gallaghera .

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

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

Horizontalno centriranje

Brzo centrirajte bilo koji element unutar njegovog roditelja. Zahtijeva widthili max-widthpostaviti.

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

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

Pomoći u dimenzioniranju

Lakše odredite dimenzije predmeta.

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

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

Promjenjiva veličina tekstualnih područja

Jednostavno konfigurirajte opcije promjene veličine za bilo koje tekstualno područje ili bilo koji drugi element. Zadano je normalno ponašanje preglednika ( both).

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

Skraćivanje teksta

Jednostavno skraćivanje teksta s elipsom s jednim mixinom. Zahtijeva da element bude blockili inline-blockrazina.

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

Navedite dvije putanje slike i @1x dimenzije slike, a Bootstrap će dati @2x medijski upit. Ako imate mnogo slika za posluživanje, razmislite o ručnom pisanju CSS-a slike mrežnice u jednom medijskom upitu.

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

Iako je Bootstrap izgrađen na Lessu, također ima službeni Sass port . Održavamo ga u zasebnom GitHub repozitoriju i obrađujemo ažuriranja pomoću skripte za konverziju.

Što je uključeno

Budući da Sass port ima zaseban repo i služi malo drugačijoj publici, sadržaj projekta se uvelike razlikuje od glavnog Bootstrap projekta. Ovo osigurava da je Sass port kompatibilan sa što više sustava temeljenih na Sass-u.

Staza	Opis
`lib/`	Ruby gem kod (Sass konfiguracija, Rails i Compass integracije)
`tasks/`	Skripte pretvarača (pretvaranje uzvodno Less u Sass)
`test/`	Kompilacijski testovi
`templates/`	Manifest paketa Compass
`vendor/assets/`	Sass, JavaScript i datoteke fontova
`Rakefile`	Interni zadaci, kao što su rake i convert

Posjetite GitHub repozitorij Sass porta da biste vidjeli ove datoteke na djelu.

Montaža

Za informacije o tome kako instalirati i koristiti Bootstrap za Sass, pogledajte readme GitHub repozitorija . To je najažurniji izvor i uključuje informacije za korištenje s Rails, Compass i standardnim Sass projektima.

Bootstrap za Sass

CSS

Pregled

HTML5 doctype

Mobitel na prvom mjestu

Tipografija i poveznice

Normaliziraj.css

Kontejneri

Mrežni sustav

Uvod

Medijski upiti

Mogućnosti mreže

Primjer: naslagano prema vodoravnom

Primjer: Spremnik za tekućinu

Primjer: mobitel i desktop

Primjer: mobitel, tablet, desktop

Primjer: prelamanje stupaca

Responzivni stupac resetira

Uklonite oluke

Odstupanje stupaca

Gniježđenje stupaca

Redoslijed stupaca

Manje mixina i varijabli

Varijable

Mixins

Primjer upotrebe

Tipografija

Naslovi

h1. Bootstrap naslov

h2. Bootstrap naslov

h3. Bootstrap naslov

h4. Bootstrap naslov

h5. Bootstrap naslov

h6. Bootstrap naslov

h1. Bootstrap naslov Sekundarni tekst

h2. Bootstrap naslov Sekundarni tekst

h3. Bootstrap naslov Sekundarni tekst

h4. Bootstrap naslov Sekundarni tekst

h5. Bootstrap naslov Sekundarni tekst

h6. Bootstrap naslov Sekundarni tekst

Kopija tijela

Glavna kopija tijela

Izgrađeno s manje

Umetnuti tekstualni elementi

Označeni tekst

Izbrisan tekst

Precrtani tekst

Umetnuti tekst

Podcrtani tekst

Mali tekst

Podebljano

Kurziv

Alternativni elementi

Klase usklađivanja

Nastava transformacije

Kratice

Osnovna kratica

Inicijalizam

Adrese

Blok citati

Zadani blok citat

Opcije blok citata

Imenovanje izvora

Alternativni prikazi

Popisi

Neuređeno

Naručeno

Nestilizirano

U redu

Opis

Horizontalni opis

Automatsko skraćivanje

Kodirati

U redu

Korisnički unos

Osnovni blok

Varijable

Uzorak izlaza

Stolovi

Osnovni primjer

Prugasti redovi

Demo `:focus`stanje

Upozorenje o funkcionalnosti poveznice`<a>`

Izborne ikone sa skrivenim `.sr-only`oznakama