CSS
Globale CSS-instellings, fundamentele HTML-elemente wat gestileer en verbeter is met uitbreidbare klasse, en 'n gevorderde roosterstelsel.
Oorsig
Kry die laagtepunt van die sleutelstukke van Bootstrap se infrastruktuur, insluitend ons benadering tot beter, vinniger, sterker webontwikkeling.
HTML5 doctype
Bootstrap maak gebruik van sekere HTML-elemente en CSS-eienskappe wat die gebruik van die HTML5 doctype vereis. Sluit dit aan die begin van al jou projekte in.
<!DOCTYPE html>
<html lang="en">
...
</html>Selfoon eerste
Met Bootstrap 2 het ons opsionele mobiele vriendelike style bygevoeg vir sleutelaspekte van die raamwerk. Met Bootstrap 3 het ons die projek van die begin af herskryf om selfoonvriendelik te wees. In plaas daarvan om opsionele mobiele style by te voeg, word hulle reg in die kern gebak. Trouens, Bootstrap is eerstens mobiel . Mobiele eerste style kan deur die hele biblioteek gevind word in plaas van in aparte lêers.
Voeg die viewport -metamerker by jou <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Jy kan inzoomvermoëns op mobiele toestelle deaktiveer deur by user-scalable=nodie viewport-metamerker te voeg. Dit deaktiveer inzoom, wat beteken dat gebruikers net kan blaai, en lei daartoe dat jou werf 'n bietjie meer soos 'n inheemse toepassing voel. Oor die algemeen beveel ons dit nie op elke webwerf aan nie, wees dus versigtig!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Tipografie en skakels
Bootstrap stel basiese globale vertoon-, tipografie- en skakelstyle. Spesifiek, ons:
- Stel
background-color: #fff;op diebody - Gebruik die
@font-family-base,@font-size-base, en@line-height-basekenmerke as ons tipografiese basis - Stel die globale skakelkleur via
@link-coloren pas skakel onderstrepe slegs op:hover
Hierdie style kan binne gevind word scaffolding.less.
Normaliseer.css
Vir verbeterde kruisblaaier-weergawe gebruik ons Normalize.css , 'n projek deur Nicolas Gallagher en Jonathan Neal .
Houers
Bootstrap vereis 'n bevat-element om werf-inhoud toe te draai en ons roosterstelsel te huisves. Jy kan een van twee houers kies om in jou projekte te gebruik. Let daarop dat, as gevolg van paddingen meer, geen houer nesbaar is nie.
Gebruik .containervir 'n responsiewe houer met vaste breedte.
<div class="container">
...
</div>Gebruik .container-fluidvir 'n volle breedte houer, wat oor die hele breedte van jou uitsigpoort strek.
<div class="container-fluid">
...
</div>Rooster stelsel
Bootstrap sluit 'n responsiewe, mobiele eerste vloeistofroosterstelsel in wat toepaslik tot 12 kolomme skaal soos die toestel- of uitsigpoort groter word. Dit bevat vooraf gedefinieerde klasse vir maklike uitlegopsies, sowel as kragtige mengsels om meer semantiese uitlegte te genereer .
Inleiding
Roosterstelsels word gebruik om bladsyuitlegte te skep deur 'n reeks rye en kolomme wat jou inhoud huisves. Hier is hoe die Bootstrap-roosterstelsel werk:
- Rye moet binne 'n
.container(vaste breedte) of.container-fluid(volle breedte) geplaas word vir behoorlike belyning en vulling. - Gebruik rye om horisontale groepe kolomme te skep.
- Inhoud moet binne kolomme geplaas word, en slegs kolomme mag onmiddellike kinders van rye wees.
- Vooraf gedefinieerde roosterklasse soos
.rowen.col-xs-4is beskikbaar om vinnig roosteruitlegte te maak. Minder mixins kan ook gebruik word vir meer semantiese uitlegte. - Kolomme skep geute (gapings tussen kolominhoud) via
padding. Daardie opvulling word verreken in rye vir die eerste en laaste kolom via negatiewe marge op.rows. - Die negatiewe marge is hoekom die voorbeelde hieronder oortrek is. Dit is so dat inhoud binne roosterkolomme in lyn is met nie-roosterinhoud.
- Roosterkolomme word geskep deur die aantal twaalf beskikbare kolomme wat jy wil span te spesifiseer. Byvoorbeeld, drie gelyke kolomme sal drie gebruik
.col-xs-4. - As meer as 12 kolomme binne 'n enkele ry geplaas word, sal elke groep ekstra kolomme, as een eenheid, op 'n nuwe lyn toegedraai word.
- Roosterklasse is van toepassing op toestelle met skermwydtes groter as of gelyk aan die breekpuntgroottes, en ignoreer roosterklasse wat op kleiner toestelle gerig is. Daarom, bv. die toepassing van enige
.col-md-*klas op 'n element sal nie net sy stilering op medium toestelle beïnvloed nie, maar ook op groot toestelle as 'n.col-lg-*klas nie teenwoordig is nie.
Kyk na die voorbeelde om hierdie beginsels op jou kode toe te pas.
Media navrae
Ons gebruik die volgende medianavrae in ons Less-lêers om die sleutelbreekpunte in ons roosterstelsel te skep.
/* 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) { ... }Ons brei soms uit op hierdie medianavrae om 'n max-widthom CSS te beperk tot 'n nouer stel toestelle in te sluit.
@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) { ... }Rooster opsies
Kyk hoe aspekte van die Bootstrap-roosterstelsel oor verskeie toestelle werk met 'n handige tabel.
| Ekstra klein toestelle Fone (<768px) | Klein toestelle Tablette (≥768px) | Medium toestelle Werkskerms (≥992px) | Groot toestelle Werkskerms (≥1200px) | |
|---|---|---|---|---|
| Roostergedrag | Horisontaal te alle tye | Ingevou om te begin, horisontaal bo breekpunte | ||
| Houer breedte | Geen (outo) | 750 px | 970px | 1170 px |
| Klas voorvoegsel | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # van kolomme | 12 | |||
| Kolom breedte | Outo | ~62px | ~81px | ~97px |
| Geut breedte | 30px (15px aan elke kant van 'n kolom) | |||
| Nesbaar | Ja | |||
| Verrekeninge | Ja | |||
| Kolombestelling | Ja | |||
Voorbeeld: Gestapel-tot-horisontaal
Deur 'n enkele stel .col-md-*roosterklasse te gebruik, kan jy 'n basiese roosterstelsel skep wat begin gestapel op mobiele toestelle en tablettoestelle (die ekstra klein tot klein reeks) voordat dit horisontaal word op rekenaar (medium) toestelle. Plaas roosterkolomme in enige .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.kol-md-8
.kol-md-4
.kol-md-4
.kol-md-4
.kol-md-4
.kol-md-6
.kol-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>Voorbeeld: Vloeistofhouer
Verander enige vastewydte-roosteruitleg in 'n vollewydte-uitleg deur jou buitenste .containerna te verander .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Voorbeeld: Selfoon en rekenaar
Wil jy nie hê dat jou kolomme eenvoudig in kleiner toestelle gestapel moet word nie? Gebruik die ekstra klein en medium toestelroosterklasse deur by .col-xs-* .col-md-*jou kolomme te voeg. Sien die voorbeeld hieronder vir 'n beter idee van hoe dit alles werk.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.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>Voorbeeld: Selfoon, tablet, rekenaar
Bou voort op die vorige voorbeeld deur selfs meer dinamiese en kragtige uitlegte met tabletklasse te skep .col-sm-*.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-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>Voorbeeld: Kolomvou
As meer as 12 kolomme binne 'n enkele ry geplaas word, sal elke groep ekstra kolomme, as een eenheid, op 'n nuwe lyn toegedraai word.
.col-xs-9
.col-xs-4
Aangesien 9 + 4 = 13 > 12, word hierdie 4-kolomwye div op 'n nuwe lyn toegedraai as een aaneenlopende eenheid.
Aangesien 9 + 4 = 13 > 12, word hierdie 4-kolomwye div op 'n nuwe lyn toegedraai as een aaneenlopende eenheid.
.col-xs-6
Volgende kolomme gaan voort langs die nuwe lyn.
Volgende kolomme gaan voort langs die nuwe lyn.
<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>Responsiewe kolom-terugstellings
Met die vier vlakke van roosters wat beskikbaar is, sal jy waarskynlik probleme ondervind waar, by sekere breekpunte, jou kolomme nie heeltemal uitvee nie, aangesien die een hoër as die ander is. Om dit reg te stel, gebruik 'n kombinasie van a .clearfixen ons responsiewe nutsklasse .
.col-xs-6 .col-sm-3
Verander die grootte van jou viewport of kyk dit op jou foon vir 'n voorbeeld.
Verander die grootte van jou viewport of kyk dit op jou foon vir 'n voorbeeld.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.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>Benewens die skoonmaak van kolomme by responsiewe breekpunte, moet jy dalk afwykings, stoot of trek terugstel . Sien dit in aksie in die roostervoorbeeld .
<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>Verrekening van kolomme
Skuif kolomme na regs deur .col-md-offset-*klasse te gebruik. Hierdie klasse vergroot die linkerkantlyn van 'n kolom met *kolomme. .col-md-offset-4Beweeg byvoorbeeld .col-md-4oor vier kolomme.
.kol-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.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>Jy kan ook afwykings van laer roostervlakke met .col-*-offset-0klasse ignoreer.
<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>Nestende kolomme
Om jou inhoud met die verstekrooster te nes, voeg 'n nuwe .rowen stel .col-sm-*kolomme binne 'n bestaande .col-sm-*kolom by. Geneste rye moet 'n stel kolomme insluit wat tot 12 of minder optel (dit word nie vereis dat jy al 12 beskikbare kolomme gebruik nie).
Vlak 1: .col-sm-9
Vlak 2: .col-xs-8 .col-sm-6
Vlak 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Kolombestelling
Verander maklik die volgorde van ons ingeboude roosterkolomme met .col-md-push-*en .col-md-pull-*wysigerklasse.
.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>Minder mengsels en veranderlikes
Benewens voorafgeboude roosterklasse vir vinnige uitlegte, bevat Bootstrap Minder veranderlikes en mixins om vinnig jou eie eenvoudige, semantiese uitlegte te genereer.
Veranderlikes
Veranderlikes bepaal die aantal kolomme, die geutwydte en die medianavraagpunt waarop swewende kolomme begin word. Ons gebruik dit om die voorafbepaalde roosterklasse wat hierbo gedokumenteer is te genereer, sowel as vir die pasgemaakte mengsels wat hieronder gelys word.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Mengsels
Mixins word saam met die roosterveranderlikes gebruik om semantiese CSS vir individuele roosterkolomme te genereer.
// 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));
}
}Voorbeeld gebruik
Jy kan die veranderlikes verander na jou eie persoonlike waardes, of gebruik net die mixins met hul verstekwaardes. Hier is 'n voorbeeld van die gebruik van die verstek instellings om 'n twee-kolom uitleg te skep met 'n gaping tussen.
.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>Tipografie
Opskrifte
Alle HTML-opskrifte, <h1>deur <h6>, is beskikbaar. .h1deur .h6-klasse is ook beskikbaar, vir wanneer jy die fontstilering van 'n opskrif wil pas, maar steeds wil hê dat jou teks inlyn vertoon moet word.
h1. Bootstrap opskrif |
Halfvet 36 px |
h2. Bootstrap opskrif |
Halfvet 30 px |
h3. Bootstrap opskrif |
Halfvet 24px |
h4. Bootstrap opskrif |
Halfvet 18 px |
h5. Bootstrap opskrif |
Halfvet 14px |
h6. Bootstrap opskrif |
Halfvet 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>Skep ligter, sekondêre teks in enige opskrif met 'n generiese <small>merker of die .smallklas.
h1. Bootstrap-opskrif Sekondêre teks |
h2. Bootstrap-opskrif Sekondêre teks |
h3. Bootstrap-opskrif Sekondêre teks |
h4. Bootstrap-opskrif Sekondêre teks |
h5. Bootstrap-opskrif Sekondêre teks |
h6. Bootstrap-opskrif Sekondêre teks |
<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>Liggaam kopie
Bootstrap se globale verstek font-sizeis 14px , met 'n line-heightvan 1.428 . Dit word toegepas op die <body>en alle paragrawe. Daarbenewens ontvang <p>(paragrawe) 'n onderste marge van die helfte van hul berekende lynhoogte (10 px by verstek).
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 by eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Loodliggaamkopie
Laat 'n paragraaf uitstaan deur by te voeg .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, is nie commodo luctus.
<p class="lead">...</p>Gebou met Minder
Die tipografiese skaal is gebaseer op twee Minder veranderlikes in veranderlikes.minder : @font-size-baseen@line-height-base . Die eerste is die basis-lettertipe-grootte wat deurgaans gebruik word en die tweede is die basislyn-hoogte. Ons gebruik daardie veranderlikes en 'n paar eenvoudige wiskunde om die marges, opvullings en lynhoogtes van al ons tipe en meer te skep. Pas hulle aan en Bootstrap pas aan.
Inlyn tekselemente
Gemerkte teks
Om 'n reeks teks uit te lig as gevolg van die relevansie daarvan in 'n ander konteks, gebruik die <mark>merker.
Jy kan die merk tag gebruik omuitligteks.
You can use the mark tag to <mark>highlight</mark> text.Geskrap teks
<del>Gebruik die merker om blokke teks aan te dui wat uitgevee is .
Hierdie teksreël is bedoel om as geskrapte teks hanteer te word.
<del>This line of text is meant to be treated as deleted text.</del>Deurhaling teks
<s>Gebruik die merker om blokke teks aan te dui wat nie meer relevant is nie .
Hierdie teksreël is bedoel om as nie meer akkuraat beskou te word nie.
<s>This line of text is meant to be treated as no longer accurate.</s>Ingevoeg teks
<ins>Gebruik die merker om byvoegings tot die dokument aan te dui .
Hierdie teksreël is bedoel om as 'n toevoeging tot die dokument hanteer te word.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Onderstreepte teks
Gebruik die <u>merker om teks te onderstreep.
Hierdie teksreël sal weergegee word soos onderstreep
<u>This line of text will render as underlined</u>Maak gebruik van HTML se verstek klem-etikette met liggewigstyle.
Klein teks
Om inlyn of blokke teks te ontklemtoon, gebruik die <small>merker om teks op 85% van die grootte van die ouer te stel. Opskrifelemente ontvang hul eie font-sizevir geneste <small>elemente.
Jy kan alternatiewelik 'n inlyn-element gebruik met .smallin die plek van enige <small>.
Hierdie teksreël is bedoel om as fynskrif hanteer te word.
<small>This line of text is meant to be treated as fine print.</small>Vet
Om 'n stukkie teks met 'n swaarder lettergewig te beklemtoon.
Die volgende stukkie teks word as vetgedrukte teks weergegee .
<strong>rendered as bold text</strong>Kursief
Om 'n stukkie teks met kursief te beklemtoon.
Die volgende stukkie teks word as kursief gedrukte teks weergegee .
<em>rendered as italicized text</em>Alternatiewe elemente
Gebruik gerus <b>en <i>in HTML5. <b>is bedoel om woorde of frases uit te lig sonder om bykomende belangrikheid oor te dra, terwyl <i>dit meestal vir stem, tegniese terme, ens.
Belyningsklasse
Herbelyn teks maklik na komponente met teksbelyningsklasse.
Linksbelynde teks.
Sentreerbelynde teks.
Regsbelynde teks.
Geregverdigde teks.
Geen omvou teks nie.
<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>Transformasie klasse
Transformeer teks in komponente met tekshoofletterklasse.
Teks met klein letters.
Teks met hoofletters.
Teks met hoofletters.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Afkortings
Gestileerde implementering van HTML se <abbr>element vir afkortings en akronieme om die uitgebreide weergawe te wys op hover. Afkortings met 'n titleeienskap het 'n ligte gestippelde onderste rand en 'n hulpwyser op hover, wat addisionele konteks verskaf op hover en aan gebruikers van ondersteunende tegnologieë.
Basiese afkorting
'n Afkorting van die woord eienskap is attr .
<abbr title="attribute">attr</abbr>Inisialisme
Voeg .initialismby 'n afkorting vir 'n effens kleiner lettergrootte.
HTML is die beste ding sedert gesnyde brood.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Adresse
Bied kontakinligting aan vir die naaste voorouer of die hele liggaam van werk. Behou formatering deur alle reëls met <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Volle naam
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Volle naam
[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>Blokaanhalings
Vir die aanhaling van blokke inhoud van 'n ander bron binne jou dokument.
Verstek blokaanhaling
Draai <blockquote>enige HTML om as die aanhaling. Vir reguit kwotasies beveel ons 'n aan <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Blokaanhalingsopsies
Styl en inhoud verander vir eenvoudige variasies op 'n standaard <blockquote>.
Benoem 'n bron
Voeg 'n <footer>by om die bron te identifiseer. Draai die naam van die bronwerk in <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n 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>Alternatiewe vertonings
Voeg by .blockquote-reversevir 'n blokaanhaling met regsbelynde inhoud.
<blockquote class="blockquote-reverse">
...
</blockquote>Lyste
Ongeorden
'n Lys van items waarin die volgorde nie uitdruklik saak maak nie.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Heelgetal molestie lorem by massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat by
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Bestel
'n Lys van items waarin die volgorde wel uitdruklik saak maak.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Heelgetal molestie lorem by 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>Ongestileer
Verwyder die verstek- list-styleen linkerkantlyn op lysitems (slegs onmiddellike kinders). Dit is slegs van toepassing op onmiddellike kinderslysitems , wat beteken dat jy die klas ook vir enige geneste lyste moet byvoeg.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Heelgetal molestie lorem by massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat by
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>In lyn
Plaas alle lysitems op 'n enkele lyn met ' display: inline-block;n ligte vulling.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Beskrywing
'n Lys terme met hul gepaardgaande beskrywings.
- Beskrywing lyste
- 'n Beskrywingslys is perfek om terme te definieer.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida by eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Horisontale beskrywing
Maak terme en beskrywings in <dl>lyn langs mekaar. Begin gestapel soos standaard <dl>s, maar wanneer die navigasiebalk uitbrei, doen dit ook.
- Beskrywing lyste
- 'n Beskrywingslys is perfek om terme te definieer.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida by 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, uit fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Outo-afkapping
Horisontale beskrywingslyste sal terme wat te lank is om in die linkerkolom met in te pas, afkap text-overflow. In nouer viewports, sal hulle verander na die verstek gestapelde uitleg.
Kode
In lyn
Wikkel inlyn-brokkies kode met<code> .
Moet byvoorbeeld
<section>as inlyn toegedraai word.
For example, <code><section></code> should be wrapped as inline.Gebruikersinvoer
Gebruik die<kbd> om invoer aan te dui wat tipies via sleutelbord ingevoer word.
Om van gidse te wissel, tik
cdgevolg deur die naam van die gids.
Om instellings te wysig, druk ctrl + ,
Om instellings te wysig, druk 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>Basiese blok
Gebruik <pre>vir veelvuldige reëls kode. Maak seker dat jy enige hoekhakies in die kode ontsnap vir behoorlike weergawe.
<p>Voorbeeldteks hier...</p>
<pre><p>Sample text here...</p></pre>Jy kan opsioneel die.pre-scrollable klas byvoeg, wat 'n maksimum hoogte van 350px sal stel en 'n y-as-rolbalk sal verskaf.
Veranderlikes
Gebruik die <var>merker om veranderlikes aan te dui.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Voorbeeld uitset
Vir die aandui van blokke voorbeelduitvoer van 'n program gebruik die <samp>merker.
Hierdie teks is bedoel om as voorbeelduitvoer vanaf 'n rekenaarprogram hanteer te word.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Tabelle
Basiese voorbeeld
Vir basiese stilering - ligte vulling en slegs horisontale verdelers - voeg die basisklas .tableby enige <table>. Dit lyk dalk baie oorbodig, maar gegewe die wydverspreide gebruik van tabelle vir ander inproppe soos kalenders en datumkiesers, het ons gekies om ons pasgemaakte tabelstyle te isoleer.
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry | die voël |
<table class="table">
...
</table>Gestreepte rye
Gebruik .table-stripedom sebrastrepe by enige tabelry binne die <tbody>.
Kruisblaaierversoenbaarheid
Gestreepte tabelle word gestileer via die :nth-childCSS-kieser, wat nie in Internet Explorer 8 beskikbaar is nie.
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry | die voël |
<table class="table table-striped">
...
</table>Borderige tafel
Voeg by .table-borderedvir grense aan alle kante van die tabel en selle.
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry | die voël |
<table class="table table-bordered">
...
</table>Beweeg rye
Voeg .table-hoverby om 'n sweeftoestand op tabelrye binne 'n <tbody>.
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry | die voël |
<table class="table table-hover">
...
</table>Gekondenseerde tafel
Voeg .table-condensedby om tafels meer kompak te maak deur selvulling in die helfte te sny.
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry die voël | ||
<table class="table table-condensed">
...
</table>Kontekstuele klasse
Gebruik kontekstuele klasse om tabelrye of individuele selle in te kleur.
| Klas | Beskrywing |
|---|---|
.active |
Pas die sweefkleur toe op 'n spesifieke ry of sel |
.success |
Dui 'n suksesvolle of positiewe aksie aan |
.info |
Dui 'n neutrale insiggewende verandering of aksie aan |
.warning |
Dui 'n waarskuwing aan wat dalk aandag moet kry |
.danger |
Dui 'n gevaarlike of potensieel negatiewe aksie aan |
| # | Kolomopskrif | Kolomopskrif | Kolomopskrif |
|---|---|---|---|
| 1 | Kolom inhoud | Kolom inhoud | Kolom inhoud |
| 2 | Kolom inhoud | Kolom inhoud | Kolom inhoud |
| 3 | Kolom inhoud | Kolom inhoud | Kolom inhoud |
| 4 | Kolom inhoud | Kolom inhoud | Kolom inhoud |
| 5 | Kolom inhoud | Kolom inhoud | Kolom inhoud |
| 6 | Kolom inhoud | Kolom inhoud | Kolom inhoud |
| 7 | Kolom inhoud | Kolom inhoud | Kolom inhoud |
| 8 | Kolom inhoud | Kolom inhoud | Kolom inhoud |
| 9 | Kolom inhoud | Kolom inhoud | Kolom inhoud |
<!-- 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>Betekenis oordra aan ondersteunende tegnologieë
Die gebruik van kleur om betekenis aan 'n tabelry of individuele sel te gee, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (die sigbare teks in die betrokke tabelry/sel) is óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .sr-onlyklas versteek is.
Responsiewe tabelle
Skep responsiewe tabelle deur enige .tablein .table-responsivete vou om hulle horisontaal op klein toestelle (onder 768px) te laat blaai. As jy na enigiets groter as 768px wyd kyk, sal jy geen verskil in hierdie tabelle sien nie.
Vertikale knip/afkapping
Responsiewe tabelle maak gebruik van overflow-y: hidden, wat enige inhoud afknip wat verder gaan as die onderste of boonste rande van die tabel. Dit kan veral aftrekkieslyste en ander derdeparty-legstukke afknip.
Firefox en veldstelle
Firefox het 'n paar ongemaklike veldstelstilering widthwat inmeng met die responsiewe tabel. Dit kan nie oorskryf word sonder 'n Firefox-spesifieke hack wat ons nie in Bootstrap verskaf nie:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Vir meer inligting, lees hierdie Stack Overflow-antwoord .
| # | Tabelopskrif | Tabelopskrif | Tabelopskrif | Tabelopskrif | Tabelopskrif | Tabelopskrif |
|---|---|---|---|---|---|---|
| 1 | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel |
| 2 | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel |
| 3 | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel |
| # | Tabelopskrif | Tabelopskrif | Tabelopskrif | Tabelopskrif | Tabelopskrif | Tabelopskrif |
|---|---|---|---|---|---|---|
| 1 | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel |
| 2 | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel |
| 3 | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel | Tafelsel |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Vorms
Basiese voorbeeld
Individuele vormkontroles ontvang outomaties 'n bietjie globale stilering. Alle tekstuele <input>, <textarea>, en <select>elemente met .form-controlis width: 100%;by verstek gestel. Draai etikette en kontroles in .form-groupvir optimale spasiëring.
<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>Moenie vormgroepe met invoergroepe meng nie
Moenie vormgroepe direk met invoergroepe meng nie . In plaas daarvan, nes die invoergroep binne-in die vormgroep.
Inlyn vorm
Voeg .form-inlineby jou vorm (wat nie 'n hoef te wees nie <form>) vir linksbelynde en inlynblokkontroles. Dit is slegs van toepassing op vorms binne viewports wat ten minste 768px breed is.
Mag pasgemaakte breedtes vereis
Insette en keuses is width: 100%;by verstek toegepas in Bootstrap. Binne inlynvorms stel ons dit terug width: auto;sodat veelvuldige kontroles op dieselfde lyn kan wees. Afhangende van jou uitleg, kan addisionele pasgemaakte breedtes nodig wees.
Voeg altyd etikette by
Skermlesers sal probleme met jou vorms hê as jy nie 'n etiket vir elke invoer insluit nie. Vir hierdie inlynvorms kan jy die byskrifte versteek deur die .sr-onlyklas te gebruik. Daar is verdere alternatiewe metodes om 'n etiket vir ondersteunende tegnologieë te verskaf, soos die aria-label, aria-labelledbyof titlekenmerk. As nie een van hierdie teenwoordig is nie, kan skermlesers gebruik maak van die placeholderkenmerk, indien teenwoordig, maar let daarop dat placeholderdit nie aanbeveel word om dit as 'n plaasvervanger vir ander etiketteringmetodes te gebruik nie.
<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>Horisontale vorm
Gebruik Bootstrap se vooraf gedefinieerde roosterklasse om etikette en groepe vormkontroles in 'n horisontale uitleg in lyn te bring deur by .form-horizontaldie vorm te voeg (wat nie 'n hoef te wees nie <form>). As u dit doen, verander .form-groupdit om as roosterrye op te tree, so dit is nie nodig nie .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>Ondersteunde kontroles
Voorbeelde van standaardvormkontroles wat in 'n voorbeeldvormuitleg ondersteun word.
Insette
Mees algemene vormbeheer, teksgebaseerde invoervelde. Sluit ondersteuning vir alle HTML5-tipes in: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telen color.
Tipe verklaring vereis
Insette sal slegs volledig gestileer word as typedit behoorlik verklaar is.
<input type="text" class="form-control" placeholder="Text input">Invoergroepe
Om geïntegreerde teks of knoppies voor en/of na enige teksgebaseerde <input>, by te voeg, kyk na die invoergroepkomponent .
Teksarea
Vormbeheer wat verskeie reëls teks ondersteun. Verander rowskenmerk soos nodig.
<textarea class="form-control" rows="3"></textarea>Merkblokkies en radio's
Merkblokkies is om een of meer opsies in 'n lys te kies, terwyl radio's is om een opsie uit baie te kies.
Gedeaktiveerde merkblokkies en radio's word ondersteun, maar om 'n "nie-toegelate" wyser te verskaf wanneer die ouer beweeg <label>, moet jy die .disabledklas by die ouer voeg .radio, .radio-inline, .checkbox, of .checkbox-inline.
Verstek (gestapel)
<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>Inlyn-merkblokkies en radio's
Gebruik die .checkbox-inlineof .radio-inlineklasse op 'n reeks merkblokkies of radio's vir kontroles wat op dieselfde lyn verskyn.
<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>Merkblokkies en radio's sonder etiketteks
As jy geen teks binne die <label>, is die invoer geposisioneer soos jy sou verwag. Werk tans net op nie-inlyn-merkblokkies en radio's. Onthou om steeds 'n vorm van etiket vir ondersteunende tegnologieë te verskaf (byvoorbeeld deur gebruik te maak van 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>Kies
Let daarop dat baie inheemse kieskieslyste – naamlik in Safari en Chrome – afgeronde hoeke het wat nie via border-radiuseienskappe gewysig kan word nie.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Vir <select>kontroles met die multiplekenmerk word veelvuldige opsies by verstek gewys.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Statiese beheer
Wanneer jy gewone teks langs 'n vormetiket binne 'n vorm moet plaas, gebruik die .form-control-staticklas op 'n <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>Fokus toestand
Ons verwyder die verstekstyle outlineop sommige vormkontroles en pas 'n box-shadowin die plek daarvan toe vir :focus.
Demo :focusstaat
Die voorbeeldinvoer hierbo gebruik gepasmaakte style in ons dokumentasie om die :focustoestand op 'n .form-control.
Gestremde toestand
Voeg die disabledBoole-kenmerk by 'n invoer om gebruikersinteraksies te voorkom. Gedeaktiveerde invoere lyk ligter en voeg 'n not-allowedwyser by.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Gedeaktiveerde veldstelle
Voeg die disabledkenmerk by a <fieldset>om al die kontroles binne die <fieldset>gelyktydig te deaktiveer.
Waarskuwing oor skakel funksionaliteit van<a>
By verstek sal blaaiers alle inheemse vormkontroles ( <input>, <select>en <button>elemente) binne 'n <fieldset disabled>as gedeaktiveer hanteer, wat beide sleutelbord- en muisinteraksies op hulle voorkom. As jou vorm egter ook <a ... class="btn btn-*">elemente insluit, sal dit slegs 'n styl van kry pointer-events: none. Soos opgemerk in die afdeling oor gedeaktiveerde toestand vir knoppies (en spesifiek in die onderafdeling vir ankerelemente), is hierdie CSS-eienskap nog nie gestandaardiseer nie en word dit nie ten volle ondersteun in Opera 18 en onder, of in Internet Explorer 11 nie, en het gewen nie verhoed dat sleutelbordgebruikers hierdie skakels kan fokus of aktiveer nie. Om veilig te wees, gebruik persoonlike JavaScript om sulke skakels te deaktiveer.
Kruisblaaierversoenbaarheid
Terwyl Bootstrap hierdie style in alle blaaiers sal toepas, ondersteun Internet Explorer 11 en onder nie die disabledkenmerk op 'n <fieldset>. Gebruik pasgemaakte JavaScript om die veldstel in hierdie blaaiers te deaktiveer.
<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>Leesalleenstaat
Voeg die readonlyBoole-kenmerk by 'n invoer om verandering van die invoer se waarde te voorkom. Leesalleen-insette lyk ligter (net soos gedeaktiveerde insette), maar behou die standaardwyser.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Hulp teks
Blokvlak-hulpteks vir vormkontroles.
Assosieer hulpteks met vormkontroles
Hulpteks moet uitdruklik geassosieer word met die vormkontrole waarmee dit verband hou met die gebruik van die aria-describedbykenmerk. Dit sal verseker dat ondersteunende tegnologieë – soos skermlesers – hierdie hulpteks sal aankondig wanneer die gebruiker fokus of die beheer betree.
<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>Validasie state
Bootstrap bevat valideringstyle vir fout-, waarskuwing- en suksestoestande op vormkontroles. Om te gebruik, voeg .has-warning, .has-error, of .has-successby die ouerelement. Enige .control-label, .form-control, en .help-blockbinne daardie element sal die valideringstyle ontvang.
Dra valideringstoestand aan ondersteunende tegnologieë en kleurblinde gebruikers oor
Die gebruik van hierdie valideringstyle om die toestand van 'n vormkontrole aan te dui, verskaf slegs 'n visuele, kleurgebaseerde aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë - soos skermlesers - of aan kleurblinde gebruikers oorgedra sal word nie.
Maak seker dat 'n alternatiewe aanduiding van staat ook verskaf word. Jy kan byvoorbeeld 'n wenk oor toestand in die vormkontrole se <label>teks self insluit (soos die geval is in die volgende kodevoorbeeld), 'n Glyphicon insluit (met toepaslike alternatiewe teks wat die .sr-onlyklas gebruik - sien die Glyphicon-voorbeelde ), of deur 'n addisionele hulpteksblok . Spesifiek vir ondersteunende tegnologieë, kan ongeldige vormkontroles ook 'n aria-invalid="true"kenmerk toegeken word.
<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>Met opsionele ikone
Jy kan ook opsionele terugvoer-ikone byvoeg met die byvoeging van.has-feedback en die regte ikoon.
Terugvoer-ikone werk slegs met tekstuele <input class="form-control">elemente.
Ikone, etikette en invoergroepe
Handmatige posisionering van terugvoerikone word vereis vir invoere sonder 'n etiket en vir invoergroepe met 'n byvoeging aan die regterkant. Jy word sterk aangemoedig om etikette vir alle insette te verskaf vir toeganklikheidsredes. As jy wil voorkom dat etikette vertoon word, steek dit weg by die .sr-onlyklas. As jy sonder etikette moet klaarkom, pas die topwaarde van die terugvoerikoon aan. Vir invoergroepe, pas die rightwaarde aan na 'n gepaste pixelwaarde, afhangende van die breedte van jou addon.
Dra die ikoon se betekenis aan ondersteunende tegnologieë oor
Om te verseker dat ondersteunende tegnologieë – soos skermlesers – die betekenis van 'n ikoon korrek oordra, moet bykomende versteekte teks by die .sr-onlyklas ingesluit word en uitdruklik geassosieer word met die vormbeheer waarmee dit verband hou met die gebruik van aria-describedby. Alternatiewelik, maak seker dat die betekenis (byvoorbeeld die feit dat daar 'n waarskuwing vir 'n spesifieke teksinvoerveld is) in 'n ander vorm oorgedra word, soos die verandering van die teks van die werklike <label>wat met die vormkontrole geassosieer word.
Alhoewel die volgende voorbeelde reeds die valideringstoestand van hul onderskeie vormkontroles in die <label>teks self noem, is bogenoemde tegniek (met behulp van .sr-onlyteks en aria-describedby) vir illustratiewe doeleindes ingesluit.
<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>Opsionele ikone in horisontale en inlynvorms
<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>Opsionele ikone met verborge .sr-onlyetikette
As jy die .sr-onlyklas gebruik om 'n vormkontrole te versteek <label>(eerder as om ander etikettering opsies te gebruik, soos die aria-labelkenmerk), sal Bootstrap outomaties die posisie van die ikoon aanpas sodra dit bygevoeg is.
(sukses)
@
(sukses)
<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>Beheer grootte
Stel hoogtes met klasse soos .input-lg, en stel breedtes deur roosterkolomklasse soos .col-lg-*.
Hoogte grootte
Skep groter of korter vormkontroles wat ooreenstem met knoppiegroottes.
<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>Horisontale vorm groepgroottes
Grootte etikette vinnig en vorm kontroles binne deur of .form-horizontalby te voeg ..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>Kolomgrootte
Wikkel insette in roosterkolomme, of enige pasgemaakte ouerelement, om die gewenste breedtes maklik af te dwing.
<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>Knoppies
Knoppie-etikette
Gebruik die knoppieklasse op 'n <a>, <button>, of <input>element.
<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">Konteksspesifieke gebruik
Terwyl knoppieklasse op <a>en <button>elemente gebruik kan word, word slegs <button>elemente binne ons navigasie- en navigasiebalk-komponente ondersteun.
Skakels dien as knoppies
As die <a>elemente gebruik word om as knoppies op te tree - wat in-bladsy-funksionaliteit aktiveer, eerder as om na 'n ander dokument of afdeling binne die huidige bladsy te navigeer - moet hulle ook 'n toepaslike role="button".
Kruisblaaier-weergawe
As 'n beste praktyk, beveel ons ten sterkste aan om die <button>element waar moontlik te gebruik om te verseker dat dit ooreenstem met kruisblaaier-weergawe.
Daar is onder andere ' n fout in Firefox <30 wat ons verhoed om die line-heightvan <input>-gebaseerde knoppies te stel, wat veroorsaak dat hulle nie presies ooreenstem met die hoogte van ander knoppies op Firefox nie.
Opsies
Gebruik enige van die beskikbare knoppieklasse om vinnig 'n gestileerde knoppie te skep.
<!-- 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>Betekenis oordra aan ondersteunende tegnologieë
Die gebruik van kleur om betekenis aan 'n knoppie te gee, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (die sigbare teks van die knoppie) is óf ingesluit word deur alternatiewe maniere, soos bykomende teks wat saam met die .sr-onlyklas versteek is.
Groottes
Lus vir groter of kleiner knoppies? Voeg .btn-lg, .btn-sm, of .btn-xsby vir addisionele groottes.
<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>Skep blokvlakknoppies—dié wat oor die volle breedte van 'n ouer strek—deur by te voeg .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>Aktiewe toestand
Knoppies sal gedruk verskyn (met 'n donkerder agtergrond, donkerder rand en ingeboude skaduwee) wanneer dit aktief is. Vir <button>elemente word dit gedoen via :active. Vir <a>elemente word dit gedoen met .active. U kan egter .activeop <button>s gebruik (en die aria-pressed="true"kenmerk insluit) indien u die aktiewe toestand programmaties moet herhaal.
Knoppie element
Nie nodig om by te voeg :activenie, want dit is 'n pseudo-klas, maar as jy dieselfde voorkoms moet forseer, gaan voort en voeg by .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>Anker element
Voeg die .activeklas by <a>knoppies.
<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>Gestremde toestand
Laat knoppies onklikbaar lyk deur hulle terug te verdof met opacity.
Knoppie element
Voeg die disabledkenmerk by <button>knoppies.
<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>Kruisblaaierversoenbaarheid
As jy die disabledkenmerk by 'n voeg <button>, sal Internet Explorer 9 en onder teks grys maak met 'n nare teksskadu wat ons nie kan regmaak nie.
Anker element
Voeg die .disabledklas by <a>knoppies.
<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>Ons gebruik .disabledas 'n nutsklas hier, soortgelyk aan die algemene .activeklas, so geen voorvoegsel word vereis nie.
Skakel funksionaliteit waarskuwing
Hierdie klas gebruik pointer-events: noneom te probeer om die skakelfunksionaliteit van <a>s te deaktiveer, maar daardie CSS-eienskap is nog nie gestandaardiseer nie en word nie ten volle ondersteun in Opera 18 en onder, of in Internet Explorer 11 nie. Boonop, selfs in blaaiers wat wel ondersteun pointer-events: none, sleutelbord navigasie bly onaangeraak, wat beteken dat siende sleutelbordgebruikers en gebruikers van ondersteunende tegnologie steeds hierdie skakels sal kan aktiveer. Om veilig te wees, gebruik persoonlike JavaScript om sulke skakels te deaktiveer.
Beelde
Responsiewe beelde
Prente in Bootstrap 3 kan reageervriendelik gemaak word deur die byvoeging van die .img-responsiveklas. Dit geld max-width: 100%;, height: auto;en display: block;op die beeld sodat dit mooi skaal na die ouerelement.
Om beelde te sentreer wat die .img-responsiveklas gebruik, gebruik .center-blockin plaas van .text-center. Sien die afdeling helperklasse vir meer besonderhede oor .center-blockgebruik.
SVG-beelde en IE 8-10
In Internet Explorer 8-10 is SVG-beelde met .img-responsivebuite verhouding groot. Om dit reg te stel, voeg by width: 100% \9;waar nodig. Bootstrap pas dit nie outomaties toe nie, aangesien dit komplikasies vir ander beeldformate veroorsaak.
<img src="..." class="img-responsive" alt="Responsive image">Beeldvorms
Voeg klasse by 'n <img>element om beelde maklik in enige projek te styl.
Kruisblaaierversoenbaarheid
Hou in gedagte dat Internet Explorer 8 nie ondersteuning vir afgeronde hoeke het nie.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Helperklasse
Kontekstuele kleure
Dra betekenis oor deur kleur met 'n handvol klem nutsklasse. Dit kan ook op skakels toegepas word en sal donkerder word wanneer jy beweeg, net soos ons verstekskakelstyle.
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>Omgaan met spesifisiteit
Soms kan klemklasse nie toegepas word nie weens die spesifisiteit van 'n ander keurder. In die meeste gevalle is 'n voldoende oplossing om jou teks in 'n <span>met die klas toe te draai.
Betekenis oordra aan ondersteunende tegnologieë
Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self is (die kontekstuele kleure word slegs gebruik om betekenis te versterk wat reeds in die teks/opmerk voorkom), óf ingesluit word deur alternatiewe maniere, soos bykomende teks wat met die .sr-onlyklas versteek is .
Kontekstuele agtergronde
Soortgelyk aan die kontekstuele tekskleurklasse, stel die agtergrond van 'n element maklik op enige kontekstuele klas. Ankerkomponente sal donkerder word wanneer jy beweeg, net soos die teksklasse.
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>Omgaan met spesifisiteit
Soms kan kontekstuele agtergrondklasse nie toegepas word nie as gevolg van die spesifisiteit van 'n ander keurder. In sommige gevalle is 'n voldoende oplossing om jou element se inhoud in 'n <div>met die klas toe te draai.
Betekenis oordra aan ondersteunende tegnologieë
Soos met kontekstuele kleure , maak seker dat enige betekenis wat deur kleur oorgedra word ook oorgedra word in 'n formaat wat nie suiwer aanbieding is nie.
Maak ikoon toe
Gebruik die generiese toemaakikoon om inhoud soos modale en waarskuwings af te wys.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Karets
Gebruik karets om aftrekfunksie en rigting aan te dui. Let daarop dat die verstek-karet outomaties in aftrekkieslyste sal omkeer .
<span class="caret"></span>Vinnige dryf
Swaai 'n element na links of regs met 'n klas. !importantis ingesluit om spesifisiteitskwessies te vermy. Klasse kan ook as mengsels gebruik word.
<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();
}Sentreer inhoudblokke
Stel 'n element na display: blocken sentreer via margin. Beskikbaar as 'n mengsel en klas.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
Maak s maklik skoon floatdeur by .clearfix die ouerelement by te voeg . Gebruik die mikro-clearfix soos gewild gemaak deur Nicolas Gallagher. Kan ook as 'n mengsel gebruik word.
<!-- 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();
}Wys en versteek inhoud
Dwing 'n element om gewys of versteek te word ( insluitend vir skermlesers ) met die gebruik van .showen .hiddenklasse. Hierdie klasse gebruik !importantom spesifisiteitskonflikte te vermy, net soos die vinnige dryf . Hulle is slegs beskikbaar vir blokvlakwisseling. Hulle kan ook as mengsels gebruik word.
.hideis beskikbaar, maar dit raak nie altyd skermlesers nie en word vanaf v3.0.1 opgeskort . Gebruik .hiddenof .sr-onlyin plaas daarvan.
Verder .invisiblekan dit gebruik word om slegs die sigbaarheid van 'n element te wissel, wat beteken dat displaydit nie gewysig is nie en die element steeds die vloei van die dokument kan beïnvloed.
<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();
}Skermleser en sleutelbordnavigasie-inhoud
Versteek 'n element vir alle toestelle behalwe skermlesers met .sr-only. Kombineer .sr-onlymet .sr-only-focusableom die element weer te wys wanneer dit gefokus is (bv. deur slegs 'n sleutelbordgebruiker). Nodig om die beste praktyke vir toeganklikheid te volg . Kan ook as mengsels gebruik word.
<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();
}Beeldvervanging
Gebruik die .text-hideklas of mengin om te help om 'n element se teksinhoud met 'n agtergrondprent te vervang.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Responsiewe nutsprogramme
Vir vinniger selfoonvriendelike ontwikkeling, gebruik hierdie nutsklasse om inhoud per toestel via medianavraag te wys en te versteek. Ook ingesluit is nutsklasse om inhoud te wissel wanneer dit gedruk word.
Probeer om dit op 'n beperkte basis te gebruik en vermy om heeltemal verskillende weergawes van dieselfde webwerf te skep. Gebruik dit eerder om elke toestel se aanbieding aan te vul.
Beskikbare klasse
Gebruik 'n enkele of 'n kombinasie van die beskikbare klasse om inhoud oor kykpoort-breekpunte te wissel.
| Ekstra klein toestelleFone (<768 px) | Klein toestelleTablette (≥768 px) | Medium toestelleWerkskerms (≥992px) | Groot toestelleWerkskerms (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Sigbaar | Versteek | Versteek | Versteek |
.visible-sm-* |
Versteek | Sigbaar | Versteek | Versteek |
.visible-md-* |
Versteek | Versteek | Sigbaar | Versteek |
.visible-lg-* |
Versteek | Versteek | Versteek | Sigbaar |
.hidden-xs |
Versteek | Sigbaar | Sigbaar | Sigbaar |
.hidden-sm |
Sigbaar | Versteek | Sigbaar | Sigbaar |
.hidden-md |
Sigbaar | Sigbaar | Versteek | Sigbaar |
.hidden-lg |
Sigbaar | Sigbaar | Sigbaar | Versteek |
Vanaf v3.2.0 kom die .visible-*-*klasse vir elke breekpunt in drie variasies, een vir elke CSS display-eienskapwaarde hieronder gelys.
| Groep klasse | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Dus, vir ekstra klein ( xs) skerms byvoorbeeld, is die beskikbare .visible-*-*klasse: .visible-xs-block, .visible-xs-inline, en .visible-xs-inline-block.
Die klasse .visible-xs, .visible-sm, .visible-mden .visible-lgbestaan ook, maar word vanaf v3.2.0 afgekeur . Hulle is ongeveer gelykstaande aan .visible-*-block, behalwe met bykomende spesiale gevalle vir wissel- <table>verwante elemente.
Druk klasse
Soortgelyk aan die gereelde responsiewe klasse, gebruik dit om inhoud vir druk te wissel.
| Klasse | Blaaier | Druk |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Versteek | Sigbaar |
.hidden-print |
Sigbaar | Versteek |
Die klas .visible-printbestaan ook maar is opgeskort vanaf v3.2.0. Dit is ongeveer gelykstaande aan .visible-print-block, behalwe met bykomende spesiale gevalle vir <table>-verwante elemente.
Toetsgevalle
Verander die grootte van jou blaaier of laai op verskillende toestelle om die responsiewe nutsklasse te toets.
Sigbaar op...
Groen regmerkies dui aan dat die element sigbaar is in jou huidige viewport.
Ekstra klein
✔ Sigbaar op x-small
Klein
✔ Sigbaar op klein
Medium
✔ Sigbaar op medium
Groot
✔ Sigbaar op groot
✔ Sigbaar op x-small en small
✔ Sigbaar op medium en groot
✔ Sigbaar op x-small en medium
✔ Sigbaar op klein en groot
✔ Sigbaar op x-small en large
✔ Sigbaar op klein en medium
Versteek op...
Hier dui groen regmerkies ook aan dat die element in jou huidige kykpoort versteek is.
Gebruik minder
Bootstrap se CSS is gebou op Less, 'n voorverwerker met bykomende funksionaliteit soos veranderlikes, mixins en funksies vir die samestelling van CSS. Diegene wat die bron-minder-lêers wil gebruik in plaas van ons saamgestelde CSS-lêers kan gebruik maak van die talle veranderlikes en mixins wat ons regdeur die raamwerk gebruik.
Roosterveranderlikes en -mengsels word in die Roosterstelselafdeling gedek .
Stel Bootstrap saam
Bootstrap kan op ten minste twee maniere gebruik word: met die saamgestelde CSS of met die bron Less-lêers. Om die Less-lêers saam te stel, raadpleeg die Aan die gang-afdeling vir hoe om jou ontwikkelingsomgewing op te stel om die nodige opdragte uit te voer.
Derdeparty-samestellingsnutsgoed werk dalk met Bootstrap, maar dit word nie deur ons kernspan ondersteun nie.
Veranderlikes
Veranderlikes word deur die hele projek gebruik as 'n manier om algemeen gebruikte waardes soos kleure, spasiëring of lettertipestapels te sentraliseer en te deel. Sien asseblief die Customizer vir 'n volledige uiteensetting .
Kleure
Maak maklik gebruik van twee kleurskemas: grysskaal en semanties. Grysskaalkleure bied vinnige toegang tot algemeen gebruikte skakerings van swart terwyl semanties verskeie kleure insluit wat aan betekenisvolle kontekstuele waardes toegeken is.
@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;Gebruik enige van hierdie kleurveranderlikes soos hulle is of herken hulle aan meer betekenisvolle veranderlikes vir jou projek.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Steierwerk
'n Handvol veranderlikes om sleutelelemente van jou werf se skelet vinnig aan te pas.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Skakels
Stileer jou skakels maklik met die regte kleur met net een waarde.
// 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;
}
}Let daarop dat die @link-hover-color'n funksie, nog 'n wonderlike hulpmiddel van Less, gebruik om die regte sweefkleur outomaties te skep. Jy kan darken, lighten, saturate, en desaturate.
Tipografie
Stel maklik jou lettertipe, teksgrootte, voorloop en meer met 'n paar vinnige veranderlikes. Bootstrap maak ook hiervan gebruik om maklike tipografiese mengsels te verskaf.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;Ikone
Twee vinnige veranderlikes om die ligging en lêernaam van jou ikone aan te pas.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Komponente
Komponente regdeur Bootstrap maak gebruik van sommige verstekveranderlikes om algemene waardes in te stel. Hier is die mees gebruikte.
@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;Verkoopsmengsels
Verkopermengsels is mengsels om verskeie blaaiers te help ondersteun deur alle relevante verkopervoorvoegsels in jou saamgestelde CSS in te sluit.
Doos-grootte
Stel jou komponente se boksmodel terug met 'n enkele meng. Vir konteks, sien hierdie nuttige artikel van Mozilla .
Die mixin word opgeskort vanaf v3.2.0, met die bekendstelling van Autoprefixer. Om terugwaartse versoenbaarheid te behou, sal Bootstrap voortgaan om die mixin intern te gebruik tot Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Afgeronde hoeke
Vandag ondersteun alle moderne blaaiers die nie-voorvoegsel- border-radiuseienskap. As sodanig is daar geen .border-radius()menging nie, maar Bootstrap bevat wel kortpaaie om twee hoeke aan 'n spesifieke kant van 'n voorwerp vinnig af te rond.
.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;
}Boks (val) skaduwees
As jou teikengehoor die nuutste en beste blaaiers en toestelle gebruik, maak seker dat jy die box-shadoweiendom op sy eie gebruik. As jy ondersteuning benodig vir ouer Android (pre-v4) en iOS-toestelle (pre-iOS 5), gebruik die verouderde mixin om die vereiste -webkitvoorvoegsel op te tel.
Die mixin word vanaf v3.1.0 afgekeur , aangesien Bootstrap nie amptelik die verouderde platforms ondersteun wat nie die standaard-eienskap ondersteun nie. Om terugwaartse versoenbaarheid te behou, sal Bootstrap voortgaan om die mixin intern te gebruik tot Bootstrap v4.
Maak seker dat jy rgba()kleure in jou boksskaduwees gebruik sodat hulle so naatloos moontlik met agtergronde meng.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Oorgange
Veelvuldige mengsels vir buigsaamheid. Stel alle oorgangsinligting met een in, of spesifiseer 'n aparte vertraging en duur soos nodig.
Die mixins word opgeskort vanaf v3.2.0, met die bekendstelling van Autoprefixer. Om terugwaartse versoenbaarheid te behou, sal Bootstrap voortgaan om die mixins intern te gebruik tot Bootstrap v4.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}Transformasies
Draai, skaal, vertaal (skuif) of skeef enige voorwerp.
Die mixins word opgeskort vanaf v3.2.0, met die bekendstelling van Autoprefixer. Om terugwaartse versoenbaarheid te behou, sal Bootstrap voortgaan om die mixins intern te gebruik tot Bootstrap v4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}Animasies
'n Enkele mengsel vir die gebruik van al CSS3 se animasie-eienskappe in een verklaring en ander mengsels vir individuele eienskappe.
Die mixins word opgeskort vanaf v3.2.0, met die bekendstelling van Autoprefixer. Om terugwaartse versoenbaarheid te behou, sal Bootstrap voortgaan om die mixins intern te gebruik tot Bootstrap v4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Ondeursigtigheid
Stel die ondeursigtigheid vir alle blaaiers en verskaf 'n filterterugval vir IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Plekhouer teks
Verskaf konteks vir vormkontroles binne elke veld.
.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
}Kolomme
Genereer kolomme via CSS binne 'n enkele element.
.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;
}Gradiënte
Verander maklik enige twee kleure in 'n agtergrondgradiënt. Raak meer gevorderd en stel 'n rigting, gebruik drie kleure, of gebruik 'n radiale gradiënt. Met 'n enkele mixin kry jy al die voorvoeglike sintakse wat jy nodig het.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Jy kan ook die hoek van 'n standaard tweekleur, lineêre gradiënt spesifiseer:
#gradient > .directional(#333; #000; 45deg);As jy 'n barbier-streepstylgradiënt nodig het, is dit ook maklik. Spesifiseer net 'n enkele kleur en ons sal 'n deurskynende wit streep oortrek.
#gradient > .striped(#333; 45deg);Verhoog die ante en gebruik eerder drie kleure. Stel die eerste kleur, die tweede kleur, die tweede kleur se kleurstop ('n persentasiewaarde soos 25%) en die derde kleur met hierdie mengsels:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Let op! As jy ooit 'n gradiënt moet verwyder, maak seker dat jy enige IE-spesifieke filterwat jy bygevoeg het, verwyder. Jy kan dit doen deur die .reset-filter()mixin langsaan te gebruik background-image: none;.
Nutsmengsels
Nutsmengsels is mengsels wat andersins onverwante CSS-eienskappe kombineer om 'n spesifieke doel of taak te bereik.
Clearfix
Vergeet om class="clearfix"by enige element by te voeg en voeg eerder die .clearfix()mengsel by waar toepaslik. Gebruik die mikro-clearfix van Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Horisontale sentrering
Sentreer enige element vinnig binne sy ouer. Vereis widthof max-widthmoet gestel word.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Grootmaat helpers
Spesifiseer die afmetings van 'n voorwerp makliker.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Veranderbare teksareas
Stel die grootte-opsies maklik op vir enige teksarea of enige ander element. Versteur na normale blaaiergedrag ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Afkortende teks
Knip teks maklik af met 'n ellips met 'n enkele vermenging. Vereis element om te wees blockof inline-blockvlak.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Retina beelde
Spesifiseer twee beeldpaaie en die @1x-beeldafmetings, en Bootstrap sal 'n @2x-medianavraag verskaf. As jy baie beelde het om te bedien, oorweeg dit om jou retinabeeld-CSS handmatig in 'n enkele medianavraag te skryf.
.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);
}Met behulp van Sass
Terwyl Bootstrap op Less gebou is, het dit ook 'n amptelike Sass-poort . Ons hou dit in 'n aparte GitHub-bewaarplek en hanteer opdaterings met 'n omskakelingskrip.
Wat ingesluit is
Aangesien die Sass-poort 'n aparte repo het en 'n effens ander gehoor bedien, verskil die inhoud van die projek baie van die hoof Bootstrap-projek. Dit verseker dat die Sass-poort so versoenbaar is met soveel Sass-gebaseerde stelsels as moontlik.
| Pad | Beskrywing |
|---|---|
lib/ |
Ruby gem-kode (Sass-konfigurasie, Rails en Compass-integrasies) |
tasks/ |
Omskakelingsskrifte (draai stroomop van Minder na Sass) |
test/ |
Samestellingstoetse |
templates/ |
Kompaspakketmanifes |
vendor/assets/ |
Sass-, JavaScript- en lettertipelêers |
Rakefile |
Interne take, soos hark en omskep |
Besoek die Sass-poort se GitHub-bewaarplek om hierdie lêers in aksie te sien.
Installasie
Vir inligting oor hoe om Bootstrap vir Sass te installeer en te gebruik, raadpleeg die GitHub-bewaarplek readme . Dit is die mees onlangse bron en bevat inligting vir gebruik met Rails, Compass en standaard Sass-projekte.