Komponenter
Over et dusin genanvendelige komponenter, der er udviklet til at levere ikonografi, afrejsested, input-grupper, navigation, alarmer og meget mere.
Glyphicons
Tilgængelige glyphs
Indeholder 200 figurer i font format fra Glyphicon Halflings. Glyphicons Halflings normalt ikke er gratis, men kunstneren har gjort dem tilgængelige for bootstrap uden omkostninger. Som tak, vi beder blot, at du har et link tilbage til Glyphicons når det er muligt.
- glyphicon glyphicon-asterisk
- glyphicon glyphicon-plus
- glyphicon glyphicon-euro
- glyphicon glyphicon-minus
- glyphicon glyphicon-cloud
- glyphicon glyphicon-envelope
- glyphicon glyphicon-pencil
- glyphicon glyphicon-glass
- glyphicon glyphicon-music
- glyphicon glyphicon-search
- glyphicon glyphicon-heart
- glyphicon glyphicon-star
- glyphicon glyphicon-star-empty
- glyphicon glyphicon-user
- glyphicon glyphicon-film
- glyphicon glyphicon-th-large
- glyphicon glyphicon-th
- glyphicon glyphicon-th-list
- glyphicon glyphicon-ok
- glyphicon glyphicon-remove
- glyphicon glyphicon-zoom-in
- glyphicon glyphicon-zoom-out
- glyphicon glyphicon-off
- glyphicon glyphicon-signal
- glyphicon glyphicon-cog
- glyphicon glyphicon-trash
- glyphicon glyphicon-home
- glyphicon glyphicon-file
- glyphicon glyphicon-time
- glyphicon glyphicon-road
- glyphicon glyphicon-download-alt
- glyphicon glyphicon-download
- glyphicon glyphicon-upload
- glyphicon glyphicon-inbox
- glyphicon glyphicon-play-circle
- glyphicon glyphicon-repeat
- glyphicon glyphicon-refresh
- glyphicon glyphicon-list-alt
- glyphicon glyphicon-lock
- glyphicon glyphicon-flag
- glyphicon glyphicon-headphones
- glyphicon glyphicon-volume-off
- glyphicon glyphicon-volume-down
- glyphicon glyphicon-volume-up
- glyphicon glyphicon-qrcode
- glyphicon glyphicon-barcode
- glyphicon glyphicon-tag
- glyphicon glyphicon-tags
- glyphicon glyphicon-book
- glyphicon glyphicon-bookmark
- glyphicon glyphicon-print
- glyphicon glyphicon-camera
- glyphicon glyphicon-font
- glyphicon glyphicon-bold
- glyphicon glyphicon-italic
- glyphicon glyphicon-text-height
- glyphicon glyphicon-text-width
- glyphicon glyphicon-align-left
- glyphicon glyphicon-align-center
- glyphicon glyphicon-align-right
- glyphicon glyphicon-align-justify
- glyphicon glyphicon-list
- glyphicon glyphicon-indent-left
- glyphicon glyphicon-indent-right
- glyphicon glyphicon-facetime-video
- glyphicon glyphicon-picture
- glyphicon glyphicon-map-marker
- glyphicon glyphicon-adjust
- glyphicon glyphicon-tint
- glyphicon glyphicon-edit
- glyphicon glyphicon-share
- glyphicon glyphicon-check
- glyphicon glyphicon-move
- glyphicon glyphicon-step-backward
- glyphicon glyphicon-fast-backward
- glyphicon glyphicon-backward
- glyphicon glyphicon-play
- glyphicon glyphicon-pause
- glyphicon glyphicon-stop
- glyphicon glyphicon-forward
- glyphicon glyphicon-fast-forward
- glyphicon glyphicon-step-forward
- glyphicon glyphicon-eject
- glyphicon glyphicon-chevron-left
- glyphicon glyphicon-chevron-right
- glyphicon glyphicon-plus-sign
- glyphicon glyphicon-minus-sign
- glyphicon glyphicon-remove-sign
- glyphicon glyphicon-ok-sign
- glyphicon glyphicon-question-sign
- glyphicon glyphicon-info-sign
- glyphicon glyphicon-screenshot
- glyphicon glyphicon-remove-circle
- glyphicon glyphicon-ok-circle
- glyphicon glyphicon-ban-circle
- glyphicon glyphicon-arrow-left
- glyphicon glyphicon-arrow-right
- glyphicon glyphicon-arrow-up
- glyphicon glyphicon-arrow-down
- glyphicon glyphicon-share-alt
- glyphicon glyphicon-resize-full
- glyphicon glyphicon-resize-small
- glyphicon glyphicon-exclamation-sign
- glyphicon glyphicon-gift
- glyphicon glyphicon-leaf
- glyphicon glyphicon-fire
- glyphicon glyphicon-eye-open
- glyphicon glyphicon-eye-close
- glyphicon glyphicon-warning-sign
- glyphicon glyphicon-plane
- glyphicon glyphicon-calendar
- glyphicon glyphicon-random
- glyphicon glyphicon-comment
- glyphicon glyphicon-magnet
- glyphicon glyphicon-chevron-up
- glyphicon glyphicon-chevron-down
- glyphicon glyphicon-retweet
- glyphicon glyphicon-shopping-cart
- glyphicon glyphicon-folder-close
- glyphicon glyphicon-folder-open
- glyphicon glyphicon-resize-vertical
- glyphicon glyphicon-resize-horizontal
- glyphicon glyphicon-hdd
- glyphicon glyphicon-bullhorn
- glyphicon glyphicon-bell
- glyphicon glyphicon-certificate
- glyphicon glyphicon-thumbs-up
- glyphicon glyphicon-thumbs-down
- glyphicon glyphicon-hand-right
- glyphicon glyphicon-hand-left
- glyphicon glyphicon-hand-up
- glyphicon glyphicon-hand-down
- glyphicon glyphicon-circle-arrow-right
- glyphicon glyphicon-circle-arrow-left
- glyphicon glyphicon-circle-arrow-up
- glyphicon glyphicon-circle-arrow-down
- glyphicon glyphicon-globe
- glyphicon glyphicon-wrench
- glyphicon glyphicon-tasks
- glyphicon glyphicon-filter
- glyphicon glyphicon-briefcase
- glyphicon glyphicon-fullscreen
- glyphicon glyphicon-dashboard
- glyphicon glyphicon-paperclip
- glyphicon glyphicon-heart-empty
- glyphicon glyphicon-link
- glyphicon glyphicon-phone
- glyphicon glyphicon-pushpin
- glyphicon glyphicon-usd
- glyphicon glyphicon-gbp
- glyphicon glyphicon-sort
- glyphicon glyphicon-sort-by-alphabet
- glyphicon glyphicon-sort-by-alphabet-alt
- glyphicon glyphicon-sort-by-order
- glyphicon glyphicon-sort-by-order-alt
- glyphicon glyphicon-sort-by-attributes
- glyphicon glyphicon-sort-by-attributes-alt
- glyphicon glyphicon-unchecked
- glyphicon glyphicon-expand
- glyphicon glyphicon-collapse-down
- glyphicon glyphicon-collapse-up
- glyphicon glyphicon-log-in
- glyphicon glyphicon-flash
- glyphicon glyphicon-log-out
- glyphicon glyphicon-new-window
- glyphicon glyphicon-record
- glyphicon glyphicon-save
- glyphicon glyphicon-open
- glyphicon glyphicon-saved
- glyphicon glyphicon-import
- glyphicon glyphicon-export
- glyphicon glyphicon-send
- glyphicon glyphicon-floppy-disk
- glyphicon glyphicon-floppy-saved
- glyphicon glyphicon-floppy-remove
- glyphicon glyphicon-floppy-save
- glyphicon glyphicon-floppy-open
- glyphicon glyphicon-credit-card
- glyphicon glyphicon-transfer
- glyphicon glyphicon-cutlery
- glyphicon glyphicon-header
- glyphicon glyphicon-compressed
- glyphicon glyphicon-earphone
- glyphicon glyphicon-phone-alt
- glyphicon glyphicon-tower
- glyphicon glyphicon-stats
- glyphicon glyphicon-sd-video
- glyphicon glyphicon-hd-video
- glyphicon glyphicon-subtitles
- glyphicon glyphicon-sound-stereo
- glyphicon glyphicon-sound-dolby
- glyphicon glyphicon-sound-5-1
- glyphicon glyphicon-sound-6-1
- glyphicon glyphicon-sound-7-1
- glyphicon glyphicon-copyright-mark
- glyphicon glyphicon-registration-mark
- glyphicon glyphicon-cloud-download
- glyphicon glyphicon-cloud-upload
- glyphicon glyphicon-tree-conifer
- glyphicon glyphicon-tree-deciduous
Sådan bruger du
Af ydelsesmæssige årsager, alle ikoner kræver en base class og enkelte ikon klasse. At bruge følgende kode overalt. Lad der være en afstand mellem ikon og tekst korrekt polstring.
Må ikke blandes med andre komponenter
Ikon klasser kan ikke direkte sammen med andre komponenter. De bør ikke anvendes sammen med andre klasser i samme element. I stedet tilføjes en indlejret <span> og anvende ikonet klasser til <span>.
Kun til brug på tomme elementer
Ikon klasser bør kun anvendes på elementer, der ikke indeholder tekst og har ingen underordnede elementer.
Ændre ikonet font placering
Bootstrap forudsætter ikonet font filer vil blive placeret i ../fonts/ mappe, i forhold til de indsamlede CSS filer. Flytning og omdøbning af disse font filer : opdatering af CSS på én af tre måder:
- Ændre
@icon-font-pathog/eller@icon-font-namevariabler i kilden mindre filer. - Udnyt den url relative funktion i mindre compiler.
- Ændre
url()stier i den kompilerede CSS.
Brug uanset hvilken løsning passer bedst til dit specifikke udvikling opsætning.
<span class="glyphicon glyphicon-search"></span>Eksempler
Brug dem i knapperne, knap til en værktøjslinje, navigation eller printes form indgange.
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>Rullelister
Toggleable, Sammenhængsmenu til visning af links. Interaktiv med rulleliste JavaScript plugin.
Eksempel
Wrap rullelisten's trigger og rullemenuen under .dropdown, eller et andet element, som erklærer position: relative;. Tilsæt derefter menuen HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>Justering
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
Kan kræve yderligere positionering
Afrejsested placeres automatisk via CSS inden for det normale flow af dokumentet. Det betyder afrejsested kan blive beskåret af forældre med visse overflow egenskaber eller vises ud over grænserne i viewporten. Disse spørgsmål om dine egne som de opstår.
Forringet .pull-right opretning
Som til v3.1.0, vi har forringet .pull-right på dropdown menuer. Til højre ret en menu, brug .dropdown-menu-right. Højrejusterede nav komponenter i navbar - brug en mixin version af denne klasse automatisk justere menuen. For at tilsidesætte den, bruge .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
...
</ul>Stiftlister
Tilføje et sidehoved til at mærke dele af aktioner i rullemenuen.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
...
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
</ul>Divider
Add a divider to separate series of links in a dropdown menu.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
...
<li role="presentation" class="divider"></li>
...
</ul>Deaktiverede menupunkter
Tilføj .disabled <li> på rullelisten for at deaktivere linket.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>Knappen grupper
Gruppen en række knapper sammen på en enkelt linje med knappen gruppe. Tilføj den valgfri JavaScript radio- og checkbox stil adfærd med vores knapper plugin.
Værktøjstip & popovers knappen grupper kræver speciel indstilling
Når du bruger værktøjstip eller popovers på elementer i .btn-group, skal du angive indstillingen container: 'body' for at undgå uønskede bivirkninger (f. eks. elementet voksende bredere og/eller mister sin afrundede hjørner værktøjstip eller popover er udløst).
Basis eksempel
Vikl en række knapper med .btn .btn-group.
<div class="btn-group">
<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>Knappen værktøjslinje
Kombiner sæt <div class="btn-group"> i en <div class="btn-toolbar"> for mere komplekse komponenter.
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>Skalering
I stedet for at anvende knappen dimensionering klasser til hver knap i en gruppe, skal du blot tilføje .btn-group-* .btn-group.
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>Nesting
Placér en .btn-group inden for .btn-group når du rullemenuen menuer blandet med en række knapper.
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>Vertikal variation
En række knapper vises lodret stablet i stedet for horisontalt. Opdel knap afrejsested understøttes ikke her.
<div class="btn-group-vertical">
...
</div>Knappen berettigede grupper
En gruppe af knapper stræk på samme størrelse til at spænde over hele bredden af sin overordnede. Arbejder også med knappen afrejsested inden knappen gruppe.
Håndtere rammer
På grund af den specifikke HTML og CSS bruges til at retfærdiggøre knapper (nemlig display: table-cell), grænserne mellem dem er fordoblet. Regelmæssig knappen grupper margin-left: -1px bruges til stabling af grænserne i stedet for at fjerne dem. Men margin virker ikke med display: table-cell. Som en følge heraf, afhængigt af dine tilpasninger til at opstarte, du ønsker at fjerne eller re-farve grænserne.
IE8 og kanter
Internet Explorer 8 ikke render grænser på knapper i en begrundet knap gruppe, uanset om det er på <a> eller <button> elementer. For at komme omkring, at sno hver knap i en anden .btn-group.
Se # 12476 for at få flere oplysninger.
Med <a> elementer
Bare læg en række .btns i .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified">
...
</div>Med <button> elementer
To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can workaround that.
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>Afrejsested knappen
Brug eventuelt knappen til at udløse en dropdown menu ved at placere den i en .btn-group og den korrekte menu markup.
Plugin afhængighed
Afrejsested knappen kræver rulleliste plugin til at være inkluderet i din version af bootstrap.
Enkelt knap afrejsested
Drej knappen til en rulleliste skifte med nogle grundlæggende markup ændringer.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Knappen Opdel afrejsested
På samme måde kan oprette delt knap afrejsested 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">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Skalering
Afrejsested knappen arbejde 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">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="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">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>Dropup variation
Udløser rulleliste ovenstående menuer elementer ved at tilføje .dropup til den 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">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<!-- Dropdown menu links -->
</ul>
</div>Indgangsgrupper
Udvide form kontrol ved at tilføje tekst eller knapper før, efter eller på begge sider af enhver tekst-baseret <input>. Brug .input-group med et .input-group-addon for at sætte eller tilføje elementer til en enkelt .form-control.
Tekstmæssigt <input>s
Undgå at bruge <select> elementer her, da de ikke kan være fuldt indrettet på WebKit browsere.
Undgå at bruge <textarea> elementer her som deres rows attribut ikke respekteres i nogle tilfælde.
Værktøjstip & popovers i input-grupper kræver speciel indstilling
Når du bruger værktøjstip eller popovers til elementer i en .input-group, skal du angive indstillingen container: 'body' for at undgå uønskede bivirkninger (f. eks. elementet voksende bredere og/eller mister sin afrundede hjørner værktøjstip eller popover er udløst).
Må ikke blandes med andre komponenter
Bland ikke danne grupper eller grid kolonne klasser direkte med input-grupper. I stedet, nest indgangsgruppen indersiden af form gruppe eller grid-relaterede element.
Basis eksempel
Anbring en add-on knappen eller på begge sider af et input. Du kan også placere en på begge sider af et indgangssignal.
Vi understøtter ikke flere tilføjelser på en enkelt side.
Vi understøtter ikke flere formular-kontroller i en enkelt input gruppe.
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>Skalering
Tilføj den relative form dimensionering klasser til .input-group og selve indholdet i vil automatisk ændre størrelsen og ingen behov for at gentage i form af størrelseskategorier på hvert element.
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>Afkrydsningsfelter og radio tilføjelsesprogrammer
Anbring et afkrydsningsfelt eller radio mulighed indenfor en input-koncernens-tilføjelsespakke i stedet for tekst.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Knappen tilføjelsesprogrammer
Knapper i input-grupper er en smule anderledes og kræver et ekstra niveau af nesting. I stedet for .input-group-addon, skal du bruge .input-group-btn for at afslutte de knapper. Dette er nødvendigt på grund af standardbrowser stilarter, der ikke kan overskrives.
<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">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Knapper med afrejsested
<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">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Segmenterede knapper
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>Navs
Navs findes i bootstrap-har delt markup, startende med base .nav klasse, samt fælles. Byt modifikator klasser for at skifte mellem hver stil.
Faner
Bemærk .nav-tabs klasse kræver .nav base class.
<ul class="nav nav-tabs" role="tablist">
<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>Kræver JavaScript faner-udvidelse
For faner med tabbable områder, du skal bruge faner JavaScript plugin.
Piller
Det samme HTML, men bruge .nav-pills i stedet:
<ul class="nav nav-pills" role="tablist">
<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 er også vertikalt stabelbar. Tilsæt blot .nav-stacked.
<ul class="nav nav-pills nav-stacked" role="tablist">
...
</ul>Berettiget
Let faner eller piller lige bredder af deres overordnede på skærme større end 768px med .nav-justified. På mindre skærme, nav links stables.
Navbar - berettiget nav forbindelser er ikke understøttet i øjeblikket.
Safari og hurtigt reagerende berettiget navs
As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.
<ul class="nav nav-tabs nav-justified" role="tablist">
...
</ul>
<ul class="nav nav-pills nav-justified" role="tablist">
...
</ul>Deaktiverede links
For nav komponent (faner eller piller), add .disabled grå links og ingen hover effekt.
Link funktionaliteten påvirkes ikke
Denne klasse vil kun ændre de <a>'s udseende, ikke dens funktionalitet. Anvend brugerdefinerede JavaScript for at deaktivere links her.
<ul class="nav nav-pills" role="tablist">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Brug af afrejsested
Tilføj dropdown menuer med lidt ekstra HTML og afrejsested JavaScript plugin.
Faner med afrejsested
<ul class="nav nav-tabs" role="tablist">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
...
</ul>Piller med afrejsested
<ul class="nav nav-pills" role="tablist">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
...
</ul>Navbar
Navbar - standard
Navbars er responsive meta komponenter, der tjener som navigation skæreborde til din applikation eller hjemmeside. De begynder brudt sammen (og toggleable) i mobile synspunkter og blive vandret som den tilgængelige viewport-bredde øges.
Navbar - berettiget nav forbindelser er ikke understøttet i øjeblikket.
Kræver JavaScript
Hvis JavaScript er deaktiveret og viewporten er smal nok at navbar - bryder sammen, vil det være umuligt at udvide navbar - og se indholdet i .navbar-collapse.
Ændring af sammenpressede mobile navbar - brudpunkt
Navbar - De besvimer i sin lodrette mobile synspunkt, når visningen er smallere end @grid-float-breakpoint, og udvider sin horisontale ikke-mobile visning, når visningen er mindst @grid-float-breakpoint i bredden. Juster det variable i de mindre kilde til kontrol når navbar - kollapser/udvides. Standardværdien er 768px (mindste "lille" eller "tablet" skærm).
<nav class="navbar navbar-default" role="navigation">
<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">
<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</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<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>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>Plugin afhængighed
Det hurtigtreagerende navbar - kræver det sammenbrud plugin til at være inkluderet i din version af bootstrap.
Sørg navbars tilgængelig
Sørg for at tilføje en role="navigation" til hver navbar - til at hjælpe med tilgængelighed.
Image
Udskift navbar - mærket med dit eget billede ved at udskifte teksten til en <img>. Da .navbar-brand har sin egen polstring og højde, kan det være nødvendigt at tilsidesætte nogle CSS afhængigt af dit billede.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>Formularer
Anbring form indhold i .navbar-form for korrekt lodret og sammenpressede adfærd i smalle visningsfelter. Brug denne indstilling til at bestemme, hvor den befinder sig i navbar - indhold.
Som en heads up, .navbar-form deler meget af sin kode med .form-inline via mixin. Nogle kontrolelementer, som input-grupper, kan kræve faste bredder skal vise ordentligt 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>Mobil enhed noter
Der er visse begrænsninger for anvendelse af formular kontrol inden for faste elementer på mobile enheder. Se vores browser understøtter docs for detaljer.
Altid tilføje etiketter
Skærmlæsere får problemer med din formular, hvis du ikke har en mærkat for hver indgang. For disse inline navbar - former, kan du skjule labels ved hjælp af .sr-only klasse.
Knapper
Tilføj .navbar-btn klasse i <button> elementer ikke er bosat i en <form> til lodret midt i navbar -.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>Kontekst-specifik brug
Som standard -knappen klasser, .navbar-btn kan bruges på <a> og <input> elementer. Men hverken .navbar-btn eller knappen standard klasser skal bruges på <a> elementer inden for .navbar-nav.
Tekst
Sno trådene af tekst i et element med .navbar-text, normalt på <p> tags for korrekt førende og farve.
<p class="navbar-text">Signed in as Mark Otto</p>Ikke-nav forbindelser
For folk med standard links, der ikke er i regelmæssig navbar - navigation component, bruge .navbar-link klasse for at tilføje den korrekte farver for standard og omvendt navbar - indstillinger.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>Justeringen af komponenter
Juster nav forbindelser, former, knapper eller tekst ved hjælp af .navbar-left eller .navbar-right utility klasser. Begge klasser vil tilføje en CSS float i den angivne retning. For eksempel, for at justere nav forbindelser, lægge dem i en separat <ul> med den respektive utility klasse anvendes.
Disse klasser er mixin-ed-versioner af .pull-left og .pull-right, men de rifler til media forespørgsler for nemmere håndtering af navbar - komponenter i hele enhedens størrelse.
Højre, idet flere komponenter
Navbars har i øjeblikket en begrænsning med flere .navbar-right klasser. På korrekt plads indhold, vi bruger negativ margen på sidste .navbar-right element. Når der er flere elementer i den klasse, disse margener ikke fungere efter hensigten.
Vi vil tage dette når vi kan omskrive denne komponent i v4.
Fast til top
Tilføj .navbar-fixed-top og .container eller .container-fluid til center og pad navbar - indhold.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
...
</div>
</nav>Kropsbeskyttere påkrævet
Den faste navbar - vil lægge dit andet indhold, medmindre du tilføjer padding til toppen af <body>. Prøv dine egne værdier eller brug vores udsnit nedenfor. Tip: Som standard navbar - er 50px høj.
body { padding-top: 70px; }Sørg for at medtage denne efter kernen bootstrap CSS.
Fast til bunden
Tilføj .navbar-fixed-bottom og .container eller .container-fluid til center og pad navbar - indhold.
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
...
</div>
</nav>Kropsbeskyttere påkrævet
Den faste navbar - vil lægge dit indhold, medmindre du tilføjer padding til bunden af <body>. Prøv dine egne værdier eller brug vores udsnit nedenfor. Tip: Som standard navbar - er 50px høj.
body { padding-bottom: 70px; }Sørg for at medtage denne efter kernen bootstrap CSS.
Statisk top
Opret en fuld bredde navbar - det ruller væk med den side ved at tilføje .navbar-static-top og .container eller .container-fluid til center og pad navbar - indhold.
I modsætning til .navbar-fixed-* klasser, behøver du ikke at ændre nogen polstring på body.
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
...
</div>
</nav>Omvendt navbar
Ændre udseendet af navbar - ved at tilføje .navbar-inverse.
<nav class="navbar navbar-inverse" role="navigation">
...
</nav>Brødkrummestri
Angiver den aktuelle sides placering i en navigations hierarki.
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>, Brochuresideangivelse
Give, brochuresideangivelse links til dit websted eller app med multi-side, brochuresideangivelse komponent, eller den enklere personsøger alternativ.
Standard, brochuresideangivelse
Enkel, brochuresideangivelse inspireret af Rdio, perfekt til applikationer og søgeresultater. Den store blok er svære at overse, nemt at skalere, og giver stor klik på områder.
<nav>
<ul class="pagination">
<li><a href="#">«</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="#">»</a></li>
</ul>
</nav>Handicappede og aktiv
Links kan tilpasses til forskellige situationer. Brug .disabled for unclickable links og .active for at angive den aktuelle side.
<nav>
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>Du kan valgfrit byt aktivt eller deaktiveret ankre til <span> for at fjerne klik funktionalitet samtidig med, at de bevarer bestemt stilarter.
<nav>
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
...
</ul>
</nav>Skalering
Har du lyst til større eller mindre, brochuresideangivelse? Tilføj .pagination-lg eller .pagination-sm for yderligere størrelser.
<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>Personsøger
Hurtig forrige og næste links til enkel, brochuresideangivelse implementeringer med lys markup og stilarter. Det er fantastisk til enkle hjemmesider blogs eller magasiner.
Standard eksempel
Som standard personsøger centre links.
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>Justeret links
Alternativt kan du tilpasse hvert link til siderne:
<nav>
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
</nav>Valgfri deaktiveret
Pageren links også bruge almindelige .disabled utility klasse fra, brochuresideangivelse.
<nav>
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
</nav>Mærkater
Eksempel
Eksempel overskrift Ny
Eksempel overskrift Ny
Eksempel overskrift Ny
Eksempel overskrift Ny
Eksempel overskrift Ny
Eksempel overskrift Ny
<h3>Example heading <span class="label label-default">New</span></h3>Tilgængelige variationer
Tilføje en af nedennævnte modifikator klasser for at ændre udseendet af en etiket.
Standard
Primær
Succes
Info
Advarsel
Fare
<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>Har tonsvis af labels?
Rendering problemer kan opstå, når du har snesevis af inline-etiketter i en smal beholder, hver med sit eget inline-block element (f. eks. et ikon). Den vej rundt er det indstillingen display: inline-block;. For sammenhæng og et eksempel se # 13219.
Emblemer
Let at gøre opmærksom på nye og ulæste poster ved at tilføje en <span class="badge"> til links, bootstrap-navs og meget mere.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>Self dropper
Når der ikke er nogen nye og ulæste poster, badges bliver simpelthen bryde sammen (via CSS's :empty selector) ikke indhold findes i.
Cross-browser kompatibilitet
Badges ikke selvstændig sammenbrud i Internet Explorer 8, da det mangler støtte til :empty gearvælger.
Tilpasser sig til aktive nav,
Indbyggede stilarter er inkluderet for markedsføring badges i aktiv i pille-navigationstastern.
<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>Jumbotron
En let, fleksibel komponent, der kan eventuelt udvide hele viewporten til udstillingsvindue for indhold på dit websted.
Hej verden!
Dette er en simpel hero enhed, en enkel jumbotron-style komponent for at få ekstra opmærksomhed til indhold eller oplysninger.
<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 den jumbotron fulde bredde, og uden afrundede hjørner, placer den uden for alle .containers og i stedet tilføje et .container i.
<div class="jumbotron">
<div class="container">
...
</div>
</div>Sidehoved
En enkel tanke for en h1 med passende mellemrum og segment dele af indholdet på en side. Det kan anvende de h1's standard small element, ligesom de fleste andre komponenter (med ekstra stilarter).
Eksempel sideoverskrift småt for hoved
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>Miniaturer
Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
Standard eksempel
Som standard er bootstrap-thumbnails er designet til at demonstrere knyttet billeder med minimal nødvendig markup.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="...">
</a>
</div>
...
</div>Brugerdefineret indhold
Med en smule ekstra markup, er det muligt at tilføje enhver form for HTML-indhold som overskrifter, punkter eller knapper til miniaturebilleder.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x300" 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>Advarsler
Give kontekstuelle tilbagemeldinger til typisk bruger handlinger med en håndfuld tilgængelige og fleksible alarmmeddelelser.
Eksempler
Sno eventuel tekst og en valgfri afsætte knap i .alert og en af de fire kontekstuel klasser (f. eks. .alert-success) for alarmmeddelelser.
Ingen standard klasse
Advarsler ikke har standard klasser, kun base og modifikator klasser. En standard grå alert laver ikke så meget mening, så skal du angive en type via kontekstbestemte klasse. Vælg fra succes, info, advarsel eller fare.
bravo! Du læst denne vigtige besked.
Heads up! Denne advarsel kræver din opmærksomhed, men det er ikke super vigtigt.
Advarsel! bedre check dig selv, du ser ikke alt for godt.
Oh snap! ændre et par ting op og prøv at sende igen.
<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>Dismissible advarsler
Bygge på en alarm ved at tilføje et valgfrit .alert-dismissible og knappen luk.
Kræver JavaScript alert plugin
For fuldt fungerende, dismissible alarmer skal du bruge advarer JavaScript plugin.
Advarsel! Better check yourself, you're not looking too good.
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>Sørg for korrekt adfærd på tværs af alle enheder
Sørg for at bruge den <button> element med data-dismiss="alert" data egenskab.
Links i beskeder
Brug en .alert-link utility klasse til hurtigt at give tilsvarende farvede bånd inden en alarm.
bravo! Du læst denne vigtige besked.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! ændre et par ting op og prøv at sende igen.
<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>Statuslinjer
Give op-til-dato tilbagemelding på forløbet af en arbejdsgang eller handling med enkle og fleksible statuslinjer.
Cross-browser kompatibilitet
Statuslinjer brug CSS3 overgange og animationer til at nå nogle af deres virkninger. Disse funktioner understøttes ikke i Internet Explorer 9 og nedenfor eller ældre versioner af Firefox. Opera 12 ikke understøtter animationer.
Basis eksempel
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>Med label
Fjern .sr-only klasse fra i statuslinjen viser en synlig procent. For lav procent, overveje at tilføje en min-width for at sikre, at labels tekst er fuldt synlig.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>Lav procentdel
Progress bars representing low single digit percentages, as well as 0%, include a min-width: 20px; for legibility.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
2%
</div>
</div>Kontekstuel alternativer
Statuslinjer bruger nogle af de samme knap, og alarmere klasser for konsekvent 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>Stribede
Bruger en gradient til at oprette en stribede virkning. Ikke tilgængelig i IE8.
<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>Animeret
Tilføj .active til .progress-bar-striped for at animere de striber højre til venstre. Fås ikke i IE9 og under.
<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>Stablet
Anbring flere søjler i samme .progress til 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>Media objekt
Abstrakt objekt stilarter for at skabe forskellige typer komponenter (som blog-kommentarer, tweets, etc), der har en venstre- eller til højrejusteres billede sammen med redaktionelle indhold.
Standardmedie
The default media displays a media object (images, video, audio) to the left or right of a content block.
Media pos
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media pos
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Indlejrede medier pos
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media pos
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Deprecated pull-right pull-left example
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<div class="media">
<a class="media-left" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>The classes .pull-left and .pull-right also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to .media-left and .media-right, except that .media-right should be placed after the .media-body in the html.
Media alignment
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
Top aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in 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.
Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in 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.
Bottom aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in 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">
<a class="media-left media-middle" href="#">
<img data-src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>Medielisten
Med en smule ekstra markup, kan du bruge media inde i listen (nyttigt til kommentar tråde eller artikler lister).
-
Media pos
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Indlejrede medier pos
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Indlejrede medier pos
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Indlejrede medier pos
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<a class="media-left" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>Liste over gruppe
Listen over grupper er en fleksibel og kraftfuld komponent til visning af ikke kun simple lister af elementer, men komplekse med brugerdefineret indhold.
Basis eksempel
Den mest grundlæggende liste gruppe er simpelthen en usorteret liste med poster på listen, og de rigtige klasser. Bygge på det med de muligheder, der følger, eller din egen CSS efter behov.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum på eros
<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>Emblemer
Tilføj de badges komponent til enhver liste gruppe element og det vil automatisk blive placeret på højre.
- 14 cras justo odio
- 2 Dapibus ac facilisis i
- 1 Morbi leo risus
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Sammenkædede elementer
Linkify liste gruppe ved hjælp af anker tags i stedet for listeelementer (det betyder også en overordnet <div> i stedet for en <ul>). Intet behov for enkelte 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>Deaktiverede elementer
Tilføj .disabled .list-group-item til grå det ud til at være deaktiveret.
<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>Kontekstuel klasser
Brug kontekstuel klasser til stil listeelementer, standard eller forbundet. Omfatter også .active.
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum på eros
<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>Brugerdefineret indhold
Tilføje næsten alle HTML-i, selv om knyttet liste grupper som vist nedenfor.
Liste gruppeelement pos
Donec id elit ikke mi porta gravida (graviditeter på eget metus. Mæcen sed diam eget risus varius blandit.
Liste gruppeelement pos
Donec id elit ikke mi porta gravida (graviditeter på eget metus. Mæcen sed diam eget risus varius blandit.
Liste gruppeelement pos
Donec id elit ikke mi porta gravida (graviditeter på eget metus. Mæcen 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>Paneler
Selv om det ikke altid er nødvendigt, nogen gange er man nødt til at sætte din dom i en boks. I disse situationer, at panelet komponent.
Basis eksempel
Som standard er alle .panel kan anvende nogle grundlæggende grænse og polstring for at indeholde noget indhold.
Basis panel eksempel
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>Panel med pos
Du kan nemt tilføje en overskrift beholder til din fladskærm med .panel-heading. Du kan også <h1> - <h6> med et .panel-title klasse til at tilføje en pre-designede pos.
For at sikre korrekt link farve, skal du sørge for at placere links i positioner inden for .panel-title.
Panelet pos uden titel
Panel indhold
Panelet titel
Panel indhold
<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>Panel med sidefod
Wrap knapper eller sekundær tekst i .panel-footer. Bemærk at panelet sidefod ikke arv farver og grænser ved hjælp af kontekstuelle forskelle som de ikke er beregnet til at være i forgrunden.
Panel indhold
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Kontekstuel alternativer
Ligesom med andre komponenter, der er let at lave en plade mere meningsfuldt for en bestemt kontekst ved at tilføje de kontekstuelle, klasser.
Panelet titel
Panel indhold
Panelet titel
Panel indhold
Panelet titel
Panel indhold
Panelet titel
Panel indhold
Panelet titel
Panel indhold
<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>Med tabeller
Tilføj eventuelle ikke-kantet .table inden for rammerne af et panel for et lækkert design. Hvis der er en .panel-body, vi tilføjer en ekstra kant i toppen af tabellen for adskillelse.
Panelet pos
Nogle standard panel indhold her. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum er indrettet i nulla sed consectetur. Aenean eu leo patere quam. Pellentesque ornare sem lacinia patere quam venenatis vestibulum. Nullam id for knappens id nibh ultricies vehicula ut id elit.
| # | Fornavn | Efternavn | Brugernavn |
|---|---|---|---|
| 1 | Markér | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 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 central instans, den komponent bevæger sig fra panelet overskrift til tabellen uden afbrydelse.
Panelet pos
| # | Fornavn | Efternavn | Brugernavn |
|---|---|---|---|
| 1 | Markér | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | Fuglen |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Med liste grupper
Let omfatter fuld bredde liste grupper i et panel.
Panelet pos
Nogle standard panel indhold her. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum er indrettet i nulla sed consectetur. Aenean eu leo patere quam. Pellentesque ornare sem lacinia patere quam venenatis vestibulum. Nullam id for knappens id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum på eros
<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>Hurtigtreagerende integrer
Tillad browsere til at bestemme video eller diasshow dimensioner baseret på bredden af deres indeholder blok ved at oprette et indre forhold, bliver korrekt skala på enhver enhed.
Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.
Pro-Tip ! Du behøver ikke at omfatte frameborder="0" i din <iframe>s som 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>Brønde
Standard og
Brug den som en simpel effekt på et element for at give det en indrykning virkning.
Se, jeg er i et godt!
<div class="well">...</div>Valgfri klasser
Kontrol polstring og afrundede hjørner med to valgfri modifikator klasser.
Se, jeg er i et stort godt!
<div class="well well-lg">...</div>Se, jeg er i et lille godt!
<div class="well well-sm">...</div>