Over et dusin genanvendelige komponenter bygget til at give ikonografi, dropdowns, inputgrupper, navigation, advarsler og meget mere.
Glyphicons
Tilgængelige glyffer
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.
glyphicon glyphicon-stjerne
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-sky
glyphicon glyphicon-konvolut
glyphicon glyphicon-blyant
glyphicon glyphicon-glas
glyphicon glyphicon-musik
glyphicon glyphicon-søgning
glyphicon glyphicon-hjerte
glyphicon glyphicon-stjerne
glyphicon glyphicon-stjerne-tom
glyphicon glyphicon-bruger
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-fjern
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-tandhjul
glyphicon glyphicon-trash
glyphicon glyphicon-hjem
glyphicon glyphicon-fil
glyphicon glyphicon-tid
glyphicon glyphicon-vej
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-indbakke
glyphicon glyphicon-lege-cirkel
glyphicon glyphicon-gentag
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lås
glyphicon glyphicon-flag
glyphicon glyphicon-hovedtelefoner
glyphicon glyphicon-volume-off
glyphicon glyphicon-volumen-ned
glyphicon glyphicon-volumen-op
glyphicon glyphicon-qrcode
glyphicon glyphicon-stregkode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-bog
glyphicon glyphicon-bogmærke
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-fed
glyphicon glyphicon-kursiv
glyphicon glyphicon-tekst-højde
glyphicon glyphicon-tekst-bredde
glyphicon glyphicon-align-venstre
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-liste
glyphicon glyphicon-indent-venstre
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-billede
glyphicon glyphicon-map-marker
glyphicon glyphicon-juster
glyphicon glyphicon-farve
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-tjek
glyphicon glyphicon-move
glyphicon glyphicon-skridt-tilbage
glyphicon glyphicon-hurtigt-bagud
glyphicon glyphicon-bagud
glyphicon glyphicon-spil
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-spol frem
glyphicon glyphicon-skridt-fremad
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-venstre
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-tegn
glyphicon glyphicon-minus-tegn
glyphicon glyphicon-fjern-tegn
glyphicon glyphicon-ok-tegn
glyphicon glyphicon-spørgsmål-tegn
glyphicon glyphicon-info-skilt
glyphicon glyphicon-skærmbillede
glyphicon glyphicon-fjern-cirkel
glyphicon glyphicon-ok-cirkel
glyphicon glyphicon-ban-cirkel
glyphicon glyphicon-pil-venstre
glyphicon glyphicon-pil-højre
glyphicon glyphicon-pil op
glyphicon glyphicon-pil ned
glyphicon glyphicon-share-alt
glyphicon glyphicon-ændre størrelse-fuld
glyphicon glyphicon-ændre størrelse-lille
glyphicon glyphicon-udråbstegn
glyphicon glyphicon-gave
glyphicon glyphicon-blad
glyphicon glyphicon-ild
glyphicon glyphicon-øje-åben
glyphicon glyphicon-øje-luk
glyphicon glyphicon-advarselsskilt
glyphicon glyphicon-plan
glyphicon glyphicon-kalender
glyphicon glyphicon-tilfældig
glyphicon glyphicon-kommentar
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-indkøbsvogn
glyphicon glyphicon-mappe-luk
glyphicon glyphicon-mappe-åben
glyphicon glyphicon-ændre størrelse-lodret
glyphicon glyphicon-ændre størrelse-vandret
glyphicon glyphicon-hdd
glyphicon glyphicon-tyrehorn
glyphicon glyphicon-klokke
glyphicon glyphicon-certifikat
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hånd-højre
glyphicon glyphicon-hånd-venstre
glyphicon glyphicon-hånd-op
glyphicon glyphicon-hånd-ned
glyphicon glyphicon-cirkel-pil-højre
glyphicon glyphicon-cirkel-pil-venstre
glyphicon glyphicon-cirkel-pil-op
glyphicon glyphicon-cirkel-pil-ned
glyphicon glyphicon-klode
glyphicon glyphicon-nøgle
glyphicon glyphicon-opgaver
glyphicon glyphicon-filter
glyphicon glyphicon-mappe
glyphicon glyphicon-fuldskærm
glyphicon glyphicon-dashboard
glyphicon glyphicon-papirclips
glyphicon glyphicon-hjerte-tom
glyphicon glyphicon-link
glyphicon glyphicon-telefon
glyphicon glyphicon-nål
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sortér-efter-alfabet
glyphicon glyphicon-sortér-efter-alfabet-alt
glyphicon glyphicon-sorteret-efter-rækkefølge
glyphicon glyphicon-sort-efter-rækkefølge-alt
glyphicon glyphicon-sort-efter-attributter
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-ikke markeret
glyphicon glyphicon-expand
glyphicon glyphicon-kollaps-ned
glyphicon glyphicon-kollaps-op
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-nyt-vindue
glyphicon glyphicon-record
glyphicon glyphicon-gem
glyphicon glyphicon-åben
glyphicon glyphicon-gemt
glyphicon glyphicon-import
glyphicon glyphicon-eksport
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-gemt
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-kreditkort
glyphicon glyphicon-overførsel
glyphicon glyphicon-bestik
glyphicon glyphicon-header
glyphicon glyphicon-komprimeret
glyphicon glyphicon-øretelefon
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tårn
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-undertekster
glyphicon glyphicon-lyd-stereo
glyphicon glyphicon-lyd-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mærke
glyphicon glyphicon-registreringsmærke
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-træ-nåletræ
glyphicon glyphicon-træ-løvfældende
glyphicon glyphicon-cd
glyphicon glyphicon-gem-fil
glyphicon glyphicon-open-file
glyphicon glyphicon-niveau op
glyphicon glyphicon-kopi
glyphicon glyphicon-pasta
glyphicon glyphicon-advarsel
glyphicon glyphicon-equalizer
glyphicon glyphicon-konge
glyphicon glyphicon-dronning
glyphicon glyphicon-bonde
glyphicon glyphicon-biskop
glyphicon glyphicon-ridder
glyphicon glyphicon-baby-formel
glyphicon glyphicon-telt
glyphicon glyphicon-tavle
glyphicon glyphicon-bed
glyphicon glyphicon-æble
glyphicon glyphicon-sletning
glyphicon glyphicon-timeglas
glyphicon glyphicon-lampe
glyphicon glyphicon-duplikat
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-saks
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rubel
glyphicon glyphicon-rub
glyphicon glyphicon-skala
glyphicon glyphicon-ispind
glyphicon glyphicon-is-pind-smag
glyphicon glyphicon-uddannelse
glyphicon glyphicon-option-horisontal
glyphicon glyphicon-option-vertikal
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-vindue
glyphicon glyphicon-olie
glyphicon glyphicon-korn
glyphicon glyphicon-solbriller
glyphicon glyphicon-tekst-størrelse
glyphicon glyphicon-tekst-farve
glyphicon glyphicon-tekst-baggrund
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-objekt-align-horisontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-trekant-højre
glyphicon glyphicon-trekant-venstre
glyphicon glyphicon-trekant-bund
glyphicon glyphicon-trekant-top
glyphicon glyphicon-konsol
glyphicon glyphicon-overskrift
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-venstre
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-ned
glyphicon glyphicon-menu-op
Sådan bruges
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.
Bland ikke med andre komponenter
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>.
Kun til brug på tomme elementer
Ikonklasser bør kun bruges på elementer, der ikke indeholder noget tekstindhold og ikke har underordnede elementer.
Ændring af ikonets skrifttypeplacering
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:
Skift variablerne @icon-font-pathog/eller @icon-font-namei kilden Mindre filer.
Brug den mulighed, der passer bedst til din specifikke udviklingsopsætning.
Tilgængelige ikoner
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-onlyklassen.
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-labelattribut på selve kontrolelementet.
Eksempler
Brug dem i knapper, knapgrupper til en værktøjslinje, navigation eller forudsat formularinput.
Et ikon, der bruges i en advarsel til at formidle, at det er en fejlmeddelelse, med yderligere .sr-onlytekst for at formidle dette tip til brugere af hjælpeteknologier.
Fejl: Indtast en gyldig e-mailadresse
Dropdowns
Skiftbar, kontekstmenu til visning af lister over links. Gjorde interaktiv med dropdown JavaScript-plugin .
Eksempel
Pak rullemenuens udløser og rullemenuen i .dropdown, eller et andet element, der erklærer position: relative;. Tilføj derefter menuens HTML.
Som standard placeres en rullemenu automatisk 100 % fra toppen og langs venstre side af dens forælder. Føj .dropdown-menu-righttil en .dropdown-menuhøjrejuster rullemenuen.
Kan kræve yderligere positionering
Dropdowns placeres automatisk via CSS inden for dokumentets normale flow. Det betyder, at rullemenuer kan beskæres af forældre med visse overflowegenskaber eller vises uden for visningsportens grænser. Løs disse problemer på egen hånd, efterhånden som de opstår.
Forældet .pull-rightjustering
Fra v3.1.0 har vi forældet .pull-rightrullemenuer. 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.
Overskrifter
Tilføj en overskrift til at mærke sektioner af handlinger i enhver rullemenu.
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 .
Værktøjstip og popovers i knapgrupper kræver specielle indstillinger
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).
Sørg for korrekt roleog giv en etiket
For at hjælpeteknologier – såsom skærmlæsere – kan formidle, at en række knapper er grupperet, roleskal 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 roleegenskab. I eksemplerne her bruger vi aria-label, men alternativer som f.eks. aria-labelledbykan også bruges.
Grundlæggende eksempel
Pak en række knapper ind .btnmed .btn-group.
Knap værktøjslinje
Kombiner sæt <div class="btn-group">til en <div class="btn-toolbar">for mere komplekse komponenter.
Dimensionering
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.
Indlejring
Placer en .btn-groupi en anden .btn-group, når du vil have rullemenuer blandet med en række knapper.
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.
Håndtering af grænser
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: -1pxbruges til at stable kanterne i stedet for at fjerne dem. Virker margindog ikke med display: table-cell. Som et resultat, afhængigt af dine tilpasninger til Bootstrap, kan du ønske at fjerne eller omfarve kanterne.
IE8 og grænser
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.
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".
Med <button>elementer
For 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.
Knap rullemenuer
Brug en hvilken som helst knap til at udløse en rullemenu ved at placere den i en .btn-groupog give den korrekte menumarkering.
Plugin-afhængighed
Knap-dropdowns kræver, at dropdown-pluginet er inkluderet i din version af Bootstrap.
Enkeltknap rullemenuer
Gør en knap til en rullemenu med nogle grundlæggende markup-ændringer.
Udvid formularkontrolelementerne ved at tilføje tekst eller knapper før, efter eller på begge sider af en tekstbaseret <input>. Brug .input-groupsammen med en .input-group-addoneller .input-group-btntil at tilføje eller tilføje elementer til en enkelt .form-control.
Kun tekstlige <input>s
Undgå at bruge <select>elementer her, da de ikke kan styles fuldt ud i WebKit-browsere.
Undgå at bruge <textarea>elementer her, da deres rowsegenskaber ikke vil blive respekteret i nogle tilfælde.
Værktøjstip og popovers i inputgrupper kræver specielle indstillinger
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 med andre komponenter
Bland ikke formulargrupper eller gitterkolonneklasser direkte med inputgrupper. Indlejr i stedet inputgruppen inde i formulargruppen eller det gitterrelaterede element.
Tilføj altid etiketter
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-onlybrug af aria-label, aria-labelledby, aria-describedbyeller 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.titleplaceholder
Grundlæggende eksempel
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-addoneller .input-group-btn) på en enkelt side.
Vi understøtter ikke flere formularkontrolelementer i en enkelt inputgruppe.
Dimensionering
Føj de relative formstørrelsesklasser til sig .input-groupselv, og indholdet indenfor vil automatisk ændre størrelsen – det er ikke nødvendigt at gentage formkontrolstørrelsesklasserne på hvert element.
Afkrydsningsfelter og radiotilføjelser
Placer et afkrydsningsfelt eller radioindstilling i en inputgruppes tilføjelse i stedet for tekst.
Knap tilføjelser
Knapper i inputgrupper er lidt forskellige og kræver et ekstra niveau af indlejring. I stedet for .input-group-addonskal du bruge til .input-group-btnat pakke knapperne ind. Dette er påkrævet på grund af standardbrowserstile, der ikke kan tilsidesættes.
Knapper med dropdowns
Segmenterede knapper
Flere knapper
Selvom du kun kan have én tilføjelse pr. side, kan du have flere knapper inde i en enkelt .input-group-btn.
Navs
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.
Brug af navs til fanepaneler kræver JavaScript-faner-plugin
For faner med tabuleringsområder skal du bruge faneblads JavaScript-plugin . Markup'et vil også kræve yderligere roleog ARIA-attributter – se plugin's eksempelmarkup for yderligere detaljer.
Gør navs, der bruges som navigation, tilgængelige
Hvis du bruger navs til at levere en navigationslinje, skal du sørge for at tilføje en role="navigation"til den mest logiske overordnede container for <ul>, eller omslutte et <nav>element omkring hele navigationen. Tilføj ikke rollen til sig <ul>selv, da dette ville forhindre den i at blive annonceret som en faktisk liste af hjælpeteknologier.
Faner
Bemærk, at .nav-tabsklassen kræver .navbasisklassen.
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.
Safari og responsive berettigede nav
Fra v9.1.2 udviser Safari en fejl, hvor ændring af størrelsen på din browser vandret forårsager gengivelsesfejl i den berettigede nav, som slettes ved opdatering. Denne fejl er også vist i det berettigede nav-eksempel .
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.
Overfyldt indhold
Da Bootstrap ikke ved, hvor meget plads indholdet i din navbar har brug for, kan du løbe ind i problemer med indholdsindpakning i en anden række. For at løse dette kan du:
Reducer mængden eller bredden af navbar-elementer.
Skjul bestemte navbar-elementer ved bestemte skærmstørrelser ved hjælp af responsive hjælpeklasser .
Skift det punkt, hvor din navbar skifter mellem sammenklappet og vandret tilstand. Tilpas @grid-float-breakpointvariablen eller tilføj din egen medieforespørgsel.
Kræver JavaScript-plugin
Hvis JavaScript er deaktiveret, og visningsporten er snæver nok til, at navigationslinjen kollapser, vil det være umuligt at udvide navlinjen og se indholdet i.navbar-collapse .
Den responsive navbar kræver, at sammenbrudspluginnet er inkluderet i din version af Bootstrap.
Ændring af det skjulte mobile navbar-brudpunkt
Navigationslinjen falder sammen til dens lodrette mobile visning, når visningsporten er smallere end @grid-float-breakpoint, og udvides til dens vandrette ikke-mobile visning, når visningsporten er mindst @grid-float-breakpointi bredden. Juster denne variabel i kilden Mindre for at kontrollere, hvornår navigationslinjen kollapser/udvides. Standardværdien er 768px(den mindste "lille" eller "tablet"-skærm).
Gør navbarer tilgængelige
Sørg for at bruge et <nav>element, eller hvis du bruger et mere generisk element som f.eks. en <div>, tilføj et role="navigation"til hver navbar for eksplicit at identificere det som et skelsættende område for brugere af hjælpeteknologier.
Mærkebillede
Erstat navbar-mærket med dit eget billede ved at bytte teksten ud med en <img>. Da den .navbar-brandhar sin egen polstring og højde, skal du muligvis tilsidesætte noget CSS afhængigt af dit billede.
Formularer
Placer formularindhold inden .navbar-formfor 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-formdeler meget af sin kode med .form-inlinevia mixin. Nogle formularkontrolelementer, som inputgrupper, kan kræve, at faste bredder vises korrekt i en navbar.
Forbehold for mobilenheder
Der er nogle forbehold vedrørende brug af formularkontrolelementer i faste elementer på mobile enheder. Se vores browsersupportdokumenter for detaljer.
Tilføj altid etiketter
Skærmlæsere vil have problemer med dine formularer, hvis du ikke inkluderer en etiket for hver input. For disse indlejrede formularer kan du skjule etiketterne ved hjælp af .sr-onlyklassen. Der er yderligere alternative metoder til at give en etiket for hjælpeteknologier, såsom aria-label, aria-labelledbyeller titleattributten. Hvis ingen af disse er til stede, kan skærmlæsere ty til at bruge placeholderattributten, hvis den findes, men bemærk, at brug af placeholdersom erstatning for andre mærkningsmetoder ikke tilrådes.
Knapper
Tilføj .navbar-btnklassen til <button>elementer, der ikke findes i a <form>for at centrere dem lodret i navigeringslinjen.
Kontekstspecifik brug
Ligesom standard knapklasserne kan .navbar-btnbruges på <a>og <input>elementer. Hverken .navbar-btneller standardknapklasserne bør dog bruges på <a>elementer inden for .navbar-nav.
Tekst
Ombryd tekststrenge i et element med .navbar-text, normalt på et <p>tag for at få den rigtige linjeføring og farve.
Ikke-nav-links
For folk, der bruger standardlinks, der ikke er inden for den almindelige navigeringskomponent, skal du bruge .navbar-linkklassen til at tilføje de rigtige farver til standard- og omvendte navbar-indstillinger.
Komponentjustering
Juster nav-links, formularer, knapper eller tekst ved hjælp af hjælpeklasserne .navbar-lefteller . .navbar-rightBegge 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-leftog .pull-right, men de er rettet mod medieforespørgsler for lettere håndtering af navbar-komponenter på tværs af enhedsstørrelser.
Højrejustering af flere komponenter
Navbars har i øjeblikket en begrænsning med flere .navbar-rightklasser. For at placere indhold korrekt, bruger vi negativ margen på det sidste .navbar-rightelement. Når der er flere elementer, der bruger den klasse, fungerer disse marginer ikke efter hensigten.
Vi vil se på dette igen, når vi kan omskrive den komponent i v4.
Fastgjort til toppen
Tilføj .navbar-fixed-topog medtag et .containereller .container-fluidtil center- og padnavigationslinjeindhold.
Kropspolstring påkrævet
Den faste navbar vil overlejre dit andet indhold, medmindre du tilføjer paddingtil toppen af <body>. Prøv dine egne værdier eller brug vores uddrag nedenfor. Tip: Som standard er navigationslinjen 50px høj.
Sørg for at inkludere dette efter kerne Bootstrap CSS.
Fastgjort til bunden
Tilføj .navbar-fixed-bottomog medtag et .containereller .container-fluidtil center- og padnavigationslinjeindhold.
Kropspolstring påkrævet
Den faste navbar vil overlejre dit andet indhold, medmindre du tilføjer paddingtil bunden af <body>. Prøv dine egne værdier eller brug vores uddrag nedenfor. Tip: Som standard er navigationslinjen 50px høj.
Sørg for at inkludere dette efter kerne Bootstrap CSS.
Statisk top
Opret en navigeringslinje i fuld bredde, der ruller væk med siden ved at tilføje .navbar-static-topog inkludere en .containereller .container-fluidfor at centrere og pads navbar indhold.
I modsætning til .navbar-fixed-*klasserne behøver du ikke at ændre polstring på body.
Omvendt navigeringslinje
Rediger udseendet af navigeringslinjen ved at tilføje .navbar-inverse.
Brødkrummer
Angiv den aktuelle sides placering i et navigationshierarki.
Separatorer tilføjes automatisk i CSS gennem :beforeog content.
Angiv pagineringslinks til dit websted eller din app med komponenten til flere siders paginering eller det enklere personsøgeralternativ .
Standard paginering
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.
Mærkning af pagineringskomponenten
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-labelfor 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".
Deaktiveret og aktiv tilstand
Links kan tilpasses til forskellige omstændigheder. Bruges .disabledtil uklikbare links og .activetil at angive den aktuelle side.
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.
Dimensionering
Kunne du tænke dig større eller mindre paginering? Tilføj .pagination-lgeller .pagination-smfor yderligere størrelser.
Personsøger
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.
Standard eksempel
Som standard centrerer personsøgeren links.
Justerede links
Alternativt kan du justere hvert link til siderne:
Valgfri deaktiveret tilstand
Pager-links bruger også den generelle .disabledhjælpeklasse fra pagineringen.
Etiketter
Eksempel
Eksempel overskrift Ny
Eksempel overskrift Ny
Eksempel overskrift Ny
Eksempel overskrift Ny
Eksempel overskrift Ny
Eksempel overskrift Ny
Tilgængelige varianter
Tilføj en af de nedenfor nævnte modifikatorklasser for at ændre udseendet af en etiket.
Standard Primær Success Info Advarsel Fare
Har du tonsvis af etiketter?
Gengivelsesproblemer kan opstå, når du har snesevis af inline-etiketter i en smal beholder, der hver indeholder sit eget inline-blockelement (som et ikon). Vejen rundt om dette er indstilling display: inline-block;. For kontekst og et eksempel, se #13219 .
Badges
Fremhæv nemt nye eller ulæste elementer ved at tilføje et <span class="badge">til links, Bootstrap-navigationer og mere.
For at gøre jumbotronen i fuld bredde, og uden afrundede hjørner, skal du placere den uden for alle .containers og i stedet tilføje en .containerindeni.
Sidehoved
En simpel skal h1til passende afstand og segmentering af sektioner af indhold på en side. Det kan bruge h1standardelementet 's smallsåvel som de fleste andre komponenter (med yderligere stilarter).
Eksempel på sidehoved Undertekst til sidehoved
Miniaturebilleder
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 .
Standard eksempel
Bootstraps thumbnails er som standard designet til at vise sammenkædede billeder med minimalt påkrævet opmærkning.
Tilpasset indhold
Med lidt ekstra markering er det muligt at tilføje enhver form for HTML-indhold som overskrifter, afsnit eller knapper til miniaturebilleder.
Miniaturelabel
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Giv kontekstuelle feedbackmeddelelser til typiske brugerhandlinger med den håndfuld tilgængelige og fleksible advarselsmeddelelser.
Eksempler
Pak enhver tekst og en valgfri afvis-knap ind i .alertog en af de fire kontekstuelle klasser (f.eks. .alert-success) til grundlæggende advarselsmeddelelser.
Ingen standardklasse
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.
Godt klaret! Du har læst denne vigtige advarselsmeddelelse.
Heads up! Denne advarsel kræver din opmærksomhed, men den er ikke super vigtig.
Advarsel! Tjek hellere selv, du ser ikke for godt ud.
Oh snap! Skift et par ting, og prøv at indsende igen.
Advarsler, der kan afvises
Byg videre på enhver advarsel ved at tilføje en valgfri .alert-dismissibleog lukkeknap.
Giv up-to-date feedback om fremskridtene af en arbejdsgang eller handling med enkle, men fleksible statuslinjer.
Cross-browser kompatibilitet
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.
Content Security Policy (CSP) kompatibilitet
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 styleattributter 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.
Grundlæggende eksempel
Standard statuslinje.
60 % færdig
Med etiket
Fjern <span>med .sr-only-klassen fra statuslinjen for at vise en synlig procentdel.
60 %
For at sikre, at etiketteksten forbliver læselig selv for lave procenter, kan du overveje at tilføje et min-widthtil statuslinjen.
0 %
2 %
Kontekstuelle alternativer
Fremskridtslinjer bruger nogle af de samme knap- og advarselsklasser til ensartede stilarter.
40 % gennemført (succes)
20% færdig
60 % gennemført (advarsel)
80 % fuldført (fare)
Stribet
Bruger en gradient til at skabe en stribet effekt. Ikke tilgængelig i IE9 og derunder.
40 % gennemført (succes)
20% færdig
60 % gennemført (advarsel)
80 % fuldført (fare)
Animeret
Tilføj .activetil .progress-bar-stripedfor at animere striberne fra højre mod venstre. Ikke tilgængelig i IE9 og derunder.
45 % gennemført
Stablet
Placer flere stænger i det samme .progressfor at stable dem.
35 % gennemført (succes)
20 % gennemført (advarsel)
10 % fuldført (fare)
Medieobjekt
Abstrakte objektstile til at bygge forskellige typer komponenter (såsom blogkommentarer, tweets osv.), der har et venstre- eller højrejusteret billede sammen med tekstindhold.
Standardmedie
Standardmediet viser et medieobjekt (billeder, video, lyd) til venstre eller højre for en indholdsblok.
Mediers overskrift
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.
Mediers overskrift
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.
Indlejret medieoverskrift
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.
Mediers overskrift
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.
Mediers overskrift
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.
Klasserne .pull-leftog .pull-rightfindes 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-leftog .media-right, bortset fra at de .media-rightskal placeres efter .media-bodyi html'en.
Mediejustering
Billederne eller andre medier kan justeres øverst, midterste eller nederst. Standard er topjusteret.
Topjusterede medier
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.
Midtjusteret medie
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.
Bundjusteret medie
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.
Medieliste
Med lidt ekstra opmærkning kan du bruge medier inde i listen (nyttigt til kommentartråde eller artikellister).
Mediers overskrift
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.
Indlejret medieoverskrift
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.
Indlejret medieoverskrift
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.
Indlejret medieoverskrift
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.
Listegruppe
Listegrupper er en fleksibel og kraftfuld komponent til at vise ikke kun simple lister over elementer, men komplekse med tilpasset indhold.
Grundlæggende eksempel
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.
Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Porta ac consectetur ac
Vestibulum ved eros
Badges
Tilføj badges-komponenten til ethvert listegruppeelement, og det vil automatisk blive placeret til højre.
14 Cras justo odio
2 Dapibus ac facilisis i
1 Morbi leo risus
Tilknyttede varer
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.
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 .btnher.
Deaktiverede varer
Tilføj .disabledtil en .list-group-itemfor at nedtone den for at se deaktiveret ud.
Selvom det ikke altid er nødvendigt, skal du nogle gange lægge din DOM i en boks. Prøv panelkomponenten i disse situationer.
Grundlæggende eksempel
Som standard er alt, hvad .panelder skal til, at anvende nogle grundlæggende rammer og polstring for at indeholde noget indhold.
Grundlæggende paneleksempel
Panel med overskrift
Tilføj nemt en overskriftsbeholder til dit panel med .panel-heading. Du kan også inkludere en hvilken som helst <h1>- <h6>med en .panel-titleklasse 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.
Paneloverskrift uden titel
Panelindhold
Panelets titel
Panelindhold
Panel med sidefod
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.
Panelindhold
Kontekstuelle alternativer
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.
Panelets titel
Panelindhold
Panelets titel
Panelindhold
Panelets titel
Panelindhold
Panelets titel
Panelindhold
Panelets titel
Panelindhold
Med borde
Tilføj ethvert panel uden grænser .tablefor et sømløst design. Hvis der er en .panel-body, tilføjer vi en ekstra kant til toppen af bordet til adskillelse.
Paneloverskrift
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
@twitter
Hvis der ikke er nogen paneltekst, flyttes komponenten fra paneloverskrift til tabel uden afbrydelse.
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.
Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Porta ac consectetur ac
Vestibulum ved eros
Responsiv indlejring
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-itemnå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.
Wells
Standard godt
Brug brønden som en simpel effekt på et element for at give det en indsat effekt.
Se, jeg er i en brønd!
Valgfri klasser
Kontrolpolstring og afrundede hjørner med to valgfri modifikationsklasser.