Kynntu þér lykilatriðin í innviðum Bootstrap, þar á meðal nálgun okkar að betri, hraðari og sterkari vefþróun.

HTML5 doctype

Bootstrap notar ákveðna HTML þætti og CSS eiginleika sem krefjast notkunar á HTML5 doctype. Láttu það fylgja með í upphafi allra verkefna þinna.

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

Farsími fyrst

Með Bootstrap 2 bættum við við valkvæðum farsímavænum stílum fyrir lykilþætti rammans. Með Bootstrap 3 höfum við endurskrifað verkefnið til að vera farsímavænt frá upphafi. Í stað þess að bæta við valfrjálsum farsímastílum eru þeir bakaðir beint inn í kjarnann. Reyndar er Bootstrap fyrst fyrir farsíma . Mobile first stíll er að finna um allt bókasafnið í stað þess að vera í aðskildum skrám.

Til að tryggja rétta birtingu og snertiaðdrátt skaltu bæta metamerkinu útsýnisglugga við <head>.

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

Þú getur slökkt á aðdráttargetu í fartækjum með því að bæta user-scalable=novið metamerkið útsýnisglugga. Þetta gerir aðdrætti óvirkt, sem þýðir að notendur geta aðeins flett, og leiðir til þess að vefsvæðið þitt líður aðeins meira eins og innfædd forrit. Á heildina litið mælum við ekki með þessu á hverri síðu, svo farðu varlega!

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

Leturfræði og tenglar

Bootstrap setur helstu alþjóðlega skjámynd, leturfræði og tenglastíla. Nánar tiltekið, við:

Sett background-color: #fff;ábody
Notaðu eiginleikana @font-family-base, @font-size-base, og @line-height-basesem leturfræðigrunn okkar
Stilltu alþjóðlega tengilitinn í gegnum @link-colorog notaðu aðeins undirstrikun tengla á:hover

Þessa stíla er að finna innan scaffolding.less.

Normalize.css

Til að bæta flutning í gegnum vafra notum við Normalize.css , verkefni eftir Nicolas Gallagher og Jonathan Neal .

Gámar

Bootstrap krefst innihaldsefnis til að vefja innihald vefsvæðisins og hýsa netkerfið okkar. Þú getur valið einn af tveimur ílátum til að nota í verkefnum þínum. Athugaðu að vegna paddingog fleira er hvorugt ílátið varpanlegt.

Notað .containerfyrir móttækilegan ílát með fastri breidd.

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

Notaðu .container-fluidfyrir ílát í fullri breidd, sem spannar alla breidd útsýnisgáttarinnar.

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

Bootstrap inniheldur móttækilegt, hreyfanlegt fyrsta vökvakerfi sem stækkar á viðeigandi hátt upp í 12 dálka eftir því sem tækið eða útsýnisgáttin stækkar. Það inniheldur fyrirfram skilgreinda flokka fyrir auðvelda útlitsvalkosti, svo og öflugar blöndur til að búa til merkingarfræðilegri skipulag .

Kynning

Gridkerfi eru notuð til að búa til blaðsíðuútlit í gegnum röð af línum og dálkum sem hýsa efnið þitt. Svona virkar Bootstrap grid kerfið:

Raðir verða að vera í .container(fastri breidd) eða .container-fluid(fullri breidd) fyrir rétta röðun og fyllingu.
Notaðu raðir til að búa til lárétta hópa af dálkum.
Efni ætti að vera sett innan dálka og aðeins dálkar mega vera strax börn raða.
Forskilgreindir töfluflokkar eins .rowog og .col-xs-4eru fáanlegir til að gera töfluuppsetningar fljótt. Einnig er hægt að nota færri blöndun fyrir merkingarlegri uppsetningu.
Dálkar búa til þakrennur (bil á milli innihalds dálka) í gegnum padding. Sú fylling er á móti í röðum fyrir fyrsta og síðasta dálkinn með neikvæðri spássíu á .rows.
Neikvæð framlegð er ástæðan fyrir því að dæmin hér að neðan eru útdregin. Það er þannig að efni innan ristardálka er raðað upp með efni sem ekki er rist.
Grid dálkar eru búnir til með því að tilgreina fjölda tólf tiltækra dálka sem þú vilt spanna. Til dæmis myndu þrír jafnir dálkar nota þrjá .col-xs-4.
Ef fleiri en 12 dálkar eru settir í einni röð mun hver hópur aukadálka, sem ein eining, vefjast inn á nýja línu.
Taflaflokkar eiga við um tæki með skjábreidd stærri en eða jafna brotpunktastærðunum og hnekkja taflaflokkum sem miða að smærri tækjum. Því td að nota hvaða .col-md-*flokk sem er á frumefni mun ekki aðeins hafa áhrif á stíl hans á meðalstórum tækjum heldur einnig á stórum tækjum ef .col-lg-*flokkur er ekki til staðar.

Skoðaðu dæmin til að beita þessum meginreglum á kóðann þinn.

Fyrirspurnir fjölmiðla

Við notum eftirfarandi fjölmiðlafyrirspurnir í Less skránum okkar til að búa til helstu brotpunkta í kerfiskerfinu okkar.

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

Við útvíkkum stundum þessar fjölmiðlafyrirspurnir til að innihalda til max-widthað takmarka CSS við þrengra sett af tækjum.

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

Grid valkostir

Sjáðu hvernig þættir Bootstrap-netkerfisins virka á mörgum tækjum með handhægri töflu.

	Extra lítil tæki Símar (<768px)	Lítil tæki Spjaldtölvur (≥768px)	Meðalstór tæki skjáborð (≥992px)	Stór tæki skjáborð (≥1200px)
Grid hegðun	Lárétt allan tímann	Dregið saman til að byrja, lárétt fyrir ofan brotpunkta
Gámabreidd	Engin (sjálfvirk)	750px	970px	1170px
Bekkjarforskeyti	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# af dálkum	12
Dálkbreidd	Sjálfvirk	~62px	~81px	~97px
Rennur breidd	30px (15px á hvorri hlið dálks)
Hreiðurhæfur	Já
Jöfnun	Já
Dálka röðun	Já

Dæmi: Staflað til lárétts

Með því að nota eitt sett af .col-md-*töfluflokkum geturðu búið til grunnnetkerfi sem byrjar staflað á farsímum og spjaldtölvum (extra lítið til lítið svið) áður en það verður lárétt á borðtölvum (miðlungs) tækjum. Settu ristardálka í hvaða .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>

Dæmi: Vökvaílát

Breyttu hvaða rist sem er með fastri breidd í skipulag í fullri breidd með því að breyta ystu töflunni þinni .containerí .container-fluid.

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

Dæmi: Farsími og skjáborð

Viltu ekki að dálkarnir þínir staflast einfaldlega í smærri tæki? Notaðu aukalega litla og meðalstóra tækjaflokka með því að bæta .col-xs-* .col-md-*við dálkana þína. Sjá dæmið hér að neðan til að fá betri hugmynd um hvernig þetta allt virkar.

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

Dæmi: Farsími, spjaldtölva, borðtölva

Byggðu á fyrra dæmi með því að búa til enn kraftmeiri og öflugri skipulag með spjaldtölvuflokkum .col-sm-*.

.col-xs-12 .col-sm-6 .col-md-8

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

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Dæmi: Dálk umbúðir

Ef fleiri en 12 dálkar eru settir í einni röð mun hver hópur aukadálka, sem ein eining, vefjast inn á nýja línu.

.col-xs-9

