CSS
Globale CSS-innstillinger, grunnleggende HTML-elementer stilet og forbedret med utvidbare klasser, og et avansert rutenettsystem.
Oversikt
Få en oversikt over de viktigste delene av Bootstraps infrastruktur, inkludert vår tilnærming til bedre, raskere og sterkere nettutvikling.
HTML5 doctype
Bootstrap bruker visse HTML-elementer og CSS-egenskaper som krever bruk av HTML5 doctype. Inkluder det i begynnelsen av alle prosjektene dine.
<!DOCTYPE html>
<html lang="en">
...
</html>Mobil først
Med Bootstrap 2 la vi til valgfrie mobilvennlige stiler for nøkkelaspekter av rammeverket. Med Bootstrap 3 har vi skrevet om prosjektet til å være mobilvennlig fra starten av. I stedet for å legge til valgfrie mobilstiler, er de bakt rett inn i kjernen. Faktisk er Bootstrap mobil først . Mobile first styles kan finnes i hele biblioteket i stedet for i separate filer.
For å sikre riktig gjengivelse og berøringszooming, legg til viewport-metakoden i <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Du kan deaktivere zoomefunksjoner på mobile enheter ved å legge user-scalable=notil metakoden for viewport. Dette deaktiverer zooming, noe som betyr at brukere bare kan rulle, og resulterer i at nettstedet ditt føles litt mer som en innebygd applikasjon. Totalt sett anbefaler vi ikke dette på alle nettsteder, så vær forsiktig!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Typografi og lenker
Bootstrap setter grunnleggende globale visnings-, typografi- og lenkestiler. Nærmere bestemt:
- Sett
background-color: #fff;påbody - Bruk
@font-family-base,@font-size-base, og@line-height-baseattributtene som vår typografiske base - Angi den globale koblingsfargen via
@link-colorog bruk lenkeunderstreking kun på:hover
Disse stilene finnes i scaffolding.less.
Normaliser.css
For forbedret gjengivelse på tvers av nettlesere bruker vi Normalize.css , et prosjekt av Nicolas Gallagher og Jonathan Neal .
Containere
Bootstrap krever et inneholdende element for å pakke inn innholdet på nettstedet og huse nettsystemet vårt. Du kan velge en av to beholdere å bruke i prosjektene dine. Merk at på grunn av paddingog mer er ingen av beholderne nestable.
Brukes .containerfor en responsiv beholder med fast bredde.
<div class="container">
...
</div>Bruk .container-fluidfor en beholder i full bredde, som spenner over hele bredden av visningsporten.
<div class="container-fluid">
...
</div>Rutenettsystem
Bootstrap inkluderer et responsivt, mobilt første fluidnettsystem som skalerer opp til 12 kolonner på riktig måte etter hvert som størrelsen på enheten eller visningsporten øker. Den inkluderer forhåndsdefinerte klasser for enkle layoutalternativer, samt kraftige blandinger for å generere mer semantiske oppsett .
Introduksjon
Rutenettsystemer brukes til å lage sideoppsett gjennom en rekke rader og kolonner som inneholder innholdet ditt. Slik fungerer Bootstrap-nettsystemet:
- Rader må plasseres innenfor en
.container(fast bredde) eller.container-fluid(full bredde) for riktig justering og polstring. - Bruk rader til å lage horisontale grupper av kolonner.
- Innhold bør plasseres i kolonner, og bare kolonner kan være umiddelbare barn av rader.
- Forhåndsdefinerte rutenettklasser som
.rowog.col-xs-4er tilgjengelige for raskt å lage rutenettoppsett. Mindre blandinger kan også brukes for mer semantiske oppsett. - Kolonner lager takrenner (hull mellom kolonneinnhold) via
padding. Denne utfyllingen er forskjøvet i rader for første og siste kolonne via negativ margin på.rows. - Den negative marginen er grunnen til at eksemplene nedenfor er overskredet. Det er slik at innhold i rutenettkolonner er på linje med innhold uten rutenett.
- Rutenettkolonner opprettes ved å spesifisere antallet av tolv tilgjengelige kolonner du ønsker å spenne over. For eksempel vil tre like kolonner bruke tre
.col-xs-4. - Hvis mer enn 12 kolonner er plassert innenfor en enkelt rad, vil hver gruppe ekstra kolonner, som én enhet, pakkes inn på en ny linje.
- Rutenettklasser gjelder for enheter med skjermbredder større enn eller lik bruddpunktstørrelsene, og overstyrer rutenettklasser rettet mot mindre enheter. Derfor vil f.eks. å bruke en hvilken som helst
.col-md-*klasse på et element ikke bare påvirke stilen på middels enheter, men også på store enheter hvis en.col-lg-*klasse ikke er til stede.
Se på eksemplene for å bruke disse prinsippene på koden din.
Mediespørsmål
Vi bruker følgende mediespørringer i Less-filene våre for å lage de viktigste bruddpunktene i rutenettsystemet vårt.
/* 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) { ... }Noen ganger utvider vi disse mediespørringene til å inkludere en max-widthfor å begrense CSS til et smalere sett med enheter.
@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) { ... }Rutenettalternativer
Se hvordan aspekter av Bootstrap-rutenettsystemet fungerer på tvers av flere enheter med en hendig tabell.
| Ekstra små enheter Telefoner (<768px) | Små enheter Nettbrett (≥768px) | Medium enheter Stasjonære (≥992px) | Store enheter Stasjonære (≥1200px) | |
|---|---|---|---|---|
| Rutenettadferd | Horisontalt til enhver tid | Skjult for å starte, horisontalt over bruddpunkter | ||
| Beholderbredde | Ingen (auto) | 750 piksler | 970 piksler | 1170 piksler |
| Klasseprefiks | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| antall kolonner | 12 | |||
| Kolonnebredde | Auto | ~62px | ~81 piksler | ~97 piksler |
| Rennebredde | 30px (15px på hver side av en kolonne) | |||
| Nestbar | Ja | |||
| Forskyvninger | Ja | |||
| Kolonnebestilling | Ja | |||
Eksempel: Stablet-til-horisontalt
Ved å bruke et enkelt sett med .col-md-*rutenettklasser kan du lage et grunnleggende rutenettsystem som starter stablet på mobile enheter og nettbrett (det ekstra lille til lille området) før det blir horisontalt på stasjonære (middels) enheter. Plasser rutenettkolonner i en hvilken som helst .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
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Eksempel: Væskebeholder
Gjør et hvilket som helst rutenettoppsett med fast bredde til et oppsett i full bredde ved å endre det ytterste .containertil .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Eksempel: Mobil og desktop
Vil du ikke at kolonnene dine bare skal stables i mindre enheter? Bruk rutenettklassene for ekstra små og mellomstore enheter ved å legge .col-xs-* .col-md-*til kolonnene dine. Se eksemplet nedenfor for en bedre ide om hvordan det hele fungerer.
.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>Eksempel: Mobil, nettbrett, skrivebord
Bygg videre på det forrige eksempelet ved å lage enda mer dynamiske og kraftige oppsett med nettbrettklasser .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>Eksempel: Kolonneinnpakning
Hvis mer enn 12 kolonner er plassert innenfor en enkelt rad, vil hver gruppe ekstra kolonner, som én enhet, pakkes inn på en ny linje.
.col-xs-9
.col-xs-4
Siden 9 + 4 = 13 > 12, blir denne 4-kolonne brede div pakket inn på en ny linje som en sammenhengende enhet.
Siden 9 + 4 = 13 > 12, blir denne 4-kolonne brede div pakket inn på en ny linje som en sammenhengende enhet.
.col-xs-6
Påfølgende kolonner fortsetter langs den nye linjen.
Påfølgende kolonner fortsetter langs den nye linjen.
<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>Responsive kolonnen tilbakestilles
Med de fire nivåene med rutenett som er tilgjengelige, kommer du garantert til å støte på problemer der kolonnene dine ved visse bruddpunkter ikke blir helt riktig fordi den ene er høyere enn den andre. For å fikse det, bruk en kombinasjon av a .clearfixog våre responsive verktøyklasser .
.col-xs-6 .col-sm-3
Endre størrelsen på visningsporten eller sjekk den ut på telefonen for et eksempel.
Endre størrelsen på visningsporten eller sjekk den ut på telefonen for et eksempel.
.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>I tillegg til kolonnerydning ved responsive bruddpunkter, kan det hende du må tilbakestille forskyvninger, push eller pull . Se dette i aksjon i rutenetteksemplet .
<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>Forskyvning av kolonner
Flytt kolonner til høyre ved å bruke .col-md-offset-*klasser. Disse klassene øker venstre marg i en kolonne med *kolonner. .col-md-offset-4Flytter for eksempel .col-md-4over fire kolonner.
.col-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>Du kan også overstyre forskyvninger fra lavere rutenettnivåer med .col-*-offset-0klasser.
<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>Hekkesøyler
For å legge innholdet ditt med standardrutenettet, legg til en ny .rowog et sett med .col-sm-*kolonner i en eksisterende .col-sm-*kolonne. Nestede rader bør inneholde et sett med kolonner som summerer seg til 12 eller færre (det er ikke nødvendig at du bruker alle de 12 tilgjengelige kolonnene).
Nivå 1: .col-sm-9
Nivå 2: .col-xs-8 .col-sm-6
Nivå 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>Kolonnebestilling
Endre enkelt rekkefølgen på våre innebygde rutenettkolonner med .col-md-push-*og .col-md-pull-*modifikatorklasser.
.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>Mindre blandinger og variabler
I tillegg til forhåndsbygde rutenettklasser for raske oppsett, inkluderer Bootstrap Mindre variabler og blandinger for raskt å generere dine egne enkle, semantiske oppsett.
Variabler
Variabler bestemmer antall kolonner, takrennebredden og mediespørringspunktet der flytende kolonner skal begynne. Vi bruker disse til å generere de forhåndsdefinerte rutenettklassene som er dokumentert ovenfor, så vel som for de tilpassede miksene som er oppført nedenfor.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Mixins
Mixins brukes sammen med rutenettvariablene for å generere semantisk CSS for individuelle rutenettkolonner.
// 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));
}
}Eksempel bruk
Du kan endre variablene til dine egne tilpassede verdier, eller bare bruke mixins med standardverdiene deres. Her er et eksempel på bruk av standardinnstillingene for å lage en to-kolonne layout med et gap mellom.
.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>Typografi
Overskrifter
Alle HTML-overskrifter, <h1>gjennom <h6>, er tilgjengelige. .h1gjennom .h6-klasser er også tilgjengelige for når du ønsker å matche skriftstilen til en overskrift, men likevel vil at teksten skal vises inline.
h1. Bootstrap-overskrift |
Halvfet 36 piksler |
h2. Bootstrap-overskrift |
Halvfet 30 piksler |
h3. Bootstrap-overskrift |
Halvfet 24px |
h4. Bootstrap-overskrift |
Halvfet 18 piksler |
h5. Bootstrap-overskrift |
Halvfet 14 piksler |
h6. Bootstrap-overskrift |
Halvfet 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>Lag lettere, sekundær tekst i en hvilken som helst overskrift med en generisk <small>kode eller .smallklassen.
h1. Bootstrap-overskrift Sekundær tekst |
h2. Bootstrap-overskrift Sekundær tekst |
h3. Bootstrap-overskrift Sekundær tekst |
h4. Bootstrap-overskrift Sekundær tekst |
h5. Bootstrap-overskrift Sekundær tekst |
h6. Bootstrap-overskrift Sekundær tekst |
<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>Brødtekst
Bootstraps globale standard font-sizeer 14px , med en line-heightpå 1.428 . Dette gjelder for <body>og alle ledd. I tillegg får <p>(avsnitt) en bunnmargin på halvparten av den beregnede linjehøyden (10 piksler som standard).
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>Bly kropp kopi
Få et avsnitt til å skille seg ut ved å legge til .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, er ikke commodo luctus.
<p class="lead">...</p>Bygget med mindre
Den typografiske skalaen er basert på to Less-variabler i variables.less : @font-size-baseog @line-height-base. Den første er grunnskriftstørrelsen som brukes hele veien, og den andre er grunnlinjehøyden. Vi bruker disse variablene og litt enkel matematikk for å lage marginer, utfyllinger og linjehøyder for alle våre typer og mer. Tilpass dem og Bootstrap tilpasser seg.
Innebygde tekstelementer
Merket tekst
For å fremheve en tekstserie på grunn av dens relevans i en annen kontekst, bruk <mark>taggen.
Du kan bruke merkelappen tilfremhevetekst.
You can use the mark tag to <mark>highlight</mark> text.Slettet tekst
<del>Bruk taggen for å indikere tekstblokker som er slettet .
Denne tekstlinjen er ment å bli behandlet som slettet tekst.
<del>This line of text is meant to be treated as deleted text.</del>Gjennomstrekingstekst
<s>Bruk taggen for å indikere tekstblokker som ikke lenger er relevante .
Denne tekstlinjen er ment å bli behandlet som ikke lenger nøyaktig.
<s>This line of text is meant to be treated as no longer accurate.</s>Innsatt tekst
<ins>Bruk taggen for å indikere tillegg til dokumentet .
Denne tekstlinjen er ment å bli behandlet som et tillegg til dokumentet.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Understreket tekst
For å understreke tekst, bruk <u>taggen.
Denne tekstlinjen vil gjengis som understreket
<u>This line of text will render as underlined</u>Benytt HTMLs standard emphasis tags med lette stiler.
Liten tekst
For å redusere vektlegging av tekstblokker eller tekstblokker, bruk <small>taggen til å sette teksten til 85 % av størrelsen på overordnet. Overskriftselementer får sine egne font-sizefor nestede <small>elementer.
Du kan alternativt bruke et inline-element med .smalli stedet for en <small>.
Denne tekstlinjen er ment å bli behandlet som liten skrift.
<small>This line of text is meant to be treated as fine print.</small>Modig
For å fremheve en tekstbit med en tyngre skriftvekt.
Følgende tekstbit gjengis som fet tekst .
<strong>rendered as bold text</strong>Kursiv
For å fremheve en tekstbit med kursiv.
Følgende tekstbit gjengis som kursiv tekst .
<em>rendered as italicized text</em>Alternative elementer
Bruk gjerne <b>og <i>i HTML5. <b>er ment å fremheve ord eller setninger uten å formidle ekstra betydning, mens <i>det er mest for stemme, tekniske termer, etc.
Opprettingsklasser
Juster enkelt tekst til komponenter med tekstjusteringsklasser.
Venstrejustert tekst.
Sentrert tekst.
Høyrejustert tekst.
Begrunnet tekst.
Ingen brytetekst.
<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>Transformasjonsklasser
Transformer tekst i komponenter med tekstklasser for store bokstaver.
Små bokstaver.
Tekst med store bokstaver.
Tekst med stor bokstav.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Forkortelser
Stilisert implementering av HTMLs <abbr>element for forkortelser og akronymer for å vise den utvidede versjonen ved sveving. Forkortelser med et titleattributt har en lett stiplet bunnkant og en hjelpemarkør ved sveving, noe som gir ekstra kontekst ved sveving og til brukere av hjelpeteknologier.
Grunnleggende forkortelse
En forkortelse av ordet attributt er attr .
<abbr title="attribute">attr</abbr>Initialisme
Legg .initialismtil en forkortelse for en litt mindre skriftstørrelse.
HTML er det beste siden oppskåret brød.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Adresser
Presenter kontaktinformasjon for nærmeste stamfar eller hele arbeidet. Bevar formateringen ved å avslutte alle linjer med <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Fullt navn
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Fullt navn
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>Blockquotes
For å sitere blokker med innhold fra en annen kilde i dokumentet ditt.
Standard blokksitat
Pakk <blockquote>rundt hvilken som helst HTML som sitatet. For rette sitater anbefaler vi en <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Alternativer for blokksitat
Stil- og innholdsendringer for enkle varianter av en standard <blockquote>.
Navngi en kilde
Legg til en <footer>for å identifisere kilden. Pakk inn navnet på kildeverket i <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en 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>Alternative skjermer
Legg .blockquote-reversetil for et blokksitat med høyrejustert innhold.
<blockquote class="blockquote-reverse">
...
</blockquote>Lister
Uordnet
En liste over elementer der rekkefølgen ikke har eksplisitt betydning.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis i pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kl
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Bestilt
En liste over elementer der rekkefølgen har eksplisitt betydning.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis i pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Ustilt
Fjern standardmargen list-styleog venstremargen på listeelementer (kun umiddelbare underordnede). Dette gjelder bare for umiddelbare barnelisteelementer , noe som betyr at du også må legge til klassen for alle nestede lister.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis i pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kl
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>På linje
Plasser alle listeelementer på en enkelt linje med display: inline-block;og litt lett polstring.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Beskrivelse
En liste over termer med tilhørende beskrivelser.
- Beskrivelseslister
- En beskrivelsesliste er perfekt for å definere begreper.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Horisontal beskrivelse
Lag vilkår og beskrivelser på <dl>linje side ved side. Starter stablet som standard <dl>s, men når navbaren utvides, så gjør disse.
- Beskrivelseslister
- En beskrivelsesliste er perfekt for å definere begreper.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Auto-trunkering
Horisontale beskrivelseslister vil avkorte termer som er for lange til å passe inn i venstre kolonne med text-overflow. I smalere visningsporter vil de endres til standard stablet layout.
Kode
På linje
Pakk inn innebygde kodebiter med <code>.
Skal for eksempel
<section>pakkes inn som inline.
For example, <code><section></code> should be wrapped as inline.Brukerinnspill
Bruk for <kbd>å indikere inndata som vanligvis legges inn via tastaturet.
For å bytte katalog, skriv
cdetterfulgt av navnet på katalogen.
For å redigere innstillinger, trykk ctrl + ,
For å redigere innstillinger, trykk ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>Grunnblokk
Bruk <pre>for flere linjer med kode. Pass på å unnslippe eventuelle vinkelparenteser i koden for riktig gjengivelse.
<p>Eksempeltekst her...</p>
<pre><p>Sample text here...</p></pre>Du kan eventuelt legge til.pre-scrollable klassen, som vil sette en makshøyde på 350 px og gi en y-akse rullefelt.
Variabler
<var>Bruk taggen for å indikere variabler .
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Eksempelutgang
<samp>Bruk taggen for å indikere blokkeksempler fra et program .
Denne teksten er ment å bli behandlet som eksempelutgang fra et dataprogram.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Tabeller
Grunnleggende eksempel
For grunnleggende styling – lett polstring og bare horisontale skillelinjer – legg til basisklassen .tabletil en hvilken som helst <table>. Det kan virke veldig overflødig, men gitt den utbredte bruken av tabeller for andre plugins som kalendere og datovelgere, har vi valgt å isolere våre tilpassede tabellstiler.
| # | Fornavn | Etternavn | Brukernavn |
|---|---|---|---|
| 1 | merke | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Larry | fuglen |
<table class="table">
...
</table>Stripete rader
Bruk .table-stripedfor å legge til sebrastriper til en hvilken som helst tabellrad i <tbody>.
Kompatibilitet på tvers av nettlesere
Stripede tabeller styles via :nth-childCSS-velgeren, som ikke er tilgjengelig i Internet Explorer 8.
| # | Fornavn | Etternavn | Brukernavn |
|---|---|---|---|
| 1 | merke | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Larry | fuglen |
<table class="table table-striped">
...
</table>Bordkantet bord
Legg .table-borderedtil kantlinjer på alle sider av tabellen og cellene.
| # | Fornavn | Etternavn | Brukernavn |
|---|---|---|---|
| 1 | merke | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Larry | fuglen |
<table class="table table-bordered">
...
</table>Hold over rader
Legg .table-hovertil for å aktivere en svevetilstand på tabellrader i en <tbody>.
| # | Fornavn | Etternavn | Brukernavn |
|---|---|---|---|
| 1 | merke | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Larry | fuglen |
<table class="table table-hover">
...
</table>Kondensert bord
Legg .table-condensedtil for å gjøre bordene mer kompakte ved å kutte cellepolstring i to.
| # | Fornavn | Etternavn | Brukernavn |
|---|---|---|---|
| 1 | merke | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Fuglen Larry | ||
<table class="table table-condensed">
...
</table>Kontekstuelle klasser
Bruk kontekstuelle klasser til å fargelegge tabellrader eller individuelle celler.
| Klasse | Beskrivelse |
|---|---|
.active |
Bruker svevefargen på en bestemt rad eller celle |
.success |
Indikerer en vellykket eller positiv handling |
.info |
Indikerer en nøytral informativ endring eller handling |
.warning |
Indikerer en advarsel som kan trenge oppmerksomhet |
.danger |
Indikerer en farlig eller potensielt negativ handling |
| # | Kolonneoverskrift | Kolonneoverskrift | Kolonneoverskrift |
|---|---|---|---|
| 1 | Kolonneinnhold | Kolonneinnhold | Kolonneinnhold |
| 2 | Kolonneinnhold | Kolonneinnhold | Kolonneinnhold |
| 3 | Kolonneinnhold | Kolonneinnhold | Kolonneinnhold |
| 4 | Kolonneinnhold | Kolonneinnhold | Kolonneinnhold |
| 5 | Kolonneinnhold | Kolonneinnhold | Kolonneinnhold |
| 6 | Kolonneinnhold | Kolonneinnhold | Kolonneinnhold |
| 7 | Kolonneinnhold | Kolonneinnhold | Kolonneinnhold |
| 8 | Kolonneinnhold | Kolonneinnhold | Kolonneinnhold |
| 9 | Kolonneinnhold | Kolonneinnhold | Kolonneinnhold |
<!-- 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>Formidle mening til hjelpeteknologier
Å bruke farger for å gi mening til en tabellrad eller individuell celle gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjonen angitt med fargen enten er åpenbar fra selve innholdet (den synlige teksten i den aktuelle tabellraden/cellen), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .sr-onlyklassen.
Responsive tabeller
Lag responsive tabeller ved å pakke dem .tableinn .table-responsivefor å få dem til å rulle horisontalt på små enheter (under 768 piksler). Når du ser på noe som er større enn 768 px bredt, vil du ikke se noen forskjell i disse tabellene.
Vertikal klipping/trunkering
Responsive tabeller bruker overflow-y: hidden, som klipper av alt innhold som går utover bunn- eller toppkanten av tabellen. Spesielt kan dette klippe av rullegardinmenyer og andre tredjeparts widgets.
Firefox og feltsett
Firefox har noen vanskelige feltsett-styling som involverer widthsom forstyrrer den responsive tabellen. Dette kan ikke overstyres uten et Firefox-spesifikt hack som vi ikke tilbyr i Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}For mer informasjon, les dette Stack Overflow-svaret .
| # | Tabelloverskrift | Tabelloverskrift | Tabelloverskrift | Tabelloverskrift | Tabelloverskrift | Tabelloverskrift |
|---|---|---|---|---|---|---|
| 1 | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle |
| 2 | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle |
| 3 | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle |
| # | Tabelloverskrift | Tabelloverskrift | Tabelloverskrift | Tabelloverskrift | Tabelloverskrift | Tabelloverskrift |
|---|---|---|---|---|---|---|
| 1 | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle |
| 2 | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle |
| 3 | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Skjemaer
Grunnleggende eksempel
Individuelle skjemakontroller får automatisk litt global stil. Alle tekstlige <input>, <textarea>, og <select>elementer med .form-controler satt til width: 100%;som standard. Pakk inn etiketter og kontroller .form-groupfor optimal avstand.
<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>Ikke bland skjemagrupper med inndatagrupper
Ikke bland skjemagrupper direkte med inndatagrupper . Neste i stedet inndatagruppen inne i skjemagruppen.
Innebygd skjema
Legg .form-inlinetil i skjemaet ditt (som ikke trenger å være et <form>) for venstrejusterte og innebygde blokkkontroller. Dette gjelder bare for skjemaer i visningsporter som er minst 768 px brede.
Kan kreve tilpassede bredder
Inndata og valg er width: 100%;brukt som standard i Bootstrap. I innebygde skjemaer tilbakestiller vi det til width: auto;slik at flere kontroller kan ligge på samme linje. Avhengig av oppsettet ditt kan det være nødvendig med ekstra tilpassede bredder.
Legg alltid til etiketter
Skjermlesere vil ha problemer med skjemaene dine hvis du ikke inkluderer en etikett for hver inndata. For disse innebygde skjemaene kan du skjule etikettene ved å bruke .sr-onlyklassen. Det finnes flere alternative metoder for å gi en etikett for hjelpeteknologier, for eksempel aria-label, aria-labelledbyeller titleattributtet. Hvis ingen av disse er til stede, kan skjermlesere ty til å bruke placeholderattributtet, hvis det finnes, men vær oppmerksom på at bruk av placeholdersom erstatning for andre merkingsmetoder ikke anbefales.
<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>Horisontal form
Bruk Bootstraps forhåndsdefinerte rutenettklasser for å justere etiketter og grupper av skjemakontroller i en horisontal layout ved å legge .form-horizontaltil skjemaet (som ikke trenger å være en <form>). Hvis du gjør det, endres .form-groupden til å oppføre seg som rutenettrader, så du trenger ikke .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>Støttede kontroller
Eksempler på standard skjemakontroller som støttes i et eksempelskjemaoppsett.
Innganger
Mest vanlige skjemakontroll, tekstbaserte inndatafelt. Inkluderer støtte for alle HTML5-typer: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, og color.
Typeerklæring kreves
Inndata vil bare bli stilt fullstendig hvis de typeer riktig deklarert.
<input type="text" class="form-control" placeholder="Text input">Inndatagrupper
For å legge til integrert tekst eller knapper før og/eller etter en tekstbasert <input>, sjekk inndatagruppekomponenten .
Tekstområde
Skjemakontroll som støtter flere tekstlinjer. Endre rowsattributt etter behov.
<textarea class="form-control" rows="3"></textarea>Avmerkingsbokser og radioer
Avmerkingsbokser er for å velge ett eller flere alternativer i en liste, mens radioer er for å velge ett alternativ fra mange.
Deaktiverte avmerkingsbokser og radioer støttes, men for å gi en "ikke-tillatt"-markør når du holder musepekeren til den overordnede <label>, må du legge .disabledklassen til den overordnede .radio, .radio-inline, .checkbox, eller .checkbox-inline.
Standard (stablet)
<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>Innebygde avmerkingsbokser og radioer
Bruk klassene .checkbox-inlineeller .radio-inlinepå en rekke avmerkingsbokser eller radioer for kontroller som vises på samme linje.
<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>Avmerkingsbokser og radioer uten etiketttekst
Skulle du ikke ha noen tekst i <label>, blir inndata plassert slik du forventer. Fungerer foreløpig bare på avmerkingsbokser og radioer som ikke er innebygd. Husk å fortsatt gi en form for etikett for hjelpeteknologier (for eksempel ved å bruke 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>Velger
Merk at mange innfødte utvalgsmenyer – nemlig i Safari og Chrome – har avrundede hjørner som ikke kan endres via border-radiusegenskaper.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>For <select>kontroller med multipleattributtet vises flere alternativer som standard.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Statisk kontroll
Når du trenger å plassere ren tekst ved siden av en skjemaetikett i et skjema, bruker du .form-control-staticklassen på en <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>Fokustilstand
Vi fjerner standardstilene outlinepå noen skjemakontroller og bruker en box-shadowi stedet for :focus.
Demotilstand :focus_
Eksempelinngangen ovenfor bruker egendefinerte stiler i dokumentasjonen vår for å demonstrere :focustilstanden på en .form-control.
Deaktivert tilstand
Legg til det disabledboolske attributtet på en inngang for å forhindre brukerinteraksjoner. Deaktiverte innganger ser lysere ut og legger til en not-allowedmarkør.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Deaktiverte feltsett
Legg til disabledattributtet til a <fieldset>for å deaktivere alle kontrollene <fieldset>på en gang.
Advarsel om lenkefunksjonalitet til<a>
Som standard vil nettlesere behandle alle innfødte skjemakontroller ( <input>, <select>og <button>elementer) i en <fieldset disabled>som deaktivert, og forhindrer både tastatur- og musinteraksjoner på dem. Men hvis skjemaet ditt også inneholder <a ... class="btn btn-*">elementer, vil disse kun få stilen pointer-events: none. Som nevnt i delen om deaktivert tilstand for knapper (og spesifikt i underdelen for ankerelementer), er denne CSS-egenskapen ennå ikke standardisert og støttes ikke fullt ut i Opera 18 og lavere, eller i Internet Explorer 11, og vant ikke hindre tastaturbrukere fra å kunne fokusere eller aktivere disse koblingene. Så for å være sikker, bruk tilpasset JavaScript for å deaktivere slike koblinger.
Kompatibilitet på tvers av nettlesere
disabledMens Bootstrap vil bruke disse stilene i alle nettlesere, støtter ikke Internet Explorer 11 og eldre attributtet fullt ut på en <fieldset>. Bruk tilpasset JavaScript for å deaktivere feltsettet i disse nettleserne.
<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>Skrivebeskyttet tilstand
Legg til det readonlyboolske attributtet på en inngang for å forhindre endring av inngangens verdi. Skrivebeskyttede innganger virker lettere (akkurat som deaktiverte innganger), men beholder standardmarkøren.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Hjelpetekst
Hjelpetekst på blokknivå for skjemakontroller.
Knytte hjelpetekst til skjemakontroller
Hjelpeteksten skal eksplisitt assosieres med skjemakontrollen den er knyttet til ved bruk av aria-describedbyattributtet. Dette vil sikre at hjelpeteknologier – som skjermlesere – vil kunngjøre denne hjelpeteksten når brukeren fokuserer eller går inn i kontrollen.
<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>Valideringstilstander
Bootstrap inkluderer valideringsstiler for feil-, advarsels- og suksesstilstander på skjemakontroller. For å bruke, legg til .has-warning, .has-erroreller .has-successtil det overordnede elementet. Alle .control-label, .form-control, og .help-blockinnenfor dette elementet vil motta valideringsstilene.
Formidle valideringstilstand til hjelpeteknologier og fargeblinde brukere
Å bruke disse valideringsstilene for å angi tilstanden til en skjemakontroll gir kun en visuell, fargebasert indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier - som skjermlesere - eller til fargeblinde brukere.
Sørg for at en alternativ indikasjon på tilstand også er gitt. Du kan for eksempel inkludere et hint om tilstand i selve skjemakontrollens <label>tekst (som tilfellet er i følgende kodeeksempel), inkludere en Glyphicon (med passende alternativ tekst ved å bruke .sr-onlyklassen - se Glyphicon-eksemplene ), eller ved å gi en ekstra hjelpetekstblokk . Spesielt for hjelpeteknologier kan ugyldige skjemakontroller også tildeles et aria-invalid="true"attributt.
<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>Med valgfrie ikoner
Du kan også legge til valgfrie tilbakemeldingsikoner med tillegg av .has-feedbackog det høyre ikonet.
Tilbakemeldingsikoner fungerer bare med tekstelementer <input class="form-control">.
Ikoner, etiketter og inndatagrupper
Manuell plassering av tilbakemeldingsikoner er nødvendig for innganger uten etikett og for inngangsgrupper med tillegg til høyre. Du oppfordres sterkt til å gi etiketter for alle innganger av tilgjengelighetsgrunner. Hvis du vil forhindre at etiketter vises, skjuler du dem for .sr-onlyklassen. Hvis du må klare deg uten etiketter, juster topverdien på tilbakemeldingsikonet. For inputgrupper, juster rightverdien til en passende pikselverdi avhengig av bredden på tillegget ditt.
Formidle ikonets betydning til hjelpeteknologier
For å sikre at hjelpeteknologier – for eksempel skjermlesere – formidler betydningen av et ikon på riktig måte, bør ekstra skjult tekst inkluderes i .sr-onlyklassen og eksplisitt assosieres med skjemakontrollen den er knyttet til ved å bruke aria-describedby. Alternativt, sørg for at betydningen (for eksempel det faktum at det er en advarsel for et bestemt tekstfelt) formidles i en annen form, for eksempel å endre teksten til den faktiske som er <label>knyttet til skjemakontrollen.
Selv om de følgende eksemplene allerede nevner valideringstilstanden til deres respektive skjemakontroller i selve <label>teksten, er teknikken ovenfor (ved bruk av .sr-onlytekst og aria-describedby) inkludert for illustrative formål.
<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>Valgfrie ikoner i horisontale og innebygde former
<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>Valgfrie ikoner med skjulte .sr-onlyetiketter
Hvis du bruker .sr-onlyklassen til å skjule en skjemakontroll <label>(i stedet for å bruke andre merkealternativer, for eksempel aria-labelattributtet), vil Bootstrap automatisk justere plasseringen av ikonet når det er lagt til.
(suksess)
@
(suksess)
<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>Kontroller dimensjonering
Angi høyder ved å bruke klasser som .input-lg, og angi bredder ved å bruke rutenettkolonneklasser som .col-lg-*.
Høydemål
Lag kontroller med høyere eller kortere form som matcher knappstørrelser.
<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 formgruppestørrelser
Sett størrelse på etiketter og skjemakontroller raskt .form-horizontalved å legge til .form-group-lgeller .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>Kolonnestørrelse
Pakk inn inndata i rutenettkolonner, eller et hvilket som helst tilpasset overordnet element, for enkelt å håndheve ønskede bredder.
<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>Knapper
Knappemerker
Bruk knappeklassene på et <a>, <button>, eller <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">Kontekstspesifikk bruk
Mens knappeklasser kan brukes på <a>og <button>elementer, støttes bare <button>elementer i våre nav- og navlinjekomponenter.
Lenker som fungerer som knapper
Hvis <a>elementene brukes til å fungere som knapper – som utløser funksjonalitet på siden, i stedet for å navigere til et annet dokument eller seksjon på gjeldende side – bør de også gis en passende role="button".
Gjengivelse på tvers av nettlesere
Som en beste praksis anbefaler vi på det sterkeste å bruke <button>elementet når det er mulig for å sikre samsvarende gjengivelse på tvers av nettlesere.
Blant annet er det en feil i Firefox <30 som hindrer oss i å stille inn de line-heightav <input>-baserte knappene, noe som gjør at de ikke akkurat matcher høyden på andre knapper på Firefox.
Alternativer
Bruk hvilken som helst av de tilgjengelige knappeklassene for raskt å lage en stilknapp.
<!-- 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>Formidle mening til hjelpeteknologier
Å bruke farger for å legge til mening til en knapp gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (den synlige teksten på knappen), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .sr-onlyklassen.
Størrelser
Lyst på større eller mindre knapper? Legg til .btn-lg, .btn-sm, eller .btn-xsfor flere størrelser.
<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>Lag blokknivåknapper – de som spenner over hele bredden til en forelder – ved å legge til .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>Aktiv tilstand
Knapper vises trykket (med mørkere bakgrunn, mørkere kant og innfelt skygge) når de er aktive. For <button>elementer gjøres dette via :active. For <a>elementer er det gjort med .active. Du kan imidlertid bruke .activepå <button>s (og inkludere aria-pressed="true"attributtet) hvis du trenger å replikere den aktive tilstanden programmatisk.
Knappeelement
Du trenger ikke å legge til :activesiden det er en pseudo-klasse, men hvis du trenger å tvinge frem det samme utseendet, fortsett og legg til .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>Ankerelement
Legg .activeklassen til <a>knapper.
<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>Deaktivert tilstand
Få knappene til å se uklikkbare ut ved å tone dem tilbake med opacity.
Knappeelement
Legg til disabledattributtet til <button>knapper.
<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>Kompatibilitet på tvers av nettlesere
Hvis du legger til disabledattributtet til en <button>, vil Internet Explorer 9 og under gjengi tekst grå med en ekkel tekstskygge som vi ikke kan fikse.
Ankerelement
Legg .disabledklassen til <a>knapper.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>Vi bruker .disabledsom en bruksklasse her, lik den vanlige .activeklassen, så ingen prefiks er nødvendig.
Forbehold om lenkefunksjonalitet
Denne klassen bruker pointer-events: nonefor å prøve å deaktivere koblingsfunksjonaliteten til <a>s, men den CSS-egenskapen er ennå ikke standardisert og støttes ikke fullt ut i Opera 18 og eldre, eller i Internet Explorer 11. I tillegg, selv i nettlesere som støtter pointer-events: none, tastatur navigasjonen forblir upåvirket, noe som betyr at seende tastaturbrukere og brukere av hjelpeteknologi fortsatt vil kunne aktivere disse koblingene. Så for å være sikker, bruk tilpasset JavaScript for å deaktivere slike koblinger.
Bilder
Responsive bilder
Bilder i Bootstrap 3 kan gjøres responsvennlige ved å legge til .img-responsiveklassen. Dette gjelder max-width: 100%;, height: auto;og display: block;for bildet slik at det skalerer fint til det overordnede elementet.
For å sentrere bilder som bruker .img-responsiveklassen, bruk .center-blocki stedet for .text-center. Se delen for hjelpeklasser for mer informasjon om .center-blockbruk.
SVG-bilder og IE 8-10
I Internet Explorer 8-10 er SVG-bilder med .img-responsiveuforholdsmessig store. For å fikse dette, legg til width: 100% \9;der det er nødvendig. Bootstrap bruker ikke dette automatisk da det forårsaker komplikasjoner til andre bildeformater.
<img src="..." class="img-responsive" alt="Responsive image">Bildeformer
Legg til klasser til et <img>element for enkelt å style bilder i ethvert prosjekt.
Kompatibilitet på tvers av nettlesere
Husk at Internet Explorer 8 mangler støtte for avrundede hjørner.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Hjelperklasser
Kontekstuelle farger
Formidle mening gjennom farger med en håndfull vektbruksklasser. Disse kan også brukes på lenker og blir mørkere når du holder musepekeren på samme måte som våre standard lenkestiler.
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>Håndtere spesifisitet
Noen ganger kan ikke vektklasser brukes på grunn av spesifisiteten til en annen velger. I de fleste tilfeller er en tilstrekkelig løsning å pakke teksten inn i en <span>med klassen.
Formidle mening til hjelpeteknologier
Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (de kontekstuelle fargene brukes bare for å forsterke betydningen som allerede er tilstede i teksten/markeringen), eller inkluderes på alternative måter, for eksempel ekstra tekst skjult med .sr-onlyklassen .
Kontekstuelle bakgrunner
I likhet med kontekstuelle tekstfargeklasser kan du enkelt angi bakgrunnen til et element til en hvilken som helst kontekstuell klasse. Ankerkomponenter blir mørkere ved sveving, akkurat som tekstklassene.
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>Håndtere spesifisitet
Noen ganger kan ikke kontekstuelle bakgrunnsklasser brukes på grunn av spesifisiteten til en annen velger. I noen tilfeller er en tilstrekkelig løsning å pakke inn elementets innhold i en <div>med klassen.
Formidle mening til hjelpeteknologier
Som med kontekstuelle farger , sørg for at enhver mening som formidles gjennom farger, også formidles i et format som ikke er rent presentasjonsmessig.
Lukk ikon
Bruk det generiske lukkeikonet for å avvise innhold som modaler og varsler.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Carets
Bruk skritt for å indikere rullegardinfunksjonalitet og retning. Merk at standardmerket reverseres automatisk i rullegardinmenyene .
<span class="caret"></span>Raske flyter
Flyt et element til venstre eller høyre med en klasse. !importanter inkludert for å unngå spesifisitetsproblemer. Klasser kan også brukes som mixins.
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}Sentrer innholdsblokker
Sett et element til display: blockog sentrer via margin. Tilgjengelig som en blanding og klasse.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
Slett enkelt floats ved å legge .clearfix til det overordnede elementet . Bruker microclearfix som popularisert av Nicolas Gallagher. Kan også brukes som blanding.
<!-- 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();
}Vise og skjule innhold
Tving et element til å vises eller skjules ( inkludert for skjermlesere ) med bruk av .showog .hiddenklasser. Disse klassene bruker !importantfor å unngå spesifisitetskonflikter, akkurat som de raske flytene . De er bare tilgjengelige for blokknivåveksling. De kan også brukes som blandinger.
.hideer tilgjengelig, men det påvirker ikke alltid skjermlesere og er avviklet fra og med v3.0.1. Bruk .hiddeneller .sr-onlyi stedet.
Videre .invisiblekan den brukes til å veksle bare synligheten til et element, noe som betyr at det displayikke er endret og elementet fortsatt kan påvirke flyten av dokumentet.
<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();
}Skjermleser og tastaturnavigasjonsinnhold
Skjul et element for alle enheter unntatt skjermlesere med .sr-only. Kombiner .sr-onlymed .sr-only-focusablefor å vise elementet igjen når det er fokusert (f.eks. av en bruker som bare bruker tastaturet). Nødvendig for å følge beste fremgangsmåter for tilgjengelighet . Kan også brukes som mixins.
<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();
}Bildebytte
Bruk .text-hideklassen eller mixin for å erstatte et elements tekstinnhold med et bakgrunnsbilde.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Responsive verktøy
For raskere mobilvennlig utvikling, bruk disse verktøyklassene for å vise og skjule innhold etter enhet via mediesøk. Det er også inkludert verktøyklasser for å veksle mellom innhold når det skrives ut.
Prøv å bruke disse på en begrenset basis og unngå å lage helt forskjellige versjoner av det samme nettstedet. Bruk dem i stedet for å komplettere presentasjonen til hver enhet.
Tilgjengelige klasser
Bruk en enkelt eller en kombinasjon av de tilgjengelige klassene for å veksle mellom innhold på tvers av viewport-bruddpunkter.
| Ekstra små enheterTelefoner (<768 piksler) | Små enheterNettbrett (≥768 piksler) | Middels enheterStasjonære datamaskiner (≥992px) | Store enheterStasjonære datamaskiner (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Synlig | Skjult | Skjult | Skjult |
.visible-sm-* |
Skjult | Synlig | Skjult | Skjult |
.visible-md-* |
Skjult | Skjult | Synlig | Skjult |
.visible-lg-* |
Skjult | Skjult | Skjult | Synlig |
.hidden-xs |
Skjult | Synlig | Synlig | Synlig |
.hidden-sm |
Synlig | Skjult | Synlig | Synlig |
.hidden-md |
Synlig | Synlig | Skjult | Synlig |
.hidden-lg |
Synlig | Synlig | Synlig | Skjult |
Fra og med v3.2.0 kommer .visible-*-*klassene for hvert bruddpunkt i tre varianter, en for hver CSS display-egenskapsverdi oppført nedenfor.
| Gruppe med klasser | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Så, for ekstra små ( xs) skjermer for eksempel, er de tilgjengelige .visible-*-*klassene: .visible-xs-block, .visible-xs-inline, og .visible-xs-inline-block.
Klassene .visible-xs, .visible-sm, .visible-mdog .visible-lgeksisterer også, men er avviklet fra og med v3.2.0 . De er omtrent likeverdige med .visible-*-block, bortsett fra med ekstra spesialtilfeller for <table>vekslerelaterte elementer.
Print klasser
I likhet med de vanlige responsive timene, bruk disse for å veksle mellom innhold for utskrift.
| Klasser | Nettleser | Skrive ut |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Skjult | Synlig |
.hidden-print |
Synlig | Skjult |
Klassen .visible-printeksisterer også, men er avviklet fra og med v3.2.0. Det tilsvarer omtrentlig med .visible-print-block, bortsett fra med ekstra spesialtilfeller for <table>-relaterte elementer.
Testtilfeller
Endre størrelsen på nettleseren din eller last inn på forskjellige enheter for å teste de responsive verktøyklassene.
Synlig på...
Grønne hake indikerer at elementet er synlig i din nåværende visningsport.
Ekstra liten
✔ Synlig på x-small
Liten
✔ Synlig på small
Medium
✔ Synlig på medium
Stor
✔ Synlig på large
✔ Synlig på x-small og small
✔ Synlig på medium og large
✔ Synlig på x-small og medium
✔ Synlig på liten og stor
✔ Synlig på x-small og large
✔ Synlig på small og medium
Skjult på...
Her indikerer grønne haker også at elementet er skjult i din nåværende visningsport.
Bruker mindre
Bootstraps CSS er bygget på Less, en forprosessor med tilleggsfunksjonalitet som variabler, mixins og funksjoner for kompilering av CSS. De som ønsker å bruke kilden Less-filene i stedet for de kompilerte CSS-filene våre kan bruke de mange variablene og blandingene vi bruker gjennom hele rammeverket.
Rutenettvariabler og blandinger er dekket i delen Rutenettsystem .
Kompilere Bootstrap
Bootstrap kan brukes på minst to måter: med den kompilerte CSS-en eller med kildefilene Less. For å kompilere Less-filene, se avsnittet Komme i gang for hvordan du setter opp utviklingsmiljøet til å kjøre de nødvendige kommandoene.
Tredjeparts kompileringsverktøy kan fungere med Bootstrap, men de støttes ikke av vårt kjerneteam.
Variabler
Variabler brukes gjennom hele prosjektet som en måte å sentralisere og dele ofte brukte verdier som farger, mellomrom eller skriftstabler. For en fullstendig oversikt, se Customizer .
Farger
Bruk enkelt to fargevalg: gråtoner og semantisk. Gråtonefarger gir rask tilgang til ofte brukte nyanser av svart, mens semantikk inkluderer forskjellige farger tilordnet meningsfulle kontekstuelle verdier.
@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;Bruk en av disse fargevariablene som de er, eller tilordne dem til mer meningsfulle variabler for prosjektet ditt.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Stillas
En håndfull variabler for raskt å tilpasse nøkkelelementer i nettstedets skjelett.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Lenker
Stil koblingene dine enkelt med riktig farge med bare én verdi.
// 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;
}
}Legg merke til at den @link-hover-colorbruker en funksjon, et annet fantastisk verktøy fra Less, for automatisk å lage den riktige svevefargen. Du kan bruke darken, lighten, saturate, og desaturate.
Typografi
Angi enkelt skrifttype, tekststørrelse, innledning og mer med noen få raske variabler. Bootstrap bruker også disse for å gi enkle typografiske blandinger.
@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;Ikoner
To raske variabler for å tilpasse plasseringen og filnavnet til ikonene dine.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Komponenter
Komponenter gjennom Bootstrap bruker noen standardvariabler for å angi vanlige verdier. Her er de mest brukte.
@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;Leverandørblandinger
Leverandørmikser er blandinger for å hjelpe til med å støtte flere nettlesere ved å inkludere alle relevante leverandørprefikser i den kompilerte CSS-en.
Boksstørrelse
Tilbakestill komponentens boksmodell med en enkelt blanding. For kontekst, se denne nyttige artikkelen fra Mozilla .
Mixin er avviklet fra og med v3.2.0, med introduksjonen av Autoprefixer. For å bevare bakoverkompatibilitet, vil Bootstrap fortsette å bruke mixin internt til Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Avrundede hjørner
I dag støtter alle moderne nettlesere border-radiusegenskapen uten prefiks. Som sådan er det ingen .border-radius()blanding, men Bootstrap inkluderer snarveier for raskt å runde to hjørner på en bestemt side av et objekt.
.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 (dråpe) skygger
Hvis målgruppen din bruker de nyeste og beste nettleserne og enhetene, sørg for å bare bruke box-shadoweiendommen alene. Hvis du trenger støtte for eldre Android (pre-v4) og iOS-enheter (pre-iOS 5), bruk den avviklede mixin for å finne det nødvendige -webkitprefikset.
Mixin er avviklet fra og med v3.1.0, siden Bootstrap ikke offisielt støtter de utdaterte plattformene som ikke støtter standardegenskapen. For å bevare bakoverkompatibilitet, vil Bootstrap fortsette å bruke mixin internt til Bootstrap v4.
Sørg for å bruke rgba()farger i boksskyggene dine slik at de blander seg så sømløst som mulig med bakgrunner.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Overganger
Flere blandinger for fleksibilitet. Angi all overgangsinformasjon med én, eller spesifiser en separat forsinkelse og varighet etter behov.
Blandingene er avviklet fra og med v3.2.0, med introduksjonen av Autoprefixer. For å bevare bakoverkompatibilitet, vil Bootstrap fortsette å bruke mixinene internt frem til Bootstrap v4.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}Transformasjoner
Roter, skaler, oversett (flytt) eller skjev et objekt.
Blandingene er avviklet fra og med v3.2.0, med introduksjonen av Autoprefixer. For å bevare bakoverkompatibilitet, vil Bootstrap fortsette å bruke mixinene internt frem til Bootstrap v4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}Animasjoner
En enkelt miks for å bruke alle CSS3s animasjonsegenskaper i én erklæring og andre mikser for individuelle egenskaper.
Blandingene er avviklet fra og med v3.2.0, med introduksjonen av Autoprefixer. For å bevare bakoverkompatibilitet, vil Bootstrap fortsette å bruke mixinene internt frem til Bootstrap v4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Opasitet
Angi opasiteten for alle nettlesere og gi en filterreserve for IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Plassholdertekst
Gi kontekst for skjemakontroller innenfor hvert felt.
.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
}Kolonner
Generer kolonner via CSS i et enkelt 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;
}Gradienter
Gjør enkelt to farger til en bakgrunnsgradient. Bli mer avansert og angi en retning, bruk tre farger eller bruk en radiell gradient. Med en enkelt mixin får du alle prefikssyntaksene du trenger.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Du kan også spesifisere vinkelen til en standard tofarget, lineær gradient:
#gradient > .directional(#333; #000; 45deg);Hvis du trenger en gradient i barber-stripestil, er det enkelt også. Bare spesifiser en enkelt farge, så legger vi en gjennomskinnelig hvit stripe.
#gradient > .striped(#333; 45deg);Øk ante og bruk tre farger i stedet. Angi den første fargen, den andre fargen, den andre fargens fargestopp (en prosentverdi som 25%) og den tredje fargen med disse blandingene:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Vær oppmerksom! Skulle du noen gang trenge å fjerne en gradient, sørg for å fjerne eventuelle IE-spesifikke filterdu har lagt til. Du kan gjøre det ved å bruke .reset-filter()mixin ved siden av background-image: none;.
Utility mixins
Utility mixins er mixins som kombinerer ellers urelaterte CSS-egenskaper for å oppnå et spesifikt mål eller oppgave.
Clearfix
Glem å legge class="clearfix"til et hvilket som helst element, og tilsett i stedet .clearfix()blandingen der det passer. Bruker micro clearfix fra Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Horisontal sentrering
Sentrer raskt ethvert element i det overordnede. Krever widtheller max-widthskal stilles inn.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Dimensjoneringshjelpere
Angi dimensjonene til et objekt lettere.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Tekstområder som kan endres
Konfigurer enkelt alternativene for endring av størrelse for et hvilket som helst tekstområde eller et hvilket som helst annet element. Standard er normal nettleseratferd ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Avkorting av tekst
Avkort tekst enkelt med en ellipse med en enkelt miksing. Krever element for å være blockeller inline-blocknivå.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Retina bilder
Spesifiser to bildebaner og @1x-bildedimensjonene, og Bootstrap vil gi en @2x mediespørring. Hvis du har mange bilder å vise, bør du vurdere å skrive netthinnebildets CSS manuelt i en enkelt mediespørring.
.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);
}Bruker Sass
Mens Bootstrap er bygget på Less, har den også en offisiell Sass-port . Vi vedlikeholder det i et eget GitHub-depot og håndterer oppdateringer med et konverteringsskript.
Hva er inkludert
Siden Sass-porten har en egen repo og betjener et litt annet publikum, skiller innholdet i prosjektet seg sterkt fra Bootstrap-hovedprosjektet. Dette sikrer at Sass-porten er så kompatibel med så mange Sass-baserte systemer som mulig.
| Sti | Beskrivelse |
|---|---|
lib/ |
Ruby gem-kode (Sass-konfigurasjon, Rails og Compass-integrasjoner) |
tasks/ |
Konverteringsskript (vending oppstrøms Less til Sass) |
test/ |
Sammenstillingstester |
templates/ |
Kompasspakkemanifest |
vendor/assets/ |
Sass, JavaScript og fontfiler |
Rakefile |
Interne oppgaver, som rake og convert |
Besøk Sass-portens GitHub-lager for å se disse filene i aksjon.
Installasjon
For informasjon om hvordan du installerer og bruker Bootstrap for Sass, se GitHub-depotet readme . Det er den mest oppdaterte kilden og inkluderer informasjon for bruk med Rails, Compass og standard Sass-prosjekter.