Tutustu Bootstrapin infrastruktuurin tärkeimpiin osiin, mukaan lukien lähestymistapamme parempaan, nopeampaan ja vahvempaan verkkokehitykseen.

HTML5 doctype

Bootstrap käyttää tiettyjä HTML-elementtejä ja CSS-ominaisuuksia, jotka edellyttävät HTML5-dokumenttityypin käyttöä. Sisällytä se kaikkien projektiesi alkuun.

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

Mobiili ensin

Bootstrap 2:lla lisäsimme valinnaisia mobiiliystävällisiä tyylejä kehyksen tärkeimpiin osiin. Bootstrap 3:lla olemme kirjoittaneet projektin alusta alkaen mobiiliystävälliseksi. Sen sijaan, että lisättäisiin valinnaisia mobiilityylejä, ne on paistettu suoraan ytimeen. Itse asiassa Bootstrap on mobiili ensin . Mobile first -tyylit löytyvät koko kirjastosta erillisten tiedostojen sijaan.

Varmista oikean renderöinnin ja kosketuszoomauksen varmistaminen lisäämällä näkymän sisällönkuvauskenttä .<head>

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

Voit poistaa zoomausominaisuudet käytöstä mobiililaitteissa lisäämällä user-scalable=nonäkymän sisällönkuvauskenttään. Tämä poistaa zoomauksen käytöstä, mikä tarkoittaa, että käyttäjät voivat vain vierittää, jolloin sivustosi tuntuu hieman enemmän alkuperäiseltä sovellukselta. Kaiken kaikkiaan emme suosittele tätä kaikille sivustoille, joten ole varovainen!

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

Typografia ja linkit

Bootstrap määrittää yleiset perusnäytöt, typografian ja linkityylit. Erityisesti me:

Aseta background-color: #fff;päällebody
Käytä attribuutteja @font-family-base, @font-size-base, ja typografisena perustana@line-height-base
Aseta yleinen linkin väri @link-colorja käytä vain linkin alleviivauksia:hover

Nämä tyylit löytyvät scaffolding.less.

Normalisoi.css

Käytämme Nicolas Gallagherin ja Jonathan Nealin projektia Normalize.css -projektia parantaaksemme selainten välistä hahmonnusta .

Kontit

Bootstrap vaatii sisältävän elementin käärimään sivuston sisällön ja sijoittamaan ruudukkojärjestelmämme. Voit valita yhden kahdesta säiliöstä käytettäväksi projekteissasi. Huomaa, että johtuen paddingja enemmän, kumpikaan säiliö ei ole sisäkkäinen.

Käytä .containerreagoivaan kiinteän leveyteen astiaan.

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

Käytä .container-fluidtäysleveälle säiliölle, joka kattaa koko näkymän leveyden.

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

Bootstrap sisältää reagoivan, mobiilin ensimmäisen nesteen ruudukkojärjestelmän, joka skaalautuu asianmukaisesti jopa 12 sarakkeeseen laitteen tai näkymän koon kasvaessa. Se sisältää ennalta määritettyjä luokkia helppoja asetteluvaihtoehtoja varten sekä tehokkaita sekoituksia semanttisten asettelujen luomiseen .

Johdanto

Ruudukkojärjestelmiä käytetään sivuasettelujen luomiseen sisältösi sisältävien rivien ja sarakkeiden avulla. Bootstrap-ruudukkojärjestelmä toimii seuraavasti:

Rivit on sijoitettava .container(kiinteäleveyteen) tai .container-fluid(täysleveyteen) oikeaan kohdistukseen ja täyteen.
Käytä rivejä luodaksesi vaakasuuntaisia sarakeryhmiä.
Sisältö tulee sijoittaa sarakkeiden sisään, ja vain sarakkeet voivat olla rivien välittömiä jälkeläisiä.
Ennalta määritetyt ruudukkoluokat pitävät .rowja .col-xs-4ovat saatavilla ruudukkoasettelujen nopeaan tekemiseen. Vähemmän sekoituksia voidaan käyttää myös semanttisempiin asetteluihin.
Sarakkeet luovat kourut (raot sarakkeiden sisällön välillä) kautta padding. Tämä täyte siirretään ensimmäisen ja viimeisen sarakkeen riveillä negatiivisen marginaalin kautta .rows:ssä.
Negatiivinen marginaali johtuu siitä, että alla olevat esimerkit on vanhentunut. Se on niin, että ruudukon sarakkeiden sisältö on rivissä muun kuin ruudukon sisällön kanssa.
Ruudukkosarakkeet luodaan määrittämällä kahdentoista käytettävissä olevan sarakkeen lukumäärä, jotka haluat kattaa. Esimerkiksi kolme yhtä suurta saraketta käyttäisi kolmea .col-xs-4.
Jos yhdelle riville sijoitetaan enemmän kuin 12 saraketta, jokainen ylimääräisten sarakkeiden ryhmä rivittyy yhtenä yksikkönä uudelle riville.
Ruudukkoluokat koskevat laitteita, joiden näytön leveys on suurempi tai yhtä suuri kuin keskeytyspisteiden koot, ja ohittavat pienempiin laitteisiin kohdistetut ruudukkoluokat. Siksi esim. minkä tahansa .col-md-*luokan soveltaminen elementtiin ei vaikuta vain sen tyyliin keskikokoisilla laitteilla, vaan myös suurilla laitteilla, jos .col-lg-*luokkaa ei ole.

Katso esimerkkejä näiden periaatteiden soveltamisesta koodiisi.

Mediakyselyt

Käytämme seuraavia mediakyselyitä Less-tiedostoissamme luodaksemme ruudukkojärjestelmämme keskeiset keskeytyskohdat.

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

Laajennamme ajoittain näitä mediakyselyitä sisältämään a max-widthrajoittaaksemme CSS:n kapeampaan joukkoon laitteita.

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

Ruudukkovaihtoehdot

Katso kätevästä taulukosta, miten Bootstrap-grid-järjestelmän osat toimivat useissa laitteissa.

	Erittäin pienet laitteet Puhelimet (<768px)	Pienet laitteet Tabletit (≥768px)	Keskikokoiset laitteet, pöytäkoneet (≥ 992 kuvapistettä)	Suuret laitteet Pöytäkoneet (≥1200px)
Verkon käyttäytyminen	Vaakasuora koko ajan	Alkuun tiivistetty, vaakasuora keskeytyspisteiden yläpuolella
Säiliön leveys	Ei mitään (automaattinen)	750 pikseliä	970 pikseliä	1170 pikseliä
Luokan etuliite	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# sarakkeita	12
Sarakkeen leveys	Auto	~62px	~81px	~97px
Kourujen leveys	30 kuvapistettä (15 kuvapistettä sarakkeen kummallakin puolella)
Pesimäinen	Joo
Offsetit	Joo
Sarakkeiden järjestys	Joo

Esimerkki: Pinottu vaakasuoraan

Yhdellä .col-md-*ruudukkoluokilla voit luoda perusruudukkojärjestelmän, joka alkaa pinottuna mobiililaitteissa ja tablet-laitteissa (erittäin pieni ja pieni alue) ennen kuin se muuttuu vaakasuoraksi pöytätietokoneissa (keskikokoisissa) laitteissa. Sijoita ruudukon sarakkeet mihin tahansa .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>

Esimerkki: Nestesäiliö

Muuta mikä tahansa kiinteäleveä ruudukkoasettelu täysleveäksi asetteluksi muuttamalla .containeruloimmaksi .container-fluid.

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

Esimerkki: mobiili ja pöytätietokone

Etkö halua, että sarakkeet vain pinoutuvat pienempiin laitteisiin? Käytä erittäin pieniä ja keskisuuria laiteruudukkoluokkia lisäämällä .col-xs-* .col-md-*sarakkeihisi. Katso alla oleva esimerkki saadaksesi paremman käsityksen siitä, miten se kaikki toimii.

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

Esimerkki: matkapuhelin, tabletti, pöytäkone

Rakenna edelliseen esimerkkiin luomalla entistä dynaamisempia ja tehokkaampia asetteluja tablet- .col-sm-*luokkien avulla.

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