.col-xs-4
Þar sem 9 + 4 = 13 > 12, verður þessari 4 dálka breiðu div vafinn inn á nýja línu sem ein samfelld eining.

.col-xs-6
Síðari dálkar halda áfram eftir nýju línunni.

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

Móttækilegur dálkur endurstilltur

Með fjórum stigum af ristum sem eru tiltækar muntu örugglega lenda í vandamálum þar sem dálkarnir þínir hreinsast ekki alveg rétt á vissum brotastöðum þar sem einn er hærri en hinn. Til að laga það skaltu nota blöndu af a .clearfixog móttækilegum tólum okkar .

.col-xs-6 .col-sm-3 Breyttu
stærð útsýnisgluggans eða skoðaðu það í símanum þínum sem dæmi.

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

Auk dálkahreinsunar á móttækilegum brotastöðum gætirðu þurft að endurstilla frávik, ýta eða draga . Sjáðu þetta í aðgerð í töfludæminu .

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

Á móti dálkum

Færðu dálka til hægri með því að nota .col-md-offset-*flokka. Þessir flokkar auka vinstri spássíu dálks með *dálkum. Til dæmis .col-md-offset-4færist .col-md-4yfir fjóra dálka.

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

Þú getur líka hnekið frávikum frá lægri töfluþrepum með .col-*-offset-0flokkum.

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

Hreiður súlur

Til að hreiðra efnið þitt með sjálfgefna hnitanetinu skaltu bæta við nýjum .rowog setti .col-sm-*dálka innan núverandi .col-sm-*dálks. Hreiður línur ættu að innihalda sett af dálkum sem eru allt að 12 eða færri (það er ekki krafist að þú notir alla 12 tiltæka dálka).

Stig 1: .col-sm-9

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

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

Dálka röðun

Breyttu auðveldlega röðinni á innbyggðu ristardálkunum okkar með .col-md-push-*og .col-md-pull-*breytiflokkum.

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

Minni blöndun og breytur

Til viðbótar við forbyggða grid flokka fyrir hröð skipulag, inniheldur Bootstrap færri breytur og blöndun til að búa til þína eigin einföldu merkingarlegu útlit.

Breytur

Breytur ákvarða fjölda dálka, breidd þakrennunnar og miðilsfyrirspurnarpunktinn þar sem fljótandi dálkar hefjast. Við notum þetta til að búa til fyrirfram skilgreinda töfluflokka sem eru skjalfestir hér að ofan, sem og fyrir sérsniðnu blöndurnar sem taldar eru upp hér að neðan.

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

Mixins

Mixin eru notuð í tengslum við grid breytur til að búa til merkingarlega CSS fyrir einstaka rist dálka.

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

Dæmi um notkun

Þú getur breytt breytunum í eigin sérsniðin gildi, eða bara notað mixin með sjálfgefnum gildum. Hér er dæmi um að nota sjálfgefnar stillingar til að búa til tveggja dálka skipulag með bili á milli.

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

Fyrirsagnir

Allar HTML fyrirsagnir, <h1>í gegnum <h6>, eru fáanlegar. .h1gegnum .h6flokkar eru einnig fáanlegir, fyrir þegar þú vilt passa við leturgerð fyrirsagnar en vilt samt að textinn þinn sé birtur í línu.

h1. Bootstrap fyrirsögn	Hálfletur 36px
h2. Bootstrap fyrirsögn	Hálffjört 30px
h3. Bootstrap fyrirsögn	Hálfletur 24px
h4. Bootstrap fyrirsögn	Hálfletur 18px
h5. Bootstrap fyrirsögn	Hálfletur 14px
h6. Bootstrap fyrirsögn	Hálfletur 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>

Búðu til léttari aukatexta í hvaða fyrirsögn sem er með almennu <small>merki eða .smallbekknum.

h1. Bootstrap fyrirsögn Aukatexti

h2. Bootstrap fyrirsögn Aukatexti

h3. Bootstrap fyrirsögn Aukatexti

h4. Bootstrap fyrirsögn Aukatexti

h5. Bootstrap fyrirsögn Aukatexti

h6. Bootstrap fyrirsögn Aukatexti

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

Líkamsafrit

Alheims sjálfgefið sjálfgefið font-sizeer 14pxline-height , með 1.428 . Þetta á við um <body>og allar málsgreinar. Að auki <p>fá (málsgreinar) neðri spássíu sem nemur helmingi reiknaðrar línuhæðar (10px sjálfgefið).

Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til. Nullam id dolor id nibh ultricies vehicula.

Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til. 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>

Afrit af blýlíkam

Láttu málsgrein skera sig úr með því að bæta við .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor uppboðsmaður. Duis mollis, est non commodo luctus.

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

Byggt með minna

Leturfræðikvarðinn byggir á tveimur Minni breytum í variables.less : @font-size-baseog @line-height-base. Sú fyrri er grunnleturstærðin sem notuð er í gegn og sú seinni er grunnlínuhæðin. Við notum þessar breytur og einfalda stærðfræði til að búa til spássíur, fyllingar og línuhæðir af öllum gerðum okkar og fleira. Sérsníddu þá og Bootstrap aðlagar sig.

Innbyggðir textaþættir

Merktur texti

<mark>Notaðu merkið til að auðkenna run af texta vegna mikilvægis hans í öðru samhengi .

Þú getur notað merkið til aðhápunkturtexti.

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

Texti eytt

<del>Notaðu merkið til að gefa til kynna textablokkir sem hafa verið eytt .

~~Þessari textalínu er ætlað að meðhöndla sem eytt texta.~~

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

Yfirstrikaður texti

<s>Notaðu merkið til að gefa til kynna textablokkir sem eiga ekki lengur við .

~~Þessi textalína er ætlað að vera meðhöndluð sem ekki lengur nákvæm.~~

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

Texti settur inn

<ins>Notaðu merkið til að gefa til kynna viðbætur við skjalið .

Þessari textalínu er ætlað að meðhöndla sem viðbót við skjalið.

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

Undirstrikaður texti

Notaðu <u>merkið til að undirstrika texta.

Þessi textalína mun birtast eins og undirstrikuð er

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

Notaðu sjálfgefna áherslumerki HTML með léttum stílum.

Lítill texti

Til að draga úr áherslu á innbyggða texta eða blokkir af texta, notaðu <small>merkið til að stilla texta á 85% stærð foreldris. Fyrirsagnareiningar fá sínar eigin font-sizefyrir hreiður <small>einingar.

Þú getur að öðrum kosti notað innbyggðan þátt með .smallí staðinn fyrir hvaða <small>.

Þessari textalínu er ætlað að meðhöndla sem smáa letur.

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

Djarft

Til að leggja áherslu á textabrot með þyngri leturþunga.

Eftirfarandi textabútur er birtur sem feitletraður texti .

<strong>rendered as bold text</strong>

Skáletrun

Til að leggja áherslu á textabrot með skáletri.

Eftirfarandi textabútur er sýndur sem skáletraður texti .

<em>rendered as italicized text</em>

Varaþættir

Ekki hika við að nota <b>og<i> í HTML5. <b>er ætlað að varpa ljósi á orð eða orðasambönd án þess að koma á framfæri auknu mikilvægi en <i>er aðallega fyrir rödd, tæknileg hugtök o.s.frv.

Jöfnunarflokkar

Auðveldlega endurstilltu texta við hluti með textajöfnunarflokkum.

Vinstrijafnaður texti.

Miðjastilltur texti.

Hægrijafnaður texti.

