CSS
Globale CSS-innstillinger, grunnleggende HTML-elementer stilet og forbedret med utvidbare klasser, og et avansert rutenettsystem.
Globale CSS-innstillinger, grunnleggende HTML-elementer stilet og forbedret med utvidbare klasser, og et avansert rutenettsystem.
Få en oversikt over de viktigste delene av Bootstraps infrastruktur, inkludert vår tilnærming til bedre, raskere og sterkere nettutvikling.
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>
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=no
til 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">
Bootstrap setter grunnleggende globale visnings-, typografi- og lenkestiler. Nærmere bestemt:
background-color: #fff;
påbody
@font-family-base
, @font-size-base
, og @line-height-base
attributtene som vår typografiske base@link-color
og bruk lenkeunderstreking kun på:hover
Disse stilene finnes i scaffolding.less
.
For forbedret gjengivelse på tvers av nettlesere bruker vi Normalize.css , et prosjekt av Nicolas Gallagher og Jonathan Neal .
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 padding
og mer er ingen av beholderne nestable.
Brukes .container
for en responsiv beholder med fast bredde.
<div class="container">
...
</div>
Bruk .container-fluid
for en beholder i full bredde, som spenner over hele bredden av visningsporten.
<div class="container-fluid">
...
</div>
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 .
Rutenettsystemer brukes til å lage sideoppsett gjennom en rekke rader og kolonner som inneholder innholdet ditt. Slik fungerer Bootstrap-nettsystemet:
.container
(fast bredde) eller .container-fluid
(full bredde) for riktig justering og polstring..row
og .col-xs-4
er tilgjengelige for raskt å lage rutenettoppsett. Mindre blandinger kan også brukes for mer semantiske oppsett.padding
. Denne utfyllingen er forskjøvet i rader for første og siste kolonne via negativ margin på .row
s..col-xs-4
..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.
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-width
for å 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) { ... }
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 |
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
.
<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>
Gjør et hvilket som helst rutenettoppsett med fast bredde til et oppsett i full bredde ved å endre det ytterste .container
til .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
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.
<!-- 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>
Bygg videre på det forrige eksempelet ved å lage enda mer dynamiske og kraftige oppsett med nettbrettklasser .col-sm-*
.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
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.
<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>
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 .clearfix
og våre responsive verktøyklasser .
<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>
Flytt kolonner til høyre ved å bruke .col-md-offset-*
klasser. Disse klassene øker venstre marg i en kolonne med *
kolonner. .col-md-offset-4
Flytter for eksempel .col-md-4
over fire kolonner.
<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-0
klasser.
<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>
For å legge innholdet ditt med standardrutenettet, legg til en ny .row
og 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).
<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>
Endre enkelt rekkefølgen på våre innebygde rutenettkolonner med .col-md-push-*
og .col-md-pull-*
modifikatorklasser.
<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>
I tillegg til forhåndsbygde rutenettklasser for raske oppsett, inkluderer Bootstrap Mindre variabler og blandinger for raskt å generere dine egne enkle, semantiske oppsett.
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 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));
}
}
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>
Alle HTML-overskrifter, <h1>
gjennom <h6>
, er tilgjengelige. .h1
gjennom .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 .small
klassen.
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>
Bootstraps globale standard font-size
er 14px , med en line-height
på 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>
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>
Den typografiske skalaen er basert på to Less-variabler i variables.less : @font-size-base
og @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.
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.
<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>
<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>
<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>
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.
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-size
for nestede <small>
elementer.
Du kan alternativt bruke et inline-element med .small
i 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>
For å fremheve en tekstbit med en tyngre skriftvekt.
Følgende tekstbit gjengis som fet tekst .
<strong>rendered as bold text</strong>
For å fremheve en tekstbit med kursiv.
Følgende tekstbit gjengis som kursiv tekst .
<em>rendered as italicized text</em>
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.
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>
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>
Stilisert implementering av HTMLs <abbr>
element for forkortelser og akronymer for å vise den utvidede versjonen ved sveving. Forkortelser med et title
attributt har en lett stiplet bunnkant og en hjelpemarkør ved sveving, noe som gir ekstra kontekst ved sveving og til brukere av hjelpeteknologier.
En forkortelse av ordet attributt er attr .
<abbr title="attribute">attr</abbr>
Legg .initialism
til 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>
Presenter kontaktinformasjon for nærmeste stamfar eller hele arbeidet. Bevar formateringen ved å avslutte alle linjer med <br>
.
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
For å sitere blokker med innhold fra en annen kilde i dokumentet ditt.
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>
Stil- og innholdsendringer for enkle varianter av en standard <blockquote>
.
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>
Legg .blockquote-reverse
til for et blokksitat med høyrejustert innhold.
<blockquote class="blockquote-reverse">
...
</blockquote>
En liste over elementer der rekkefølgen ikke har eksplisitt betydning.
<ul>
<li>...</li>
</ul>
En liste over elementer der rekkefølgen har eksplisitt betydning.
<ol>
<li>...</li>
</ol>
Fjern standardmargen list-style
og 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.
<ul class="list-unstyled">
<li>...</li>
</ul>
Plasser alle listeelementer på en enkelt linje med display: inline-block;
og litt lett polstring.
<ul class="list-inline">
<li>...</li>
</ul>
En liste over termer med tilhørende beskrivelser.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
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.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
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.
Pakk inn innebygde kodebiter med <code>
.
<section>
pakkes inn som inline.
For example, <code><section></code> should be wrapped as inline.
Bruk for <kbd>
å indikere inndata som vanligvis legges inn via tastaturet.
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>
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.
<var>
Bruk taggen for å indikere variabler .
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<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>
For grunnleggende styling – lett polstring og bare horisontale skillelinjer – legg til basisklassen .table
til 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>
Bruk .table-striped
for å legge til sebrastriper til en hvilken som helst tabellrad i <tbody>
.
Stripede tabeller styles via :nth-child
CSS-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>
Legg .table-bordered
til 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>
Legg .table-hover
til 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>
Legg .table-condensed
til 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>
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>
Å 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-only
klassen.
Lag responsive tabeller ved å pakke dem .table
inn .table-responsive
for å 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.
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 har noen vanskelige feltsett-styling som involverer width
som 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>
Individuelle skjemakontroller får automatisk litt global stil. Alle tekstlige <input>
, <textarea>
, og <select>
elementer med .form-control
er satt til width: 100%;
som standard. Pakk inn etiketter og kontroller .form-group
for 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 direkte med inndatagrupper . Neste i stedet inndatagruppen inne i skjemagruppen.
Legg .form-inline
til 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.
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.
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-only
klassen. Det finnes flere alternative metoder for å gi en etikett for hjelpeteknologier, for eksempel aria-label
, aria-labelledby
eller title
attributtet. Hvis ingen av disse er til stede, kan skjermlesere ty til å bruke placeholder
attributtet, hvis det finnes, men vær oppmerksom på at bruk av placeholder
som 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>
Bruk Bootstraps forhåndsdefinerte rutenettklasser for å justere etiketter og grupper av skjemakontroller i en horisontal layout ved å legge .form-horizontal
til skjemaet (som ikke trenger å være en <form>
). Hvis du gjør det, endres .form-group
den 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>
Eksempler på standard skjemakontroller som støttes i et eksempelskjemaoppsett.
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
.
Inndata vil bare bli stilt fullstendig hvis de type
er riktig deklarert.
<input type="text" class="form-control" placeholder="Text input">
For å legge til integrert tekst eller knapper før og/eller etter en tekstbasert <input>
, sjekk inndatagruppekomponenten .
Skjemakontroll som støtter flere tekstlinjer. Endre rows
attributt etter behov.
<textarea class="form-control" rows="3"></textarea>
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 .disabled
klassen til den overordnede .radio
, .radio-inline
, .checkbox
, eller .checkbox-inline
.
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
Bruk klassene .checkbox-inline
eller .radio-inline
på 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>
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>
Merk at mange innfødte utvalgsmenyer – nemlig i Safari og Chrome – har avrundede hjørner som ikke kan endres via border-radius
egenskaper.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
For <select>
kontroller med multiple
attributtet 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>
Når du trenger å plassere ren tekst ved siden av en skjemaetikett i et skjema, bruker du .form-control-static
klassen 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>
Vi fjerner standardstilene outline
på noen skjemakontroller og bruker en box-shadow
i stedet for :focus
.
:focus
_Eksempelinngangen ovenfor bruker egendefinerte stiler i dokumentasjonen vår for å demonstrere :focus
tilstanden på en .form-control
.
Legg til det disabled
boolske attributtet på en inngang for å forhindre brukerinteraksjoner. Deaktiverte innganger ser lysere ut og legger til en not-allowed
markør.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Legg til disabled
attributtet til a <fieldset>
for å deaktivere alle kontrollene <fieldset>
på en gang.
<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.
disabled
Mens 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>
Legg til det readonly
boolske 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 på blokknivå for skjemakontroller.
Hjelpeteksten skal eksplisitt assosieres med skjemakontrollen den er knyttet til ved bruk av aria-describedby
attributtet. 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>
Bootstrap inkluderer valideringsstiler for feil-, advarsels- og suksesstilstander på skjemakontroller. For å bruke, legg til .has-warning
, .has-error
eller .has-success
til det overordnede elementet. Alle .control-label
, .form-control
, og .help-block
innenfor dette elementet vil motta valideringsstilene.
Å 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-only
klassen - 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>
Du kan også legge til valgfrie tilbakemeldingsikoner med tillegg av .has-feedback
og det høyre ikonet.
Tilbakemeldingsikoner fungerer bare med tekstelementer <input class="form-control">
.
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-only
klassen. Hvis du må klare deg uten etiketter, juster top
verdien på tilbakemeldingsikonet. For inputgrupper, juster right
verdien til en passende pikselverdi avhengig av bredden på tillegget ditt.
For å sikre at hjelpeteknologier – for eksempel skjermlesere – formidler betydningen av et ikon på riktig måte, bør ekstra skjult tekst inkluderes i .sr-only
klassen 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-only
tekst 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>
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>
.sr-only
etiketterHvis du bruker .sr-only
klassen til å skjule en skjemakontroll <label>
(i stedet for å bruke andre merkealternativer, for eksempel aria-label
attributtet), vil Bootstrap automatisk justere plasseringen av ikonet når det er lagt til.
<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>
Angi høyder ved å bruke klasser som .input-lg
, og angi bredder ved å bruke rutenettkolonneklasser som .col-lg-*
.
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>
Sett størrelse på etiketter og skjemakontroller raskt .form-horizontal
ved å legge til .form-group-lg
eller .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>
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>
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">
Mens knappeklasser kan brukes på <a>
og <button>
elementer, støttes bare <button>
elementer i våre nav- og navlinjekomponenter.
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"
.
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-height
av <input>
-baserte knappene, noe som gjør at de ikke akkurat matcher høyden på andre knapper på Firefox.
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>
Å 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-only
klassen.
Lyst på større eller mindre knapper? Legg til .btn-lg
, .btn-sm
, eller .btn-xs
for 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>
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 .active
på <button>
s (og inkludere aria-pressed="true"
attributtet) hvis du trenger å replikere den aktive tilstanden programmatisk.
Du trenger ikke å legge til :active
siden 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>
Legg .active
klassen 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>
Få knappene til å se uklikkbare ut ved å tone dem tilbake med opacity
.
Legg til disabled
attributtet 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>
Hvis du legger til disabled
attributtet til en <button>
, vil Internet Explorer 9 og under gjengi tekst grå med en ekkel tekstskygge som vi ikke kan fikse.
Legg .disabled
klassen 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 .disabled
som en bruksklasse her, lik den vanlige .active
klassen, så ingen prefiks er nødvendig.
Denne klassen bruker pointer-events: none
for å 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 i Bootstrap 3 kan gjøres responsvennlige ved å legge til .img-responsive
klassen. 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-responsive
klassen, bruk .center-block
i stedet for .text-center
. Se delen for hjelpeklasser for mer informasjon om .center-block
bruk.
I Internet Explorer 8-10 er SVG-bilder med .img-responsive
uforholdsmessig 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">
Legg til klasser til et <img>
element for enkelt å style bilder i ethvert prosjekt.
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">
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>
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.
Å 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-only
klassen .
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>
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.
Som med kontekstuelle farger , sørg for at enhver mening som formidles gjennom farger, også formidles i et format som ikke er rent presentasjonsmessig.
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>
Bruk skritt for å indikere rullegardinfunksjonalitet og retning. Merk at standardmerket reverseres automatisk i rullegardinmenyene .
<span class="caret"></span>
Flyt et element til venstre eller høyre med en klasse. !important
er 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();
}
Sett et element til display: block
og 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();
}
Slett enkelt float
s 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();
}
Tving et element til å vises eller skjules ( inkludert for skjermlesere ) med bruk av .show
og .hidden
klasser. Disse klassene bruker !important
for å unngå spesifisitetskonflikter, akkurat som de raske flytene . De er bare tilgjengelige for blokknivåveksling. De kan også brukes som blandinger.
.hide
er tilgjengelig, men det påvirker ikke alltid skjermlesere og er avviklet fra og med v3.0.1. Bruk .hidden
eller .sr-only
i stedet.
Videre .invisible
kan den brukes til å veksle bare synligheten til et element, noe som betyr at det display
ikke 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();
}
Skjul et element for alle enheter unntatt skjermlesere med .sr-only
. Kombiner .sr-only
med .sr-only-focusable
for å 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();
}
Bruk .text-hide
klassen eller mixin for å erstatte et elements tekstinnhold med et bakgrunnsbilde.
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
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.
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-md
og .visible-lg
eksisterer 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.
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-print
eksisterer 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.
Endre størrelsen på nettleseren din eller last inn på forskjellige enheter for å teste de responsive verktøyklassene.
Grønne hake indikerer at elementet er synlig i din nåværende visningsport.
Her indikerer grønne haker også at elementet er skjult i din nåværende visningsport.
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 .
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 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 .
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;
}
En håndfull variabler for raskt å tilpasse nøkkelelementer i nettstedets skjelett.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
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-color
bruker en funksjon, et annet fantastisk verktøy fra Less, for automatisk å lage den riktige svevefargen. Du kan bruke darken
, lighten
, saturate
, og desaturate
.
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;
To raske variabler for å tilpasse plasseringen og filnavnet til ikonene dine.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
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ørmikser er blandinger for å hjelpe til med å støtte flere nettlesere ved å inkludere alle relevante leverandørprefikser i den kompilerte CSS-en.
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;
}
I dag støtter alle moderne nettlesere border-radius
egenskapen 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;
}
Hvis målgruppen din bruker de nyeste og beste nettleserne og enhetene, sørg for å bare bruke box-shadow
eiendommen 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 -webkit
prefikset.
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;
}
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;
}
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;
}
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;
}
Angi opasiteten for alle nettlesere og gi en filter
reserve for IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
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
}
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;
}
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 filter
du har lagt til. Du kan gjøre det ved å bruke .reset-filter()
mixin ved siden av background-image: none;
.
Utility mixins er mixins som kombinerer ellers urelaterte CSS-egenskaper for å oppnå et spesifikt mål eller oppgave.
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();
}
Sentrer raskt ethvert element i det overordnede. Krever width
eller max-width
skal stilles inn.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
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); }
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;
}
Avkort tekst enkelt med en ellipse med en enkelt miksing. Krever element for å være block
eller inline-block
nivå.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
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);
}
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.
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.
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.