CSS
Globális CSS-beállítások, alapvető HTML-elemek stílusosan és bővíthető osztályokkal továbbfejlesztve, valamint fejlett rácsrendszer.
Globális CSS-beállítások, alapvető HTML-elemek stílusosan és bővíthető osztályokkal továbbfejlesztve, valamint fejlett rácsrendszer.
Ismerje meg a Bootstrap infrastruktúrájának kulcsfontosságú elemeit, beleértve a jobb, gyorsabb és erősebb webfejlesztést.
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>
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=no
A 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">
A Bootstrap alapvető globális megjelenítési, tipográfiai és hivatkozási stílusokat állít be. Konkrétan mi:
background-color: #fff;
be abody
@font-family-base
, @font-size-base
, és @line-height-base
attribútumokat tipográfiai alapként@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
.
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 .
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-fluid
teljes 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 .
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:
.container
A 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..row
és .col-xs-4
elérhetők a rácselrendezések gyors elkészítéséhez. Kevesebb mixin is használható szemantikusabb elrendezésekhez.padding
. Ez a kitöltés az első és az utolsó oszlop soraiban eltolódik az .row
s negatív margójával..col-xs-4
..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.
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-width
CSS-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) { ... }
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 |
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
.
<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>
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 .container
a következőre módosítja .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
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.
<!-- 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>
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-*
.
<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>
Ha egy sorban több mint 12 oszlop van elhelyezve, a további oszlopok minden csoportja egy egységként új sorba kerül.
<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 > 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>
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 .
<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 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-4
mozog ..col-md-4
<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>
Ha be szeretné ágyazni a tartalmat az alapértelmezett rácsba, adjon hozzá egy új .row
oszlopké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).
<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>
Könnyen módosíthatja beépített rácsoszlopaink sorrendjét a .col-md-push-*
módosító .col-md-pull-*
osztályokkal.
<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>
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.
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;
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));
}
}
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>
Az összes HTML-címsor <h1>
elérhető <h6>
a következőig. .h1
keresztül .h6
osztá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 .small
osztá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>
A Bootstrap globális alapértelmezése font-size
14 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>
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>
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.
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.
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>
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>
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>
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.
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-size
a beágyazottnál<small>
elemekhez.
Alternatív megoldásként használhat egy soron belüli elemet .small
a 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>
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>
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>
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.
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>
Szöveg átalakítása komponensekké szöveges nagybetűs osztályokkal.
Kisbetűs szöveg.
Nagybetű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>
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 title
vilá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.
Az attribútum szó rövidítése az attr .
<abbr title="attribute">attr</abbr>
Adjon .initialism
hozzá 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>
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>
.
<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>
Más forrásból származó tartalomblokkok idézéséhez a dokumentumban.
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>
Stílus- és tartalommódosítások a szabvány egyszerű variációihoz <blockquote>
.
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.
<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>
Adjon hozzá .blockquote-reverse
egy idézőjelhez jobbra igazított tartalommal.
<blockquote class="blockquote-reverse">
...
</blockquote>
Azon tételek listája, amelyekben a sorrend nem kifejezetten számít.
<ul>
<li>...</li>
</ul>
Azon tételek listája, amelyekben a sorrend kifejezetten számít.
<ol>
<li>...</li>
</ol>
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.
<ul class="list-unstyled">
<li>...</li>
</ul>
Helyezze az összes listaelemet egyetlen sorba, display: inline-block;
némi világos párnázással.
<ul class="list-inline">
<li>...</li>
</ul>
A kifejezések listája a hozzájuk tartozó leírásokkal.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
<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.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
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.
Burkolja be a soron belüli kódrészleteket a következővel: <code>
.
<section>
soron belüliként kell csomagolni.
For example, <code><section></code> should be wrapped as inline.
Használja a <kbd>
gombot a tipikusan billentyűzetről bevitt bevitel jelzésére.
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>
<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><p>Sample text here...</p></pre>
Opcionálisan hozzáadhatja az .pre-scrollable
osztályt, amely 350 képpont maximális magasságot állít be, és egy y-tengely görgetősávot biztosít.
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>
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>
Az alapvető stílushoz – könnyű párnázás és csak vízszintes elválasztók – adja hozzá az alaposztályt .table
bá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.
# | 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 |
<table class="table">
...
</table>
Használja .table-striped
a zebracsíkok hozzáadásához a táblázat bármely sorához a <tbody>
.
A csíkos táblázatok stílusa a :nth-child
CSS-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 |
<table class="table table-striped">
...
</table>
Adja hozzá .table-bordered
a 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 |
<table class="table table-bordered">
...
</table>
Hozzáadás .table-hover
a 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 |
<table class="table table-hover">
...
</table>
Hozzáadása .table-condensed
az 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 |
<table class="table table-condensed">
...
</table>
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>
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-only
osztályba rejtett kiegészítő szöveggel szerepel.
Hozzon létre adaptív táblázatokat úgy, hogy bármelyiket becsomagolja .table
, .table-responsive
hogy 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.
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.
A Firefoxnak van néhány kényelmetlen mezőkészlet-stílusa, width
amely 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>
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-group
az 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 közvetlenül az űrlapcsoportokat a bemeneti csoportokkal . Ehelyett helyezze be a beviteli csoportot az űrlapcsoportba.
Adja .form-inline
hozzá 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.
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.
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-only
osztá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-labelledby
vagy title
attribútum. Ha ezek egyike sem található meg, a képernyőolvasók igénybe vehetik az placeholder
attribútum használatát, ha van, de vegye figyelembe, hogy placeholder
má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>
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-horizontal
az űrlaphoz (amelynek nem kell lennie <form>
). Ezzel rácssorként .form-group
fog 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>
Példák a szabványos űrlapvezérlőkre, amelyeket egy példa űrlap-elrendezés támogat.
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
.
A bemenetek csak akkor lesznek teljesen stílusosak, ha type
megfelelően deklarálva vannak.
<input type="text" class="form-control" placeholder="Text input">
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 .
Űrlapvezérlő, amely támogatja a többsoros szöveget. Szükség szerint módosítsa rows
az attribútumot.
<textarea class="form-control" rows="3"></textarea>
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 .disabled
osztályt a szülőhöz .radio
, .radio-inline
, .checkbox
, vagy .checkbox-inline
.
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—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—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>
Használja a .checkbox-inline
vagy .radio-inline
osztá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>
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>
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-radius
tulajdonsá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 multiple
alapé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>
Ha egyszerű szöveget kell elhelyeznie egy űrlapcímke mellé az űrlapon, használja az .form-control-static
osztá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>
Eltávolítjuk az alapértelmezett outline
stílusokat egyes űrlapvezérlőkről, és helyette egy karaktert alkalmazunk box-shadow
a :focus
.
:focus
állapotA fenti példabemenet egyéni stílusokat használ a dokumentációban :focus
a .form-control
.
Adja hozzá a disabled
logikai attribútumot egy bemenethez, hogy megakadályozza a felhasználói interakciókat. A letiltott bemenetek világosabbnak tűnnek, és not-allowed
kurzort adnak hozzá.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Adja hozzá az disabled
attribútumot az a -hoz, hogy egyszerre <fieldset>
letiltja az összes vezérlőt az attribútumban.<fieldset>
<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.
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 disabled
attribú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>
Adja hozzá a readonly
logikai 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>
Blokkszintű súgószöveg az űrlapvezérlőkhöz.
A súgószöveget kifejezetten hozzá kell rendelni ahhoz az űrlapvezérlőhöz, amelyhez az aria-describedby
attribú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>
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-warning
a , .has-error
, vagy .has-success
elemet a szülőelemhez. Bármelyik .control-label
, .form-control
, és .help-block
ezen az elemen belül megkapja az érvényesítési stílusokat.
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 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.
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-only
osztályban. Ha nem kell címkéket tennie, állítsa top
be 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.
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-only
osztá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-only
szö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>
<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>
.sr-only
címkékkelHa az .sr-only
osztá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-label
attribú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>
Á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-*
.
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>
Gyorsan méretezheti a címkéket és az űrlapvezérlőket a vagy .form-horizontal
hozzá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>
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>
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">
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.
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"
.
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.
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>
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-only
osztályba rejtett kiegészítő szöveggel szerepel.
Nagyobb vagy kisebb gombokat szeretne? Adja hozzá .btn-lg
a , .btn-sm
, vagy .btn-xs
a 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>
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 .active
az <button>
s-t (és tartalmazza aaria-pressed="true"
attribútumot), ha az aktív állapotot programozottan replikálnia kell.
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>
Adja hozzá az .active
osztályt a <a>
gombokhoz.
<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>
Tegye a gombokat kattinthatatlanná, ha visszahalkítja őket a gombbal opacity
.
Adja hozzá az disabled
attribú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>
Ha hozzáadja az disabled
attribú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.
Adja hozzá az .disabled
osztályt a <a>
gombokhoz.
<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>
.disabled
Hasznossági osztályként használjuk itt, hasonlóan a közös .active
osztályhoz, tehát nem szükséges előtag.
Ez az osztály pointer-events: none
az 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: none
billentyű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.
A Bootstrap 3 képei reszponzív-baráttá tehetők az .img-responsive
osztá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-responsive
osztályt használó képek középre állításához használja a .center-block
helyett a .text-center
. A használattal kapcsolatos további részletekért lásd a segédosztályok részt.center-block
.
Az Internet Explorer 8-10 verziójában az SVG-képek .img-responsive
ará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">
Adjon hozzá osztályokat egy <img>
elemhez, hogy könnyen stílusozhassa a képeket bármely projektben.
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">
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>
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.
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-only
osztályba rejtett kiegészítő szöveggel szerepelnek. .
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>
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.
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.
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">×</span></button>
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>
Lebegtessen egy elemet balra vagy jobbra egy osztállyal. !important
tartalmazza 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();
}
Á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();
}
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();
}
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 .hidden
osztályok használatával. Ezeket az osztályokat !important
a 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.
.hide
elérhető, de nem mindig van hatással a képernyőolvasókra, és a v3.0.1-től elavult . Használja .hidden
vagy .sr-only
helyette.
Továbbá .invisible
csak egy elem láthatóságának átkapcsolására használható, vagyis az display
nem 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();
}
Egy elem elrejtése az összes eszközön, kivéve a képernyőolvasókat , amelyekben a .sr-only
. Kombinálja .sr-only
a -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();
}
Használja az .text-hide
osztá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.
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 display
alább felsorolt CSS-tulajdonságok mindegyikéhez.
Osztályok csoportja | CSSdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Így xs
pé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-xs
A , .visible-sm
, .visible-md
és osztályok .visible-lg
szinté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.
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-print
szinté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.
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.
A zöld pipa jelzi, hogy az elem látható az aktuális nézetablakban.
Itt a zöld pipák azt is jelzik, hogy az elem el van rejtve az aktuális nézetablakban.
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 .
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.
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 .
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;
}
Egy maroknyi változó a webhely vázának kulcsfontosságú elemeinek gyors testreszabásához.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
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-color
Less 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
.
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;
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";
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;
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.
Á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;
}
Ma minden modern böngésző támogatja az előtag nélküli border-radius
tulajdonsá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;
}
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-shadow
tulajdont. 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 -webkit
elő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;
}
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;
}
Bármely objektum elforgatása, méretezése, lefordítása (mozgatása) vagy ferdítése.
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.
.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;
}
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.
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.
.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;
}
Állítsa be az átlátszatlanságot az összes böngésző számára, és biztosítson filter
tartalékot az IE8 számára.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
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
}
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;
}
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 filter
hozzáadott IE-specifikus elemeket. Ezt megteheti a .reset-filter()
mixin használatával background-image: none;
.
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.
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();
}
Gyorsan középre állítsa bármelyik elemet a szülőjén belül. Megköveteli width
vagy max-width
beállítandó.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
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); }
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;
}
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();
}
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.
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.
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.