Ismerje meg a Bootstrap infrastruktúrájának kulcsfontosságú elemeit, beleértve a jobb, gyorsabb és erősebb webfejlesztést.

HTML5 doctype

A Bootstrap bizonyos HTML-elemeket és CSS-tulajdonságokat használ, amelyekhez a HTML5-dokumentumtípus használata szükséges. Tegye bele minden projektje elejébe.

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

Először mobil

A Bootstrap 2-vel opcionális mobilbarát stílusokat adtunk hozzá a keretrendszer kulcsfontosságú szempontjaihoz. A Bootstrap 3-mal a projektet a kezdetektől fogva mobilbaráttá írtuk át. Ahelyett, hogy opcionális mobilstílusokat adnának hozzá, a lényegükbe kerülnek. Valójában a Bootstrap az első mobil . A Mobile first stílusok a teljes könyvtárban megtalálhatók különálló fájlok helyett.

A megfelelő megjelenítés és az érintéses nagyítás érdekében adja hozzá a nézetablak metacímkéjét a <head>.

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

user-scalable=noA nézetablak metacímkéjéhez hozzáadva letilthatja a nagyítási lehetőségeket mobileszközökön . Ez letiltja a nagyítást, ami azt jelenti, hogy a felhasználók csak görgetni tudnak, és a webhelyet egy kicsit natív alkalmazásnak fogja érezni. Összességében nem ajánljuk ezt minden oldalon, ezért legyen óvatos!

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

Tipográfia és linkek

A Bootstrap alapvető globális megjelenítési, tipográfiai és hivatkozási stílusokat állít be. Konkrétan mi:

Állítsa background-color: #fff;be abody
Használja a @font-family-base, @font-size-base, és @line-height-baseattribútumokat tipográfiai alapként
Állítsa be a globális link színét a következőn keresztül @link-color, és csak a hivatkozás aláhúzásokat alkalmazza:hover

Ezek a stílusok a következőn belül találhatók meg scaffolding.less.

Normalize.css

A jobb böngészők közötti megjelenítés érdekében a Normalize.css -t, Nicolas Gallagher és Jonathan Neal projektjét használjuk .

Konténerek

A Bootstrap-nek tartalmaznia kell egy elemet a webhely tartalmának burkolásához és a rácsrendszerünk elhelyezéséhez. Két konténer közül választhat egyet a projektjeihez. Vegye figyelembe, hogy a paddingés több miatt egyik tároló sem fészkelhető be.

Használható .containerérzékeny, rögzített szélességű tárolóhoz.

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

Használja .container-fluidteljes szélességű tárolóhoz, amely a nézetablak teljes szélességére kiterjed.

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

A Bootstrap egy érzékeny, mobil első fluid rácsrendszert tartalmaz, amely megfelelően méretezhető akár 12 oszlopig, ahogy az eszköz vagy a nézetablak növekszik. Előre definiált osztályokat tartalmaz az egyszerű elrendezési lehetőségekhez, valamint hatékony mixineket a szemantikai elrendezések létrehozásához .

Bevezetés

A rácsrendszerek oldalelrendezések létrehozására szolgálnak sorokon és oszlopokon keresztül, amelyek a tartalmat tartalmazzák. Így működik a Bootstrap rácsrendszer:

.containerA sorokat (fix szélességű) vagy .container-fluid(teljes szélességű) belül kell elhelyezni a megfelelő igazítás és párnázás érdekében.
A sorok segítségével vízszintes oszlopcsoportokat hozhat létre.
A tartalmat oszlopokon belül kell elhelyezni, és csak az oszlopok lehetnek a sorok közvetlen gyermekei.
Az előre meghatározott rácsosztályok kedvelik .rowés .col-xs-4elérhetők a rácselrendezések gyors elkészítéséhez. Kevesebb mixin is használható szemantikusabb elrendezésekhez.
Az oszlopok ereszcsatornákat (réseket az oszlopok tartalma között) hoznak létre a következőn keresztül padding. Ez a kitöltés az első és az utolsó oszlop soraiban eltolódik az .rows negatív margójával.
A negatív margó miatt az alábbi példák kihúzottak. Ez azért van így, hogy a rácsoszlopokon belüli tartalom sorba kerüljön a nem rácsos tartalommal.
A rácsoszlopok a tizenkét elérhető oszlop számának megadásával jönnek létre. Például három egyenlő oszlop három elemet használ .col-xs-4.
Ha egy sorban több mint 12 oszlop van elhelyezve, a további oszlopok minden csoportja egy egységként új sorba kerül.
A rácsosztályok a töréspontok méreténél nagyobb vagy azzal egyenlő képernyőszélességű eszközökre vonatkoznak, és felülbírálják a kisebb eszközöket célzó rácsosztályokat. Ezért pl. bármely .col-md-*osztály alkalmazása egy elemre nem csak a stílusát befolyásolja közepes eszközökön, hanem nagy eszközökön is, ha .col-lg-*nincs jelen osztály.

Tekintse meg a példákat ezen elvek kódjában való alkalmazására.

Médialekérdezések

A következő médialekérdezéseket használjuk a Less fájlokban, hogy létrehozzuk a kulcsfontosságú töréspontokat a rácsrendszerünkben.

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

Időnként bővítjük ezeket a médialekérdezéseket, hogy a max-widthCSS-t az eszközök szűkebb körére korlátozzuk.

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

Rács opciók

Tekintse meg, hogyan működnek a Bootstrap rácsrendszer egyes elemei több eszközön egy praktikus táblázat segítségével.

	Extra kis eszközök Telefonok (<768px)	Kis eszközök, táblagépek (≥ 768 képpont)	Közepes eszközök, asztali számítógépek (≥ 992 képpont)	Nagy eszközök, asztali számítógépek (≥ 1200 képpont)
Rács viselkedése	Mindenkor vízszintes	Kezdéskor összecsukva, vízszintesen a töréspontok felett
Konténer szélessége	Nincs (automatikus)	750 képpont	970 képpont	1170 képpont
Osztály előtag	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
oszlopok száma	12
Oszlop szélesség	Auto	~62 képpont	~81 képpont	~97 képpont
Az ereszcsatorna szélessége	30 képpont (15 képpont az oszlop mindkét oldalán)
Fészkelhető	Igen
Eltolások	Igen
Oszlopsorrend	Igen

Példa: Vízszintesre halmozott

A rácsosztályok egyetlen készletével .col-md-*létrehozhat egy alapvető rácsrendszert, amely mobileszközökön és táblagépeken (az extra kicsitől kis tartományig) halmozottan indul, mielőtt az asztali (közepes) eszközökön vízszintessé válik. Helyezze el a rácsoszlopokat bármely .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>

Példa: Folyadéktartály

Bármely rögzített szélességű rácselrendezést alakítson át teljes szélességű elrendezéssé úgy, hogy a legkülsőt .containera következőre módosítja .container-fluid.

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

Példa: mobil és asztali számítógép

Nem szeretné, hogy az oszlopok egyszerűen kisebb eszközökben halmozódjanak fel? Használja az extra kis és közepes eszközök rácsosztályait .col-xs-* .col-md-*az oszlopok hozzáadásával. Tekintse meg az alábbi példát, hogy jobban megértse, hogyan működik mindez.

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

Példa: mobil, táblagép, asztali számítógép

Az előző példára építve hozzon létre még dinamikusabb és erőteljesebb elrendezéseket a táblagéposztályokkal .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>

Példa: Oszlopcsomagolás

Ha egy sorban több mint 12 oszlop van elhelyezve, a további oszlopok minden csoportja egy egységként új sorba kerül.

.col-xs-9

.col-xs-4
Mivel 9 + 4 = 13 > 12, ez a 4 oszlop széles div egy összefüggő egységként egy új sorba kerül.

