CSS
Globala CSS-inställningar, grundläggande HTML-element utformade och förbättrade med utökningsbara klasser och ett avancerat rutsystem.
Globala CSS-inställningar, grundläggande HTML-element utformade och förbättrade med utökningsbara klasser och ett avancerat rutsystem.
Få ett litet grepp om de viktigaste delarna av Bootstraps infrastruktur, inklusive vår strategi för bättre, snabbare och starkare webbutveckling.
Bootstrap använder vissa HTML-element och CSS-egenskaper som kräver användning av HTML5 doctype. Inkludera det i början av alla dina projekt.
<!doctype html>
<html lang="en">
...
</html>
Med Bootstrap 2 lade vi till valfria mobilvänliga stilar för viktiga aspekter av ramverket. Med Bootstrap 3 har vi skrivit om projektet för att vara mobilvänligt från början. Istället för att lägga till valfria mobilstilar är de bakade rakt in i kärnan. Faktum är att Bootstrap är mobil först . Mobile first styles kan hittas i hela biblioteket istället för i separata filer.
För att säkerställa korrekt rendering och pekzoomning, lägg till viewport-metataggen i din <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Du kan inaktivera zoomfunktioner på mobila enheter genom att lägga user-scalable=no
till metataggen för viewport. Detta inaktiverar zoomning, vilket innebär att användare bara kan rulla, och resulterar i att din webbplats känns lite mer som en inbyggd applikation. Sammantaget rekommenderar vi inte detta på alla webbplatser, så var försiktig!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap ställer in grundläggande globala visnings-, typografi- och länkstilar. Närmare bestämt, vi:
background-color: #fff;
in påbody
@font-family-base
, @font-size-base
, och @line-height-base
attributen som vår typografiska bas@link-color
och använd endast länkunderstrykningar på:hover
Dessa stilar finns inom scaffolding.less
.
För förbättrad rendering över webbläsare använder vi Normalize.css , ett projekt av Nicolas Gallagher och Jonathan Neal .
Bootstrap kräver ett innehållande element för att omsluta webbplatsens innehåll och hysa vårt rutsystem. Du kan välja en av två behållare att använda i dina projekt. Observera att på grund av padding
och mer är ingen av behållarna kapslingsbar.
Använd .container
för en responsiv behållare med fast bredd.
<div class="container">
...
</div>
Använd .container-fluid
för en full bredd behållare, som spänner över hela bredden av din visningsport.
<div class="container-fluid">
...
</div>
Bootstrap inkluderar ett lyhört, mobilt första vätskenätsystem som på lämpligt sätt skalar upp till 12 kolumner när enhetens eller visningsportens storlek ökar. Den innehåller fördefinierade klasser för enkla layoutalternativ, såväl som kraftfulla mixins för att generera mer semantiska layouter .
Rutnätssystem används för att skapa sidlayouter genom en serie rader och kolumner som innehåller ditt innehåll. Så här fungerar Bootstrap-rutnätssystemet:
.container
(fast bredd) eller .container-fluid
(full bredd) för korrekt inriktning och utfyllnad..row
och .col-xs-4
är tillgängliga för att snabbt göra rutnätslayouter. Mindre mixins kan också användas för mer semantiska layouter.padding
. Den utfyllnaden förskjuts i rader för den första och sista kolumnen via negativ marginal på .row
s..col-xs-4
..col-md-*
klass på ett element inte bara påverka dess stil på medelstora enheter utan även på stora enheter om en .col-lg-*
klass inte är närvarande.Titta på exemplen för att tillämpa dessa principer på din kod.
Vi använder följande mediefrågor i våra Less-filer för att skapa de viktigaste brytpunkterna i vårt rutsystem.
/* 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) { ... }
Ibland utökar vi dessa mediefrågor för att inkludera en max-width
för att begränsa CSS till en smalare uppsättning 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 hur delar av Bootstrap-rutnätssystemet fungerar på flera enheter med en praktisk tabell.
Extra små enheter Telefoner (<768px) | Små enheter Surfplattor (≥768px) | Medelstora enheter Stationära datorer (≥992px) | Stora enheter Stationära datorer (≥1200px) | |
---|---|---|---|---|
Gridbeteende | Horisontell hela tiden | Sammandragen för att starta, horisontellt ovanför brytpunkter | ||
Behållarens bredd | Ingen (auto) | 750 pixlar | 970 pixlar | 1170 pixlar |
Klassprefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
Antal kolumner | 12 | |||
Kolumnbredd | Bil | ~62px | ~81px | ~97px |
Rännans bredd | 30px (15px på varje sida av en kolumn) | |||
Nestbar | Ja | |||
Offsets | Ja | |||
Kolumnordning | Ja |
Med en enda uppsättning .col-md-*
rutnätsklasser kan du skapa ett grundläggande rutsystem som börjar staplas på mobila enheter och surfplattor (det extra lilla till lilla intervallet) innan det blir horisontellt på stationära (medelstora) enheter. Placera rutnätskolumner i valfri .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>
Förvandla valfri rutnätslayout med fast bredd till en layout i full bredd genom att ändra din yttersta .container
till .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Vill du inte att dina kolumner bara ska staplas i mindre enheter? Använd rutnätsklasserna för extra små och medelstora enheter genom att lägga .col-xs-*
.col-md-*
till i dina kolumner. Se exemplet nedan för en bättre uppfattning om hur det hela fungerar.
<!-- 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 vidare på det tidigare exemplet genom att skapa ännu mer dynamiska och kraftfulla layouter med surfplatteklasser .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>
Om fler än 12 kolumner placeras inom en enda rad, kommer varje grupp av extra kolumner, som en enhet, att slås in på en ny rad.
<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 fyra tillgängliga rutnätsnivåerna kommer du oundvikligen att stöta på problem där dina kolumner vid vissa brytpunkter inte rensas helt rätt eftersom den ena är högre än den andra. För att fixa det, använd en kombination av a .clearfix
och våra responsiva verktygsklasser .
<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>
Förutom kolumnrensning vid responsiva brytpunkter kan du behöva återställa offset, push eller pull . Se detta i aktion i rutnätsexemplet .
<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>
Ta bort rännorna från en rad och dess kolumner med .row-no-gutters
klassen.
<div class="row row-no-gutters">
<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>
<div class="row row-no-gutters">
<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>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Flytta kolumner till höger med .col-md-offset-*
klasser. Dessa klasser ökar den vänstra marginalen i en kolumn med *
kolumner. .col-md-offset-4
Flyttar till exempel .col-md-4
över fyra kolumner.
<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 också åsidosätta offset från lägre rutnätsnivå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>
För att kapsla ditt innehåll med standardrutnätet, lägg till en ny .row
och uppsättning .col-sm-*
kolumner i en befintlig .col-sm-*
kolumn. Kapslade rader bör innehålla en uppsättning kolumner som summerar till 12 eller färre (det krävs inte att du använder alla 12 tillgängliga kolumner).
<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>
Ändra enkelt ordningen på våra inbyggda rutkolumner med .col-md-push-*
och .col-md-pull-*
modifieringsklasser.
<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>
Förutom förbyggda rutnätsklasser för snabba layouter, innehåller Bootstrap färre variabler och mixins för att snabbt generera dina egna enkla, semantiska layouter.
Variabler bestämmer antalet kolumner, rännstenens bredd och mediefrågepunkten vid vilken flytande kolumner ska börja. Vi använder dessa för att generera de fördefinierade rutnätsklasserna som dokumenterats ovan, såväl som för de anpassade mixin som listas nedan.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
Mixins används tillsammans med rutnätsvariablerna för att generera semantisk CSS för enskilda rutkolumner.
// 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 ändra variablerna till dina egna anpassade värden, eller bara använda mixinerna med deras standardvärden. Här är ett exempel på hur du använder standardinställningarna för att skapa en layout med två kolumner med ett mellanrum mellan.
.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>
Alla HTML-rubriker, <h1>
genom <h6>
, är tillgängliga. .h1
genomklasser .h6
är också tillgängliga, för när du vill matcha teckensnittsstilen för en rubrik men ändå vill att din text ska visas inline.
h1. Bootstrap rubrik |
Halvfet 36px |
h2. Bootstrap rubrik |
Halvfet 30px |
h3. Bootstrap rubrik |
Halvfet 24px |
h4. Bootstrap rubrik |
Halvfet 18px |
h5. Bootstrap rubrik |
Halvfet 14px |
h6. Bootstrap rubrik |
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>
Skapa lättare, sekundär text i valfri rubrik med en generisk <small>
tagg eller .small
klassen.
h1. Bootstrap-rubrik Sekundär text |
h2. Bootstrap-rubrik Sekundär text |
h3. Bootstrap-rubrik Sekundär text |
h4. Bootstrap-rubrik Sekundär text |
h5. Bootstrap-rubrik Sekundär text |
h6. Bootstrap-rubrik Sekundär text |
<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 globala standard font-size
är 14px , med ett line-height
på 1,428 . Detta tillämpas på <body>
och alla stycken. Dessutom får <p>
(stycken) en bottenmarginal på halva sin beräknade radhöjd (10 px 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å ett stycke att sticka ut genom att lägga till .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
Den typografiska skalan är baserad på två Less-variabler i variables.less : @font-size-base
och @line-height-base
. Den första är grundteckensnittsstorleken som används genomgående och den andra är baslinjens höjd. Vi använder dessa variabler och lite enkel matematik för att skapa marginaler, fyllningar och linjehöjder av alla våra typer och mer. Anpassa dem och Bootstrap anpassar sig.
Använd taggen för att markera en serie text på grund av dess relevans i ett annat sammanhang <mark>
.
Du kan använda markeringstaggen för attmarkeratext.
You can use the mark tag to <mark>highlight</mark> text.
<del>
Använd taggen för att indikera textblock som har raderats .
Denna textrad är avsedd att behandlas som raderad text.
<del>This line of text is meant to be treated as deleted text.</del>
<s>
Använd taggen för att indikera textblock som inte längre är relevanta .
Denna textrad är avsedd att behandlas som inte längre korrekt.
<s>This line of text is meant to be treated as no longer accurate.</s>
<ins>
Använd taggen för att indikera tillägg till dokumentet .
Denna textrad är avsedd att behandlas som ett tillägg till dokumentet.
<ins>This line of text is meant to be treated as an addition to the document.</ins>
För att understryka text använd <u>
taggen.
Denna textrad återges som understruken
<u>This line of text will render as underlined</u>
Använd HTMLs förinställda betoningstaggar med lätta stilar.
För att minska betoningen på inline eller textblock, använd <small>
taggen för att ställa in text på 85 % av förälderns storlek. Rubrikelement får sina egna font-size
för kapslade <small>
element.
Du kan alternativt använda ett inline-element med .small
i stället för någon <small>
.
Denna textrad är avsedd att behandlas som finstilt.
<small>This line of text is meant to be treated as fine print.</small>
För att framhäva en textbit med en tyngre teckensnittsvikt.
Följande textavsnitt återges som fet text .
<strong>rendered as bold text</strong>
För att framhäva ett textstycke med kursiv stil.
Följande textutdrag renderas som kursiv text .
<em>rendered as italicized text</em>
Använd gärna <b>
och <i>
i HTML5. <b>
är tänkt att markera ord eller fraser utan att förmedla ytterligare betydelse medan <i>
är mest för röst, tekniska termer, etc.
Justera enkelt text till komponenter med textjusteringsklasser.
Vänsterjusterad text.
Centrerad text.
Högerjusterad text.
Berättigad text.
Ingen radbrytningstext.
<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>
Omvandla text i komponenter med textklasser för versaler.
Text med små bokstäver.
Text med versaler.
Text med versaler.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Stiliserad implementering av HTMLs <abbr>
element för förkortningar och akronymer för att visa den utökade versionen vid hovring. Förkortningar med ett title
attribut har en lätt prickad bottenkant och en hjälpmarkör vid hovring, vilket ger ytterligare sammanhang vid hovring och för användare av hjälpmedel.
En förkortning av ordet attribut är attr .
<abbr title="attribute">attr</abbr>
Lägg .initialism
till en förkortning för en lite mindre teckenstorlek.
HTML är det bästa sedan skivat bröd.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Presentera kontaktinformation för närmaste förfader eller hela arbetet. Bevara formateringen genom att avsluta alla rader 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>
För att citera innehållsblock från en annan källa i ditt dokument.
Linda <blockquote>
runt vilken HTML som helst som citat. För raka offerter rekommenderar vi en <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Stil och innehåll ändras för enkla varianter av en standard <blockquote>
.
Lägg till ett <footer>
för att identifiera källan. Slå in namnet på källverket i <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal 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>
Lägg .blockquote-reverse
till för ett blockcitat med högerjusterat innehåll.
<blockquote class="blockquote-reverse">
...
</blockquote>
En lista över objekt där ordningen inte uttryckligen spelar någon roll.
<ul>
<li>...</li>
</ul>
En lista över objekt där ordningen uttryckligen har betydelse.
<ol>
<li>...</li>
</ol>
Ta bort standardmarginalen list-style
och vänstermarginalen på listobjekt (endast omedelbara underordnade). Detta gäller bara objekt för omedelbara underordnade listor , vilket innebär att du måste lägga till klassen för alla kapslade listor också.
<ul class="list-unstyled">
<li>...</li>
</ul>
Placera alla listobjekt på en enda rad med display: inline-block;
lite lätt stoppning.
<ul class="list-inline">
<li>...</li>
</ul>
En lista över termer med tillhörande beskrivningar.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Gör termer och beskrivningar i <dl>
rad sida vid sida. Börjar staplas som standard <dl>
s, men när navigeringsfältet expanderar, så gör dessa.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Horisontella beskrivningslistor kommer att trunkera termer som är för långa för att passa i den vänstra kolumnen med text-overflow
. I smalare vyportar kommer de att ändras till den staplade standardlayouten.
Slå in inline kodavsnitt med <code>
.
<section>
bör lindas som inline.
For example, <code><section></code> should be wrapped as inline.
Använd för <kbd>
att indikera indata som vanligtvis matas in via tangentbordet.
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>
Använd <pre>
för flera rader kod. Se till att undvika alla vinkelparenteser i koden för korrekt rendering.
<p>Exempeltext här...</p>
<pre><p>Sample text here...</p></pre>
Du kan valfritt lägga till .pre-scrollable
klassen, som kommer att ställa in en maxhöjd på 350px och tillhandahålla en rullningslist på y-axeln.
<var>
Använd taggen för att indikera variabler .
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<samp>
Använd taggen för att indikera blockexemplar från ett program .
Denna text är avsedd att behandlas som exempelutdata från ett datorprogram.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
För grundläggande styling—lätt stoppning och endast horisontella avdelare—lägg till basklassen .table
till valfri <table>
. Det kan verka superöverflödigt, men med tanke på den utbredda användningen av tabeller för andra plugins som kalendrar och datumväljare, har vi valt att isolera våra anpassade tabellstilar.
# | Förnamn | Efternamn | Användarnamn |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fett |
3 | Larry | fågeln |
<table class="table">
...
</table>
Använd .table-striped
för att lägga till zebrastrimningar till valfri tabellrad inom <tbody>
.
Randiga tabeller utformas via :nth-child
CSS-väljaren, som inte är tillgänglig i Internet Explorer 8.
# | Förnamn | Efternamn | Användarnamn |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fett |
3 | Larry | fågeln |
<table class="table table-striped">
...
</table>
Lägg .table-bordered
till kanter på alla sidor av tabellen och cellerna.
# | Förnamn | Efternamn | Användarnamn |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fett |
3 | Larry | fågeln |
<table class="table table-bordered">
...
</table>
Lägg .table-hover
till för att aktivera ett hovringsläge på tabellrader inom en <tbody>
.
# | Förnamn | Efternamn | Användarnamn |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fett |
3 | Larry | fågeln |
<table class="table table-hover">
...
</table>
Lägg .table-condensed
till för att göra borden mer kompakta genom att halvera cellstoppningen.
# | Förnamn | Efternamn | Användarnamn |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fett |
3 | Fågeln Larry |
<table class="table table-condensed">
...
</table>
Använd kontextuella klasser för att färglägga tabellrader eller enskilda celler.
Klass | Beskrivning |
---|---|
.active |
Tillämpar svävningsfärgen på en viss rad eller cell |
.success |
Indikerar en framgångsrik eller positiv handling |
.info |
Indikerar en neutral informativ förändring eller åtgärd |
.warning |
Indikerar en varning som kan behöva åtgärdas |
.danger |
Indikerar en farlig eller potentiellt negativ handling |
# | Kolumnrubrik | Kolumnrubrik | Kolumnrubrik |
---|---|---|---|
1 | Kolumninnehåll | Kolumninnehåll | Kolumninnehåll |
2 | Kolumninnehåll | Kolumninnehåll | Kolumninnehåll |
3 | Kolumninnehåll | Kolumninnehåll | Kolumninnehåll |
4 | Kolumninnehåll | Kolumninnehåll | Kolumninnehåll |
5 | Kolumninnehåll | Kolumninnehåll | Kolumninnehåll |
6 | Kolumninnehåll | Kolumninnehåll | Kolumninnehåll |
7 | Kolumninnehåll | Kolumninnehåll | Kolumninnehåll |
8 | Kolumninnehåll | Kolumninnehåll | Kolumninnehåll |
9 | Kolumninnehåll | Kolumninnehåll | Kolumninnehåll |
<!-- 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>
Att använda färg för att lägga till mening till en tabellrad eller enskild cell ger bara en visuell indikation, som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (den synliga texten i den relevanta tabellraden/cellen), eller inkluderas på andra sätt, såsom ytterligare text gömd med .sr-only
klassen.
Skapa responsiva tabeller genom att linda .table
in .table-responsive
dem för att få dem att rulla horisontellt på små enheter (under 768px). När du tittar på något som är större än 768px brett kommer du inte att se någon skillnad i dessa tabeller.
Responsiva tabeller använder overflow-y: hidden
, som klipper bort allt innehåll som går utanför bordets nedre eller övre kanter. I synnerhet kan detta klippa bort rullgardinsmenyer och andra widgets från tredje part.
Firefox har en del besvärlig fieldset-styling width
som stör den responsiva tabellen. Detta kan inte åsidosättas utan ett Firefox-specifikt hack som vi inte tillhandahåller i Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
För mer information, läs detta Stack Overflow-svar .
# | Tabellrubrik | Tabellrubrik | Tabellrubrik | Tabellrubrik | Tabellrubrik | Tabellrubrik |
---|---|---|---|---|---|---|
1 | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell |
2 | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell |
3 | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell |
# | Tabellrubrik | Tabellrubrik | Tabellrubrik | Tabellrubrik | Tabellrubrik | Tabellrubrik |
---|---|---|---|---|---|---|
1 | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell |
2 | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell |
3 | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell | Tabellcell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Individuella formkontroller får automatiskt lite global stil. Alla textuella <input>
, <textarea>
, och <select>
element med .form-control
är inställda på som width: 100%;
standard. Linda in etiketter och kontroller .form-group
för optimalt avstånd.
<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>
Blanda inte formulärgrupper direkt med inmatningsgrupper . Kapsla istället indatagruppen inuti formulärgruppen.
Lägg .form-inline
till i ditt formulär (som inte behöver vara ett <form>
) för vänsterjusterade och inline-blockkontroller. Detta gäller endast formulär i visningsportar som är minst 768px breda.
Ingångar och val har width: 100%;
tillämpats som standard i Bootstrap. Inom inline-formulär återställer vi det till width: auto;
så att flera kontroller kan finnas på samma rad. Beroende på din layout kan ytterligare anpassade bredder krävas.
Skärmläsare kommer att få problem med dina formulär om du inte inkluderar en etikett för varje inmatning. För dessa infogade formulär kan du dölja etiketterna med hjälp av .sr-only
klassen. Det finns ytterligare alternativa metoder för att tillhandahålla en märkning för hjälpmedel, som aria-label
attributet eller aria-labelledby
. title
Om ingen av dessa finns kan skärmläsare använda placeholder
attributet, om det finns, men observera att användning av placeholder
som ersättning för andra märkningsmetoder inte rekommenderas.
<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>
Använd Bootstraps fördefinierade rutnätsklasser för att justera etiketter och grupper av formulärkontroller i en horisontell layout genom att lägga .form-horizontal
till i formuläret (vilket inte behöver vara en <form>
). Om du gör det ändras det .form-group
till att bete sig som rutnätsrader, så inget behov av .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>
Exempel på standardformulärkontroller som stöds i en exempelformulärlayout.
Vanligaste formulärkontroll, textbaserade inmatningsfält. Inkluderar stöd för alla HTML5-typer: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, och color
.
Ingångar kommer bara att formateras helt om de type
är korrekt deklarerade.
<input type="text" class="form-control" placeholder="Text input">
För att lägga till integrerad text eller knappar före och/eller efter en textbaserad <input>
, kolla in indatagruppskomponenten .
Formulärkontroll som stöder flera textrader. Ändra rows
attribut vid behov.
<textarea class="form-control" rows="3"></textarea>
Kryssrutorna är för att välja ett eller flera alternativ i en lista, medan radioapparater är för att välja ett alternativ bland många.
Inaktiverade kryssrutor och radioapparater stöds, men för att tillhandahålla en "ej tillåten" markör vid muspekaren över föräldern <label>
måste du lägga till .disabled
klassen till föräldern .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>
Använd klasserna .checkbox-inline
eller .radio-inline
på en serie kryssrutor eller radioapparater för kontroller som visas på samma rad.
<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>
Om du inte har någon text i <label>
fältet placeras inmatningen som du kan förvänta dig. Fungerar för närvarande bara på icke-inline kryssrutor och radioapparater. Kom ihåg att fortfarande tillhandahålla någon form av märkning för hjälpmedel (till exempel genom att använda 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>
Observera att många inbyggda menyer – nämligen i Safari och Chrome – har rundade hörn som inte kan ändras via border-radius
egenskaper.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
För <select>
kontroller med multiple
attributet visas flera alternativ 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 behöver placera vanlig text bredvid en formuläretikett i ett formulär, använd .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 tar bort standardstilarna outline
på vissa formulärkontroller och använder en box-shadow
i dess ställe för :focus
.
:focus
tillståndExemplet ovan använder anpassade stilar i vår dokumentation för att visa :focus
tillståndet på en .form-control
.
Lägg till det disabled
booleska attributet på en ingång för att förhindra användarinteraktioner. Inaktiverade ingångar ser ljusare ut och lägger till en not-allowed
markör.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Lägg till disabled
attributet till a <fieldset>
för att inaktivera alla kontroller inom <fieldset>
samtidigt.
<a>
Som standard kommer webbläsare att behandla alla inbyggda formulärkontroller ( <input>
, <select>
och <button>
element) i en <fieldset disabled>
som inaktiverade, vilket förhindrar interaktion med både tangentbord och mus på dem. Men om ditt formulär också innehåller <a ... class="btn btn-*">
element kommer dessa bara att få stilen pointer-events: none
. Som nämnts i avsnittet om inaktiverat tillstånd för knappar (och specifikt i underavsnittet för ankarelement), är denna CSS-egenskap ännu inte standardiserad och stöds inte fullt ut i Opera 18 och senare, eller i Internet Explorer 11, och vann Det hindrar inte tangentbordsanvändare från att kunna fokusera eller aktivera dessa länkar. Så för att vara säker, använd anpassad JavaScript för att inaktivera sådana länkar.
Även om Bootstrap kommer att tillämpa dessa stilar i alla webbläsare, stöder Internet Explorer 11 och lägre inte helt disabled
attributet på en <fieldset>
. Använd anpassad JavaScript för att inaktivera fältuppsättningen i dessa webbläsare.
<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>
Lägg till det readonly
booleska attributet på en ingång för att förhindra modifiering av ingångens värde. Skrivskyddade ingångar ser ljusare ut (precis som inaktiverade ingångar), men behåller standardmarkören.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Hjälptext på blocknivå för formulärkontroller.
Hjälptext bör uttryckligen associeras med formulärkontrollen den relaterar till med aria-describedby
attributet. Detta kommer att säkerställa att hjälpmedel – som skärmläsare – kommer att meddela denna hjälptext när användaren fokuserar eller går in i kontrollen.
<label 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 inkluderar valideringsstilar för fel-, varnings- och framgångstillstånd på formulärkontroller. För att använda, lägg till .has-warning
, .has-error
, eller .has-success
till det överordnade elementet. Alla .control-label
, .form-control
, och .help-block
inom det elementet kommer att få valideringsstilarna.
Att använda dessa valideringsstilar för att ange tillståndet för en formulärkontroll ger endast en visuell, färgbaserad indikation, som inte kommer att förmedlas till användare av hjälpmedel - såsom skärmläsare - eller till färgblinda användare.
Se till att en alternativ indikation på tillstånd också tillhandahålls. Du kan till exempel inkludera en ledtråd om tillstånd i själva formulärkontrollens <label>
text (som är fallet i följande kodexempel), inkludera en Glyphicon (med lämplig alternativ text genom att använda .sr-only
klassen - se Glyphicon-exemplen ), eller genom att tillhandahålla en ytterligare hjälptextblock . Specifikt för hjälpmedelstekniker kan kontroller för ogiltiga formulär också tilldelas ett aria-invalid="true"
attribut.
<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 också lägga till valfria feedbackikoner med tillägg av .has-feedback
och den högra ikonen.
Feedbackikoner fungerar bara med textelement <input class="form-control">
.
Manuell placering av återkopplingsikoner krävs för ingångar utan etikett och för ingångsgrupper med ett tillägg till höger. Du uppmuntras starkt att tillhandahålla etiketter för alla ingångar av tillgänglighetsskäl. Om du vill förhindra att etiketter visas, dölj dem med .sr-only
klassen. Om du måste klara dig utan etiketter, justera top
värdet på feedbackikonen. För indatagrupper, justera right
värdet till ett lämpligt pixelvärde beroende på bredden på ditt tillägg.
För att säkerställa att hjälpmedel – som skärmläsare – korrekt förmedlar innebörden av en ikon, bör ytterligare dold text inkluderas i .sr-only
klassen och uttryckligen associeras med formulärkontrollen den relaterar till med aria-describedby
. Alternativt, se till att innebörden (till exempel det faktum att det finns en varning för ett visst textinmatningsfält) förmedlas i någon annan form, till exempel genom att ändra texten för den faktiska <label>
som är kopplad till formulärkontrollen.
Även om följande exempel redan nämner valideringstillståndet för deras respektive formulärkontroller i själva <label>
texten, har ovanstående teknik (med .sr-only
text och aria-describedby
) inkluderats i illustrativt syfte.
<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
etiketterOm du använder .sr-only
klassen för att dölja en formulärkontroll <label>
(istället för att använda andra etikettalternativ, såsom aria-label
attributet), kommer Bootstrap automatiskt att justera ikonens position när den har lagts till.
<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>
Ställ in höjder med klasser som .input-lg
, och ställ in bredder med rutnätskolumnklasser som .col-lg-*
.
Skapa högre eller kortare formkontroller som matchar knappstorlekar.
<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>
Gör snabbt storlek på etiketter och formulärkontroller .form-horizontal
genom att lägga till .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>
Slå in indata i rutnätskolumner, eller något anpassat överordnat element, för att enkelt framtvinga önskade 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>
Använd knappklasserna på ett <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">
Medan knappklasser kan användas på <a>
och <button>
element, stöds endast <button>
element i våra nav- och navbarkomponenter.
Om <a>
elementen används för att fungera som knappar – som utlöser funktionalitet på sidan, snarare än att navigera till ett annat dokument eller avsnitt på den aktuella sidan – bör de också ges en lämplig role="button"
.
Som en bästa praxis rekommenderar vi starkt att du använder <button>
elementet när det är möjligt för att säkerställa matchande rendering i flera webbläsare.
Bland annat finns det en bugg i Firefox <30 som hindrar oss från att ställa in line-height
of <input>
-baserade knappar, vilket gör att de inte exakt matchar höjden på andra knappar på Firefox.
Använd någon av de tillgängliga knappklasserna för att snabbt skapa en formaterad knapp.
<!-- 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>
Att använda färg för att lägga till mening till en knapp ger bara en visuell indikation, som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (den synliga texten på knappen), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .sr-only
klassen.
Vill du ha större eller mindre knappar? Lägg till .btn-lg
, .btn-sm
, eller .btn-xs
för ytterligare storlekar.
<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>
Skapa blocknivåknappar – de som spänner över hela bredden av en förälder – genom att lägga till .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>
Knappar visas nedtryckta (med mörkare bakgrund, mörkare ram och infälld skugga) när de är aktiva. För <button>
element görs detta via :active
. För <a>
element är det gjort med .active
. Du kan dock använda .active
på <button>
s (och inkludera aria-pressed="true"
attributet) om du skulle behöva replikera det aktiva tillståndet programmatiskt.
Du behöver inte lägga till :active
eftersom det är en pseudoklass, men om du behöver tvinga fram samma utseende, fortsätt och lägg till .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>
Lägg till .active
klassen på <a>
knappar.
<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å knappar att se oklickbara ut genom att tona tillbaka dem med opacity
.
Lägg till disabled
attributet till <button>
knappar.
<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>
Om du lägger till disabled
attributet till en <button>
, kommer Internet Explorer 9 och lägre att göra text grå med en otäck textskugga som vi inte kan fixa.
Lägg till .disabled
klassen på <a>
knappar.
<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 använder .disabled
som en verktygsklass här, liknande den vanliga .active
klassen, så inget prefix krävs.
Den här klassen använder pointer-events: none
för att försöka inaktivera länkfunktionen för <a>
s, men den CSS-egenskapen är ännu inte standardiserad och stöds inte fullt ut i Opera 18 och senare, eller i Internet Explorer 11. Dessutom, även i webbläsare som stöder pointer-events: none
, tangentbord navigeringen förblir opåverkad, vilket innebär att seende tangentbordsanvändare och användare av hjälpmedel fortfarande kommer att kunna aktivera dessa länkar. Så för att vara säker, använd anpassad JavaScript för att inaktivera sådana länkar.
Bilder i Bootstrap 3 kan göras responsvänliga genom tillägg av .img-responsive
klassen. Detta gäller max-width: 100%;
, height: auto;
och display: block;
för bilden så att den skalas snyggt till det överordnade elementet.
För att centrera bilder som använder .img-responsive
klassen, använd .center-block
istället för .text-center
. Se avsnittet med hjälparklasser för mer information om .center-block
användning.
I Internet Explorer 8-10 är SVG-bilder med .img-responsive
oproportionerligt stora. För att fixa detta, lägg till width: 100% \9;
vid behov. Bootstrap tillämpar inte detta automatiskt eftersom det orsakar komplikationer för andra bildformat.
<img src="..." class="img-responsive" alt="Responsive image">
Lägg till klasser i ett <img>
element för att enkelt utforma bilder i alla projekt.
Tänk på att Internet Explorer 8 saknar stöd för rundade hörn.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Förmedla mening genom färg med en handfull betoningsklasser. Dessa kan också tillämpas på länkar och kommer att mörkna vid hovring precis som våra standardlänkstilar.
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>
Ibland kan betoningsklasser inte tillämpas på grund av specificiteten hos en annan väljare. I de flesta fall är en tillräcklig lösning att slå in din text i en <span>
med klassen.
Att använda färg för att lägga till mening ger bara en visuell indikation som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (de kontextuella färgerna används endast för att förstärka betydelsen som redan finns i texten/uppmärkningen), eller inkluderas på alternativa sätt, såsom ytterligare text gömd med .sr-only
klassen .
I likhet med de kontextuella textfärgsklasserna kan du enkelt ställa in bakgrunden för ett element till valfri kontextuell klass. Ankarkomponenter blir mörkare när du svävar, precis som textklasserna.
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>
Ibland kan kontextuella bakgrundsklasser inte tillämpas på grund av specificiteten hos en annan väljare. I vissa fall är en tillräcklig lösning att slå in ditt elements innehåll i en <div>
med klassen.
Som med kontextuella färger , se till att all betydelse som förmedlas genom färg också förmedlas i ett format som inte är rent presentationsmässigt.
Använd den allmänna stängningsikonen för att avvisa innehåll som modals och varningar.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
Använd rader för att indikera rullgardinsmenyns funktionalitet och riktning. Observera att standardinställningen vänds automatiskt i rullgardinsmenyer .
<span class="caret"></span>
Flytta ett element till vänster eller höger med en klass. !important
ingår för att undvika specificitetsproblem. Klasser kan också användas 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();
}
Ställ in ett element till display: block
och centrera via margin
. Finns som en mixin och klass.
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
Rensa enkelt float
s genom att lägga .clearfix
till i det överordnade elementet . Använder microclearfix som populärt av Nicolas Gallagher. Kan även användas som mixin.
<!-- 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();
}
Tvinga ett element att visas eller dölja ( inklusive för skärmläsare ) med hjälp av .show
och .hidden
klasser. Dessa klasser använder !important
för att undvika specificitetskonflikter, precis som de snabba flöten . De är endast tillgängliga för växling av blocknivå. De kan också användas som mixins.
.hide
är tillgänglig, men den påverkar inte alltid skärmläsare och är utfasad från och med v3.0.1. Använd .hidden
eller .sr-only
istället.
Dessutom .invisible
kan den användas för att endast växla synligheten för ett element, vilket betyder att det display
inte ändras och elementet fortfarande kan påverka dokumentflödet.
<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();
}
Dölj ett element för alla enheter utom skärmläsare med .sr-only
. Kombinera .sr-only
med .sr-only-focusable
för att visa elementet igen när det är fokuserat (t.ex. av en användare som endast använder tangentbord). Nödvändigt för att följa bästa praxis för tillgänglighet . Kan även användas 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();
}
Använd .text-hide
klassen eller mixin för att ersätta ett elements textinnehåll med en bakgrundsbild.
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
För snabbare mobilvänlig utveckling, använd dessa verktygsklasser för att visa och dölja innehåll per enhet via mediefråga. Dessutom ingår verktygsklasser för att växla innehåll vid utskrift.
Försök att använda dessa i begränsad omfattning och undvik att skapa helt olika versioner av samma webbplats. Använd dem istället för att komplettera varje enhets presentation.
Använd en singel eller en kombination av de tillgängliga klasserna för att växla innehåll mellan brytpunkter i visningsporten.
Extra små enheterTelefoner (<768px) | Små enheterSurfplattor (≥768px) | Medelstora enheterStationära datorer (≥992px) | Stora enheterStationära datorer (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
Synlig | Dold | Dold | Dold |
.visible-sm-* |
Dold | Synlig | Dold | Dold |
.visible-md-* |
Dold | Dold | Synlig | Dold |
.visible-lg-* |
Dold | Dold | Dold | Synlig |
.hidden-xs |
Dold | Synlig | Synlig | Synlig |
.hidden-sm |
Synlig | Dold | Synlig | Synlig |
.hidden-md |
Synlig | Synlig | Dold | Synlig |
.hidden-lg |
Synlig | Synlig | Synlig | Dold |
Från och med v3.2.0 finns .visible-*-*
klasserna för varje brytpunkt i tre varianter, en för varje CSS- display
egenskapsvärde som anges nedan.
Grupp av klasser | CSSdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Så, för extra små ( xs
) skärmar till exempel, är de tillgängliga .visible-*-*
klasserna: .visible-xs-block
, .visible-xs-inline
, och .visible-xs-inline-block
.
Klasserna .visible-xs
, .visible-sm
, .visible-md
och .visible-lg
finns också, men är utfasade från och med v3.2.0 . De motsvarar ungefär .visible-*-block
, förutom med ytterligare specialfall för växlingsrelaterade <table>
element.
I likhet med vanliga responsiva klasser, använd dessa för att växla innehåll för utskrift.
Klasser | Webbläsare | Skriva ut |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
Dold | Synlig |
.hidden-print |
Synlig | Dold |
Klassen .visible-print
finns också men är utfasad från och med v3.2.0. Det motsvarar ungefär .visible-print-block
, förutom med ytterligare specialfall för <table>
-relaterade element.
Ändra storlek på din webbläsare eller ladda på olika enheter för att testa de responsiva verktygsklasserna.
Gröna bockar indikerar att elementet är synligt i din nuvarande visningsport.
Här indikerar gröna bockar också att elementet är dolt i din nuvarande visningsport.
Bootstraps CSS bygger på Less, en förprocessor med ytterligare funktionalitet som variabler, mixins och funktioner för att kompilera CSS. De som vill använda källfilen Less istället för våra kompilerade CSS-filer kan använda de många variabler och mixin vi använder i hela ramverket.
Gridvariabler och mixins behandlas i avsnittet Gridsystem .
Bootstrap kan användas på minst två sätt: med den kompilerade CSS eller med källfilen Less. För att kompilera Less-filerna, se avsnittet Komma igång för hur du ställer in din utvecklingsmiljö för att köra de nödvändiga kommandona.
Tredje parts kompileringsverktyg kan fungera med Bootstrap, men de stöds inte av vårt kärnteam.
Variabler används genom hela projektet som ett sätt att centralisera och dela vanliga värden som färger, mellanrum eller teckensnittsstaplar. För en fullständig uppdelning, se Customizer .
Använd enkelt två färgscheman: gråskala och semantisk. Gråskalefärger ger snabb åtkomst till vanliga nyanser av svart medan semantik inkluderar olika färger som tilldelats meningsfulla kontextuella värden.
@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;
Använd någon av dessa färgvariabler som de är eller tilldela dem till mer meningsfulla variabler för ditt projekt.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
En handfull variabler för att snabbt anpassa viktiga delar av din webbplats skelett.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
Stil enkelt dina länkar med rätt färg med bara ett värde.
// 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;
}
}
Observera att den @link-hover-color
använder en funktion, ett annat fantastiskt verktyg från Less, för att automatiskt skapa rätt svävarfärg. Du kan använda darken
, lighten
, saturate
, och desaturate
.
Ställ enkelt in typsnitt, textstorlek, ledande och mer med några snabba variabler. Bootstrap använder sig av dessa också för att tillhandahålla enkla typografiska mixins.
@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;
Två snabba variabler för att anpassa platsen och filnamnet för dina ikoner.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
Komponenter i Bootstrap använder vissa standardvariabler för att ställa in gemensamma värden. Här är de mest använda.
@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;
Leverantörsmixer är mixins för att stödja flera webbläsare genom att inkludera alla relevanta leverantörsprefix i din kompilerade CSS.
Återställ dina komponenters boxmodell med en enda mixin. För sammanhang, se den här användbara artikeln från Mozilla .
Mixin är föråldrat från och med v3.2.0 , med introduktionen av Autoprefixer. För att bevara bakåtkompatibiliteten kommer Bootstrap att fortsätta att använda mixin internt tills Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
Idag stöder alla moderna webbläsare border-radius
egenskapen utan prefix. Som sådan finns det ingen .border-radius()
mixin, men Bootstrap inkluderar genvägar för att snabbt runda två hörn på en viss sida av ett 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;
}
Om din målgrupp använder de senaste och bästa webbläsarna och enheterna, se till att bara använda box-shadow
egendomen på egen hand. Om du behöver stöd för äldre Android (pre-v4) och iOS-enheter (pre-iOS 5), använd den föråldrade mixin för att hämta det nödvändiga -webkit
prefixet.
Mixin är föråldrat från och med v3.1.0 , eftersom Bootstrap inte officiellt stöder de föråldrade plattformarna som inte stöder standardegenskapen. För att bevara bakåtkompatibiliteten kommer Bootstrap att fortsätta att använda mixin internt tills Bootstrap v4.
Se till att använda rgba()
färger i dina boxskuggor så att de smälter så sömlöst som möjligt med bakgrunder.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
Flera mixins för flexibilitet. Ställ in all övergångsinformation med en, eller ange en separat fördröjning och varaktighet efter behov.
Mixinerna är utfasade från och med v3.2.0 , med introduktionen av Autoprefixer. För att bevara bakåtkompatibiliteten kommer Bootstrap att fortsätta använda mixinerna internt fram till 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;
}
Rotera, skala, översätt (flytta) eller snedställ ett objekt.
Mixinerna är utfasade från och med v3.2.0 , med introduktionen av Autoprefixer. För att bevara bakåtkompatibiliteten kommer Bootstrap att fortsätta använda mixinerna internt fram till 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 enda mixin för att använda alla CSS3:s animeringsegenskaper i en deklaration och andra mixin för enskilda egenskaper.
Mixinerna är utfasade från och med v3.2.0 , med introduktionen av Autoprefixer. För att bevara bakåtkompatibiliteten kommer Bootstrap att fortsätta använda mixinerna internt fram till 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;
}
Ställ in opaciteten för alla webbläsare och tillhandahåll en filter
reserv för IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
Ange sammanhang för formulärkontroller inom varje fält.
.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
}
Generera kolumner via CSS inom ett enda 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;
}
Förvandla enkelt valfri två färger till en bakgrundsgradient. Bli mer avancerad och ange en riktning, använd tre färger eller använd en radiell gradient. Med en enda mixin får du alla prefixade syntaxer du behöver.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
Du kan också ange vinkeln för en linjär standardgradient i två färger:
#gradient > .directional(#333; #000; 45deg);
Om du behöver en gradient i barberarränder är det enkelt också. Ange bara en enstaka färg så lägger vi över en genomskinlig vit rand.
#gradient > .striped(#333; 45deg);
Upp anten och använd tre färger istället. Ställ in den första färgen, den andra färgen, den andra färgens färgstopp (ett procentvärde som 25 %) och den tredje färgen med dessa blandningar:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
Se upp! Om du någonsin skulle behöva ta bort en gradient, se till att ta bort alla IE-specifika filter
du kan ha lagt till. Du kan göra det genom att använda .reset-filter()
mixin bredvid background-image: none;
.
Utility mixins är mixins som kombinerar annars orelaterade CSS-egenskaper för att uppnå ett specifikt mål eller uppgift.
Glöm att lägga class="clearfix"
till något element och tillsätt istället .clearfix()
mixin där det är lämpligt. Använder microclearfix från Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
Centrera snabbt vilket element som helst inom dess överordnade. Kräver width
eller max-width
ska ställas in.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
Ange mått på ett objekt lättare.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
Konfigurera enkelt storleksändringsalternativen för alla textområden eller andra element. Förinställer normalt webbläsarbeteende ( both
).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
Trunkera enkelt text med en ellips med en enda mixin. Kräver att elementet är 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();
}
Ange två bildvägar och @1x-bilddimensionerna, så kommer Bootstrap att tillhandahålla en @2x-mediafråga. Om du har många bilder att visa, överväg att skriva din näthinnabild CSS manuellt i en enda mediefråga.
.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);
}
Även om Bootstrap är byggd på Less, har den också en officiell Sass-port . Vi underhåller det i ett separat GitHub-förråd och hanterar uppdateringar med ett konverteringsskript.
Eftersom Sass-porten har en separat repo och betjänar en något annan publik, skiljer sig innehållet i projektet mycket från det huvudsakliga Bootstrap-projektet. Detta säkerställer att Sass-porten är så kompatibel med så många Sass-baserade system som möjligt.
Väg | Beskrivning |
---|---|
lib/ |
Ruby gem-kod (Sass-konfiguration, Rails och Compass-integrationer) |
tasks/ |
Konverteringsskript (växling uppströms Less till Sass) |
test/ |
Sammanställningstester |
templates/ |
Kompasspaketmanifest |
vendor/assets/ |
Sass, JavaScript och teckensnittsfiler |
Rakefile |
Interna uppgifter, såsom rake och convert |
Besök Sass-portens GitHub-förråd för att se dessa filer i aktion.
För information om hur du installerar och använder Bootstrap för Sass, konsultera GitHub-förvaret readme . Det är den mest uppdaterade källan och innehåller information för användning med Rails, Compass och standard Sass-projekt.