Komponenter
Over et dusin genanvendelige komponenter bygget til at give ikonografi, dropdowns, inputgrupper, navigation, advarsler og meget mere.
Over et dusin genanvendelige komponenter bygget til at give ikonografi, dropdowns, inputgrupper, navigation, advarsler og meget mere.
Indeholder over 250 glyffer i skrifttypeformat fra Glyphicon Halflings-sættet. Glyphicons Halflings er normalt ikke tilgængelige gratis, men deres skaber har gjort dem tilgængelige for Bootstrap gratis. Som tak beder vi kun om, at du inkluderer et link tilbage til Glyphicons , når det er muligt.
Af præstationsmæssige årsager kræver alle ikoner en basisklasse og individuel ikonklasse. For at bruge skal du placere følgende kode stort set hvor som helst. Sørg for at efterlade et mellemrum mellem ikonet og teksten for korrekt udfyldning.
Ikonklasser kan ikke kombineres direkte med andre komponenter. De bør ikke bruges sammen med andre klasser på det samme element. Tilføj i stedet en indlejret <span>
og anvende ikonklasserne på <span>
.
Ikonklasser bør kun bruges på elementer, der ikke indeholder noget tekstindhold og ikke har underordnede elementer.
Bootstrap antager, at ikonskrifttypefiler vil være placeret i ../fonts/
mappen i forhold til de kompilerede CSS-filer. Flytning eller omdøbning af disse skrifttypefiler betyder at opdatere CSS'en på en af tre måder:
@icon-font-path
og/eller @icon-font-name
i kilden Mindre filer.url()
stierne i den kompilerede CSS.Brug den mulighed, der passer bedst til din specifikke udviklingsopsætning.
Moderne versioner af hjælpeteknologier vil annoncere CSS-genereret indhold, såvel som specifikke Unicode-tegn. For at undgå utilsigtet og forvirrende output i skærmlæsere (især når ikoner udelukkende bruges til dekoration), skjuler vi dem med aria-hidden="true"
attributten.
Hvis du bruger et ikon til at formidle mening (i stedet for kun som et dekorativt element), skal du sikre dig, at denne betydning også formidles til hjælpeteknologier – for eksempel inkludere yderligere indhold, visuelt skjult med .sr-only
klassen.
Hvis du opretter kontrolelementer uden anden tekst (såsom en <button>
, der kun indeholder et ikon), bør du altid levere alternativt indhold for at identificere formålet med kontrolelementet, så det giver mening for brugere af hjælpeteknologier. I dette tilfælde kan du tilføje en aria-label
attribut på selve kontrolelementet.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Brug dem i knapper, knapgrupper til en værktøjslinje, navigation eller forudsat formularinput.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Et ikon, der bruges i en advarsel til at formidle, at det er en fejlmeddelelse, med yderligere .sr-only
tekst for at formidle dette tip til brugere af hjælpeteknologier.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Skiftbar, kontekstmenu til visning af lister over links. Gjorde interaktiv med dropdown JavaScript-plugin .
Pak rullemenuens udløser og rullemenuen i .dropdown
, eller et andet element, der erklærer position: relative;
. Tilføj derefter menuens HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Dropdown-menuer kan ændres til at udvide opad (i stedet for nedad) ved at tilføje .dropup
til forælderen.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Som standard placeres en rullemenu automatisk 100 % fra toppen og langs venstre side af dens forælder. Føj .dropdown-menu-right
til en .dropdown-menu
højrejuster rullemenuen.
Dropdowns placeres automatisk via CSS inden for dokumentets normale flow. Det betyder, at rullemenuer kan beskæres af forældre med visse overflow
egenskaber eller vises uden for visningsportens grænser. Løs disse problemer på egen hånd, efterhånden som de opstår.
.pull-right
justeringFra v3.1.0 har vi forældet .pull-right
rullemenuer. Brug for at højrejustere en menu .dropdown-menu-right
. Højrejusterede nav-komponenter i navbaren bruger en mixin-version af denne klasse til automatisk at justere menuen. For at tilsidesætte det, brug .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Tilføj en overskrift til at mærke sektioner af handlinger i enhver rullemenu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Tilføj en skillelinje til separate serier af links i en rullemenu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Tilføj .disabled
til en <li>
i rullemenuen for at deaktivere linket.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Gruppér en række knapper sammen på en enkelt linje med knapgruppen. Tilføj valgfri JavaScript-radio og afkrydsningsfeltstiladfærd med vores knapper-plugin .
Når du bruger værktøjstip eller popovers på elementer i en .btn-group
, skal du angive muligheden container: 'body'
for at undgå uønskede bivirkninger (såsom elementet bliver bredere og/eller mister dets afrundede hjørner, når værktøjstip eller popover udløses).
role
og giv en etiketFor at hjælpeteknologier – såsom skærmlæsere – kan formidle, at en række knapper er grupperet, role
skal der angives en passende egenskab. For knapgrupper vil dette være role="group"
, mens værktøjslinjer skal have en role="toolbar"
.
En undtagelse er grupper, der kun indeholder en enkelt kontrol (f.eks. de berettigede knapgrupper med <button>
elementer) eller en dropdown.
Derudover bør grupper og værktøjslinjer have en eksplicit etiket, da de fleste hjælpeteknologier ellers ikke vil annoncere dem på trods af tilstedeværelsen af den korrekte role
egenskab. I eksemplerne her bruger vi aria-label
, men alternativer som f.eks. aria-labelledby
kan også bruges.
Pak en række knapper ind .btn
med .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Kombiner sæt <div class="btn-group">
til en <div class="btn-toolbar">
for mere komplekse komponenter.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
I stedet for at anvende knapstørrelsesklasser på hver knap i en gruppe, skal du bare tilføje .btn-group-*
til hver .btn-group
, også når du indlejrer flere grupper.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
Placer en .btn-group
i en anden .btn-group
, når du vil have rullemenuer blandet med en række knapper.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Få et sæt knapper til at se ud lodret stablet i stedet for vandret. Rullemenuer med splitknap understøttes ikke her.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Få en gruppe knapper til at strække sig i lige store størrelser, så de spænder over hele dens forælders bredde. Fungerer også med knap dropdowns i knapgruppen.
På grund af den specifikke HTML og CSS, der bruges til at retfærdiggøre knapper (nemlig display: table-cell
), er grænserne mellem dem fordoblet. I almindelige knapgrupper, margin-left: -1px
bruges til at stable kanterne i stedet for at fjerne dem. Virker margin
dog ikke med display: table-cell
. Som et resultat, afhængigt af dine tilpasninger til Bootstrap, kan du ønske at fjerne eller omfarve kanterne.
Internet Explorer 8 gengiver ikke kanter på knapper i en justeret knapgruppe, uanset om den er tændt <a>
eller <button>
elementer. For at komme uden om det, pak hver knap ind i en anden .btn-group
.
Se #12476 for mere information.
<a>
elementerPak bare en række .btn
s ind .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Hvis <a>
elementerne bruges til at fungere som knapper – der udløser funktionalitet på siden, i stedet for at navigere til et andet dokument eller afsnit på den aktuelle side – skal de også have en passende role="button"
.
<button>
elementerFor at bruge justerede knapgrupper med <button>
elementer, skal du pakke hver knap ind i en knapgruppe . De fleste browsere anvender ikke vores CSS korrekt til begrundelse for <button>
elementer, men da vi understøtter dropdown-knapper, kan vi omgå det.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Brug en hvilken som helst knap til at udløse en rullemenu ved at placere den i en .btn-group
og give den korrekte menumarkering.
Knap-dropdowns kræver, at dropdown-pluginet er inkluderet i din version af Bootstrap.
Gør en knap til en rullemenu med nogle grundlæggende markup-ændringer.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
På samme måde kan du oprette rullemenuer med delt knap med de samme markupændringer, kun med en separat knap.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Knap dropdowns fungerer med knapper i alle størrelser.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Udløs rullemenuer over elementer ved at tilføje .dropup
til det overordnede.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Udvid formularkontrolelementerne ved at tilføje tekst eller knapper før, efter eller på begge sider af en tekstbaseret <input>
. Brug .input-group
sammen med en .input-group-addon
eller .input-group-btn
til at tilføje eller tilføje elementer til en enkelt .form-control
.
<input>
sUndgå at bruge <select>
elementer her, da de ikke kan styles fuldt ud i WebKit-browsere.
Undgå at bruge <textarea>
elementer her, da deres rows
egenskaber ikke vil blive respekteret i nogle tilfælde.
Når du bruger værktøjstip eller popovers på elementer i en .input-group
, skal du angive muligheden container: 'body'
for at undgå uønskede bivirkninger (såsom elementet bliver bredere og/eller mister dets afrundede hjørner, når værktøjstip eller popover udløses).
Bland ikke formulargrupper eller gitterkolonneklasser direkte med inputgrupper. Indlejr i stedet inputgruppen inde i formulargruppen eller det gitterrelaterede element.
Skærmlæsere vil have problemer med dine formularer, hvis du ikke inkluderer en etiket for hver input. For disse inputgrupper skal du sikre, at enhver yderligere etiket eller funktionalitet overføres til hjælpeteknologier.
Den nøjagtige teknik, der skal bruges (synlige <label>
elementer, <label>
elementer skjult ved hjælp af klassen, eller .sr-only
brug af aria-label
, aria-labelledby
, aria-describedby
eller attributten) og hvilke yderligere oplysninger, der skal formidles, vil variere afhængigt af den nøjagtige type grænseflade-widget, du implementerer. Eksemplerne i dette afsnit giver et par foreslåede, case-specifikke tilgange.title
placeholder
Placer én tilføjelse eller knap på hver side af en input. Du kan også placere en på begge sider af et input.
Vi understøtter ikke flere tilføjelser ( .input-group-addon
eller .input-group-btn
) på en enkelt side.
Vi understøtter ikke flere formularkontrolelementer i en enkelt inputgruppe.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Føj de relative formstørrelsesklasser til sig .input-group
selv, og indholdet indenfor vil automatisk ændre størrelsen – det er ikke nødvendigt at gentage formkontrolstørrelsesklasserne på hvert element.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Placer et afkrydsningsfelt eller radioindstilling i en inputgruppes tilføjelse i stedet for tekst.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Knapper i inputgrupper er lidt forskellige og kræver et ekstra niveau af indlejring. I stedet for .input-group-addon
skal du bruge til .input-group-btn
at pakke knapperne ind. Dette er påkrævet på grund af standardbrowserstile, der ikke kan tilsidesættes.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Selvom du kun kan have én tilføjelse pr. side, kan du have flere knapper inde i en enkelt .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Navs tilgængelige i Bootstrap har delt opmærkning, startende med basisklassen .nav
, såvel som delte tilstande. Skift modifikatorklasser for at skifte mellem hver stil.
Bemærk, at .nav-tabs
klassen kræver .nav
basisklassen.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Tag den samme HTML, men brug .nav-pills
i stedet:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Piller kan også stables lodret. Bare tilføj .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Gør nemt faner eller piller til lige store bredder af deres forældre på skærme, der er bredere end 768px med .nav-justified
. På mindre skærme er nav-linkene stablet.
Begrundede navbar nav-links understøttes ikke i øjeblikket.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
For enhver nav-komponent (faner eller piller), tilføj .disabled
for grå links og ingen hover-effekter .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Tilføj dropdown menuer med lidt ekstra HTML og dropdowns JavaScript plugin .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Navbars er responsive metakomponenter, der fungerer som navigationsoverskrifter for din applikation eller dit websted. De begynder at klappe sammen (og kan skiftes) i mobilvisninger og bliver vandrette, efterhånden som den tilgængelige visningsportsbredde øges.
Begrundede navbar nav-links understøttes ikke i øjeblikket.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Erstat navbar-mærket med dit eget billede ved at bytte teksten ud med en <img>
. Da den .navbar-brand
har sin egen polstring og højde, skal du muligvis tilsidesætte noget CSS afhængigt af dit billede.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Placer formularindhold inden .navbar-form
for for korrekt lodret justering og sammenklappet adfærd i smalle visningsporte. Brug justeringsindstillingerne til at bestemme, hvor den befinder sig i navbarens indhold.
Som en heads up, .navbar-form
deler meget af sin kode med .form-inline
via mixin. Nogle formularkontrolelementer, som inputgrupper, kan kræve, at faste bredder vises korrekt i en navbar.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Tilføj .navbar-btn
klassen til <button>
elementer, der ikke findes i a <form>
for at centrere dem lodret i navigeringslinjen.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Ombryd tekststrenge i et element med .navbar-text
, normalt på et <p>
tag for at få den rigtige linjeføring og farve.
<p class="navbar-text">Signed in as Mark Otto</p>
For folk, der bruger standardlinks, der ikke er inden for den almindelige navigeringskomponent, skal du bruge .navbar-link
klassen til at tilføje de rigtige farver til standard- og omvendte navbar-indstillinger.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Juster nav-links, formularer, knapper eller tekst ved hjælp af hjælpeklasserne .navbar-left
eller . .navbar-right
Begge klasser vil tilføje en CSS-float i den angivne retning. For at justere nav-links skal du f.eks. placere dem i en separat <ul>
med den respektive hjælpeklasse anvendt.
Disse klasser er blandede versioner af .pull-left
og .pull-right
, men de er rettet mod medieforespørgsler for lettere håndtering af navbar-komponenter på tværs af enhedsstørrelser.
Tilføj .navbar-fixed-top
og medtag et .container
eller .container-fluid
til center- og padnavigationslinjeindhold.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Tilføj .navbar-fixed-bottom
og medtag et .container
eller .container-fluid
til center- og padnavigationslinjeindhold.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Opret en navigeringslinje i fuld bredde, der ruller væk med siden ved at tilføje .navbar-static-top
og inkludere en .container
eller .container-fluid
for at centrere og pads navbar indhold.
I modsætning til .navbar-fixed-*
klasserne behøver du ikke at ændre polstring på body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Rediger udseendet af navigeringslinjen ved at tilføje .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Angiv den aktuelle sides placering i et navigationshierarki.
Separatorer tilføjes automatisk i CSS gennem :before
og content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Angiv pagineringslinks til dit websted eller din app med komponenten til flere siders paginering eller det enklere personsøgeralternativ .
Enkel paginering inspireret af Rdio, fantastisk til apps og søgeresultater. Den store blok er svær at gå glip af, let skalerbar og giver store klikområder.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Pagineringskomponenten skal pakkes ind i et <nav>
element for at identificere den som en navigationssektion til skærmlæsere og andre hjælpeteknologier. Derudover, da en side sandsynligvis allerede har mere end én sådan navigationssektion (såsom den primære navigation i overskriften eller en sidebar-navigation), er det tilrådeligt at give en beskrivende aria-label
for den <nav>
, som afspejler dens formål. For eksempel, hvis pagineringskomponenten bruges til at navigere mellem et sæt søgeresultater, kunne en passende etiket være aria-label="Search results pages"
.
Links kan tilpasses til forskellige omstændigheder. Bruges .disabled
til uklikbare links og .active
til at angive den aktuelle side.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
Vi anbefaler, at du udskifter aktive eller deaktiverede ankre med <span>
, eller udelader ankeret i tilfælde af de forrige/næste pile, for at fjerne klikfunktionaliteten, mens du beholder tilsigtede stilarter.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Kunne du tænke dig større eller mindre paginering? Tilføj .pagination-lg
eller .pagination-sm
for yderligere størrelser.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
Hurtige forrige og næste links til simple pagineringsimplementeringer med let opmærkning og stilarter. Det er fantastisk til simple websteder som blogs eller magasiner.
Som standard centrerer personsøgeren links.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Alternativt kan du justere hvert link til siderne:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Pager-links bruger også den generelle .disabled
hjælpeklasse fra pagineringen.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Tilføj en af de nedenfor nævnte modifikatorklasser for at ændre udseendet af en etiket.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Gengivelsesproblemer kan opstå, når du har snesevis af inline-etiketter i en smal beholder, der hver indeholder sit eget inline-block
element (som et ikon). Vejen rundt om dette er indstilling display: inline-block;
. For kontekst og et eksempel, se #13219 .
Fremhæv nemt nye eller ulæste elementer ved at tilføje et <span class="badge">
til links, Bootstrap-navigationer og mere.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Når der ikke er nye eller ulæste elementer, vil badges simpelthen kollapse (via CSS's :empty
vælger), forudsat at der ikke findes noget indhold indeni.
Badges vil ikke selv kollapse i Internet Explorer 8, fordi det mangler understøttelse af :empty
vælgeren.
Indbyggede stilarter er inkluderet til at placere badges i aktive tilstande i pillenavigation.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
En let, fleksibel komponent, der valgfrit kan udvide hele visningsporten for at fremvise nøgleindhold på dit websted.
Dette er en simpel heltenhed, en simpel jumbotron-lignende komponent til at gøre ekstra opmærksom på fremhævet indhold eller information.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
For at gøre jumbotronen i fuld bredde, og uden afrundede hjørner, skal du placere den uden for alle .container
s og i stedet tilføje en .container
indeni.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
En simpel skal h1
til passende afstand og segmentering af sektioner af indhold på en side. Det kan bruge h1
standardelementet 's small
såvel som de fleste andre komponenter (med yderligere stilarter).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Udvid Bootstraps gittersystem med thumbnail-komponenten for nemt at vise gitter af billeder, videoer, tekst og mere.
Hvis du leder efter Pinterest-lignende præsentation af thumbnails af varierende højder og/eller bredder, skal du bruge et tredjeparts-plugin såsom Masonry , Isotope eller Salvattore .
Bootstraps thumbnails er som standard designet til at vise sammenkædede billeder med minimalt påkrævet opmærkning.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Med lidt ekstra markering er det muligt at tilføje enhver form for HTML-indhold som overskrifter, afsnit eller knapper til miniaturebilleder.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Giv kontekstuelle feedbackmeddelelser til typiske brugerhandlinger med den håndfuld tilgængelige og fleksible advarselsmeddelelser.
Pak enhver tekst og en valgfri afvis-knap ind i .alert
og en af de fire kontekstuelle klasser (f.eks. .alert-success
) til grundlæggende advarselsmeddelelser.
Advarsler har ikke standardklasser, kun basis- og modifikationsklasser. En standard grå alarm giver ikke for meget mening, så du er forpligtet til at angive en type via kontekstuel klasse. Vælg mellem succes, info, advarsel eller fare.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Byg videre på enhver advarsel ved at tilføje en valgfri .alert-dismissible
og lukkeknap.
For fuldt fungerende advarsler, der kan afvises, skal du bruge JavaScript-pluginnet for advarsler .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Sørg for at bruge <button>
elementet med data-dismiss="alert"
dataattributten.
Brug .alert-link
værktøjsklassen til hurtigt at give matchende farvede links inden for enhver advarsel.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
Giv up-to-date feedback om fremskridtene af en arbejdsgang eller handling med enkle, men fleksible statuslinjer.
Fremskridtsbjælker bruger CSS3-overgange og animationer til at opnå nogle af deres effekter. Disse funktioner understøttes ikke i Internet Explorer 9 og ældre eller ældre versioner af Firefox. Opera 12 understøtter ikke animationer.
Hvis dit websted har en indholdssikkerhedspolitik (CSP) , som ikke tillader style-src 'unsafe-inline'
, så vil du ikke være i stand til at bruge indlejrede style
attributter til at indstille bredden på statuslinjen som vist i vores eksempler nedenfor. Alternative metoder til indstilling af bredder, der er kompatible med strenge CSP'er, omfatter brug af lidt tilpasset JavaScript (som sætter element.style.width
) eller brug af tilpassede CSS-klasser.
Standard statuslinje.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Fjern <span>
med .sr-only
-klassen fra statuslinjen for at vise en synlig procentdel.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
For at sikre, at etiketteksten forbliver læselig selv for lave procenter, kan du overveje at tilføje et min-width
til statuslinjen.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
Fremskridtslinjer bruger nogle af de samme knap- og advarselsklasser til ensartede stilarter.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Bruger en gradient til at skabe en stribet effekt. Ikke tilgængelig i IE9 og derunder.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Tilføj .active
til .progress-bar-striped
for at animere striberne fra højre mod venstre. Ikke tilgængelig i IE9 og derunder.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Placer flere stænger i det samme .progress
for at stable dem.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Abstrakte objektstile til at bygge forskellige typer komponenter (såsom blogkommentarer, tweets osv.), der har et venstre- eller højrejusteret billede sammen med tekstindhold.
Standardmediet viser et medieobjekt (billeder, video, lyd) til venstre eller højre for en indholdsblok.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Klasserne .pull-left
og .pull-right
findes også og blev tidligere brugt som en del af mediekomponenten, men er forældet til den brug fra v3.3.0. De svarer omtrent til .media-left
og .media-right
, bortset fra at de .media-right
skal placeres efter .media-body
i html'en.
Billederne eller andre medier kan justeres øverst, midterste eller nederst. Standard er topjusteret.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
Med lidt ekstra opmærkning kan du bruge medier inde i listen (nyttigt til kommentartråde eller artikellister).
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Listegrupper er en fleksibel og kraftfuld komponent til at vise ikke kun simple lister over elementer, men komplekse med tilpasset indhold.
Den mest basale listegruppe er simpelthen en uordnet liste med listeelementer og de rigtige klasser. Byg videre på det med de muligheder, der følger, eller din egen CSS efter behov.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Tilføj badges-komponenten til ethvert listegruppeelement, og det vil automatisk blive placeret til højre.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Tilknyt listegruppeelementer ved at bruge ankertags i stedet for listeelementer (det betyder også en forælder <div>
i stedet for en <ul>
). Der er ikke behov for individuelle forældre omkring hvert element.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Listegruppeelementer kan være knapper i stedet for listeelementer (det betyder også en forælder <div>
i stedet for en <ul>
). Der er ikke behov for individuelle forældre omkring hvert element. Brug ikke standardklasserne .btn
her.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
Tilføj .disabled
til en .list-group-item
for at nedtone den for at se deaktiveret ud.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Brug kontekstuelle klasser til at style listeelementer, standard eller linkede. Omfatter også .active
stat.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Tilføj næsten enhver HTML indeni, selv for linkede listegrupper som den nedenfor.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Selvom det ikke altid er nødvendigt, skal du nogle gange lægge din DOM i en boks. Prøv panelkomponenten i disse situationer.
Som standard er alt, hvad .panel
der skal til, at anvende nogle grundlæggende rammer og polstring for at indeholde noget indhold.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Tilføj nemt en overskriftsbeholder til dit panel med .panel-heading
. Du kan også inkludere en hvilken som helst <h1>
- <h6>
med en .panel-title
klasse for at tilføje en præ-stilet overskrift. Dog er skriftstørrelserne på <h1>
- <h6>
tilsidesat af .panel-heading
.
For korrekt linkfarvning skal du sørge for at placere links i overskrifter i .panel-title
.
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Ombryd knapper eller sekundær tekst i .panel-footer
. Bemærk, at panelfødder ikke arver farver og kanter, når du bruger kontekstuelle variationer, da de ikke er beregnet til at være i forgrunden.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Som andre komponenter kan du nemt gøre et panel mere meningsfuldt for en bestemt kontekst ved at tilføje en af de kontekstuelle tilstandsklasser.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
Tilføj ethvert panel uden grænser .table
for et sømløst design. Hvis der er en .panel-body
, tilføjer vi en ekstra kant til toppen af bordet til adskillelse.
Noget standard panelindhold her. Nulla vitae elit libero, en pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | Fornavn | Efternavn | Brugernavn |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Larry | fuglen |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Hvis der ikke er nogen paneltekst, flyttes komponenten fra paneloverskrift til tabel uden afbrydelse.
# | Fornavn | Efternavn | Brugernavn |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Larry | fuglen |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Medtag nemt listegrupper i fuld bredde i ethvert panel.
Noget standard panelindhold her. Nulla vitae elit libero, en pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Tillad browsere at bestemme video- eller diasshowdimensioner baseret på bredden af deres indeholdende blok ved at skabe et iboende forhold, der skaleres korrekt på enhver enhed.
Regler anvendes direkte på <iframe>
, <embed>
, <video>
, og <object>
elementer; brug eventuelt en eksplicit efterkommerklasse, .embed-responsive-item
når du vil matche stilen for andre attributter.
Pro-tip! Du behøver ikke at inkludere frameborder="0"
i dine <iframe>
s, da vi tilsidesætter det for dig.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Brug brønden som en simpel effekt på et element for at give det en indsat effekt.
<div class="well">...</div>
Kontrolpolstring og afrundede hjørner med to valgfri modifikationsklasser.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>