.col-xs-6
A következő oszlopok az új sorban folytatódnak.

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

Reszponzív oszlop visszaállítása

A négy rendelkezésre álló rácsszinttel biztosan olyan problémákba ütközhet, amikor bizonyos töréspontokon az oszlopok nem teljesen tisztázódnak, mivel az egyik magasabb, mint a másik. Ennek kijavításához használja az a .clearfixés a mi reszponzív segédprogram-osztályaink kombinációját .

.col-xs-6 .col-sm-3
Méretezze át a nézetablakot, vagy nézze meg telefonján példaként.

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

A reszponzív töréspontoknál végzett oszloptörlés mellett előfordulhat, hogy alaphelyzetbe kell állítania az eltolásokat, tolásokat vagy húzásokat . Tekintse meg ezt működés közben a rácspéldában .

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

Oszlopok eltolása

Oszlopok mozgatása jobbra .col-md-offset-*osztályok használatával. Ezek az osztályok oszlopokkal növelik az oszlop bal margóját *. Például négy oszlop felett .col-md-offset-4mozog ..col-md-4

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

Az osztályokkal az alacsonyabb rácsszintek eltolásait is felülírhatja .col-*-offset-0.

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

Oszlopok egymásba ágyazása

Ha be szeretné ágyazni a tartalmat az alapértelmezett rácsba, adjon hozzá egy új .rowoszlopkészletet .col-sm-*egy meglévő .col-sm-*oszlophoz. A beágyazott soroknak olyan oszlopokat kell tartalmazniuk, amelyek összesen legfeljebb 12 oszlopot tartalmazhatnak (nem kötelező mind a 12 elérhető oszlopot használni).

1. szint: .col-sm-9

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

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

Oszlopsorrend

Könnyen módosíthatja beépített rácsoszlopaink sorrendjét a .col-md-push-*módosító .col-md-pull-*osztályokkal.

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

Kevesebb mixin és változó

A gyors elrendezésekhez előre elkészített rácsosztályokon kívül a Bootstrap Less változókat és mixeket is tartalmaz a saját egyszerű, szemantikus elrendezések gyors létrehozásához.

Változók

A változók határozzák meg az oszlopok számát, az ereszcsatorna szélességét és azt a médialekérdezési pontot, amelynél az oszlopok lebegése kezdődik. Ezeket használjuk a fent dokumentált előre definiált grid osztályok létrehozásához, valamint az alább felsorolt egyéni mixinekhez.

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

Mixins

A mixineket a rácsváltozókkal együtt használják szemantikus CSS létrehozására az egyes rácsoszlopokhoz.

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

Használati példa

Módosíthatja a változókat saját egyéni értékekre, vagy egyszerűen használhatja a mixineket az alapértelmezett értékekkel. Íme egy példa arra, hogyan használhatja az alapértelmezett beállításokat egy kétoszlopos elrendezés létrehozásához, amelyek között rés van.

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

Címsorok

Az összes HTML-címsor <h1>elérhető <h6>a következőig. .h1keresztül .h6osztályok is rendelkezésre állnak, ha egy fejléc betűstílusához szeretne igazodni, de továbbra is szeretné, hogy szövege soron belül jelenjen meg.

h1. Bootstrap címsor	Félkövér 36 képpont
h2. Bootstrap címsor	Félkövér 30 képpont
h3. Bootstrap címsor	Félkövér 24 képpont
h4. Bootstrap címsor	Félkövér 18 képpont
h5. Bootstrap címsor	Félkövér 14 képpont
h6. Bootstrap címsor	Félkövér 12 képpont

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

Hozzon létre könnyebb, másodlagos szöveget bármely címsorban általános <small>címkével vagy .smallosztályzattal.

h1. Bootstrap címsor Másodlagos szöveg

h2. Bootstrap címsor Másodlagos szöveg

h3. Bootstrap címsor Másodlagos szöveg

h4. Bootstrap címsor Másodlagos szöveg

h5. Bootstrap címsor Másodlagos szöveg

h6. Bootstrap címsor Másodlagos szöveg

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

Testmásolat

A Bootstrap globális alapértelmezése font-size14 képpont , 1,428line-height - as értékkel . Ez vonatkozik a <body>és az összes bekezdésre. Ezenkívül a <p>(bekezdések) a számított vonalmagasság felének megfelelő alsó margót kapnak (alapértelmezés szerint 10 képpont).

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>

Vezető törzs másolata

Tegye kiemelhetővé a bekezdést a hozzáadásával .lead.

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

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

Kevesebbből épült

A tipográfiai skála két Kevesebb változón alapul a változókban.kevesebb : @font-size-baseés @line-height-base. Az első az egész használt alap betűméret, a második pedig az alapvonal magassága. Ezeket a változókat és néhány egyszerű matematikát használjuk a margók, kitöltések és vonalmagasságok létrehozásához minden típusunkhoz és még sok máshoz. Testreszabhatja őket, és a Bootstrap alkalmazkodik.

Szövegközi elemek

Megjelölt szöveg

Ha egy szövegsorozatot szeretne kiemelni más kontextusban való relevanciája miatt, használja a <mark>címkét.

Használhatja a mark címkétKiemelszöveg.

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

Törölt szöveg

A törölt szövegblokkok jelzésére használja a <del>címkét.

~~Ezt a szövegsort törölt szövegként kell kezelni.~~

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

Áthúzott szöveg

A már nem releváns szövegblokkok jelzésére használja a <s>címkét.

~~Ezt a szövegsort már nem pontosként kell kezelni.~~

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

Beszúrt szöveg

A dokumentum kiegészítésének jelzésére használja a <ins>címkét.

Ezt a szövegsort a dokumentum kiegészítéseként kell kezelni.

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

Aláhúzott szöveg

A szöveg aláhúzásához használja a <u>címkét.

Ez a szövegsor aláhúzottként jelenik meg

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

Használja a HTML alapértelmezett kiemelő címkéit könnyű stílusokkal.

Kis szöveg

A szövegközi vagy szövegtömbök hangsúlytalanításához használja a <small>címkét, hogy a szöveget a szülő méretének 85%-ára állítsa. A címsorelemek megkapják a sajátjukat font-sizea beágyazottnál<small> elemekhez.

Alternatív megoldásként használhat egy soron belüli elemet .smalla tetszőleges helyett <small>.

Ezt a szövegsort apró betűsként kell kezelni.

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

Bátor

Nagyobb betűsúllyal rendelkező szövegrészlet kiemelésére.

A következő szövegrészlet félkövér szövegként jelenik meg .

<strong>rendered as bold text</strong>

Dőlt betűs

Egy szövegrészlet dőlt betűs kiemelésére.

A következő szövegrészlet dőlt betűs szövegként jelenik meg .

<em>rendered as italicized text</em>

Alternatív elemek

Nyugodtan használhatja <b>és <i>HTML5-ben. <b>célja, hogy kiemelje a szavakat vagy kifejezéseket anélkül, hogy további jelentőséget tulajdonítana, míg <i>többnyire hang, szakkifejezések stb.

Igazítási osztályok

Könnyen igazíthatja újra a szöveget az összetevőkhöz a szövegigazítási osztályokkal.

Balra igazított szöveg.

Középre igazított szöveg.

Jobbra igazított szöveg.

Igazolt szöveg.

Nincs tördelő szöveg.

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

Transzformációs osztályok

Szöveg átalakítása komponensekké szöveges nagybetűs osztályokkal.

Kisbetűs szöveg.

Nagybetűs szöveg.

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

Rövidítések