Rökstuddur texti.

Enginn vefjatexti.

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

Umbreytingarnámskeið

Umbreyttu texta í hluti með hástöfum í texta.

Lítill texti.

Hástafur texti.

Stór texti.

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

Skammstafanir

Stílfærð útfærsla HTML <abbr>frumefnis fyrir skammstafanir og skammstafanir til að sýna stækkaða útgáfuna á sveimi. Skammstafanir með atitle eigind eru með ljósum punktaðri neðri ramma og hjálparbendil þegar sveimur er til staðar, sem veitir viðbótarsamhengi við sveima og notendum hjálpartækja.

Grunn skammstöfun

Skammstöfun á orðinu eiginleiki er attr .

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

Frumhyggja

Bættu .initialismvið skammstöfun fyrir aðeins minni leturstærð.

HTML er það besta síðan sneið brauð.

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

Heimilisföng

Leggðu fram tengiliðaupplýsingar fyrir næsta forföður eða allt verkið. Halda sniðinu með því að enda allar línur með <br>.

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

Fullt nafn
[email protected]

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

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

Blockquotes

Til að vitna í blokkir af efni frá öðrum uppruna í skjalinu þínu.

Sjálfgefin blokkatilvitnun

Vefðu <blockquote>um hvaða HTML sem er sem tilvitnun. Fyrir beinar tilvitnanir mælum við með <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.

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

Valmöguleikar með blokkatilvitnun

Stíl- og innihaldsbreytingar fyrir einföld afbrigði af staðli <blockquote>.

Að nefna heimild

Bættu við a <footer>til að bera kennsl á upprunann. Vefjið nafn frumverksins inn í <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.

Einhver frægur í Source Title

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

Aðrar skjáir

Bættu við .blockquote-reversefyrir tilvitnun með hægri stilltu efni.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.

Einhver frægur í Source Title

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

Listar

Óraðað

Listi yfir atriði þar sem röðin skiptir ekki beinlínis máli.

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

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

Pantaði

Listi yfir atriði þar sem röðin skiptir beinlínis máli.

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

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

Óstíll

Fjarlægðu sjálfgefna list-styleog vinstri spássíu á listaatriðum (aðeins börn). Þetta á aðeins við um atriði á listanum fyrir næstu börn , sem þýðir að þú þarft líka að bæta við bekknum fyrir hreiðraða lista.

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

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

Í línu

Settu öll listaatriði á eina línu með display: inline-block;og smá bólstrun.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Lýsing

Listi yfir hugtök með tilheyrandi lýsingum.

Lýsingarlistar: Lýsingarlisti er fullkominn til að skilgreina hugtök.
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>

Lárétt lýsing

Gerðu skilmála og lýsingar í <dl>röð hlið við hlið. Byrjar staflað eins og sjálfgefna <dl>s, en þegar siglingastikan stækkar, þá gerirðu þetta líka.

Lýsingarlistar: Lýsingarlisti er fullkominn til að skilgreina hugtök.
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, út fermentum massa justo sit amet risus.

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

Sjálfvirk stytting

Láréttir lýsingarlistar munu stytta hugtök sem eru of löng til að passa í vinstri dálkinn með text-overflow. Í þrengri útsýnisgluggum munu þær breytast í sjálfgefið staflað útlit.

Í línu

Vefjið innbyggða kóðabúta með <code>.

Til dæmis <section>ætti að pakka inn sem inline.

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

Inntak notanda

Notaðu til <kbd>að gefa til kynna inntak sem venjulega er slegið inn með lyklaborði.

Til að skipta um möppu, sláðu inn cdá eftir nafni möppunnar.
Til að breyta stillingum, ýttu á 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>

Grunnblokk

Notaðu <pre>fyrir margar línur af kóða. Vertu viss um að sleppa við allar hornklofa í kóðanum fyrir rétta flutning.

<p>Dæmi um texta hér...</p>

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

Þú getur valfrjálst bætt við.pre-scrollable bekknum, sem mun setja hámarkshæð 350px og bjóða upp á y-ás skrunstiku.

Breytur

<var>Notaðu merkið til að gefa til kynna breytur .

y = m x + b

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

Sýnishorn úttak

<samp>Notaðu merkið til að gefa til kynna sýnishorn úr kubba úr forriti .

Það er ætlað að meðhöndla þennan texta sem sýnishorn úr tölvuforriti.

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

Grunndæmi

Fyrir grunnstíl - létta bólstrun og aðeins lárétt skilrúm - bættu grunnflokknum .tablevið hvaða <table>. Það kann að virðast mjög óþarfi, en í ljósi þess að töflur eru notaðar víða fyrir önnur viðbætur eins og dagatöl og dagsetningarval, höfum við valið að einangra sérsniðna borðstíla okkar.

Valfrjáls töflutexti.
#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@twitter

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

Röndóttar raðir

Notaðu .table-stripedtil að bæta sebra-rönd við hvaða töflulínu sem er innan <tbody>.

Samhæfni í gegnum vafra

Röndóttar töflur eru stílaðar í gegnum :nth-childCSS veljarann, sem er ekki fáanlegur í Internet Explorer 8.

#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@twitter

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

Borðið borð

Bættu við .table-borderedfyrir ramma á öllum hliðum töflunnar og hólfa.

#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@twitter

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

Sveima raðir

Bæta við .table-hovertil að virkja sveimastöðu á töflulínum innan <tbody>.

#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@twitter

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

Þétt borð

Bættu við .table-condensedtil að gera borðin þéttari með því að klippa klefafyllingu í tvennt.

#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

Samhengisnámskeið

Notaðu samhengisflokka til að lita töflulínur eða einstakar frumur.

bekk	Lýsing
`.active`	Notar sveimalitinn á tiltekna línu eða hólf
`.success`	Gefur til kynna árangursríka eða jákvæða aðgerð
`.info`	Gefur til kynna hlutlausa upplýsandi breytingu eða aðgerð
`.warning`	Gefur til kynna viðvörun sem gæti þurft athygli
`.danger`	Gefur til kynna hættulega eða hugsanlega neikvæða aðgerð

#	Dálkafyrirsögn	Dálkafyrirsögn	Dálkafyrirsögn
1	Innihald dálks	Innihald dálks	Innihald dálks
2	Innihald dálks	Innihald dálks	Innihald dálks
3	Innihald dálks	Innihald dálks	Innihald dálks
4	Innihald dálks	Innihald dálks	Innihald dálks
5	Innihald dálks	Innihald dálks	Innihald dálks
6	Innihald dálks	Innihald dálks	Innihald dálks
7	Innihald dálks	Innihald dálks	Innihald dálks
8	Innihald dálks	Innihald dálks	Innihald dálks
9	Innihald dálks	Innihald dálks	Innihald dálks

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

Að miðla merkingu til hjálpartækja

Með því að nota lit til að bæta merkingu við töflulínu eða einstaka reit gefur það aðeins sjónræna vísbendingu sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annaðhvort augljósar úr innihaldinu sjálfu (sýnilegur texti í viðkomandi töflulínu/hólfi), eða séu innifalin með öðrum hætti, svo sem viðbótartexta sem er falinn í .sr-onlybekknum.

Móttækilegar töflur

Búðu til móttækilegar töflur með því að pakka þeim .tableinn .table-responsivetil að láta þær fletta lárétt á litlum tækjum (undir 768px). Þegar þú skoðar eitthvað stærra en 768px á breidd muntu ekki sjá neinn mun á þessum töflum.