Esimerkki: Sarakkeen rivitys

Jos yhdelle riville sijoitetaan enemmän kuin 12 saraketta, jokainen ylimääräisten sarakkeiden ryhmä rivittyy yhtenä yksikkönä uudelle riville.

.col-xs-9

.col-xs-4
Koska 9 + 4 = 13 > 12, tämä 4 sarakkeen levyinen div kääritään uudelle riville yhtenä yhtenäisenä yksikkönä.

.col-xs-6
Seuraavat sarakkeet jatkavat uutta riviä pitkin.

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

Responsiivinen sarake nollautuu

Saatavilla olevien neljän tason ruudukoiden ansiosta kohtaat varmasti ongelmia, joissa tietyissä keskeytyspisteissä sarakkeet eivät tyhjene oikein, koska toinen on toista korkeampi. Korjaa ongelma käyttämällä a:n .clearfixja responsiivisten hyödyllisyysluokkien yhdistelmää .

.col-xs-6 .col-sm-3
Muuta kuvaportin kokoa tai tarkista esimerkki puhelimesta.

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

Responsiivisten keskeytyspisteiden sarakkeen tyhjentämisen lisäksi saatat joutua nollaamaan siirtymät, työnnät tai vedot . Katso tämä toiminnassa ruudukkoesimerkissä .

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

Poista vesikourut

Poista kourut rivistä ja sen sarakkeista .row-no-guttersluokan kanssa.

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

Sarakkeiden offsetointi

Siirrä sarakkeita oikealle .col-md-offset-*luokkien avulla. Nämä luokat lisäävät sarakkeen vasenta marginaalia *sarakkeilla. Esimerkiksi .col-md-offset-4siirtyy .col-md-4neljän sarakkeen yli.

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

Voit myös ohittaa alempien ruudukkotasojen siirtymät .col-*-offset-0luokilla.

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

Sisäkkäiset sarakkeet

Jos haluat upottaa sisältösi oletusruudukkoon, lisää uusi .rowja joukko .col-sm-*sarakkeita olemassa olevaan .col-sm-*sarakkeeseen. Sisäkkäisten rivien tulee sisältää sarja sarakkeita, joiden yhteenlaskettu summa on enintään 12 (kaikkia 12 käytettävissä olevaa saraketta ei vaadita).

Taso 1: .col-sm-9

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

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

Sarakkeiden järjestys

Muuta helposti sisäänrakennettujen ruudukkosarakkeiden järjestystä muokkausluokkien .col-md-push-*ja .col-md-pull-*luokkien avulla.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Vähemmän mixinejä ja muuttujia

Nopeiden asettelujen valmiiksi rakennettujen ruudukkoluokkien lisäksi Bootstrap sisältää Less-muuttujia ja sekoituksia omien yksinkertaisten, semanttisten asettelujen nopeaan luomiseen.

Muuttujat

Muuttujat määrittävät sarakkeiden lukumäärän, kourujen leveyden ja mediakyselypisteen, josta kelluvat sarakkeet alkavat. Käytämme näitä edellä dokumentoitujen ennalta määritettyjen ruudukkoluokkien luomiseen sekä alla lueteltuihin mukautettuihin mixineihin.

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

Seokset

Mixiinejä käytetään yhdessä ruudukkomuuttujien kanssa semanttisen CSS:n luomiseen yksittäisille ruudukon sarakkeille.

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

Käyttöesimerkki

Voit muokata muuttujia omiksi mukautetuiksi arvoihisi tai vain käyttää mixinejä niiden oletusarvojen kanssa. Tässä on esimerkki oletusasetusten käyttämisestä kahden sarakkeen asettelun luomiseen, jossa on väli.

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

Otsikot

Kaikki HTML-otsikot, alkaen , ovat saatavilla <h1>. kautta luokat ovat myös saatavilla, kun haluat sovittaa otsikon kirjasintyyliä, mutta haluat silti tekstisi näkyvän rivissä.<h6>.h1.h6

h1. Bootstrap otsikko	Semibold 36px
h2. Bootstrap otsikko	Semibold 30px
h3. Bootstrap otsikko	Semibold 24px
h4. Bootstrap otsikko	Semibold 18px
h5. Bootstrap otsikko	Semibold 14px
h6. Bootstrap otsikko	Semibold 12px

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

Luo kevyempää, toissijaista tekstiä mihin tahansa otsikkoon yleisellä <small>tunnisteella tai .smallluokalla.

h1. Bootstrap-otsikko Toissijainen teksti

h2. Bootstrap-otsikko Toissijainen teksti

h3. Bootstrap-otsikko Toissijainen teksti

h4. Bootstrap-otsikko Toissijainen teksti

h5. Bootstrap-otsikko Toissijainen teksti

h6. Bootstrap-otsikko Toissijainen teksti

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

Vartalo kopio

Bootstrapin maailmanlaajuinen oletusarvo font-sizeon 14px ja 1,428line-height . Tätä sovelletaan kappaleisiin ja kaikkiin kappaleisiin. Lisäksi (kappaleet) saavat alamarginaalin, joka on puolet niiden lasketusta viivan korkeudesta (oletusarvoisesti 10 kuvapistettä).<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

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

<p>...</p>

Päärunkokopio

Tee kappaleesta erottuva lisäämällä .lead.

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

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

Rakennettu vähemmällä

Typografinen asteikko perustuu kahteen Less-muuttujaan muuttujissa.vähemmän : @font-size-baseja @line-height-base. Ensimmäinen on kauttaaltaan käytetty perusfontin koko ja toinen on perusviivan korkeus. Käytämme näitä muuttujia ja yksinkertaista matematiikkaa kaikentyyppisten marginaalien, täytteiden ja rivinkorkeuksien luomiseen ja paljon muuta. Mukauta niitä ja Bootstrap mukautuu.

Upotetut tekstielementit

Merkitty teksti

<mark>Käytä tunnistetta , jos haluat korostaa tekstisarjaa sen merkityksen vuoksi toisessa kontekstissa .

Voit käyttää merkkitunnistettakohokohtateksti.

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

Poistettu teksti

<del>Käytä tunnistetta poistettujen tekstilohkojen osoittamiseen .

~~Tätä tekstiriviä on tarkoitus käsitellä poistettuna tekstinä.~~

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

Yliviivattu teksti

<s>Käytä tunnistetta osoittaaksesi tekstilohkot, jotka eivät ole enää merkityksellisiä .

~~Tätä tekstiriviä on tarkoitus käsitellä epätarkana.~~

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

Lisätty teksti

Käytä <ins>tunnistetta asiakirjan lisäysten ilmoittamiseen.

Tätä tekstiriviä on tarkoitus käsitellä asiakirjan lisäyksenä.

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

Alleviivattu teksti

Käytä <u>tunnistetta alleviivataksesi tekstiä.

Tämä tekstirivi hahmonnetaan alleviivatuksi

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

Hyödynnä HTML:n oletuskorostustunnisteita kevyillä tyyleillä.

Pieni teksti

Jos haluat vähentää tekstin sisäistä tai tekstilohkoja, käytä <small>-tunnistetta asettaaksesi tekstin 85 % ylätason koosta. Otsikkoelementit saavat omansa font-sizesisäkkäisille <small>elementeille.

Voit vaihtoehtoisesti käyttää tekstin sisäistä elementtiä minkä .smalltahansa <small>.

Tätä tekstiriviä on tarkoitus käsitellä pienellä tekstillä.

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

Lihavoitu

Tekstinpätkän korostamiseen raskaammalla fonttipainolla.

Seuraava tekstinpätkä hahmonnetaan lihavoituna .

<strong>rendered as bold text</strong>

Kursivointi

Tekstinpätkän korostamiseen kursiivilla.

Seuraava tekstinpätkä esitetään kursivoituna .

<em>rendered as italicized text</em>

Vaihtoehtoiset elementit

Voit vapaasti käyttää <b>ja <i>HTML5:ssä. <b>on tarkoitettu korostamaan sanoja tai lauseita antamatta lisätärkeyttä, kun taas <i>se on enimmäkseen puhetta, teknisiä termejä jne.