A HTML elem stilizált megvalósítása <abbr>a rövidítésekhez és a mozaikszavakhoz, hogy a kibővített verziót mutasson. Az attribútumot tartalmazó rövidítéseknek titlevilágos pontozott alsó szegélye és súgókurzora van a lebegtetéskor, amely további kontextust biztosít a lebegtetéskor és a kisegítő technológiák felhasználóinak.

Alapvető rövidítés

Az attribútum szó rövidítése az attr .

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

Initializmus

Adjon .initialismhozzá egy rövidítést valamivel kisebb betűmérethez.

A HTML a legjobb dolog a szeletelt kenyér óta.

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

Címek

Mutassa be a legközelebbi ős vagy az egész munka elérhetőségi adatait. A formázás megőrzéséhez az összes sort a -val fejezze be <br>.

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

Teljes név
[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>

Blokkidézetek

Más forrásból származó tartalomblokkok idézéséhez a dokumentumban.

Alapértelmezett idézőjel

Tekerje <blockquote>körbe bármely HTML -kódot idézetként. Egyenes idézetekhez egy <p>.

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

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

Idézetblokk opciók

Stílus- és tartalommódosítások a szabvány egyszerű variációihoz <blockquote>.

Forrás megnevezése

Adjon hozzá egyet <footer>a forrás azonosításához. A forrásmunka nevét burkolja be <cite>.

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

Valaki híres a Forrás címében

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

Alternatív kijelzők

Adjon hozzá .blockquote-reverseegy idézőjelhez jobbra igazított tartalommal.

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

Valaki híres a Forrás címében

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

Listák

Rendeletlen

Azon tételek listája, amelyekben a sorrend nem kifejezetten számít.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem és 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>

Rendelve

Azon tételek listája, amelyekben a sorrend kifejezetten számít.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem és 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ílus nélküli

Távolítsa el az alapértelmezett list-styleés a bal margót a listaelemekről (csak az azonnali gyermekeknél). Ez csak az azonnali leszármazott listaelemekre vonatkozik , vagyis minden beágyazott listához hozzá kell adnia az osztályt is.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem és 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>

Sorban

Helyezze az összes listaelemet egyetlen sorba, display: inline-block;némi világos párnázással.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Leírás

A kifejezések listája a hozzájuk tartozó leírásokkal.

Leírás listák: A leírások listája tökéletes a kifejezések meghatározásához.
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>

Vízszintes leírás

<dl>Sorolja fel egymás mellett a kifejezéseket és leírásokat . Az alapértelmezett s-hez hasonlóan halmozottan indul <dl>, de amikor a navigációs sáv kinyílik, akkor tegye ezeket is.

Leírás listák: A leírások listája tökéletes a kifejezések meghatározásához.
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>

Automatikus csonkítás

A vízszintes leíráslisták csonkolják azokat a kifejezéseket, amelyek túl hosszúak ahhoz, hogy elférjenek a bal oszlopban text-overflow. Szűkebb nézetablakban az alapértelmezett halmozott elrendezésre váltanak.

Sorban

Burkolja be a soron belüli kódrészleteket a következővel: <code>.

Például <section>soron belüliként kell csomagolni.

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

Felhasználói bevitel

Használja a <kbd>gombot a tipikusan billentyűzetről bevitt bevitel jelzésére.

A könyvtárak közötti váltáshoz írja be, cdmajd írja be a könyvtár nevét.
A beállítások módosításához nyomja meg a gombot 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>

Alap blokk

<pre>Többsoros kódhoz használja . Ügyeljen arra, hogy minden szögletes zárójelet elhagyjon a kódban a megfelelő megjelenítés érdekében.

<p>Minta szöveg itt...</p>

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

Opcionálisan hozzáadhatja az .pre-scrollableosztályt, amely 350 képpont maximális magasságot állít be, és egy y-tengely görgetősávot biztosít.

Változók

A változók jelzésére használja a <var>címkét.

y = m x + b

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

Minta kimenet

A blokkok jelzésére a programból származó minta kimenetként használja a <samp>címkét.

Ezt a szöveget egy számítógépes program minta kimeneteként kell kezelni.

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

Alap példa

Az alapvető stílushoz – könnyű párnázás és csak vízszintes elválasztók – adja hozzá az alaposztályt .tablebármely <table>. Rendkívül feleslegesnek tűnhet, de tekintettel a táblázatok széles körben elterjedt használatára más bővítményekhez, például naptárak és dátumválasztók számára, úgy döntöttünk, hogy elkülönítjük egyéni táblázatstílusainkat.

Választható táblázatfelirat.
#	Keresztnév	Vezetéknév	Felhasználónév
1	Mark	Ottó	@mdo
2	Jákób	Thornton	@zsír
3	Larry	a madár	@twitter

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

Csíkos sorok

Használja .table-stripeda zebracsíkok hozzáadásához a táblázat bármely sorához a <tbody>.

Böngészők közötti kompatibilitás

A csíkos táblázatok stílusa a :nth-childCSS-választón keresztül történik, amely az Internet Explorer 8-ban nem érhető el.

#	Keresztnév	Vezetéknév	Felhasználónév
1	Mark	Ottó	@mdo
2	Jákób	Thornton	@zsír
3	Larry	a madár	@twitter

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

Szegélyezett asztal

Adja hozzá .table-bordereda szegélyekhez a táblázat és a cellák minden oldalán.

#	Keresztnév	Vezetéknév	Felhasználónév
1	Mark	Ottó	@mdo
2	Jákób	Thornton	@zsír
3	Larry	a madár	@twitter

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

Mutasson rá sorokat

Hozzáadás .table-hovera lebegtetési állapot engedélyezéséhez a táblázaton belüli sorokon <tbody>.

#	Keresztnév	Vezetéknév	Felhasználónév
1	Mark	Ottó	@mdo
2	Jákób	Thornton	@zsír
3	Larry	a madár	@twitter

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

Sűrített asztal

Hozzáadása .table-condensedaz asztalok kompaktabbá tételéhez a cellapárnázás felére vágásával.

#	Keresztnév	Vezetéknév	Felhasználónév
1	Mark	Ottó	@mdo
2	Jákób	Thornton	@zsír
3	Larry, a madár		@twitter

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

Kontextuális osztályok

Használjon környezetfüggő osztályokat a táblázat sorainak vagy egyes celláinak színezéséhez.

Osztály	Leírás
`.active`	Egy adott sorra vagy cellára alkalmazza a lebegő színt
`.success`	Sikeres vagy pozitív cselekvést jelez
`.info`	Semleges információs változást vagy műveletet jelez
`.warning`	Figyelmeztetést jelez, amely figyelmet igényel
`.danger`	Veszélyes vagy potenciálisan negatív cselekvést jelez

#	Oszlopcím	Oszlopcím	Oszlopcím
1	Oszlop tartalma	Oszlop tartalma	Oszlop tartalma
2	Oszlop tartalma	Oszlop tartalma	Oszlop tartalma
3	Oszlop tartalma	Oszlop tartalma	Oszlop tartalma
4	Oszlop tartalma	Oszlop tartalma	Oszlop tartalma
5	Oszlop tartalma	Oszlop tartalma	Oszlop tartalma
6	Oszlop tartalma	Oszlop tartalma	Oszlop tartalma
7	Oszlop tartalma	Oszlop tartalma	Oszlop tartalma
8	Oszlop tartalma	Oszlop tartalma	Oszlop tartalma
9	Oszlop tartalma	Oszlop tartalma	Oszlop tartalma

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

Jelentést adni a kisegítő technológiáknak

A színek használata a táblázat sorainak vagy egyes celláinak jelentésének hozzáadására csak vizuális jelzést ad, amelyet nem ad át a kisegítő technológiák – például a képernyőolvasók – felhasználóinak. Győződjön meg arról, hogy a színnel jelölt információ vagy magából a tartalomból (a táblázat megfelelő sorában/cellájában látható szöveg) nyilvánvaló, vagy alternatív módon, például az .sr-onlyosztályba rejtett kiegészítő szöveggel szerepel.

Reszponzív táblázatok

Hozzon létre adaptív táblázatokat úgy, hogy bármelyiket becsomagolja .table, .table-responsivehogy vízszintesen görgessen kis eszközökön (768 képpont alatt). Ha 768 képpontnál nagyobb szélességet néz, akkor ezekben a táblázatokban nem fog különbséget látni.

Függőleges vágás/csonkítás

A reszponzív táblázatok a lehetőséget használják overflow-y: hidden, amely levág minden olyan tartalmat, amely túlmutat a táblázat alsó vagy felső szélén. Ez különösen levághatja a legördülő menüket és más, harmadik féltől származó widgeteket.

Firefox és mezőkészletek

A Firefoxnak van néhány kényelmetlen mezőkészlet-stílusa, widthamely zavarja az érzékeny táblázatot. Ezt nem lehet felülírni Firefox-specifikus feltörés nélkül, amelyet a Bootstrap nem biztosít:

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

További információért olvassa el ezt a Stack Overflow választ .

#	Táblázat címe	Táblázat címe	Táblázat címe	Táblázat címe	Táblázat címe	Táblázat címe
1	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella
2	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella
3	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella

#	Táblázat címe	Táblázat címe	Táblázat címe	Táblázat címe	Táblázat címe	Táblázat címe
1	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella
2	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella
3	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella

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

Alap példa

Az egyes űrlapvezérlők automatikusan kapnak valamilyen globális stílust. Az összes szöveges <input>, <textarea>, és <select>elem alapértelmezés szerint .form-controlértéke . width: 100%;Csomagolja be a címkéket és a vezérlőket .form-groupaz optimális távolság érdekében.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Ne keverje össze az űrlapcsoportokat a beviteli csoportokkal

Ne keverje össze közvetlenül az űrlapcsoportokat a bemeneti csoportokkal . Ehelyett helyezze be a beviteli csoportot az űrlapcsoportba.

Inline űrlap

Adja .form-inlinehozzá az űrlaphoz (amelynek nem kell lennie <form>) balra igazított és soron belüli blokkvezérlőkhöz. Ez csak a legalább 768 képpont széles nézetablakon belüli űrlapokra vonatkozik.

Egyedi szélességet igényelhet

A bemenetek és a kijelölések width: 100%;alapértelmezés szerint alkalmazva vannak a Bootstrapben. A soron belüli űrlapokon ezt visszaállítjuk, width: auto;így több vezérlőelem is ugyanazon a sorban található. Az elrendezéstől függően további egyéni szélességekre lehet szükség.

Mindig adjon hozzá címkéket

A képernyőolvasók gondot okoznak az űrlapokkal, ha nem ad hozzá minden bevitelhez címkét. Ezeknél a szövegközi űrlapoknál az .sr-onlyosztály segítségével elrejtheti a címkéket. Vannak további alternatív módszerek is a segítő technológiák címkézésére, mint például a aria-label, aria-labelledbyvagy titleattribútum. Ha ezek egyike sem található meg, a képernyőolvasók igénybe vehetik az placeholderattribútum használatát, ha van, de vegye figyelembe, hogy placeholdermás címkézési módszerek helyett nem javasolt a használata.

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

Vízszintes forma

Használja a Bootstrap előre meghatározott rácsosztályait a címkék és az űrlapvezérlők csoportjainak vízszintes elrendezésben történő igazításához, hozzáadva .form-horizontalaz űrlaphoz (amelynek nem kell lennie <form>). Ezzel rácssorként .form-groupfog viselkedni, így nincs szükség a .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>

Támogatott vezérlők

Példák a szabványos űrlapvezérlőkre, amelyeket egy példa űrlap-elrendezés támogat.

Bemenetek

A leggyakoribb űrlapvezérlők, szöveges beviteli mezők. Támogatja az összes HTML5-típust: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telés color.

Típusnyilatkozat szükséges

A bemenetek csak akkor lesznek teljesen stílusosak, ha typemegfelelően deklarálva vannak.

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

Beviteli csoportok

Ha integrált szöveget vagy gombokat szeretne hozzáadni bármely szövegalapú , előtt és/vagy után <input>, tekintse meg a beviteli csoport összetevőt .

Textarea

Űrlapvezérlő, amely támogatja a többsoros szöveget. Szükség szerint módosítsa rowsaz attribútumot.

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

Jelölőnégyzetek és rádiók

A jelölőnégyzetek egy vagy több lehetőség kiválasztására szolgálnak egy listában, míg a rádiók egy opció kiválasztására szolgálnak a sok közül.

A letiltott jelölőnégyzetek és rádiók támogatottak, de ahhoz, hogy a „nem engedélyezett” kurzort a szülőre vigye, <label>hozzá kell adnia az .disabledosztályt a szülőhöz .radio, .radio-inline, .checkbox, vagy .checkbox-inline.

Alapértelmezett (halmozott)

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

Beépített jelölőnégyzetek és rádiók

Használja a .checkbox-inlinevagy .radio-inlineosztályokat egy sor jelölőnégyzeten vagy rádión az ugyanazon a sorban megjelenő vezérlőkhöz.

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

Jelölőnégyzetek és rádiók címkeszöveg nélkül

Ha nincs szöveg a mezőben <label>, a bevitel a várt módon kerül elhelyezésre. Jelenleg csak nem beépített jelölőnégyzeteken és rádiókon működik. Ne felejtsen el valamilyen címkét biztosítani a kisegítő technológiákhoz (például a 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>

Kiválasztja

Vegye figyelembe, hogy sok natív kiválasztási menü – nevezetesen a Safariban és a Chrome-ban – lekerekített sarkokkal rendelkezik, amelyek nem módosíthatók a border-radiustulajdonságokon keresztül.

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

Az attribútummal <select>rendelkező vezérlők esetében multiplealapértelmezés szerint több lehetőség jelenik meg.

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

Statikus vezérlés

Ha egyszerű szöveget kell elhelyeznie egy űrlapcímke mellé az űrlapon, használja az .form-control-staticosztályt a <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ókusz állapot

Eltávolítjuk az alapértelmezett outlinestílusokat egyes űrlapvezérlőkről, és helyette egy karaktert alkalmazunk box-shadowa :focus.

Demo `:focus`állapot

A fenti példabemenet egyéni stílusokat használ a dokumentációban :focusa .form-control.

Letiltott állapot

Adja hozzá a disabledlogikai attribútumot egy bemenethez, hogy megakadályozza a felhasználói interakciókat. A letiltott bemenetek világosabbnak tűnnek, és not-allowedkurzort adnak hozzá.

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

Letiltott mezőkészletek

Adja hozzá az disabledattribútumot az a -hoz, hogy egyszerre <fieldset>letiltja az összes vezérlőt az attribútumban.<fieldset>

Figyelmeztetés a link funkciójával kapcsolatban`<a>`

A böngészők alapértelmezés szerint letiltottként kezelik az összes natív űrlapvezérlőt ( <input>, <select>és <button>elemet) az a-n belül <fieldset disabled>, megakadályozva a billentyűzet és az egér interakcióit. Ha azonban az űrlap <a ... class="btn btn-*">elemeket is tartalmaz, akkor ezek csak a stílust kapják pointer-events: none. Amint azt a gombok letiltott állapotáról szóló részben (és különösen a horgonyelemekre vonatkozó alszakaszban) megjegyeztük, ez a CSS-tulajdonság még nincs szabványosítva, és nem támogatja teljes mértékben az Opera 18-as és régebbi verzióiban, illetve az Internet Explorer 11-ben, és nyert. ne akadályozza meg a billentyűzetet használókat abban, hogy fókuszálni tudjanak vagy aktiválják ezeket a hivatkozásokat. Tehát a biztonság kedvéért használjon egyéni JavaScriptet az ilyen hivatkozások letiltásához.

Böngészők közötti kompatibilitás

Míg a Bootstrap ezeket a stílusokat minden böngészőben alkalmazni fogja, az Internet Explorer 11 és régebbi verziói nem támogatják teljes mértékben az disabledattribútumot a <fieldset>. Használjon egyéni JavaScriptet a mezőkészlet letiltásához ezekben a böngészőkben.

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

Csak olvasható állapot

Adja hozzá a readonlylogikai attribútumot egy bemenethez, hogy megakadályozza a bemenet értékének módosítását. A csak olvasható bemenetek világosabbnak tűnnek (akárcsak a letiltott bemenetek), de megtartják a szabványos kurzort.

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

Súgó szöveg

Blokkszintű súgószöveg az űrlapvezérlőkhöz.

Súgószöveg társítása űrlapvezérlőkkel

A súgószöveget kifejezetten hozzá kell rendelni ahhoz az űrlapvezérlőhöz, amelyhez az aria-describedbyattribútum használatával kapcsolódik. Ez biztosítja, hogy a kisegítő technológiák – például a képernyőolvasók – közöljék ezt a súgószöveget, amikor a felhasználó fókuszál, vagy belép a vezérlőbe.

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

Érvényesítési állapotok

A Bootstrap érvényesítési stílusokat tartalmaz a hiba-, figyelmeztetés- és sikerességi állapotokhoz az űrlapvezérlőkön. Használatához adja hozzá .has-warninga , .has-error, vagy .has-successelemet a szülőelemhez. Bármelyik .control-label, .form-control, és .help-blockezen az elemen belül megkapja az érvényesítési stílusokat.

Az érvényesítési állapot továbbítása a kisegítő technológiák és a színvak felhasználók számára

Ezen érvényesítési stílusok használata az űrlapvezérlők állapotának jelölésére csak vizuális, színalapú jelzést ad, amelyet nem ad át a kisegítő technológiák felhasználóinak – például a képernyőolvasóknak – vagy a színvak felhasználóknak.

Győződjön meg arról, hogy egy alternatív állapotjelzés is rendelkezésre áll. Például tartalmazhat egy tippet az állapotra vonatkozóan magában az űrlapvezérlő <label>szövegében (ahogy az a következő kódpéldában van), szerepeltethet egy Glyphicont (az osztályt használó megfelelő alternatív szöveggel .sr-only- lásd a Glyphicon példákat ), vagy megadhat egy további súgó szövegblokk. Kifejezetten a kisegítő technológiák esetében az érvénytelen űrlapvezérlőkhöz is hozzá lehet rendelni egy aria-invalid="true"attribútumot.

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

Opcionális ikonokkal

Opcionális visszajelzési ikonokat is hozzáadhat a .has-feedbackés a jobb oldali ikon hozzáadásával.

A visszajelzési ikonok csak szöveges <input class="form-control">elemekkel működnek.

Ikonok, címkék és beviteli csoportok

A visszacsatoló ikonok kézi elhelyezése szükséges a címke nélküli bemenetekhez és a jobb oldali kiegészítővel rendelkező bemeneti csoportokhoz . Erősen javasoljuk, hogy akadálymentesítési okokból minden bemenethez címkéket adjon meg. Ha meg szeretné akadályozni, hogy a címkék megjelenjenek, rejtse el őket az .sr-onlyosztályban. Ha nem kell címkéket tennie, állítsa topbe a visszajelzés ikon értékét. Bemeneti csoportok esetén állítsa be az rightértéket a megfelelő pixelértékre a bővítmény szélességétől függően.

Az ikon jelentésének átadása a kisegítő technológiáknak

Annak biztosítása érdekében, hogy a kisegítő technológiák – például a képernyőolvasók – helyesen közvetítsék az ikonok jelentését, további rejtett szöveget kell tartalmazni az .sr-onlyosztályhoz, és kifejezetten hozzá kell rendelni ahhoz az űrlapvezérlőhöz, amelyhez a használatához kapcsolódik aria-describedby. Alternatív megoldásként gondoskodjon arról, hogy a jelentés (például az a tény, hogy egy adott szövegbeviteli mezőhöz van figyelmeztetés) valamilyen más formában kerüljön továbbításra, például módosítsa az űrlapvezérlőhöz <label>társított tényleges szövegét.

Bár a következő példák már magában a szövegben is megemlítik a megfelelő űrlapvezérlők érvényesítési állapotát <label>, a fenti technikát ( .sr-onlyszöveg és aria-describedby) szemléltetés céljából alkalmaztuk.

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

Opcionális ikonok vízszintes és soros formában

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

Opcionális ikonok rejtett `.sr-only`címkékkel

Ha az .sr-onlyosztályt egy űrlapvezérlő elrejtésére használja <label>(ahelyett, hogy más címkézési beállításokat, például az aria-labelattribútumot használna), a Bootstrap automatikusan módosítja az ikon helyzetét, miután hozzáadta.

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

Méretezés szabályozása

Állítsa be a magasságot osztályok segítségével .input-lg, és állítsa be a szélességet a rácsoszlop osztályokkal, mint például a .col-lg-*.

Magassági méretezés

Hozzon létre magasabb vagy rövidebb űrlapvezérlőket, amelyek megfelelnek a gombok méretének.

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

Vízszintes formacsoportok méretei

Gyorsan méretezheti a címkéket és az űrlapvezérlőket a vagy .form-horizontalhozzáadásával ..form-group-lg.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>

Oszlopméretezés

Csomagolja be a bemeneteket rácsoszlopokba vagy bármilyen egyéni szülőelembe, hogy könnyen érvényesítse a kívánt szélességet.

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

Gombcímkék

Használja a gombosztályokat egy<a> , <button>, vagy <input>elemen.

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

Kontextus-specifikus használat

Míg a gombosztályok használhatók a <a>és <button>elemeken, a navigációs és navigációs sáv komponenseinkben csak <button>az elemek támogatottak.

Gombként működő linkek

Ha az <a>elemek gombként működnek – oldalon belüli funkcionalitást indítanak el, nem pedig az aktuális oldalon belüli másik dokumentumra vagy szakaszra navigálnak –, akkor megfelelő jelölést is kell adni nekik role="button".

Böngészők közötti renderelés

Bevált gyakorlatként erősen javasoljuk az <button>elem használatát, amikor csak lehetséges , hogy biztosítsa a böngészők közötti megfelelő megjelenítést.

Többek között van egy hiba a Firefox <30-ban , amely megakadályozza, hogy beállítsuk a line-height-alapú <input>gombokat, ami miatt azok nem pontosan egyeznek a Firefox többi gombjának magasságával.

Lehetőségek

Használja bármelyik elérhető gombosztályt stílusos gomb gyors létrehozásához.

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

Jelentést adni a kisegítő technológiáknak

A színek használata a gombok jelentésének növelésére csak vizuális jelzést ad, amely nem jelenik meg a kisegítő technológiák – például a képernyőolvasók – felhasználói számára. Győződjön meg arról, hogy a színnel jelölt információ vagy magából a tartalomból (a gomb látható szövegéből) nyilvánvaló, vagy más módon, például az .sr-onlyosztályba rejtett kiegészítő szöveggel szerepel.

Méretek

Nagyobb vagy kisebb gombokat szeretne? Adja hozzá .btn-lga , .btn-sm, vagy .btn-xsa további méretekhez.

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

Hozzon létre blokkszintű gombokat – olyanokat, amelyek átfogják a szülő teljes szélességét – a hozzáadásával .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>

Aktív állapot

A gombok lenyomva jelennek meg (sötétebb háttérrel, sötétebb szegéllyel és beillesztett árnyékkal), ha aktívak. Az <button>elemek esetében ez a következőn keresztül történik :active. Az <a>elemek esetében ez a következővel történik: .active. Használhatja azonban .activeaz <button>s-t (és tartalmazza aaria-pressed="true" attribútumot), ha az aktív állapotot programozottan replikálnia kell.

Gomb elem

Nem kell hozzá :active, mivel ez egy álosztály, de ha ugyanazt a megjelenést kell erőltetnie, menjen tovább, és adja hozzá a .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>

Horgony elem

Adja hozzá az .activeosztályt a <a>gombokhoz.

Elsődleges link Link

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

Letiltott állapot

Tegye a gombokat kattinthatatlanná, ha visszahalkítja őket a gombbal opacity.

Gomb elem

Adja hozzá az disabledattribútumot a <button>gombokhoz.

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

Böngészők közötti kompatibilitás

Ha hozzáadja az disabledattribútumot a -hoz <button>, az Internet Explorer 9 és régebbi verziói szürkévé teszik a szöveget, és csúnya szövegárnyékot jelenítenek meg, amelyet nem tudunk kijavítani.

Horgony elem

Adja hozzá az .disabledosztályt a <a>gombokhoz.

Elsődleges link Link

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

.disabledHasznossági osztályként használjuk itt, hasonlóan a közös .activeosztályhoz, tehát nem szükséges előtag.

A link funkcióira vonatkozó figyelmeztetés

Ez az osztály pointer-events: noneaz s hivatkozási funkcióit próbálja letiltani <a>, de ez a CSS-tulajdonság még nincs szabványosítva, és nem támogatja teljes mértékben az Opera 18-as és régebbi verzióiban, illetve az Internet Explorer 11-ben. Ezenkívül még a pointer-events: nonebillentyűzetet támogató böngészőkben is A navigáció változatlan marad, ami azt jelenti, hogy a látó billentyűzet-felhasználók és a kisegítő technológiák felhasználói továbbra is aktiválhatják ezeket a hivatkozásokat. Tehát a biztonság kedvéért használjon egyéni JavaScriptet az ilyen hivatkozások letiltásához.

Reszponzív képek

A Bootstrap 3 képei reszponzív-baráttá tehetők az .img-responsiveosztály hozzáadásával. Ez vonatkozik a max-width: 100%;, height: auto;és display: block;a képre, így az szépen méretezett a szülőelemhez.

Az .img-responsiveosztályt használó képek középre állításához használja a .center-blockhelyett a .text-center. A használattal kapcsolatos további részletekért lásd a segédosztályok részt.center-block .

SVG képek és IE 8-10

Az Internet Explorer 8-10 verziójában az SVG-képek .img-responsivearánytalanul nagyok. Ennek javításához adja hozzá, width: 100% \9;ahol szükséges. A Bootstrap ezt nem alkalmazza automatikusan, mivel ez bonyodalmakat okoz más képformátumoknál.

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

Kép alakzatok

Adjon hozzá osztályokat egy <img>elemhez, hogy könnyen stílusozhassa a képeket bármely projektben.

Böngészők közötti kompatibilitás

Ne feledje, hogy az Internet Explorer 8 nem támogatja a lekerekített sarkokat.

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

Kontextuális színek

Egy maroknyi hangsúlyos használati osztály segítségével adja át a jelentést a színekkel. Ezeket a hivatkozásokra is alkalmazni lehet, és elsötétülnek a lebegtetéskor, mint az alapértelmezett linkstílusaink.

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>

Konkrétsággal foglalkozni

Néha a hangsúlyos osztályok nem alkalmazhatók egy másik szelektor sajátosságai miatt. A legtöbb esetben elegendő megoldás, ha a szöveget <span>az osztályba csomagolja.

Jelentést adni a kisegítő technológiáknak

A szín használata a jelentés hozzáadására csak vizuális jelzést ad, amelyet nem közvetítenek a kisegítő technológiák – például a képernyőolvasók – felhasználói számára. Győződjön meg arról, hogy a színnel jelölt információ vagy magából a tartalomból nyilvánvaló (a kontextuális színek csak a szövegben/jelölésben már jelenlévő jelentés megerősítésére szolgálnak), vagy alternatív eszközökkel, például az .sr-onlyosztályba rejtett kiegészítő szöveggel szerepelnek. .

Kontextuális hátterek

A kontextuális szövegszínosztályokhoz hasonlóan könnyedén beállíthatja az elemek hátterét bármely környezeti osztályra. A horgonyösszetevők lebegtetéskor elsötétülnek, akárcsak a szövegosztályok.

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>

Konkrétsággal foglalkozni

Néha a kontextuális háttérosztályok nem alkalmazhatók egy másik szelektor sajátosságai miatt. Egyes esetekben elegendő megoldás, ha az elem tartalmát egy <div>osztályba csomagolja.

Jelentést adni a kisegítő technológiáknak

A kontextuális színekhez hasonlóan ügyeljen arra, hogy a színeken keresztül közvetített minden jelentés olyan formátumban is megjelenjen, amely nem pusztán prezentációs.

ikon bezárása

Használja az általános bezárás ikont a tartalom, például a módok és figyelmeztetések elvetéséhez.

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

Carets

A legördülő menü funkcióinak és irányának jelzésére használjon jelzőgombokat. Ne feledje, hogy az alapértelmezett mutató automatikusan megfordul a legördülő menükben .

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

Gyors úszók

Lebegtessen egy elemet balra vagy jobbra egy osztállyal. !importanttartalmazza a specifikus problémák elkerülése érdekében. Az osztályok mixinként is használhatók.

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

A tartalomblokkok középpontja

Állítson be egy elemet display: blockés középre a segítségével margin. Kapható mixinként és osztályként is.

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

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

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

Clearfix

Könnyen törölheti s a szülő elemhezfloat való hozzáadásával . A Nicolas Gallagher által népszerűsített micro clearfixet használja . Keverőként is használható..clearfix

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

Tartalom megjelenítése és elrejtése

Egy elem megjelenítésének vagy elrejtésének kényszerítése ( beleértve a képernyőolvasókat is ) a .showés .hiddenosztályok használatával. Ezeket az osztályokat !importanta specifikussági ütközések elkerülésére használják, akárcsak a gyors lebegtetést . Csak blokkszint váltáshoz érhetők el. Mixinként is használhatók.

.hideelérhető, de nem mindig van hatással a képernyőolvasókra, és a v3.0.1-től elavult . Használja .hiddenvagy .sr-onlyhelyette.

Továbbá .invisiblecsak egy elem láthatóságának átkapcsolására használható, vagyis az displaynem módosul, és az elem továbbra is befolyásolhatja a dokumentum menetét.

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

Képernyőolvasó és billentyűzet navigációs tartalom

Egy elem elrejtése az összes eszközön, kivéve a képernyőolvasókat , amelyekben a .sr-only. Kombinálja .sr-onlya -val .sr-only-focusable, ha az elemet újra szeretné megjeleníteni, amikor az élesre van állítva (pl. csak billentyűzettel rendelkező felhasználó által). Szükséges a kisegítő lehetőségek bevált gyakorlatainak követéséhez . Mixinként is használható.

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

Képcsere

Használja az .text-hideosztályt vagy a mixint, hogy egy elem szövegtartalmát háttérképre cserélje.

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

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

A gyorsabb mobilbarát fejlesztés érdekében használja ezeket a segédprogram-osztályokat a tartalom eszközönkénti megjelenítésére és elrejtésére médialekérdezéssel. Tartalmaznak segédprogramokat is a tartalom nyomtatáskor történő váltásához.

Próbálja meg ezeket korlátozottan használni, és ne hozzon létre egy webhely teljesen eltérő verzióit. Ehelyett használja őket az egyes eszközök bemutatásának kiegészítésére.

Elérhető osztályok

Használja a rendelkezésre álló osztályok egyetlen vagy kombinációját a tartalom nézetablak töréspontjai közötti váltásához.

	Extra kicsi készülékekTelefonok (<768 képpont)	Kisméretű készülékekTáblagépek (≥ 768 képpont)	Közepes eszközökAsztali számítógépek (≥ 992 képpont)	Nagyméretű készülékekAsztali számítógépek (≥ 1200 képpont)
`.visible-xs-*`	Látható	Rejtett	Rejtett	Rejtett
`.visible-sm-*`	Rejtett	Látható	Rejtett	Rejtett
`.visible-md-*`	Rejtett	Rejtett	Látható	Rejtett
`.visible-lg-*`	Rejtett	Rejtett	Rejtett	Látható
`.hidden-xs`	Rejtett	Látható	Látható	Látható
`.hidden-sm`	Látható	Rejtett	Látható	Látható
`.hidden-md`	Látható	Látható	Rejtett	Látható
`.hidden-lg`	Látható	Látható	Látható	Rejtett

A 3.2.0-s verziótól kezdve .visible-*-*az egyes töréspontokhoz tartozó osztályok három változatban érhetők el, egy az displayalább felsorolt CSS-tulajdonságok mindegyikéhez.

Osztályok csoportja	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Így xspéldául extra kicsi ( ) képernyők esetén a .visible-*-*következő osztályok állnak rendelkezésre: .visible-xs-block, .visible-xs-inline, és .visible-xs-inline-block.

.visible-xsA , .visible-sm, .visible-mdés osztályok .visible-lgszintén léteznek, de a 3.2.0 verziótól elavultak . Ezek megközelítőleg egyenértékűek a .visible-*-block-val, kivéve a további speciális eseteket, amelyek az <table>elemek váltásához kapcsolódnak.

Nyomtatási osztályok

A szokásos reszponzív osztályokhoz hasonlóan használja ezeket a tartalom nyomtatásra váltásához.

osztályok	Böngésző	Nyomtatás
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Rejtett	Látható
`.hidden-print`	Látható	Rejtett

Az osztály .visible-printszintén létezik, de a 3.2.0 verziótól elavult . Ez megközelítőleg megegyezik a .visible-print-block-val, kivéve a <table>kapcsolódó elemek további speciális eseteit.

Teszt esetek

Méretezze át a böngészőt, vagy töltse be a különböző eszközöket, hogy tesztelje a reszponzív segédprogram-osztályokat.

Látható a...

A zöld pipa jelzi, hogy az elem látható az aktuális nézetablakban.

Extra kicsi ✔ Látható x-small-en

Kicsi ✔ Kicsiben látható

Közepes ✔ Közepes felületen látható

Nagy ✔ Nagy méretben látható

Extra kicsi és kicsi ✔ Látható x-small és small-on

Közepes és nagy ✔ Közepes és nagy méreteken látható

Extra kicsi és közepes ✔ Látható x-small és medium készülékeken

Kicsit és nagyot ✔ Kicsiben és nagyban is látható

Extra kicsi és nagy ✔ Látható x-small és nagy felületeken

Kicsi és közepes ✔ Kis és közepes gépeken látható

Rejtett...

Itt a zöld pipák azt is jelzik, hogy az elem el van rejtve az aktuális nézetablakban.

Extra kicsi ✔ Rejtett x-small

Kicsi ✔ Kicsire rejtve

Közepes ✔ Rejtett közepesen

Nagy ✔ Nagyon rejtve

Extra kicsi és kicsi ✔ Rejtett x-small és small

Közepes és nagy ✔ Rejtett közepes és nagy méreteken

Extra kicsi és közepes ✔ Rejtett x-small és mediumon

Kicsit és nagyot ✔ Rejtett kicsi és nagy

Extra kicsi és nagy ✔ Rejtett x-small és big

Kicsi és közepes ✔ Rejtett kis és közepes

A Bootstrap CSS-je a Less-re épül, egy olyan előfeldolgozóra, amely további funkciókkal, például változókkal, keverőkkel és CSS-fordítási függvényekkel rendelkezik. Azok, akik a forrás Less fájlokat szeretnék használni az összeállított CSS-fájlok helyett, kihasználhatják a keretrendszerben használt számos változót és mixint.

A Grid változókat és mixineket a Grid rendszer szakasz tárgyalja .

Bootstrap fordítása

A Bootstrap legalább kétféleképpen használható: a lefordított CSS-szel vagy a forrás Less fájlokkal. A Kevesebb fájlok összeállításához olvassa el az Első lépések szakaszt , amelyben megtudhatja, hogyan állíthatja be a fejlesztői környezetet a szükséges parancsok futtatásához.

Harmadik fél fordítási eszközei működhetnek a Bootstrap-pel, de ezeket a mi csapatunk nem támogatja.

Változók

A változókat az egész projekt során használják az általánosan használt értékek, például színek, térközök vagy betűkészletek központosítására és megosztására. A teljes lebontásért tekintse meg a Testreszabót .

Színek

Könnyen használható két színséma: szürkeárnyalatos és szemantikus. A szürkeárnyalatos színek gyors hozzáférést biztosítanak a fekete általánosan használt árnyalataihoz, míg a szemantika a kontextuális értékekhez rendelt különféle színeket tartalmazza.

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

Használja ezen színváltozók bármelyikét úgy, ahogy vannak, vagy rendelje hozzá őket a projekt jelentőségteljesebb változóihoz.

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

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

Állvány

Egy maroknyi változó a webhely vázának kulcsfontosságú elemeinek gyors testreszabásához.

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

Linkek

Könnyen stílusozhatja hivatkozásait a megfelelő színnel, egyetlen értékkel.

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

Ne feledje, hogy a @link-hover-colorLess egy másik nagyszerű eszköze, a funkció segítségével automatikusan létrehozza a megfelelő lebegő színt. Használhatja a darken, lighten, saturate, és desaturate.

Tipográfia

Néhány gyorsváltozó segítségével könnyedén beállíthatja a betűtípust, a szövegméretet, a kezdőbetűket és még sok mást. A Bootstrap ezeket is felhasználja, hogy egyszerű tipográfiai keverést biztosítson.

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

Ikonok

Két gyors változó az ikonok helyének és fájlnevének testreszabásához.

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

Alkatrészek

A Bootstrap összetevői néhány alapértelmezett változót használnak a közös értékek beállításához. Itt vannak a leggyakrabban használtak.

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

Vendor mixins

A szállítói mixinek olyan mixinek, amelyek több böngésző támogatását szolgálják azáltal, hogy az összes releváns szállítói előtagot belefoglalják a lefordított CSS-be.

Dobozméretezés

Állítsa vissza az alkatrészek dobozának modelljét egyetlen keveréssel. A szövegkörnyezetért tekintse meg a Mozilla hasznos cikkét .

A mixin a v3.2.0 verziótól elavult , az Autoprefixer bevezetésével. A visszafelé kompatibilitás megőrzése érdekében a Bootstrap továbbra is belsőleg használja a mixint a Bootstrap v4-ig.

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

Lekerekített sarok

Ma minden modern böngésző támogatja az előtag nélküli border-radiustulajdonságot. Mint ilyen, nincs .border-radius()keverés, de a Bootstrap tartalmaz parancsikonokat az objektum egy adott oldalán lévő két sarok gyors lekerekítésére.

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

Doboz (Drop) árnyékok

Ha a célközönség a legújabb és legjobb böngészőket és eszközöket használja, mindenképpen csak önmagában használja a box-shadowtulajdont. Ha támogatásra van szüksége a régebbi Android (v4 előtti) és iOS-eszközökhöz (iOS 5 előtt), használja az elavult mixint a szükséges -webkitelőtag felvételéhez.

A mixin a 3.1.0-s verziótól elavult , mivel a Bootstrap hivatalosan nem támogatja azokat az elavult platformokat, amelyek nem támogatják a szabványos tulajdonságot. A visszafelé kompatibilitás megőrzése érdekében a Bootstrap továbbra is belsőleg használja a mixint a Bootstrap v4-ig.

Ügyeljen arra, hogy rgba()a doboz árnyékában színeket használjon, hogy azok a lehető legzökkenőmentesebben illeszkedjenek a háttérhez.

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

Átmenetek

Több mixin a rugalmasságért. Állítsa be az összes átmeneti információt eggyel, vagy adjon meg külön késleltetést és időtartamot, ha szükséges.

A mixinek a v3.2.0-tól kezdve elavultak , az Autoprefixer bevezetésével. A visszafelé kompatibilitás megőrzése érdekében a Bootstrap továbbra is belsőleg használja a mixineket a Bootstrap v4-ig.

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

Átváltozások

Bármely objektum elforgatása, méretezése, lefordítása (mozgatása) vagy ferdítése.

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

Animációk

Egyetlen mixin a CSS3 összes animációs tulajdonságának használatához egy deklarációban, más mixin pedig az egyes tulajdonságokhoz.

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

Átlátszatlanság

Állítsa be az átlátszatlanságot az összes böngésző számára, és biztosítson filtertartalékot az IE8 számára.

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

Helyőrző szöveg

Minden mezőn belül biztosítson kontextust az űrlapvezérlők számára.

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

Oszlopok

Hozzon létre oszlopokat CSS-en keresztül egyetlen elemen belül.

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

Színátmenetek

Bármely két színt egyszerűen háttérszínátmenetté alakíthatja. Legyen fejlettebb, és határozzon meg egy irányt, használjon három színt, vagy használjon sugárirányú színátmenetet. Egyetlen keveréssel megkapja az összes szükséges előtagú szintaxist.

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

Megadhatja egy szabványos kétszínű, lineáris gradiens szögét is:

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

Ha borbélycsíkos stílusátmenetre van szüksége, az is egyszerű. Csak adjon meg egyetlen színt, és egy áttetsző fehér csíkot fedünk le.

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

Emeld fel az ante, és használj helyette három színt. Állítsa be az első színt, a második színt, a második szín színstopját (százalékos érték, például 25%) és a harmadik színt ezekkel a mixekkel:

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

Fel a fejjel! Ha valaha is el kell távolítania egy színátmenetet, feltétlenül távolítsa el az esetlegesen filterhozzáadott IE-specifikus elemeket. Ezt megteheti a .reset-filter()mixin használatával background-image: none;.

Utility mixins

A segédprogram mixinek olyan mixinek, amelyek az egyébként nem kapcsolódó CSS-tulajdonságokat egyesítik egy adott cél vagy feladat elérése érdekében.

Clearfix

Felejtsd el class="clearfix"az elemek hozzáadását, és adott esetben add hozzá a .clearfix()mixint. Nicolas Gallagher micro clearfixjét használja .

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

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

Vízszintes központosítás

Gyorsan középre állítsa bármelyik elemet a szülőjén belül. Megköveteli widthvagy max-widthbeállítandó.

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

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

Méretezési segédek

Egyszerűbben adja meg az objektum méreteit.

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

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

Átméretezhető szövegterületek

Könnyen konfigurálhatja az átméretezési beállításokat bármely szövegterülethez vagy bármely más elemhez. Alapértelmezés szerint a böngésző normál működése ( both).

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

Szöveg csonkolása

Egyszerűen csonkolhat szöveget háromponttal, egyetlen keveréssel. Az elemnek szintnek kell lennie block.inline-block

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

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

Retina képek

Adjon meg két képútvonalat és a @1x képméretet, és a Bootstrap @2x médialekérdezést fog adni. Ha sok képet szeretne megjeleníteni, fontolja meg a retina kép CSS-jének manuális megírását egyetlen médialekérdezésben.

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

Míg a Bootstrap a Less-re épül, van egy hivatalos Sass portja is . Egy külön GitHub-tárolóban karbantartjuk, és a frissítéseket konverziós szkripttel kezeljük.

Amit tartalmaz

Mivel a Sass portnak külön repója van, és kissé eltérő közönséget szolgál ki, a projekt tartalma nagymértékben eltér a fő Bootstrap projekttől. Ez biztosítja, hogy a Sass port a lehető legtöbb Sass-alapú rendszerrel kompatibilis legyen.

Pálya	Leírás
`lib/`	Ruby gem kód (Sass konfiguráció, Rails és Compass integráció)
`tasks/`	Átalakító szkriptek (az upstream Less-ből Sass-re váltás)
`test/`	Összeállítási tesztek
`templates/`	Iránytű csomag jegyzék
`vendor/assets/`	Sass, JavaScript és font fájlok
`Rakefile`	Belső feladatok, például rake és konvertálás

Látogassa meg a Sass port GitHub tárházát , hogy megtekinthesse ezeket a fájlokat működés közben.

Telepítés

A Bootstrap for Sass telepítésével és használatával kapcsolatos információkért tekintse meg a GitHub readme tárházát . Ez a legfrissebb forrás, és a Rails, Compass és szabványos Sass projektekhez használható információkat tartalmaz.

Bootstrap Sass számára

CSS

Áttekintés

HTML5 doctype

Először mobil

Tipográfia és linkek

Normalize.css

Konténerek

Rács rendszer

Bevezetés

Médialekérdezések

Rács opciók

Példa: Vízszintesre halmozott

Példa: Folyadéktartály

Példa: mobil és asztali számítógép

Példa: mobil, táblagép, asztali számítógép

Példa: Oszlopcsomagolás

Reszponzív oszlop visszaállítása

Oszlopok eltolása

Oszlopok egymásba ágyazása

Oszlopsorrend

Kevesebb mixin és változó

Változók

Mixins

Használati példa

Tipográfia

Címsorok

h1. Bootstrap címsor

h2. Bootstrap címsor

h3. Bootstrap címsor

h4. Bootstrap címsor

h5. Bootstrap címsor

h6. Bootstrap címsor

h1. Bootstrap címsor Másodlagos szöveg

h2. Bootstrap címsor Másodlagos szöveg

h3. Bootstrap címsor Másodlagos szöveg

h4. Bootstrap címsor Másodlagos szöveg

h5. Bootstrap címsor Másodlagos szöveg

h6. Bootstrap címsor Másodlagos szöveg

Testmásolat

Vezető törzs másolata

Kevesebbből épült

Szövegközi elemek

Megjelölt szöveg

Törölt szöveg

Áthúzott szöveg

Beszúrt szöveg

Aláhúzott szöveg

Kis szöveg

Bátor

Dőlt betűs

Alternatív elemek

Igazítási osztályok

Transzformációs osztályok

Rövidítések

Alapvető rövidítés

Initializmus

Címek

Blokkidézetek

Alapértelmezett idézőjel

Idézetblokk opciók

Forrás megnevezése

Alternatív kijelzők

Listák

Rendeletlen

Rendelve

Stílus nélküli

Sorban

Leírás

Vízszintes leírás

Automatikus csonkítás

Kód

Sorban

Felhasználói bevitel

Alap blokk

Változók

Minta kimenet

Táblázatok

Alap példa

Csíkos sorok

Böngészők közötti kompatibilitás

Demo `:focus`állapot

Figyelmeztetés a link funkciójával kapcsolatban`<a>`

Opcionális ikonok rejtett `.sr-only`címkékkel