Lóðrétt klipping/stýnun

Móttækilegar töflur nota overflow-y: hidden, sem klippir af allt efni sem fer út fyrir neðri eða efstu brúnir töflunnar. Sérstaklega getur þetta klippt af fellivalmyndum og öðrum búnaði þriðja aðila.

Firefox og fieldsets

Firefox hefur einhvern óþægilegan sviðsetta stíl sem felur í sér widthsem truflar móttækilega töfluna. Ekki er hægt að hnekkja þessu án Firefox-sértæks hakks sem við bjóðum ekki upp á í Bootstrap:

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

Fyrir frekari upplýsingar, lestu þetta Stack Overflow svar .

#	Fyrirsögn töflu	Fyrirsögn töflu	Fyrirsögn töflu	Fyrirsögn töflu	Fyrirsögn töflu	Fyrirsögn töflu
1	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi
2	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi
3	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi

#	Fyrirsögn töflu	Fyrirsögn töflu	Fyrirsögn töflu	Fyrirsögn töflu	Fyrirsögn töflu	Fyrirsögn töflu
1	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi
2	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi
3	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi	Tafla klefi

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

Grunndæmi

Einstakar formstýringar fá sjálfkrafa alþjóðlega stíl. Öll textaleg <input>, <textarea>, og <select>þættir með .form-controleru width: 100%;sjálfgefið stilltir á. Vefjið inn merkimiða og stýringar .form-grouptil að ná sem bestum bili.

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

Ekki blanda formhópum saman við inntakshópa

Ekki blanda eyðublaðahópum beint saman við inntakshópa . Í staðinn skaltu hreiðra inntakshópinn inni í eyðublaðahópnum.

Innbyggt form

Bættu .form-inlinevið eyðublaðið þitt (sem þarf ekki að vera <form>) fyrir vinstrijafnaðar og innbyggðar einingar. Þetta á aðeins við um eyðublöð innan útsýnisgátta sem eru að minnsta kosti 768px á breidd.

Gæti þurft sérsniðna breidd

Inntak og val hefur width: 100%;sjálfgefið notað í Bootstrap. Innan innbyggðra eyðublaða endurstillum við það width: auto;þannig að margar stýringar geti verið á sömu línu. Það fer eftir skipulagi þínu, frekari sérsniðnar breiddir gætu verið nauðsynlegar.

Bættu alltaf við merkimiðum

Skjálesarar munu eiga í vandræðum með eyðublöðin þín ef þú hefur ekki merki fyrir hvert inntak. Fyrir þessi innbyggðu eyðublöð geturðu falið merkimiðana með því að nota .sr-onlybekkinn. Það eru aðrar aðrar aðferðir til að útvega merki fyrir hjálpartækni, svo sem aria-label, aria-labelledbyeða titleeigindina. Ef ekkert af þessu er til staðar geta skjálesarar gripið til þess að nota placeholdereiginleikann, ef hann er til staðar, en athugaðu að placeholderekki er mælt með því að nota það í staðinn fyrir aðrar merkingaraðferðir.

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

Lárétt form

Notaðu fyrirfram skilgreinda hnitaflokka Bootstrap til að samræma merki og hópa af formstýringum í láréttu skipulagi með því að bæta .form-horizontalvið eyðublaðið (sem þarf ekki að vera <form>). Með því að gera það breytist .form-groups til að haga sér eins og töfluraðir, svo engin þörf á .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>

Stuðningsstýringar

Dæmi um staðlaðar eyðublaðastýringar sem studdar eru í eyðublaðsútliti.

Inntak

Algengustu formstýringin, textatengdir innsláttarreitir. Inniheldur stuðning fyrir allar HTML5 gerðir: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telog color.

Gerðaryfirlýsing krafist

Inntak verður aðeins stílað að fullu ef þeirra typeer rétt lýst yfir.

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

Inntakshópar

Til að bæta við samþættum texta eða hnöppum fyrir og/eða á eftir hvaða texta sem byggir á <input>, skoðaðu innsláttarhópinn .

Textasvæði

Formstýring sem styður margar línur af texta. Breyttu rowseigindinni eftir þörfum.

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

Gátreitir og útvarp

Gátreitir eru til að velja einn eða fleiri valmöguleika á lista, en útvarp eru til að velja einn valmöguleika af mörgum.

Óvirkir gátreitir og útvarpstæki eru studd, en til að gefa „ekki leyfilegt“ bendil á foreldri <label>, þarftu að bæta .disabledbekknum við foreldri .radio, .radio-inline, .checkbox, eða .checkbox-inline.

Sjálfgefið (staflað)

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

Innbyggðir gátreitir og útvarp

Notaðu .checkbox-inlineeða .radio-inlineflokkana á röð gátreita eða útvarpstækja fyrir stýringar sem birtast á sömu línu.

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

Gátreitir og útvarp án merkitexta