Tasausluokat

Tasaa teksti helposti komponenteiksi tekstin tasausluokkien avulla.

Vasemmalle tasattu teksti.

Keskitasattu teksti.

Oikealle tasattu teksti.

Perusteltu teksti.

Ei rivitystekstiä.

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

Muutosluokat

Muunna teksti komponenteiksi tekstin isojen kirjainten luokilla.

Pienet kirjaimet.

Teksti isoilla kirjaimilla.

Isokokoinen teksti.

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

Lyhenteet

HTML-elementin tyylitelty toteutus <abbr>lyhenteille ja lyhenteille, jotta laajennettu versio näytetään. Attribuutilla varustetuilla lyhenteillä titleon vaalea pisteviiva alareuna ja ohjekohdistin osoittimen ollessa päällä, mikä tarjoaa lisäkontekstia osoittimen päällä ja avustavien tekniikoiden käyttäjille.

Peruslyhenne

Sanan attribuutti lyhenne on attr .

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

Initialismi

Lisää .initialismlyhenteeseen hieman pienemmän fontin koon saamiseksi.

HTML on parasta sitten viipaloidun leivän.

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

Osoitteet

Esitä lähimmän esi-isän tai koko työn yhteystiedot. Säilytä muotoilu päättämällä kaikki rivit -merkkiin <br>.

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

Koko nimi
[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>

Lohkolainaukset

Toisesta lähteestä peräisin olevien sisältölohkojen lainaamiseen dokumentissasi.

Oletuslainaus

Kääri lainauksena <blockquote>minkä tahansa HTML -koodin ympärille. Suorille lainauksille suosittelemme <p>.

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

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

Blockquote-vaihtoehdot

Tyyli- ja sisältömuutoksia yksinkertaisia muunnelmia varten standardista <blockquote>.

Lähteen nimeäminen

Lisää a <footer>lähteen tunnistamiseksi. Kääri lähdeteoksen nimi muotoon <cite>.

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

Joku kuuluisa lähdeotsikossa

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

Vaihtoehtoiset näytöt

Lisää .blockquote-reverselohkolainaus, jonka sisältö on tasattu oikealle.

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

Joku kuuluisa lähdeotsikossa

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

Luettelot

Tilaamaton

Luettelo kohteista, joissa järjestyksellä ei ole nimenomaista merkitystä.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Kokonaisluku molestie lorem ja 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>

Tilattu

Luettelo kohteista, joissa järjestyksellä on nimenomaisesti väliä.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Kokonaisluku molestie lorem ja 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>

Tyylitön

Poista oletus- list-styleja vasen marginaali luettelokohteista (vain välittömät alakohdat). Tämä koskee vain välittömiä alatason luettelokohteita , mikä tarkoittaa, että sinun on lisättävä luokka myös kaikille sisäkkäisille luetteloille.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Kokonaisluku molestie lorem ja 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>

Linjassa

Sijoita kaikki luettelon kohteet yhdelle riville display: inline-block;kevyellä pehmusteella.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Kuvaus

Luettelo termeistä ja niihin liittyvät kuvaukset.

Kuvausluettelot: Kuvausluettelo on täydellinen termien määrittelyyn.
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>

Vaakasuuntainen kuvaus

Aseta termit ja kuvaukset <dl>riviin vierekkäin. Alkaa pinottuna oletusarvoisesti <dl>, mutta kun navigointipalkki laajenee, tee myös nämä.

Kuvausluettelot: Kuvausluettelo on täydellinen termien määrittelyyn.
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>

Automaattinen katkaisu

Vaakasuuntaiset kuvausluettelot lyhentävät termit, jotka ovat liian pitkiä mahtumaan vasempaan sarakkeeseen text-overflow. Kapeammissa näkymäporteissa ne muuttuvat oletusarvoiseksi pinotuksi asetteluksi.

Linjassa

Kääri tekstin sisäiset koodinpätkät <code>.

Esimerkiksi <section>pitäisi kääriä riviin.

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

Käyttäjän syöttö

Käytä -näppäintä <kbd>osoittaaksesi syötteen, joka syötetään tavallisesti näppäimistöllä.

Vaihda hakemistoa kirjoittamalla cdja sen jälkeen hakemiston nimi.
Muokkaa asetuksia painamalla 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>

Peruslohko

Käytä <pre>useille koodiriveille. Muista jättää koodin kulmasulkeet pois oikeasta renderöinnista.

<p>Esiteksti tässä...</p>

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

Voit halutessasi lisätä .pre-scrollableluokan, joka asettaa enimmäiskorkeudeksi 350 pikseliä ja tarjoaa y-akselin vierityspalkin.

Muuttujat

Käytä muuttujien osoittamiseen <var>tagia.

y = m x + b

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

Näytetulostus

<samp>Käytä tunnistetta lohkojen osoittamiseen ohjelman näytetulosteesta .

Tätä tekstiä on tarkoitus käsitellä tietokoneohjelman esimerkkitulosteena.

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

Perusesimerkki

Perustyyliä varten – kevyt pehmuste ja vain vaakasuuntaiset jakajat – lisää perusluokka .tablemihin tahansa <table>. Se voi tuntua erittäin tarpeettomalta, mutta koska taulukot ovat laajalti käytössä muissa laajennuksissa, kuten kalentereissa ja päivämäärävalitsimissa, olemme päättäneet eristää mukautetut taulukkotyylimme.

Valinnainen taulukon kuvateksti.
#	Etunimi	Sukunimi	Käyttäjätunnus
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

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

Raidalliset rivit

Käytä .table-stripedlisätäksesi seepraraidan mille tahansa taulukon riville <tbody>.

Selainten välinen yhteensopivuus

Raidalliset taulukot muotoillaan :nth-childCSS-valitsimella, joka ei ole käytettävissä Internet Explorer 8:ssa.

#	Etunimi	Sukunimi	Käyttäjätunnus
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

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

Reunattu pöytä

Lisää .table-borderedreunuksia varten taulukon ja solujen kaikilla puolilla.

#	Etunimi	Sukunimi	Käyttäjätunnus
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

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

Vie hiiri rivit

Lisää .table-hoverottaaksesi hiiritilan käyttöön taulukon riveillä <tbody>.

#	Etunimi	Sukunimi	Käyttäjätunnus
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

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

Tiivistetty pöytä

Lisää .table-condensedtehdäksesi pöydistä tiiviimpiä leikkaamalla solupehmuste puoliksi.

#	Etunimi	Sukunimi	Käyttäjätunnus
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

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

Kontekstuaaliset luokat

Käytä kontekstuaalisia luokkia taulukon rivien tai yksittäisten solujen värittämiseen.

Luokka	Kuvaus
`.active`	Käyttää hiiriväriä tietylle riville tai solulle
`.success`	Osoittaa onnistuneen tai positiivisen toimenpiteen
`.info`	Ilmaisee neutraalia informatiivista muutosta tai toimintaa
`.warning`	Osoittaa varoituksen, joka saattaa vaatia huomiota
`.danger`	Osoittaa vaarallista tai mahdollisesti negatiivista toimintaa

#	Sarakkeen otsikko	Sarakkeen otsikko	Sarakkeen otsikko
1	Sarakkeen sisältö	Sarakkeen sisältö	Sarakkeen sisältö
2	Sarakkeen sisältö	Sarakkeen sisältö	Sarakkeen sisältö
3	Sarakkeen sisältö	Sarakkeen sisältö	Sarakkeen sisältö
4	Sarakkeen sisältö	Sarakkeen sisältö	Sarakkeen sisältö
5	Sarakkeen sisältö	Sarakkeen sisältö	Sarakkeen sisältö
6	Sarakkeen sisältö	Sarakkeen sisältö	Sarakkeen sisältö
7	Sarakkeen sisältö	Sarakkeen sisältö	Sarakkeen sisältö
8	Sarakkeen sisältö	Sarakkeen sisältö	Sarakkeen sisältö
9	Sarakkeen sisältö	Sarakkeen sisältö	Sarakkeen sisältö

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

Tarkoituksen välittäminen avustaville tekniikoille

Värien lisääminen merkityksen lisäämiseen taulukon riville tai yksittäiselle solulle antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukuohjelmien, käyttäjille. Varmista, että värillä merkityt tiedot ovat joko ilmeisiä itse sisällöstä (näkyvä teksti asiaankuuluvalla taulukon rivillä/solulla) tai sisällytetään vaihtoehtoisin keinoin, kuten .sr-onlyluokan mukana piilotettuun lisätekstiin.

Responsiiviset taulukot

Luo responsiivisia taulukoita käärimällä ne .table, .table-responsivejotta ne vierivät vaakasuunnassa pienissä laitteissa (alle 768 kuvapistettä). Näissä taulukoissa ei näy mitään eroa, kun katselet kaikkea leveyttä yli 768 pikseliä.

Pystyleikkaus/leikkaus

Responsiivisissa taulukoissa käytetään overflow-y: hidden, joka leikkaa pois kaiken sisällön, joka ylittää taulukon ala- tai yläreunan. Tämä voi erityisesti leikata pois avattavat valikot ja muut kolmannen osapuolen widgetit.

Firefox ja kenttäjoukot

Firefoxissa on hankala kenttätyyli, widthjoka häiritsee reagoivaa taulukkoa. Tätä ei voi ohittaa ilman Firefox-spesifistä hakkerointia, jota emme tarjoa Bootstrapissa:

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

Saat lisätietoja lukemalla tämän Stack Overflow -vastauksen .

#	Taulukon otsikko	Taulukon otsikko	Taulukon otsikko	Taulukon otsikko	Taulukon otsikko	Taulukon otsikko
1	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu
2	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu
3	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu

#	Taulukon otsikko	Taulukon otsikko	Taulukon otsikko	Taulukon otsikko	Taulukon otsikko	Taulukon otsikko
1	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu
2	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu
3	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu

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

Perusesimerkki

Yksittäiset lomakeohjaimet saavat automaattisesti yleisen tyylin. Kaikki tekstilliset <input>, <textarea>, ja <select>elementit, joissa .form-controlon width: 100%;oletusarvo. Kääri tarrat ja säätimet .form-groupoptimaalisen välin saavuttamiseksi.

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

Älä sekoita lomakeryhmiä syöteryhmiin

Älä sekoita lomakeryhmiä suoraan syöttöryhmiin . Sisällytä sen sijaan syöttöryhmä lomakeryhmän sisään.

Sisäänrakennettu lomake

Lisää .form-inlinelomakkeeseen (jonka ei tarvitse olla <form>) vasemmalle tasattuja ja rivin sisäisiä lohkosäätimiä varten. Tämä koskee vain lomakkeita näkymäporteissa, joiden leveys on vähintään 768 kuvapistettä.

Saattaa vaatia mukautettuja leveyksiä

Syöttöt ja valinnat ovat width: 100%;oletuksena käytössä Bootstrapissa. Upotetuissa lomakkeissa nollaamme sen width: auto;niin, että useita ohjausobjekteja voi olla samalla rivillä. Asettelustasi riippuen voidaan tarvita lisää mukautettuja leveyksiä.

Lisää aina tarrat

Näytönlukuohjelmilla on ongelmia lomakkeiden kanssa, jos et lisää tunnistetta jokaiselle syötteelle. Voit piilottaa näiden sisäisten lomakkeiden tarrat .sr-onlyluokan avulla. On olemassa muita vaihtoehtoisia menetelmiä, joilla voidaan antaa nimike aputekniikoille, kuten aria-label, aria-labelledbytai titleattribuutti. Jos mitään näistä ei ole, näytönlukuohjelmat voivat turvautua placeholderattribuutin käyttöön, jos se on olemassa, mutta huomaa, että attribuutin käyttäminen placeholdermuiden merkintämenetelmien korvikkeena ei ole suositeltavaa.

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

Vaakasuora muoto

Käytä Bootstrapin ennalta määritettyjä ruudukkoluokkia kohdistaaksesi tunnisteet ja lomakesäätimien ryhmät vaakasuuntaisessa asettelussa lisäämällä .form-horizontallomakkeeseen (jonka ei tarvitse olla <form>). Tämä muuttaa .form-groups käyttäytymään ruudukon riveinä, joten .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>

Tuetut säätimet

Esimerkkejä vakiolomakkeen ohjausobjekteista, joita tuetaan esimerkkilomakkeen asettelussa.

Tulot

Yleisimmät lomakehallinta, tekstipohjaiset syöttökentät. Sisältää tuen kaikille HTML5-tyypeille: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ja color.

Tyyppiilmoitus vaaditaan

Syötteet ovat täysin tyyliteltyjä, jos ne typeon ilmoitettu oikein.

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

Syöteryhmät

Jos haluat lisätä integroitua tekstiä tai painikkeita ennen ja/tai jälkeen mitä tahansa tekstipohjaista <input>, tarkista syöttöryhmäkomponentti .

Textarea

Lomakkeen ohjaus, joka tukee useita tekstirivejä. Muuta rowsattribuuttia tarpeen mukaan.

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

Valintaruudut ja radiot

Valintaruuduilla voit valita yhden tai useamman vaihtoehdon luettelosta, kun taas radiot ovat yhden vaihtoehdon valitsemiseen monista.

Poistettuja valintaruutuja ja radioita tuetaan, mutta jos haluat asettaa "ei sallittu" kohdistimen ylätason kohdalle <label>, sinun on lisättävä .disabledluokka ylätason ryhmään .radio, .radio-inline, .checkbox, tai .checkbox-inline.

Oletus (pinottu)

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

Sisäänrakennetut valintaruudut ja radiot

Käytä .checkbox-inlinetai .radio-inlineluokkia valintaruutujen tai radioiden sarjassa ohjaimille, jotka näkyvät samalla rivillä.

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

Valintaruudut ja radiot ilman tarratekstiä

Jos kentässä ei ole tekstiä <label>, syöttö sijoitetaan odotetulla tavalla. Tällä hetkellä toimii vain ei-inline-valintaruuduissa ja radioissa. Muista silti antaa jonkinlainen etiketti aputekniikoille (esimerkiksi käyttämällä 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>

Valitsee

Huomaa, että monissa alkuperäisissä valikoissa – erityisesti Safarissa ja Chromessa – on pyöristetyt kulmat, joita ei voi muokata border-radiusominaisuuksien kautta.

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

Attribuutilla <select>varustetuissa ohjaimissa multiplenäytetään oletuksena useita vaihtoehtoja.

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

Staattinen ohjaus

Kun haluat sijoittaa pelkkää tekstiä lomakkeen lomaketunnisteen viereen, käytä .form-control-staticluokkaa <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>

Tarkennustila

Poistamme oletustyylit outlinejoistakin lomakesäätimistä ja käytämme box-shadowsen tilalle -merkkiä :focus.

Demo`:focus` tila

Yllä oleva esimerkkisyöte käyttää mukautettuja tyylejä dokumentaatiossamme :focustilan osoittamiseen .form-control.

Pois käytöstä

Lisää disabledlooginen attribuutti syötteeseen käyttäjien vuorovaikutuksen estämiseksi. Käytöstä poistetut tulot näyttävät vaaleammilta ja lisäävät not-allowedkohdistimen.

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

Poistetut kenttäjoukot

Lisää disabledattribuutti kohtaan a <fieldset>poistaaksesi kaikki ohjaimet <fieldset>kerralla käytöstä.

Varoitus linkin toimivuudesta`<a>`

Selaimet käsittelevät oletusarvoisesti kaikkia alkuperäisiä lomakesäätimiä ( ja <input>elementtejä ) a:n sisällä poistettuina, mikä estää sekä näppäimistön että hiiren käytön. Jos lomakkeessasi on kuitenkin myös elementtejä, niille annetaan vain tyyli . Kuten painikkeiden käytöstä poistamista koskevassa osiossa (ja erityisesti ankkurielementtien alaosiossa) todettiin, tätä CSS-ominaisuutta ei ole vielä standardoitu, eikä sitä tueta täysin Opera 18:ssa ja sitä vanhemmissa versioissa tai Internet Explorer 11:ssä, ja se voitti. Älä estä näppäimistön käyttäjiä keskittymästä tai aktivoimasta näitä linkkejä. Joten varmuuden vuoksi poista tällaiset linkit käytöstä mukautetulla JavaScriptillä.<select><button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Selainten välinen yhteensopivuus

Vaikka Bootstrap käyttää näitä tyylejä kaikissa selaimissa, Internet Explorer 11 ja sitä vanhemmat versiot eivät täysin tue disabledmääritettä <fieldset>. Käytä mukautettua JavaScriptiä poistaaksesi kenttäjoukon käytöstä näissä selaimissa.

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

Vain luku -tila

Lisää readonlysyötteeseen boolean-attribuutti estääksesi syötteen arvon muuttamisen. Vain luku -tulot näyttävät vaaleammilta (kuten käytöstä poistetut tulot), mutta säilyttävät vakiokohdistimen.

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

Ohjeteksti

Lohkotason ohjeteksti lomakehallintaan.

Ohjetekstin liittäminen lomakkeen ohjaimiin

Ohjetekstin tulee olla nimenomaisesti liitetty lomakkeen ohjausobjektiin, johon se liittyy aria-describedbymääritteen käyttöön. Näin varmistetaan, että aputekniikat – kuten näytönlukijat – ilmoittavat tämän ohjetekstin, kun käyttäjä tarkentaa tai siirtyy ohjaukseen.

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

Validointitilat

Bootstrap sisältää validointityylejä virhe-, varoitus- ja onnistumistiloihin lomakkeen ohjausobjekteissa. Jos haluat käyttää, lisää .has-warning, .has-error, tai .has-successpääelementtiin. Kaikki .control-label, .form-control, ja .help-blockkyseisessä elementissä saavat vahvistustyylit.

Validointitilan välittäminen avustaville teknologioille ja värisokeille käyttäjille

Näiden vahvistustyylien käyttäminen lomakkeen ohjausobjektin tilan ilmaisemiseen tarjoaa vain visuaalisen, väripohjaisen osoituksen, jota ei välitetä avustavien tekniikoiden käyttäjille - kuten näytönlukuohjelmille - tai värisokeille käyttäjille.

Varmista, että myös vaihtoehtoinen tilatieto annetaan. Voit esimerkiksi sisällyttää vihjeen tilasta itse lomakeohjausobjektin <label>tekstiin (kuten seuraavassa koodiesimerkissä), sisällyttää Glyphiconin (sopivalla vaihtoehtoisella tekstillä .sr-onlyluokkaa käyttämällä - katso Glyphicon-esimerkit ) tai antamalla lisäohjetekstilohko . _ Erityisesti aputekniikoita varten voidaan määrittää myös virheellisiä aria-invalid="true"lomakeohjausobjekteja.

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

Valinnaisilla kuvakkeilla

Voit myös lisätä valinnaisia palautekuvakkeita lisäämällä .has-feedbackja oikean kuvakkeen.

Palautekuvakkeet toimivat vain tekstielementtien kanssa <input class="form-control">.

Kuvakkeet, tarrat ja syöttöryhmät

Palautekuvakkeiden manuaalinen sijoittaminen vaaditaan syötteille, joissa ei ole etikettiä, ja tuloryhmille, joissa on lisäosa oikealla. Kannustamme sinua tarjoamaan tunnisteet kaikille syötteille esteettömyyssyistä. Jos haluat estää tarrojen näyttämisen, piilota ne .sr-onlyluokasta. Jos sinun täytyy tehdä ilman tarroja, säädä toppalautekuvakkeen arvoa. Syöteryhmissä säädä rightarvo sopivaksi pikseliarvoksi lisäosan leveyden mukaan.

Ikonin merkityksen välittäminen avustaville tekniikoille

Sen varmistamiseksi, että aputekniikat – kuten näytönlukuohjelmat – välittävät kuvakkeen merkityksen oikein, .sr-onlyluokkaan tulee sisällyttää ylimääräistä piilotekstiä ja liittää nimenomaisesti lomakkeen ohjaukseen, johon se liittyy aria-describedby. Vaihtoehtoisesti varmista, että merkitys (esimerkiksi se, että tietyssä tekstikentässä on varoitus) välitetään jossain muussa muodossa, esimerkiksi muuttamalla varsinaisen tekstin tekstiä.<label> lomakkeen ohjaukseen liittyvän todellisen tekstin muuttaminen.

Vaikka seuraavissa esimerkeissä mainitaan jo vastaavien muotosäätimien vahvistustila <label>itse tekstissä, yllä oleva tekniikka (käyttäen .sr-onlytekstiä ja aria-describedby) on sisällytetty havainnollistamistarkoituksessa.

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

Valinnaiset kuvakkeet vaaka- ja rivimuotoisissa muodoissa

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

Valinnaiset kuvakkeet piilotetuilla `.sr-only`tarroilla

Jos käytät .sr-onlyluokkaa piilottaaksesi lomakeohjausobjektin <label>(sen sijaan, että käytät muita merkintävaihtoehtoja, kuten aria-labelattribuuttia), Bootstrap säätää automaattisesti kuvakkeen sijaintia, kun se on lisätty.

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

Hallitse kokoa

Aseta korkeudet käyttämällä luokkia, kuten .input-lg, ja aseta leveydet käyttämällä ruudukon sarakeluokkia, kuten .col-lg-*.

Korkeuden mitoitus

Luo korkeampia tai lyhyempiä lomakesäätimiä, jotka vastaavat painikkeiden kokoa.

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

Vaakamuotoiset ryhmäkoot

Kokoa nopeasti tarrat ja lomakeohjaimet .form-horizontallisäämällä .form-group-lgtai .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>

Sarakkeen mitoitus

Kääri syötteet ruudukon sarakkeisiin tai mihin tahansa mukautettuun pääelementtiin, jotta halutut leveydet saadaan voimaan helposti.

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

Painikkeiden tunnisteet

<a>Käytä , <button>, tai <input>elementin painikeluokkia .

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

Kontekstikohtainen käyttö

Vaikka painikeluokkia voidaan käyttää elementeissä, navigointi- ja navigointipalkkikomponenteissamme tuetaan vain <a>elementtejä .<button><button>

Linkit toimivat painikkeina

Jos <a>elementtejä käytetään painikkeina – käynnistämään sivun sisäisiä toimintoja sen sijaan, että navigoisivat toiseen asiakirjaan tai osioon nykyisellä sivulla – niille tulee myös antaa asianmukainen role="button".

Selaimien välinen renderöinti

Parhaana käytäntönä suosittelemme <button>elementin käyttöä aina kun mahdollista , jotta varmistetaan yhteensopivuus eri selaimissa.

Muun muassa Firefoxissa <30 on virhe,line-height joka estää meitä asettamasta <input>-pohjaisia painikkeita, jolloin ne eivät täsmää vastaa muiden Firefoxin painikkeiden korkeutta.

Vaihtoehdot

Käytä mitä tahansa käytettävissä olevista painikeluokista luodaksesi nopeasti tyylitellyn painikkeen.

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

Tarkoituksen välittäminen avustaville tekniikoille

Värien käyttö painikkeen merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (painikkeen näkyvä teksti) tai sisällytetään vaihtoehtoisilla tavoilla, kuten .sr-onlyluokan mukana piilotettu lisäteksti.

Koot

Haluatko suurempia vai pienempiä painikkeita? Lisää .btn-lg, .btn-sm, tai .btn-xslisäkokoja varten.

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

Luo lohkotason painikkeita – sellaisia, jotka kattavat ylätason koko leveyden – lisäämällä .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>

Aktiivinen tila

Painikkeet näkyvät painettuna (tummempi tausta, tummempi reunus ja upotettu varjo), kun ne ovat aktiivisia. Elementeille <button>tämä tehdään kautta :active. <a>Elementtien osalta se tehdään käyttämällä .active. Voit kuitenkin käyttää .actives:ssä <button>(ja sisällyttää aria-pressed="true"attribuutin), jos sinun on kopioitava aktiivinen tila ohjelmallisesti.

Painikeelementti

Ei tarvitse lisätä :active, koska se on pseudoluokka, mutta jos haluat pakottaa saman ulkonäön, mene eteenpäin ja lisää .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>

Ankkuri elementti

Lisää .activeluokka <a>painikkeisiin.

Ensisijainen linkki Linkki

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

Pois käytöstä

Saat painikkeet näyttämään napsauttamattomilta häivyttämällä ne takaisin -painikkeella opacity.

Painikeelementti

Lisää disabledattribuutti <button>painikkeisiin.

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

Selainten välinen yhteensopivuus

Jos lisäät disabledattribuutin määritteeseen <button>, Internet Explorer 9 ja sitä vanhemmat versiot tekevät tekstistä harmaata ja ikäviä tekstivarjoja, joita emme voi korjata.

Ankkuri elementti

Lisää .disabledluokka <a>painikkeisiin.

Ensisijainen linkki Linkki

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

Käytämme .disabledtässä hyödyllisyysluokkana, joka on samanlainen kuin yleinen .activeluokka, joten etuliitettä ei vaadita.

Varoitus linkin toimivuudesta

Tämä luokka pointer-events: noneyrittää poistaa käytöstä <a>s:n linkkitoiminnot, mutta kyseistä CSS-ominaisuutta ei ole vielä standardoitu eikä sitä tueta täysin Opera 18:ssa ja sitä vanhemmissa versioissa tai Internet Explorer 11:ssä. Lisäksi jopa selaimissa, jotka tukevat pointer-events: none, näppäimistöä navigointi pysyy ennallaan, mikä tarkoittaa, että näkevät näppäimistön käyttäjät ja avustavien tekniikoiden käyttäjät voivat edelleen aktivoida nämä linkit. Joten varmuuden vuoksi poista tällaiset linkit käytöstä mukautetulla JavaScriptillä.

Responsiiviset kuvat

Bootstrap 3:n kuvat voidaan tehdä responsiivisiksi lisäämällä .img-responsiveluokka. Tämä koskee max-width: 100%;, height: auto;ja display: block;kuvaa niin, että se skaalautuu kauniisti pääelementtiin.

Jos haluat keskittää .img-responsiveluokkaa käyttävät kuvat, .center-blockkäytä .text-center. Katso auttajaluokat -osiosta lisätietoja .center-blockkäytöstä.

SVG-kuvat ja IE 8-10

Internet Explorer 8-10:ssä SVG-kuvat .img-responsiveovat suhteettoman kokoisia. Korjaa tämä lisäämällä width: 100% \9;tarvittaessa. Bootstrap ei käytä tätä automaattisesti, koska se aiheuttaa ongelmia muille kuvamuodoille.

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

Kuvan muodot

Lisää luokkia <img>elementtiin muotoillaksesi kuvia helposti missä tahansa projektissa.

Selainten välinen yhteensopivuus

Muista, että Internet Explorer 8 ei tue pyöristettyjä kulmia.

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

Kontekstuaaliset värit

Välitä merkitys värien avulla kourallisilla painopisteiden hyödyllisyysluokilla. Näitä voidaan soveltaa myös linkkeihin, ja ne tummenevat hiiren päällä aivan kuten oletuslinkityylimme.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Käsittelee spesifisyyttä

Joskus korostusluokkia ei voida käyttää toisen valitsimen ominaisuuden vuoksi. Useimmissa tapauksissa riittävä ratkaisu on kääriä tekstisi <span>luokan kanssa.

Tarkoituksen välittäminen avustaville tekniikoille

Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkityt tiedot ovat joko ilmeisiä itse sisällöstä (kontekstivärejä käytetään vain vahvistamaan tekstissä/merkinnöissä jo olevaa merkitystä) tai sisällytetään vaihtoehtoisilla tavoilla, kuten .sr-onlyluokkaan piilotettu lisäteksti. .

Kontekstuaaliset taustat

Kuten kontekstuaaliset tekstin väriluokat, voit helposti asettaa elementin taustan mihin tahansa kontekstuaaliseen luokkaan. Ankkurikomponentit tummenevat leijuttaessa, aivan kuten tekstiluokat.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Käsittelee spesifisyyttä

Joskus kontekstuaalisia taustaluokkia ei voida käyttää toisen valitsimen erityispiirteiden vuoksi. Joissakin tapauksissa riittävä kiertotapa on kääriä elementin sisältö <div>luokkaan.

Tarkoituksen välittäminen avustaville tekniikoille

Kuten asiayhteyteen perustuvien värien kohdalla, varmista, että kaikki värien kautta välittyneet merkitykset välitetään myös muodossa, joka ei ole pelkästään esitysmuoto.

Sulje kuvake

Käytä yleistä sulkemiskuvaketta sulkeaksesi sisällön, kuten modaalit ja hälytykset.

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

Carets

Käytä merkit osoittamaan pudotusvalikon toimintoja ja suuntaa. Huomaa, että oletusarvo muuttuu automaattisesti pudotusvalikoissa .

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

Nopeat kellukkeet

Kelluuta elementtiä vasemmalle tai oikealle luokan kanssa. !importanton mukana erityisongelmien välttämiseksi. Tunteja voidaan käyttää myös mikseinä.

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

Keskitä sisältölohkot

Aseta elementti arvoon display: blockja keskitä painikkeella margin. Saatavana mixininä ja luokkana.

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

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

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

Clearfix

Tyhjennä floats helposti lisäämällä .clearfix pääelementtiin . Käyttää Nicolas Gallagherin popularisoimaa micro clearfixiä . Voidaan käyttää myös sekoituksena.

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

Sisällön näyttäminen ja piilottaminen

Pakota elementti näyttämään tai piilottamaan ( mukaan lukien näytönlukuohjelmat ) käyttämällä .showja .hiddenluokkia. Näitä luokkia käytetään !importantvälttämään täsmällisyysristiriidat, aivan kuten pikaliivit . Ne ovat käytettävissä vain lohkotason vaihtamiseen. Niitä voidaan käyttää myös sekoituksina.

.hideon saatavilla, mutta se ei aina vaikuta näytönlukuohjelmiin ja on vanhentunut versiosta 3.0.1. Käytä .hiddentai .sr-onlysen sijaan.

Lisäksi .invisiblevoidaan vaihtaa vain elementin näkyvyyttä, eli sitä displayei muokata ja elementti voi silti vaikuttaa dokumentin kulkuun.

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

Näytönlukija ja näppäimistön navigointisisältö

Piilota elementti kaikille laitteille paitsi näytönlukuohjelmille , joissa on .sr-only. Yhdistä .sr-onlykanssa .sr-only-focusablenäyttääksesi elementin uudelleen, kun se on kohdistettu (esim. vain näppäimistöä käyttävä käyttäjä). Välttämätön esteettömyyskäytäntöjen seuraamiseksi . Voidaan käyttää myös sekoituksina.

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

Kuvan vaihto

Käytä .text-hideluokkaa tai mixinia korvataksesi elementin tekstisisällön taustakuvalla.

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

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

Mobiiliystävällisen kehityksen nopeuttamiseksi käytä näitä hyödyllisyysluokkia sisällön näyttämiseen ja piilottamiseen laitteittain mediakyselyn kautta. Mukana on myös hyödyllisyysluokkia sisällön vaihtamiseksi tulostuksen aikana.

Yritä käyttää niitä rajoitetusti ja vältä täysin eri versioiden luomista samasta sivustosta. Käytä niitä sen sijaan täydentämään kunkin laitteen esitystä.

Saatavilla olevat luokat

Käytä yhtä tai yhdistelmää saatavilla olevista luokista sisällön vaihtamiseen näkymän keskeytyspisteiden välillä.

	Erittäin pienet laitteetPuhelimet (<768px)	Pienet laitteetTabletit (≥ 768 kuvapistettä)	Keskikokoiset laitteetPöytäkoneet (≥ 992 kuvapistettä)	Suuret laitteetPöytäkoneet (≥ 1200 kuvapistettä)
`.visible-xs-*`	Näkyy	Piilotettu	Piilotettu	Piilotettu
`.visible-sm-*`	Piilotettu	Näkyy	Piilotettu	Piilotettu
`.visible-md-*`	Piilotettu	Piilotettu	Näkyy	Piilotettu
`.visible-lg-*`	Piilotettu	Piilotettu	Piilotettu	Näkyy
`.hidden-xs`	Piilotettu	Näkyy	Näkyy	Näkyy
`.hidden-sm`	Näkyy	Piilotettu	Näkyy	Näkyy
`.hidden-md`	Näkyy	Näkyy	Piilotettu	Näkyy
`.hidden-lg`	Näkyy	Näkyy	Näkyy	Piilotettu

Vuodesta 3.2.0 alkaen .visible-*-*kunkin keskeytyskohdan luokkia on kolme muunnelmaa, yksi kullekin displayalla luetellulle CSS-ominaisuusarvolle.

Luokkien ryhmä	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Joten esimerkiksi erittäin pienille ( xs) näytöille käytettävissä olevat .visible-*-*luokat ovat: .visible-xs-block, .visible-xs-inline, ja .visible-xs-inline-block.

Luokat .visible-xs, .visible-sm, .visible-mdja .visible-lgovat myös olemassa, mutta ne ovat vanhentuneet versiosta 3.2.0 alkaen . Ne vastaavat suunnilleen :tä .visible-*-block, lukuun ottamatta muita erikoistapauksia, jotka <table>liittyvät elementtien vaihtamiseen.

Tulosta luokat

Tavallisten responsiivisten luokkien tapaan käytä näitä sisällön vaihtamiseen tulostukseen.

Luokat	Selain	Tulosta
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Piilotettu	Näkyy
`.hidden-print`	Näkyy	Piilotettu

Luokka .visible-printon myös olemassa, mutta se on vanhentunut versiosta 3.2.0. Se on suunnilleen sama kuin .visible-print-block, paitsi jos <table>niihin liittyvät elementit ovat erikoistapauksia.

Testitapaukset

Muuta selaimesi kokoa tai lataa eri laitteille responsiivisia hyödyllisyysluokkia.

Näkyy osoitteessa...

Vihreät valintamerkit osoittavat, että elementti näkyy nykyisessä näkymässäsi.

Erittäin pieni ✔ Näkyy x-smallissa

Pieni ✔ Näkyy pienissä

Keskikokoinen ✔ Näkyy keskitasolla

Suuri ✔ Näkyy suurissa

Erittäin pieni ja pieni ✔ Näkyy x-pienissä ja pienissä

Keskikokoinen ja suuri ✔ Näkyy keskikokoisille ja suurille

Erittäin pieni ja keskikokoinen ✔ Näkyy x-smallissa ja mediumissa

Pienet ja suuret ✔ Näkyy pienille ja suurille

Erittäin pieni ja suuri ✔ Näkyy x-pienissä ja suurissa

Pieni ja keskikokoinen ✔ Näkyy pienille ja keskikokoisille

Piilotettu...

Tässä vihreät valintamerkit osoittavat myös, että elementti on piilotettu nykyisessä näkymässäsi.

Erittäin pieni ✔ Piilotettu x-smallissa

Pieni ✔ Piilotettu pieneen

Keskikokoinen ✔ Piilotettu medialle

Suuri ✔ Piilotettu suurissa

Erittäin pieni ja pieni ✔ Piilotettu x-pienelle ja pienelle

Keskikokoinen ja suuri ✔ Piilotettu keskikokoisille ja suurille

Erittäin pieni ja keskikokoinen ✔ Piilotettu x-smallessa ja mediumissa

Pienet ja suuret ✔ Piilotettu pienille ja suurille

Erittäin pieni ja suuri ✔ Piilotettu x-pienissä ja suurissa

Pieni ja keskikokoinen ✔ Piilotettu pienille ja keskikokoisille

Bootstrapin CSS perustuu Lessiin, esiprosessoriin, jossa on lisätoimintoja, kuten muuttujia, sekoituksia ja toimintoja CSS:n kääntämiseen. Ne, jotka haluavat käyttää lähdekoodia Less-tiedostoja koottujen CSS-tiedostojemme sijaan, voivat hyödyntää lukuisia muuttujia ja sekoituksia, joita käytämme koko kehyksen sisällä.

Grid-muuttujat ja mixinit käsitellään Grid system -osiossa .

Bootstrapin kääntäminen

Bootstrapia voidaan käyttää ainakin kahdella tavalla: käännetyn CSS:n tai lähdetiedoston kanssa Less. Jos haluat kääntää Vähemmän tiedostoja, katso Aloitus-osasta , kuinka kehitysympäristö määritetään suorittamaan tarvittavat komennot.

Kolmannen osapuolen käännöstyökalut voivat toimia Bootstrapin kanssa, mutta ydintiimimme ei tue niitä.

Muuttujat

Muuttujia käytetään koko projektin ajan tapana keskittää ja jakaa yleisesti käytettyjä arvoja, kuten värejä, välilyöntejä tai fonttipinoja. Katso täydellinen erittely mukauttajasta .

värit

Hyödynnä helposti kahta värimallia: harmaasävy ja semanttinen. Harmaasävyvärit tarjoavat nopean pääsyn yleisesti käytettyihin mustan sävyihin, kun taas semanttiset värit sisältävät erilaisia värejä, jotka on määritetty merkityksellisille kontekstuaalisille arvoille.

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

Käytä mitä tahansa näistä värimuuttujista sellaisenaan tai määritä ne uudelleen merkityksellisempiin muuttujiin projektillesi.

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

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

Rakennustelineet

Kourallinen muuttujia, joiden avulla voit mukauttaa nopeasti sivustosi rungon avainelementtejä.

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

Linkit

Muotoile linkkisi helposti oikealla värillä vain yhdellä arvolla.

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

Huomaa, että se @link-hover-colorkäyttää toimintoa, toista mahtavaa Lessin työkalua, luodakseen automaattisesti oikean värin. Voit käyttää darken, lighten, saturateja desaturate.

Typografia

Aseta helposti kirjasintyyppi, tekstin koko, alkuteksti ja paljon muuta muutamalla nopealla muuttujalla. Bootstrap hyödyntää näitä myös helpon typografisen sekoituksen tarjoamiseksi.

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

Kuvakkeet

Kaksi nopeaa muuttujaa kuvakkeiden sijainnin ja tiedostonimien mukauttamiseen.

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

Komponentit

Bootstrapin komponentit käyttävät joitain oletusmuuttujia yleisten arvojen asettamiseen. Tässä ovat yleisimmin käytetyt.

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

Myyjien sekoituksia

Toimittajasekoitukset ovat sekoituksia, jotka auttavat tukemaan useita selaimia sisällyttämällä kaikki asiaankuuluvat toimittajan etuliitteet käännettyyn CSS:ään.

Laatikon mitoitus

Nollaa komponenttien laatikkomalli yhdellä sekoituksella. Katso asiayhteys tästä Mozillan hyödyllisestä artikkelista .

Mixin on vanhentunut versiosta 3.2.0 alkaen Autoprefixerin käyttöönoton myötä. Taaksepäin yhteensopivuuden säilyttämiseksi Bootstrap jatkaa mixinin käyttöä sisäisesti Bootstrap v4:ään asti.

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

Pyöristetyt kulmat

Nykyään kaikki nykyaikaiset selaimet tukevat etuliitteitä sisältämätöntä border-radiusominaisuutta. Sellaisenaan sekoitusta ei ole .border-radius(), mutta Bootstrap sisältää pikakuvakkeet kahden kulman pyöristämiseksi nopeasti objektin tietyllä sivulla.

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

Jos kohdeyleisösi käyttää uusimpia ja parhaimpia selaimia ja laitteita, muista käyttää box-shadowomaisuutta yksinään. Jos tarvitset tukea vanhemmille Android- (pre-v4) ja iOS-laitteille (pre-iOS 5), käytä vanhentunutta-webkit miksausta vaaditun etuliiteen poimimiseen .

Mixin on vanhentunut versiosta 3.1.0, koska Bootstrap ei tue virallisesti vanhentuneita alustoja, jotka eivät tue vakioomaisuutta. Taaksepäin yhteensopivuuden säilyttämiseksi Bootstrap jatkaa mixinin käyttöä sisäisesti Bootstrap v4:ään asti.

Muista käyttää rgba()värejä laatikon varjoissa, jotta ne sulautuvat mahdollisimman saumattomasti taustoihin.

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

Siirtymät

Useita sekoituksia joustavuuden vuoksi. Aseta kaikki siirtymätiedot yhdellä tai määritä tarvittaessa erillinen viive ja kesto.

Mixinit ovat vanhentuneet versiosta 3.2.0 alkaen Autoprefixerin käyttöönoton myötä. Taaksepäin yhteensopivuuden säilyttämiseksi Bootstrap jatkaa mixinien käyttöä sisäisesti Bootstrap v4:ään asti.

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

Muutokset

Pyöritä, skaalaa, käännä (siirrä) tai vinouta mitä tahansa objektia.

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

Animaatiot

Yksi miksaus kaikkien CSS3:n animaatioominaisuuksien käyttämiseen yhdessä ilmoituksessa ja muita mikseejä yksittäisille ominaisuuksille.

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

Peittävyys

Aseta läpinäkyvyys kaikille selaimille ja tarjoa filtervaravaihtoehto IE8:lle.

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

Paikkamerkkiteksti

Anna konteksti lomakkeen ohjausobjekteille kussakin kentässä.

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

Sarakkeet

Luo sarakkeita CSS:n kautta yhdessä elementissä.

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

Gradientit

Muuta helposti mitkä tahansa kaksi väriä taustagradientiksi. Pysy edistyneempänä ja aseta suunta, käytä kolmea väriä tai käytä säteittäistä gradienttia. Yhdellä miksauksella saat kaikki tarvitsemasi etuliiteiset syntaksit.

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

Voit myös määrittää tavallisen kaksivärisen lineaarisen gradientin kulman:

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

Jos tarvitset parturi-raitatyylisen gradientin, sekin on helppoa. Määritä vain yksi väri, niin me peitämme läpikuultavan valkoisen raidan.

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

Nosta ante ja käytä sen sijaan kolmea väriä. Aseta ensimmäinen väri, toinen väri, toisen värin väripysäytys (prosenttiarvo kuten 25 %) ja kolmas väri näillä sekoituksilla:

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

Varoitus! Jos sinun on joskus poistettava gradientti, muista poistaa kaikki filtermahdollisesti lisäämäsi IE-kohtaiset tiedot. Voit tehdä sen käyttämällä .reset-filter()mixinia rinnalla background-image: none;.

Utility mixins

Utility mixins ovat mixinejä, jotka yhdistävät muuten toisiinsa liittymättömiä CSS-ominaisuuksia tietyn tavoitteen tai tehtävän saavuttamiseksi.

Clearfix

Unohda lisääminen class="clearfix"mihin tahansa elementtiin ja lisää sen sijaan .clearfix()mixin tarvittaessa. Käyttää Nicolas Gallagherin micro clearfix -tiedostoa .

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

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

Vaakasuora keskitys

Keskitä mikä tahansa elementti nopeasti sen yläpuolelle. Vaatii widthtai max-widthasetettava.

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

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

Mitoitusapulaiset

Määritä kohteen mitat helpommin.

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

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

Muutettavissa olevat tekstialueet

Määritä helposti minkä tahansa tekstialueen tai minkä tahansa muun elementin koonmuutosasetukset. Oletuksena normaali selaimen toiminta ( both).

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

Tekstin katkaisu

Katkaise tekstiä helposti ellipsillä yhdellä miksauksella. Edellyttää elementin olevan taso blocktai inline-blocktaso.

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

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

Verkkokalvon kuvat

Määritä kaksi kuvapolkua ja @1x-kuvan mitat, niin Bootstrap tarjoaa @2x-mediakyselyn. Jos käytettävissäsi on useita kuvia, harkitse verkkokalvokuvasi CSS:n kirjoittamista manuaalisesti yhteen mediakyselyyn.

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

Vaikka Bootstrap on rakennettu Lessiin, sillä on myös virallinen Sass-portti . Ylläpidämme sitä erillisessä GitHub-arkistossa ja käsittelemme päivitykset muunnosskriptin avulla.

Mitä sisältyy

Koska Sass-portilla on erillinen repo ja se palvelee hieman eri yleisöä, niin projektin sisältö poikkeaa suuresti Bootstrap-pääprojektista. Tämä varmistaa, että Sass-portti on mahdollisimman yhteensopiva mahdollisimman monen Sass-pohjaisen järjestelmän kanssa.

Polku	Kuvaus
`lib/`	Ruby gem -koodi (Sass-kokoonpano, kiskojen ja kompassin integraatiot)
`tasks/`	Muuntajakomentosarjat (muunnos virransäästöstä Sassiksi)
`test/`	Kokoamistestit
`templates/`	Kompassipaketin luettelo
`vendor/assets/`	Sass-, JavaScript- ja fonttitiedostot
`Rakefile`	Sisäiset tehtävät, kuten harava ja muunnos

Vieraile Sass-portin GitHub-arkistossa nähdäksesi nämä tiedostot toiminnassa.

Asennus

Lisätietoja Bootstrap for Sassin asentamisesta ja käytöstä saat GitHub-arkistosta readme . Se on ajantasaisin lähde, ja se sisältää tietoa käytettäväksi Rails-, Compass- ja tavallisten Sass-projektien kanssa.

Bootstrap Sassille

CSS

Yleiskatsaus

HTML5 doctype

Mobiili ensin

Typografia ja linkit

Normalisoi.css

Kontit

Verkkojärjestelmä

Johdanto

Mediakyselyt

Ruudukkovaihtoehdot

Esimerkki: Pinottu vaakasuoraan

Esimerkki: Nestesäiliö

Esimerkki: mobiili ja pöytätietokone

Esimerkki: matkapuhelin, tabletti, pöytäkone

Esimerkki: Sarakkeen rivitys

Responsiivinen sarake nollautuu

Poista vesikourut

Sarakkeiden offsetointi

Sisäkkäiset sarakkeet

Sarakkeiden järjestys

Vähemmän mixinejä ja muuttujia

Muuttujat

Seokset

Käyttöesimerkki

Typografia

Otsikot

h1. Bootstrap otsikko

h2. Bootstrap otsikko

h3. Bootstrap otsikko

h4. Bootstrap otsikko

h5. Bootstrap otsikko

h6. Bootstrap otsikko

h1. Bootstrap-otsikko Toissijainen teksti

h2. Bootstrap-otsikko Toissijainen teksti

h3. Bootstrap-otsikko Toissijainen teksti

h4. Bootstrap-otsikko Toissijainen teksti

h5. Bootstrap-otsikko Toissijainen teksti

h6. Bootstrap-otsikko Toissijainen teksti

Vartalo kopio

Päärunkokopio

Rakennettu vähemmällä

Upotetut tekstielementit

Merkitty teksti

Poistettu teksti

Yliviivattu teksti

Lisätty teksti

Alleviivattu teksti

Pieni teksti

Lihavoitu

Kursivointi

Vaihtoehtoiset elementit

Tasausluokat

Muutosluokat

Lyhenteet

Peruslyhenne

Initialismi

Osoitteet

Lohkolainaukset

Oletuslainaus

Blockquote-vaihtoehdot

Lähteen nimeäminen

Vaihtoehtoiset näytöt

Luettelot

Tilaamaton

Tilattu

Tyylitön

Linjassa

Kuvaus

Vaakasuuntainen kuvaus

Automaattinen katkaisu

Koodi

Linjassa

Käyttäjän syöttö

Peruslohko

Muuttujat

Näytetulostus

Taulukot

Perusesimerkki

Raidalliset rivit

Demo`:focus` tila

Varoitus linkin toimivuudesta`<a>`

Valinnaiset kuvakkeet piilotetuilla `.sr-only`tarroilla