Ef þú ert ekki með texta innan <label>, er inntakið staðsett eins og þú mátt búast við. Sem stendur virkar aðeins á gátreitum og útvörpum sem ekki eru innbyggðir. Mundu að gefa samt upp einhvers konar merki fyrir hjálpartækni (til dæmis með því að nota 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>

Velur

Athugaðu að margir innfæddir valmyndir - nefnilega í Safari og Chrome - eru með ávöl horn sem ekki er hægt að breyta með border-radiuseiginleikum.

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

Fyrir <select>stýringar með multipleeigindinni eru sjálfgefið margir valkostir sýndir.

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

Static control

Þegar þú þarft að setja venjulegan texta við hlið eyðublaðsmerkis í eyðublaði skaltu nota .form-control-staticbekkinn á <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>

Fókus ástand

Við fjarlægjum sjálfgefna outlinestíla á sumum formstýringum og notum a box-shadowí staðinn fyrir :focus.

Demo `:focus`ástand

Dæmið hér að ofan notar sérsniðna stíla í skjölunum okkar til að sýna fram á :focusástandið á .form-control.

Óvirkt ástand

Bættu disabledboolean eigindinni við inntak til að koma í veg fyrir samskipti notenda. Óvirk inntak virðast léttari og bæta við not-allowedbendili.

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

Óvirkt sviðssett

Bættu disabledeigindinni við a <fieldset>til að slökkva á öllum stjórntækjum <fieldset>í einu.

Fyrirvari um tengivirkni`<a>`

Sjálfgefið er að vafrar meðhöndla allar innbyggðar formstýringar ( <input>, <select>og <button>þættir) inni í a <fieldset disabled>sem óvirka, sem kemur í veg fyrir samskipti bæði með lyklaborði og mús á þeim. Hins vegar, ef eyðublaðið þitt inniheldur einnig <a ... class="btn btn-*">þætti, munu þessir aðeins fá stíllinn pointer-events: none. Eins og fram kemur í hlutanum um óvirkt ástand fyrir hnappa (og sérstaklega í undirkaflanum fyrir akkerisþætti), er þessi CSS eign ekki enn staðlað og er ekki að fullu studd í Opera 18 og nýrri, eða í Internet Explorer 11, og vann Ekki koma í veg fyrir að lyklaborðsnotendur geti einbeitt sér eða virkjað þessa tengla. Svo til öryggis skaltu nota sérsniðið JavaScript til að slökkva á slíkum hlekkjum.

Samhæfni í gegnum vafra

Þó að Bootstrap muni beita þessum stílum í öllum vöfrum, styðja Internet Explorer 11 og neðar ekki að fullu disabledeiginleikann á <fieldset>. Notaðu sérsniðið JavaScript til að slökkva á reitsettinu í þessum vöfrum.

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

Skrifvarið ástand

Bættu readonlyboolean eigindinni við inntak til að koma í veg fyrir breytingar á gildi inntaksins. Lesinntak virðist léttari (alveg eins og óvirkt inntak), en heldur venjulegum bendili.

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

Hjálpartexti

Hjálpartexti blokkarstigs fyrir formstýringar.

Að tengja hjálpartexta við formstýringar

Hjálpartexti ætti að vera beinlínis tengdur við formstýringuna sem hann tengist með því að nota aria-describedbyeigindina. Þetta mun tryggja að hjálpartækni – eins og skjálesarar – tilkynni þennan hjálpartexta þegar notandinn einbeitir sér eða fer inn í stýringuna.

<label class="sr-only" 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>

Staðfesting segir

Bootstrap inniheldur löggildingarstíla fyrir villu-, viðvörunar- og árangursstöðu á eyðublaðastýringum. Til að nota skaltu bæta við .has-warning, .has-error, eða .has-successvið yfireininguna. Allir .control-label, .form-control, og .help-blockinnan þess þáttar munu fá staðfestingarstílana.

Sendir staðfestingarástand til hjálpartækja og litblinda notenda

Notkun þessara staðfestingarstíla til að tákna stöðu eyðublaðastýringar veitir aðeins sjónræna, litatengda vísbendingu, sem ekki verður miðlað til notenda hjálpartækni - eins og skjálesara - eða til litblinda notenda.

Gakktu úr skugga um að önnur vísbending um ástand sé einnig veitt. Til dæmis geturðu sett vísbendingu um ástand í <label>texta formstýringarinnar sjálfs (eins og er tilfellið í eftirfarandi kóðadæmi), sett inn Glyphicon (með viðeigandi valtexta með því að nota .sr-onlybekkinn - sjá Glyphicon dæmin ), eða með því að gefa upp viðbótar hjálpartextablokk . Sérstaklega fyrir hjálpartækni er einnig hægt að úthluta ógildum formstýringum aria-invalid="true"eigind.

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

Með valfrjálsum táknum

Þú getur líka bætt við valfrjálsum endurgjöfartáknum með því að bæta við .has-feedbackog hægri tákninu.

Ábendingartákn virka aðeins með textaþáttum <input class="form-control">.

Tákn, merki og inntakshópar

Handvirk staðsetning endurgjöfartákna er nauðsynleg fyrir inntak án merkimiða og fyrir inntakshópa með viðbót til hægri. Þú ert eindregið hvattur til að útvega merki fyrir öll inntak af aðgengisástæðum. Ef þú vilt koma í veg fyrir að merki séu birt skaltu fela þá hjá .sr-onlybekknum. Ef þú verður að vera án merkimiða skaltu stilla topgildi endurgjöfartáknisins. Fyrir inntakshópa skaltu stilla rightgildið að viðeigandi pixlagildi eftir breidd viðbótarinnar.

Að koma merkingu táknsins á framfæri við hjálpartækni

Til að tryggja að hjálpartækni – eins og skjálesarar – komi réttilega til skila merkingu tákns, ætti að fylgja með viðbótar falinn texta með .sr-onlybekknum og tengja sérstaklega við formstýringuna sem hann tengist með því að nota aria-describedby. Að öðrum kosti skaltu ganga úr skugga um að merkingin (td sú staðreynd að það er viðvörun fyrir tiltekinn textainnsláttarreit) komi fram á einhverju öðru formi, svo sem að breyta texta hins raunverulega <label>sem tengist formstýringunni.

Þrátt fyrir að eftirfarandi dæmi séu þegar minnst á staðfestingarstöðu viðkomandi formstýringa í <label>textanum sjálfum, hefur ofangreind tækni (með .sr-onlytexta og aria-describedby) verið innifalin til skýringar.

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

Valfrjálst tákn í láréttu og innbyggðu formi

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

Valfrjálst tákn með földum `.sr-only`merkimiðum

Ef þú notar .sr-onlybekkinn til að fela formstýringu <label>(frekar en að nota aðra merkingarvalkosti, svo sem aria-labeleigind), mun Bootstrap sjálfkrafa stilla staðsetningu táknsins þegar því hefur verið bætt við.

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

Stjórna stærð

Stilltu hæðir með því að nota flokka eins og .input-lg, og stilltu breidd með því að nota grid dálkaflokka eins og .col-lg-*.

Hæð stærð

Búðu til stýringar fyrir hærra eða styttri form sem passa við hnappastærðir.

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

Lárétt form hópastærðir

Stærðu merkimiða fljótt og myndstýringar innan .form-horizontalmeð því að bæta við .form-group-lgeða .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>

Stærð súlu

Vefjið inntak inn í ristdálka, eða hvaða sérsniðna yfireiningu sem er, til að framfylgja breiddum sem óskað er eftir.

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

Hnapparmerki

Notaðu hnappaflokkana á an<a> , <button>, eða <input>frumefni.

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

Samhengssértæk notkun

Þó að hægt sé að nota hnappaflokka á <a>og <button>þætti, eru aðeins <button>þættir studdir innan nav og navbar íhluta okkar.

Tenglar sem virka sem hnappar

Ef <a>þættirnir eru notaðir til að virka sem hnappar - sem kalla fram virkni á síðu, frekar en að fletta í annað skjal eða hluta á núverandi síðu - ættu þeir einnig að fá viðeigandi role="button".

Flutningur í gegnum vafra

Sem besta starfsvenjan mælum við eindregið með því að nota <button>þáttinn þegar mögulegt er til að tryggja samsvarandi flutning í gegnum vafra.

Meðal annars er galli í Firefox <30 sem kemur í veg fyrir að við getum stillt hnappa sem byggja á of, sem veldur því að þeir passa ekki nákvæmlega við hæð annarra hnappa á Firefox line-height.<input>

Valmöguleikar

Notaðu einhvern af tiltækum hnappaflokkum til að búa til stílaðan hnapp á fljótlegan hátt.

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

Að miðla merkingu til hjálpartækja

Að nota lit til að bæta merkingu við hnapp gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annað hvort augljósar úr innihaldinu sjálfu (sýnilegur texti hnappsins) eða að þær séu innifaldar með öðrum hætti, svo sem viðbótartexta sem er falinn í .sr-onlybekknum.

Stærðir

Langar þig í stærri eða minni hnappa? Bættu við .btn-lg, .btn-sm, eða .btn-xsfyrir fleiri stærðir.

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

Búðu til blokkarhnappa - þá sem spanna alla breidd foreldris - með því að bæta við .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>

Virkt ástand

Þrýst er á hnappana (með dekkri bakgrunni, dekkri ramma og innfelldum skugga) þegar þeir eru virkir. Fyrir <button>þætti er þetta gert í gegnum :active. Fyrir <a>þætti er það gert með .active. Hins vegar geturðu notað .activeá <button>s (og látiðaria-pressed="true" eigindina fylgja með) ef þú þarft að endurtaka virka ástandið forritunarlega.

Hnappur þáttur

Engin þörf á að bæta við :activeþar sem þetta er gerviflokkur, en ef þú þarft að þvinga fram sama útlit skaltu halda áfram og bæta við .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>

Akkeri þáttur

Bættu .activebekknum við <a>hnappa.

Aðal hlekkur Tengill

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

Óvirkt ástand

Láttu hnappa líta út fyrir að vera ósmellanlegir með því að hverfa þá aftur með opacity.

Hnappur þáttur

Bættu disabledeigindinni við <button>hnappa.

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

Samhæfni í gegnum vafra

Ef þú bætir disabledeigindinni við <button>, mun Internet Explorer 9 og neðar gera texta gráan með viðbjóðslegum textaskugga sem við getum ekki lagað.

Akkeri þáttur

Bættu .disabledbekknum við <a>hnappa.

Aðal hlekkur Tengill

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

Við notum .disabledsem gagnaflokk hér, svipað og almenni .activeflokkurinn, þannig að ekki er krafist forskeyti.

Fyrirvari um tengivirkni

Þessi flokkur notar pointer-events: nonetil að reyna að slökkva á tengivirkni <a>s, en þessi CSS eign er ekki enn staðlað og er ekki að fullu studd í Opera 18 og nýrri, eða í Internet Explorer 11. Auk þess, jafnvel í vöfrum sem styðja pointer-events: none, lyklaborð flakk er óbreytt, sem þýðir að sjáandi lyklaborðsnotendur og notendur hjálpartækni munu enn geta virkjað þessa tengla. Svo til öryggis skaltu nota sérsniðið JavaScript til að slökkva á slíkum hlekkjum.

Móttækilegar myndir

Hægt er að gera myndir í Bootstrap 3 móttækilegar með því að bæta við .img-responsivebekknum. Þetta á við max-width: 100%;, height: auto;og display: block;myndina þannig að hún mælist fallega að foreldri þættinum.

Til að miðja myndir sem nota .img-responsivebekkinn skaltu nota .center-blockí staðinn fyrir .text-center. Skoðaðu hjálparnámskeiðahlutann fyrir frekari upplýsingar um .center-blocknotkun.

SVG myndir og IE 8-10

Í Internet Explorer 8-10 eru SVG myndir með .img-responsiveóhóflega stórar. Til að laga þetta skaltu bæta við width: 100% \9;þar sem þörf krefur. Bootstrap beitir þessu ekki sjálfkrafa þar sem það veldur flækjum fyrir önnur myndsnið.

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

Myndform

Bættu flokkum við <img>frumefni til að stilla myndir auðveldlega í hvaða verkefni sem er.

Samhæfni í gegnum vafra

Hafðu í huga að Internet Explorer 8 skortir stuðning fyrir ávöl horn.

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

Samhengislitir

Komdu merkingu til skila í gegnum liti með handfylli af áherslukennslutímum. Þetta gæti líka verið notað á tengla og mun myrkvast þegar sveima er eins og sjálfgefinn tengistíll okkar.

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>

Að takast á við sérhæfni

Stundum er ekki hægt að beita áhersluflokkum vegna sérstöðu annars veljara. Í flestum tilfellum er nægileg lausn að vefja textann þinn inn <span>með bekknum.

Að miðla merkingu til hjálpartækja

Notkun lita til að bæta við merkingu gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem liturinn táknar séu annaðhvort augljósar úr innihaldinu sjálfu (samhengislitirnir eru aðeins notaðir til að styrkja merkingu sem er þegar til staðar í textanum/merkingunni), eða eru innifalin með öðrum hætti, svo sem viðbótartexta falinn með .sr-onlybekknum .

Samhengislegur bakgrunnur

Svipað og í samhengistextalitaflokkum, stilltu bakgrunn frumefnis auðveldlega á hvaða samhengisflokka sem er. Akkerihlutir verða dökkir þegar þeir eru á sveimi, alveg eins og textaflokkarnir.

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>

Að takast á við sérhæfni

Stundum er ekki hægt að nota samhengisbakgrunnsflokka vegna sérstöðu annars valmyndar. Í sumum tilfellum er nægileg lausn að vefja efni þáttarins inn í <div>með bekknum.

Að miðla merkingu til hjálpartækja

Eins og með samhengisliti , vertu viss um að öll merking sem miðlað er í gegnum lit sé einnig miðlað á sniði sem er ekki eingöngu kynningarlegt.

Loka táknið

Notaðu almenna lokunartáknið til að hafna efni eins og aðferðum og viðvörunum.

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

Carets

Notaðu merkingar til að gefa til kynna virkni og stefnu fellilistans. Athugaðu að sjálfgefna valmyndin snýr sjálfkrafa við í fellivalmyndum .

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

Fljótleg flot

Fleygðu frumefni til vinstri eða hægri með flokki. !importanter innifalið til að forðast sérhæfnivandamál. Klassa er einnig hægt að nota sem mixins.

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

Innihaldsblokkir í miðju

Stilltu frumefni á display: blockog miðju í gegnum margin. Fáanlegt sem mixin og class.

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

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

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

Clearfix

Auðveldlega hreinsaðu floats með því að bæta .clearfix við foreldraþáttinn . Notar micro clearfix eins og hann hefur verið vinsæll af Nicolas Gallagher. Einnig hægt að nota sem mixin.

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

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

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

Sýnir og felur efni

Þvingaðu til að sýna eða fela þátt ( þar á meðal fyrir skjálesara ) með því að nota .showog .hiddenflokka. Þessir flokkar nota !importanttil að forðast sérstöðuárekstra, rétt eins og fljótu flotarnir . Þeir eru aðeins fáanlegir til að skipta um blokkarstig. Þeir geta einnig verið notaðir sem blanda.

.hideer í boði, en það hefur ekki alltaf áhrif á skjálesara og er úrelt frá og með v3.0.1. Notaðu .hiddeneða .sr-onlyí staðinn.

Ennfremur er .invisiblehægt að nota aðeins til að skipta um sýnileika frumefnis, sem þýðir að því displayer ekki breytt og þátturinn getur samt haft áhrif á flæði skjalsins.

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

Innihald skjálesara og lyklaborðsleiðsögu

Fela þátt í öllum tækjum nema skjálesurum með .sr-only. Sameina .sr-onlymeð .sr-only-focusabletil að sýna þáttinn aftur þegar hann er með fókus (td af notanda sem eingöngu er á lyklaborði). Nauðsynlegt til að fylgja bestu starfsvenjum aðgengis . Einnig hægt að nota sem blanda.

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

Myndaskipti

Notaðu .text-hidebekkinn eða mixin til að hjálpa til við að skipta út textainnihaldi frumefnis fyrir bakgrunnsmynd.

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

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

Til að fá hraðari farsímavænni þróun, notaðu þessa tólaflokka til að sýna og fela efni eftir tæki í gegnum fjölmiðlafyrirspurn. Einnig eru tólaflokkar til að skipta um efni þegar það er prentað.

Reyndu að nota þetta í takmörkuðum mæli og forðastu að búa til gjörólíkar útgáfur af sömu síðu. Notaðu þær í staðinn til að bæta við kynningu hvers tækis.

Námskeið í boði

Notaðu einn eða samsetningu af tiltækum flokkum til að skipta um efni á milli sjónarhorna.

	Extra lítil tækiSímar (<768px)	Lítil tækiSpjaldtölvur (≥768px)	Meðalstór tækiSkrifborð (≥992px)	Stór tækiSkrifborð (≥1200px)
`.visible-xs-*`	Sýnilegt	Falið	Falið	Falið
`.visible-sm-*`	Falið	Sýnilegt	Falið	Falið
`.visible-md-*`	Falið	Falið	Sýnilegt	Falið
`.visible-lg-*`	Falið	Falið	Falið	Sýnilegt
`.hidden-xs`	Falið	Sýnilegt	Sýnilegt	Sýnilegt
`.hidden-sm`	Sýnilegt	Falið	Sýnilegt	Sýnilegt
`.hidden-md`	Sýnilegt	Sýnilegt	Falið	Sýnilegt
`.hidden-lg`	Sýnilegt	Sýnilegt	Sýnilegt	Falið

Frá og með v3.2.0 eru .visible-*-*flokkarnir fyrir hvern brotpunkt í þremur afbrigðum, eitt fyrir hvert CSS eignargildi sem displayskráð er hér að neðan.

Hópur flokka	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Svo, fyrir sérstaklega litla ( xs) skjái til dæmis, eru tiltækir .visible-*-*flokkar: .visible-xs-block, .visible-xs-inline, og .visible-xs-inline-block.

Klassarnir .visible-xs, .visible-sm, .visible-mdog .visible-lgeru líka til, en eru úreltir frá og með v3.2.0 . Þau eru um það bil jafngild .visible-*-block, nema með sérstökum tilfellum til viðbótar fyrir <table>skiptatengda þætti.

Prentnámskeið

Svipað og venjulegir móttækilegir flokkar, notaðu þá til að skipta um efni fyrir prentun.

Flokkar	Vafri	Prenta
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Falið	Sýnilegt
`.hidden-print`	Sýnilegt	Falið

Flokkurinn .visible-printer líka til en er úreltur frá og með v3.2.0. Það jafngildir um það bil .visible-print-block, nema með sérstökum tilfellum fyrir <table>-tengda þætti.

Próftilvik

Breyttu stærð vafrans þíns eða hlaðaðu á mismunandi tæki til að prófa móttækilega tólaflokkana.

Sýnist á...

Græn gátmerki gefa til kynna að þátturinn sé sýnilegur í núverandi útsýnisglugga.

Extra lítill ✔ Sýnilegt á x-small

Lítil ✔ Sjáanlegt á litlum

Miðlungs ✔ Sýnilegt á miðli

Stórt ✔ Sjáanlegt á stórum

Extra lítil og lítil ✔ Sýnist á x-small og small

Miðlungs og stór ✔ Sjáanlegt á meðalstórum og stórum

Extra lítil og meðalstór ✔ Sýnilegt á x-small og medium

Lítil og stór ✔ Sjáanlegt á litlum og stórum

Extra lítil og stór ✔ Sjáanlegt á x-small og large

Lítil og meðalstór ✔ Sýnilegt á litlum og meðalstórum

Falinn á...

Hér gefa grænir hakmerki einnig til kynna að þátturinn sé falinn í núverandi útsýnisglugga.

Extra lítill ✔ Falið á x-small

Lítil ✔ Falið á litlum

Miðlungs ✔ Falið á miðli

Stórt ✔ Falið á stórum

Extra lítil og lítil ✔ Falið á x-small og small

Miðlungs og stór ✔ Falið á meðalstórum og stórum

Extra lítil og meðalstór ✔ Falið á x-small og medium

Lítil og stór ✔ Falið á litlum og stórum

Extra lítil og stór ✔ Falið á x-small og large

Lítil og meðalstór ✔ Falið á litlum og meðalstórum

CSS Bootstrap er byggt á Less, forgjörva með viðbótarvirkni eins og breytum, blöndun og aðgerðum til að setja saman CSS. Þeir sem vilja nota minni upprunaskrárnar í staðinn fyrir samansettar CSS skrár okkar geta nýtt sér þær fjölmörgu breytur og blöndur sem við notum í gegnum rammann.

Farið er yfir netbreytur og blöndun í kaflanum Grid kerfi .

Að setja saman Bootstrap

Bootstrap er hægt að nota á að minnsta kosti tvo vegu: með samansettu CSS eða með upprunaminni skrám. Til að setja saman Less skrárnar skaltu skoða hlutann Byrjaðu til að sjá hvernig eigi að setja upp þróunarumhverfið þitt til að keyra nauðsynlegar skipanir.

Söfnunarverkfæri þriðja aðila gætu virkað með Bootstrap, en þau eru ekki studd af kjarnateymi okkar.

Breytur

Breytur eru notaðar í öllu verkefninu sem leið til að miðstýra og deila algengum gildum eins og litum, bili eða leturstöflum. Fyrir heildar sundurliðun, vinsamlegast skoðaðu Customizer .

Litir

Notaðu auðveldlega tvö litakerfi: grátóna og merkingartóna. Grátónalitir veita skjótan aðgang að algengum tónum af svörtu á meðan merkingartækni felur í sér ýmsa liti sem úthlutað er til þýðingarmikilla samhengisgilda.

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

Notaðu einhverjar af þessum litabreytum eins og þær eru eða endurskiptu þeim í þýðingarmeiri breytur fyrir verkefnið þitt.

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

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

Vinnupallar

Handfylli af breytum til að sérsníða lykilþætti í beinagrind síðunnar þinnar fljótt.

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

Tenglar

Stíllaðu tenglana þína auðveldlega með réttum lit með aðeins einu gildi.

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

Athugaðu að @link-hover-colornotar aðgerð, annað frábært tól frá Less, til að búa til rétta sveimalitinn á sjálfvirkan hátt. Þú getur notað darken, lighten, saturate, og desaturate.

Leturfræði

Stilltu leturgerð þína, textastærð, leiðandi og fleira auðveldlega með nokkrum snöggum breytum. Bootstrap notar þetta líka til að bjóða upp á auðveldar leturfræðilegar blöndur.

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

Táknmyndir

Tvær fljótlegar breytur til að sérsníða staðsetningu og skráarheiti táknanna þinna.

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

Íhlutir

Íhlutir í Bootstrap nota nokkrar sjálfgefnar breytur til að stilla algeng gildi. Hér eru þær sem oftast eru notaðar.

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

Seldarblöndur

Seljendablöndur eru blöndur til að hjálpa til við að styðja marga vafra með því að innihalda öll viðeigandi forskeyti söluaðila í samansettum CSS þínum.

Box-stærð

Endurstilltu kassalíkan íhluta þinna með einni blöndun. Fyrir samhengi, sjá þessa gagnlegu grein frá Mozilla .

Blandan er úrelt frá og með v3.2.0, með tilkomu Autoprefixer. Til að varðveita afturábak eindrægni mun Bootstrap halda áfram að nota mixin innbyrðis þar til Bootstrap v4.

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

Ávöl horn

Í dag styðja allir nútíma vafrar border-radiuseignina án forskeyti. Sem slík er engin .border-radius()blanda, en Bootstrap inniheldur flýtileiðir til að hringja fljótt tvö horn á tiltekinni hlið hlutar.

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

Ef markhópurinn þinn notar nýjustu og bestu vafrana og tækin, vertu viss um að nota box-shadoweignina ein og sér. Ef þú þarft stuðning fyrir eldri Android (pre-v4) og iOS tæki (for-iOS 5), notaðu úrelta mixin til að ná í tilskilið -webkitforskeyti.

Blandan er úrelt frá og með v3.1.0 þar sem Bootstrap styður ekki opinberlega gamaldags vettvang sem styðja ekki staðlaða eiginleikann. Til að varðveita afturábak eindrægni mun Bootstrap halda áfram að nota mixin innbyrðis þar til Bootstrap v4.

Vertu viss um að nota rgba()liti í kassaskuggunum þínum svo þeir blandist eins óaðfinnanlega og mögulegt er við bakgrunn.

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

Umskipti

Margar blöndur fyrir sveigjanleika. Stilltu allar umbreytingarupplýsingar með einum eða tilgreindu sérstaka seinkun og lengd eftir þörfum.

Blöndurnar eru úreltar frá og með v3.2.0 , með tilkomu Autoprefixer. Til að varðveita afturábak eindrægni mun Bootstrap halda áfram að nota mixin innbyrðis þar til Bootstrap v4.

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

Umbreytingar

Snúa, skala, þýða (færa) eða skakka hvaða hlut sem er.

Blöndurnar eru úreltar frá og með v3.2.0 , með tilkomu Autoprefixer. Til að varðveita afturábak eindrægni mun Bootstrap halda áfram að nota mixin innbyrðis þar til Bootstrap v4.

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

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

Hreyfimyndir

Ein blöndun til að nota alla hreyfieiginleika CSS3 í einni yfirlýsingu og önnur blöndun fyrir einstaka eiginleika.

Blöndurnar eru úreltar frá og með v3.2.0 , með tilkomu Autoprefixer. Til að varðveita afturábak eindrægni mun Bootstrap halda áfram að nota mixin innbyrðis þar til Bootstrap v4.

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

Ógegnsæi

Stilltu ógagnsæi fyrir alla vafra og gefðu upp filterbakslag fyrir IE8.

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

Staðsetningartexti

Gefðu samhengi fyrir formstýringar innan hvers reits.

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

Dálkar

Búðu til dálka í gegnum CSS innan eins þáttar.

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

Halli

Breyttu hvaða tveimur litum sem er auðveldlega í bakgrunnshalla. Fáðu lengra og stilltu stefnu, notaðu þrjá liti eða notaðu geislamyndaðan halla. Með einni blöndun færðu allar forskeyti setningafræði sem þú þarft.

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

Þú getur líka tilgreint horn venjulegs tveggja lita, línulegs halla:

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

Ef þig vantar halla í rakara-rönd stíl, þá er það líka auðvelt. Tilgreindu bara einn lit og við leggjum yfir hálfgagnsæra hvíta rönd.

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

Hækkaðu ante og notaðu þrjá liti í staðinn. Stilltu fyrsta litinn, annan litinn, litastopp annars litarins (prósentugildi eins og 25%) og þriðja litinn með þessum blöndunum:

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

Höfuð upp! Ef þú þarft einhvern tíma að fjarlægja halla, vertu viss um að fjarlægja allar IE-sértækar sem filterþú gætir hafa bætt við. Þú getur gert það með því að nota .reset-filter()mixin við hliðina background-image: none;.

Notablöndur

Notablöndur eru blöndur sem sameina annars óskylda CSS eiginleika til að ná ákveðnu markmiði eða verkefni.

Clearfix

Gleymdu að bæta class="clearfix"við hvaða frumefni sem er og bættu í staðinn .clearfix()blönduna þar sem við á. Notar micro clearfix frá Nicolas Gallagher .

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

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

Lárétt miðja

Miðaðu fljótt hvaða frumefni sem er innan foreldris þess. Krefst widtheða max-widthá að stilla.

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

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

Stærðarhjálparar

Tilgreindu stærð hlutar auðveldara.

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

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

Breytanleg textasvæði

Auðveldlega stilltu stærðarvalkostina fyrir hvaða textasvæði eða annan þátt. Sjálfgefið er venjulega hegðun vafra ( both).

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

Stytting texta

Auðveldlega stytta texta með sporbaug með einni blöndun. Krefst þess að þáttur sé blockeða inline-blockstig.

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

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

Sjónhimnu myndir

Tilgreindu tvær myndaslóðir og @1x myndvíddir, og Bootstrap mun veita @2x miðlunarfyrirspurn. Ef þú hefur margar myndir til að birta skaltu íhuga að skrifa sjónhimnumynd CSS handvirkt í einni fjölmiðlafyrirspurn.

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

Þó Bootstrap sé byggt á Less, hefur það einnig opinbera Sass höfn . Við höldum því í sérstakri GitHub geymslu og sjáum um uppfærslur með viðskiptahandriti.

Hvað er innifalið

Þar sem Sass höfnin er með sérstaka endursölu og þjónar aðeins öðrum áhorfendum, er innihald verkefnisins mjög frábrugðið aðal Bootstrap verkefninu. Þetta tryggir að Sass tengið sé eins samhæft við eins mörg Sass byggð kerfi og mögulegt er.

Leið	Lýsing
`lib/`	Ruby gem kóði (Sass stillingar, teinar og Compass samþættingar)
`tasks/`	Breytir forskriftir (breytir andstreymis minna í Sass)
`test/`	Söfnunarpróf
`templates/`	Upplýsingaskrá áttavitapakka
`vendor/assets/`	Sass, JavaScript og leturskrár
`Rakefile`	Innri verkefni, svo sem rake og convert

Farðu á GitHub geymslu Sass portsins til að sjá þessar skrár í aðgerð.

Uppsetning

Til að fá upplýsingar um hvernig á að setja upp og nota Bootstrap fyrir Sass skaltu skoða GitHub geymsluna readme . Það er nýjasta heimildin og inniheldur upplýsingar til notkunar með Rails, Compass og venjulegum Sass verkefnum.

Bootstrap fyrir Sass

CSS

Yfirlit

HTML5 doctype

Farsími fyrst

Leturfræði og tenglar

Normalize.css

Gámar

Ratkerfi

Kynning

Fyrirspurnir fjölmiðla

Grid valkostir

Dæmi: Staflað til lárétts

Dæmi: Vökvaílát

Dæmi: Farsími og skjáborð

Dæmi: Farsími, spjaldtölva, borðtölva

Dæmi: Dálk umbúðir

Móttækilegur dálkur endurstilltur

Á móti dálkum

Hreiður súlur

Dálka röðun

Minni blöndun og breytur

Breytur

Mixins

Dæmi um notkun

Leturfræði

Fyrirsagnir

h1. Bootstrap fyrirsögn

h2. Bootstrap fyrirsögn

h3. Bootstrap fyrirsögn

h4. Bootstrap fyrirsögn

h5. Bootstrap fyrirsögn

h6. Bootstrap fyrirsögn

h1. Bootstrap fyrirsögn Aukatexti

h2. Bootstrap fyrirsögn Aukatexti

h3. Bootstrap fyrirsögn Aukatexti

h4. Bootstrap fyrirsögn Aukatexti

h5. Bootstrap fyrirsögn Aukatexti

h6. Bootstrap fyrirsögn Aukatexti

Líkamsafrit

Afrit af blýlíkam

Byggt með minna

Innbyggðir textaþættir

Merktur texti

Texti eytt

Yfirstrikaður texti

Texti settur inn

Undirstrikaður texti

Lítill texti

Djarft

Skáletrun

Varaþættir

Jöfnunarflokkar

Umbreytingarnámskeið

Skammstafanir

Grunn skammstöfun

Frumhyggja

Heimilisföng

Blockquotes

Sjálfgefin blokkatilvitnun

Valmöguleikar með blokkatilvitnun

Að nefna heimild

Aðrar skjáir

Listar

Óraðað

Pantaði

Óstíll

Í línu

Lýsing

Lárétt lýsing

Sjálfvirk stytting

Kóði

Í línu

Inntak notanda

Grunnblokk

Breytur

Sýnishorn úttak

Töflur

Grunndæmi

Röndóttar raðir

Samhæfni í gegnum vafra

Demo `:focus`ástand

Fyrirvari um tengivirkni`<a>`

Valfrjálst tákn með földum `.sr-only`merkimiðum