JavaScript
Bring Bootstraps komponenter til live med over et dusin tilpassede jQuery-plugins. Medtag nemt dem alle eller én efter én.
Bring Bootstraps komponenter til live med over et dusin tilpassede jQuery-plugins. Medtag nemt dem alle eller én efter én.
Plugins kan inkluderes individuelt (ved hjælp af Bootstraps individuelle *.js
filer), eller alle på én gang (ved hjælp af bootstrap.js
eller den minificerede bootstrap.min.js
).
Både bootstrap.js
og bootstrap.min.js
indeholder alle plugins i en enkelt fil. Medtag kun én.
Nogle plugins og CSS-komponenter afhænger af andre plugins. Hvis du inkluderer plugins individuelt, skal du sørge for at tjekke for disse afhængigheder i dokumenterne. Bemærk også, at alle plugins afhænger af jQuery (dette betyder, at jQuery skal inkluderes før plugin-filerne). Se voresbower.json
for at se, hvilke versioner af jQuery der understøttes.
Du kan bruge alle Bootstrap-plugins udelukkende gennem markup-API'en uden at skrive en enkelt linje JavaScript. Dette er Bootstraps førsteklasses API og bør være din første overvejelse, når du bruger et plugin.
Når det er sagt, kan det i nogle situationer være ønskeligt at slå denne funktionalitet fra. Derfor giver vi også mulighed for at deaktivere dataattributten API ved at ophæve alle hændelser på dokumentet med navneafstand data-api
. Dette ser sådan ud:
Alternativt, for at målrette mod et specifikt plugin, skal du blot inkludere plugin's navn som et navneområde sammen med data-api navneområdet som dette:
Brug ikke dataattributter fra flere plugins på det samme element. For eksempel kan en knap ikke både have et værktøjstip og skifte modal. For at opnå dette skal du bruge et indpakningselement.
Vi mener også, at du skal være i stand til at bruge alle Bootstrap-plugins udelukkende gennem JavaScript API. Alle offentlige API'er er enkeltstående, kædebare metoder og returnerer den indsamling, der blev handlet på.
Alle metoder bør acceptere et valgfrit option-objekt, en streng, der er målrettet mod en bestemt metode, eller ingenting (som starter et plugin med standardadfærd):
Hvert plugin afslører også sin rå konstruktør på en Constructor
egenskab: $.fn.popover.Constructor
. Hvis du gerne vil have en bestemt plugin-instans, skal du hente den direkte fra et element: $('[rel="popover"]').data('popover')
.
Du kan ændre standardindstillingerne for et plugin ved at ændre pluginets Constructor.DEFAULTS
objekt:
Nogle gange er det nødvendigt at bruge Bootstrap-plugins med andre UI-rammer. Under disse omstændigheder kan navneområdekollisioner lejlighedsvis forekomme. Hvis dette sker, kan du ringe .noConflict
til det plugin, du ønsker at gendanne værdien af.
Bootstrap leverer tilpassede begivenheder til de fleste plugins' unikke handlinger. Generelt kommer disse i en infinitiv og en perfektum form - hvor infinitiv (eks. show
) udløses ved starten af en begivenhed, og dens participiumform (eks. shown
) udløses ved afslutningen af en handling.
Fra og med 3.0.0 er alle Bootstrap-begivenheder navngivet.
Alle infinitive begivenheder giver preventDefault
funktionalitet. Dette giver mulighed for at stoppe udførelsen af en handling, før den starter.
Versionen af hver af Bootstraps jQuery-plugins kan tilgås via VERSION
egenskaben af plugin-konstruktøren. For eksempel til værktøjstip-plugin:
Bootstraps plugins falder ikke særlig yndefuldt tilbage, når JavaScript er deaktiveret. Hvis du bekymrer dig om brugeroplevelsen i dette tilfælde, skal du bruge <noscript>
til at forklare situationen (og hvordan du genaktiverer JavaScript) for dine brugere og/eller tilføje dine egne tilpassede reserver.
Bootstrap understøtter ikke officielt tredjeparts JavaScript-biblioteker som Prototype eller jQuery UI. På trods .noConflict
af begivenheder med navneafstand kan der være kompatibilitetsproblemer, som du skal løse på egen hånd.
For enkle overgangseffekter skal du inkludere transition.js
én gang sammen med de andre JS-filer. Hvis du bruger det kompilerede (eller minificerede) bootstrap.js
, er det ikke nødvendigt at inkludere dette – det er der allerede.
Transition.js er en grundlæggende hjælper til transitionEnd
begivenheder såvel som en CSS-overgangsemulator. Det bruges af de andre plugins til at tjekke for CSS overgangsunderstøttelse og til at fange hængende overgange.
Overgange kan deaktiveres globalt ved hjælp af følgende JavaScript-kodestykke, som skal komme efter transition.js
(eller bootstrap.js
eller bootstrap.min.js
, alt efter tilfældet) er indlæst:
Modalerne er strømlinede, men fleksible, dialogmeddelelser med den mindst nødvendige funktionalitet og smarte standardindstillinger.
Sørg for ikke at åbne en modal, mens en anden stadig er synlig. Visning af mere end én modal ad gangen kræver tilpasset kode.
Forsøg altid at placere en modals HTML-kode på øverste niveau i dit dokument for at undgå, at andre komponenter påvirker modalens udseende og/eller funktionalitet.
Der er nogle forbehold vedrørende brug af modals på mobile enheder. Se vores browsersupportdokumenter for detaljer.
På grund af hvordan HTML5 definerer sin semantik, har autofocus
HTML-attributten ingen effekt i Bootstrap-modaler. For at opnå den samme effekt skal du bruge noget tilpasset JavaScript:
En gengivet modal med sidehoved, brødtekst og sæt handlinger i sidefoden.
Skift en modal via JavaScript ved at klikke på knappen nedenfor. Det vil glide ned og fade ind fra toppen af siden.
Sørg for at tilføje role="dialog"
og aria-labelledby="..."
, med henvisning til den modale titel, til .modal
, og role="document"
til sig .modal-dialog
selv.
Derudover kan du give en beskrivelse af din modale dialog med aria-describedby
på .modal
.
Indlejring af YouTube-videoer i modaler kræver yderligere JavaScript, der ikke er i Bootstrap for automatisk at stoppe afspilning og mere. Se dette nyttige Stack Overflow-indlæg for mere information.
Modaler har to valgfrie størrelser, tilgængelige via modifikationsklasser, der kan placeres på en .modal-dialog
.
For modaler, der blot vises i stedet for at falme ind for at se, skal du fjerne .fade
klassen fra din modale markup.
For at drage fordel af Bootstrap-gittersystemet inden for en modal skal du blot indlejre .row
s inden for .modal-body
og derefter bruge de normale gittersystemklasser.
Har du en masse knapper, der alle udløser den samme modal, bare med lidt forskelligt indhold? Brug event.relatedTarget
og HTML- data-*
attributter (evt. via jQuery ) til at variere indholdet af modalen afhængigt af hvilken knap der blev klikket på. Se dokumentationen til Modal Events for detaljer om relatedTarget
,
Det modale plugin skifter dit skjulte indhold efter behov via dataattributter eller JavaScript. Det tilføjer også .modal-open
til <body>
at tilsidesætte standard rulleadfærd og genererer et .modal-backdrop
klikområde til at afvise viste modaler, når der klikkes uden for modalen.
Aktiver en modal uden at skrive JavaScript. Indstil data-toggle="modal"
på et controller-element, som en knap, sammen med et data-target="#foo"
eller href="#foo"
for at målrette en bestemt modal til at skifte.
Kald en modal med id myModal
med en enkelt linje JavaScript:
Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-
, som i data-backdrop=""
.
Navn | type | Standard | beskrivelse |
---|---|---|---|
baggrund | boolesk eller strengen'static' |
rigtigt | Indeholder et modal-baggrundselement. Alternativt kan du angive static for en baggrund, som ikke lukker modalen ved klik. |
tastatur | boolesk | rigtigt | Lukker modalen, når der trykkes på escape-tasten |
at vise | boolesk | rigtigt | Viser modal ved initialisering. |
fjern | sti | falsk | Denne indstilling er forældet siden v3.3.0 og er blevet fjernet i v4. Vi anbefaler i stedet at bruge skabeloner på klientsiden eller en databindingsramme eller selv at kalde jQuery.load . Hvis en ekstern URL er angivet, vil indholdet blive indlæst én gang via jQuerys |
.modal(options)
Aktiverer dit indhold som en modal. Accepterer en valgfri indstilling object
.
.modal('toggle')
Skifter manuelt en modal. Vender tilbage til den, der ringer, før modalen faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.modal
eller hidden.bs.modal
indtræffer).
.modal('show')
Åbner manuelt en modal. Vender tilbage til den, der ringer, før modalen faktisk er blevet vist (dvs. før shown.bs.modal
hændelsen indtræffer).
.modal('hide')
Skjuler manuelt en modal. Vender tilbage til den, der ringer, før modalen rent faktisk er blevet skjult (dvs. før hidden.bs.modal
hændelsen indtræffer).
.modal('handleUpdate')
Justerer modalens positionering for at modvirke en rullebjælke, hvis en skulle dukke op, hvilket ville få modalen til at springe til venstre.
Kun nødvendig, når højden af modalen ændres, mens den er åben.
Bootstraps modal-klasse afslører nogle få hændelser for tilslutning til modal funktionalitet.
Alle modale hændelser skydes mod selve modalen (dvs. på <div class="modal">
).
Begivenhedstype | Beskrivelse |
---|---|
show.bs.modal | Denne hændelse udløses med det samme, når show instansmetoden kaldes. Hvis det er forårsaget af et klik, er det klikkede element tilgængeligt som relatedTarget hændelsens egenskab. |
vist.bs.modal | Denne hændelse udløses, når modalen er gjort synlig for brugeren (vil vente på, at CSS-overgange er fuldført). Hvis det er forårsaget af et klik, er det klikkede element tilgængeligt som relatedTarget hændelsens egenskab. |
hide.bs.modal | Denne hændelse udløses straks, når hide instansmetoden er blevet kaldt. |
skjult.bs.modal | Denne hændelse udløses, når modalen er færdig med at blive skjult for brugeren (vil vente på, at CSS-overgange er fuldført). |
loaded.bs.modal | Denne hændelse udløses, når modalen har indlæst indhold ved hjælp af remote indstillingen. |
Tilføj rullemenuer til næsten alt med dette enkle plugin, inklusive navbaren, fanerne og pillerne.
Via dataattributter eller JavaScript skifter dropdown-pluginnet skjult indhold (rullemenuer) ved at skifte .open
klassen på det overordnede listeelement.
På mobile enheder tilføjer åbning af en rullemenu et .dropdown-backdrop
som et trykområde til lukning af rullemenuer, når du trykker uden for menuen, et krav for korrekt iOS-understøttelse. Det betyder, at skift fra en åben rullemenu til en anden rullemenu kræver et ekstra tryk på mobilen.
Bemærk: data-toggle="dropdown"
Attributten er afhængig af at lukke rullemenuer på et programniveau, så det er en god idé altid at bruge det.
Føj data-toggle="dropdown"
til et link eller knap for at skifte til en rullemenu.
For at holde URL'er intakte med linkknapper skal du bruge data-target
attributten i stedet for href="#"
.
Kald rullemenuerne via JavaScript:
data-toggle="dropdown"
stadig påkrævetUanset om du kalder din dropdown via JavaScript eller i stedet bruger data-api, data-toggle="dropdown"
skal du altid være tilstede på dropdownens triggerelement.
Ingen
$().dropdown('toggle')
Skifter rullemenuen for en given navigationslinje eller navigation med faner.
Alle dropdown-hændelser udløses på .dropdown-menu
's overordnede element.
Alle dropdown-hændelser har en relatedTarget
egenskab, hvis værdi er det skiftende ankerelement.
Begivenhedstype | Beskrivelse |
---|---|
vis.bs.dropdown | Denne hændelse udløses med det samme, når vis-instansmetoden kaldes. |
vist.bs.dropdown | Denne hændelse udløses, når rullemenuen er gjort synlig for brugeren (vil vente på CSS-overgange for at fuldføre). |
hide.bs.dropdown | Denne hændelse udløses med det samme, når hide instansmetoden er blevet kaldt. |
skjult.bs.rullemenu | Denne hændelse udløses, når dropdown-menuen er færdig med at blive skjult for brugeren (vil vente på CSS-overgange for at fuldføre). |
ScrollSpy-plugin'et er til automatisk opdatering af nav-mål baseret på rulleposition. Rul gennem området under navigeringslinjen, og se den aktive klasse ændre sig. Underelementerne i rullemenuen vil også blive fremhævet.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi før de udsolgte qui. Tumblr cykelrettigheder fra jord til bord uanset hvad. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hættetrøje minim qui du sandsynligvis ikke har hørt om dem og cardigan trust fund culpa biodiesel wes anderson æstetiske. Nihil tatoveret accusamus, cred ironi biodiesel keffiyeh håndværker ullamco consequat.
Veniam marfa overskæg skateboard, adipisicing fugiat velit pitchfork skæg. Freegan skæg aliqua cupidatat mcsweeney's vero. Cupidatat fire loko nisi, ea helvetica nulla carles. Tatoveret cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles ikke-æstetisk øvelse quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS er adipisicing. Consectetur nisi DIY minim messenger taske. Cred ex in, sustainable delectus consectetur fanny pack iphone.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats du sikkert ikke har hørt om dem consequat hættetrøje glutenfri lo-fi fap aliquip. Labore elit placeat før de solgte ud, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Navbar-links skal have opløselige id-mål. For eksempel skal et <a href="#home">home</a>
svar svare til noget i DOM som <div id="home"></div>
.
:visible
målelementer ignoreretMålelementer, der ikke er i :visible
henhold til jQuery , vil blive ignoreret, og deres tilsvarende nav-elementer vil aldrig blive fremhævet.
Uanset implementeringsmetoden kræver scrollspy brugen af position: relative;
det element, du spionerer på. I de fleste tilfælde er dette <body>
. Når du scrollspyer på andre elementer end <body>
, skal du sørge for at have et height
sæt og overflow-y: scroll;
anvendt.
For nemt at tilføje scrollspy-adfærd til din topbjælke-navigation, skal du tilføje data-spy="scroll"
til det element, du vil spionere på (det vil oftest være <body>
). Tilføj derefter data-target
attributten med ID'et eller klassen for det overordnede element for enhver Bootstrap- .nav
komponent.
Efter at have tilføjet position: relative;
din CSS, ring til scrollspy via JavaScript:
.scrollspy('refresh')
Når du bruger scrollspy i forbindelse med tilføjelse eller fjernelse af elementer fra DOM, skal du kalde opdateringsmetoden sådan:
Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-
, som i data-offset=""
.
Navn | type | Standard | beskrivelse |
---|---|---|---|
offset | nummer | 10 | Pixels til forskydning fra toppen ved beregning af rulleposition. |
Begivenhedstype | Beskrivelse |
---|---|
activate.bs.scrollspy | Denne begivenhed udløses, når et nyt element bliver aktiveret af scrollspyen. |
Tilføj hurtig, dynamisk fanefunktionalitet til overgang gennem ruder med lokalt indhold, selv via rullemenuer. Indlejrede faner understøttes ikke.
Rå denim du har sikkert ikke hørt om dem jeanshorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegansk helvetica. Reprehenderit slagter retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerikansk beklædning, slagter voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Dette plugin udvider navigationskomponenten med faner for at tilføje områder med tabulatorer.
Aktiver faner, der kan tabuleres via JavaScript (hver fane skal aktiveres individuelt):
Du kan aktivere individuelle faner på flere måder:
Du kan aktivere en fane- eller pillenavigation uden at skrive JavaScript ved blot at angive data-toggle="tab"
eller data-toggle="pill"
på et element. Tilføjelse af klasserne og til fanen nav
vil anvende Bootstrap- fanens styling , mens tilføjelse af klasserne og vil anvende pille-styling .nav-tabs
ul
nav
nav-pills
For at få faner til at falme ind, skal du tilføje .fade
til hver .tab-pane
. Den første fanerude skal også .in
gøre det oprindelige indhold synligt.
$().tab
Aktiverer et faneelement og indholdsbeholder. Tab skal have enten en data-target
eller en href
målretning mod en containernode i DOM. I ovenstående eksempler er fanerne <a>
s med data-toggle="tab"
attributter.
.tab('show')
Vælger den givne fane og viser dens tilknyttede indhold. Enhver anden fane, der tidligere er valgt, bliver fravalgt, og dens tilknyttede indhold er skjult. Vender tilbage til den, der ringer, før faneruden faktisk er blevet vist (dvs. før shown.bs.tab
hændelsen indtræffer).
Når du viser en ny fane, udløses begivenhederne i følgende rækkefølge:
hide.bs.tab
(på den aktuelle aktive fane)show.bs.tab
(på fanen der skal vises)hidden.bs.tab
(på den forrige aktive fane, den samme som for hide.bs.tab
begivenheden)shown.bs.tab
(på det nyligt aktive faneblad, det samme som for show.bs.tab
begivenheden)Hvis ingen fane allerede var aktiv, vil begivenhederne hide.bs.tab
og hidden.bs.tab
ikke blive udløst.
Begivenhedstype | Beskrivelse |
---|---|
show.bs.tab | Denne begivenhed udløses på faneshow, men før den nye fane er blevet vist. Brug event.target og event.relatedTarget til at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig). |
vist.bs.faneblad | Denne begivenhed udløses på faneshow, efter at en fane er blevet vist. Brug event.target og event.relatedTarget til at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig). |
hide.bs.tab | Denne hændelse udløses, når en ny fane skal vises (og dermed skal den tidligere aktive fane skjules). Brug event.target og event.relatedTarget til at målrette henholdsvis den aktuelle aktive fane og den nye snart-aktive fane. |
skjult.bs.fane | Denne hændelse udløses, efter at en ny fane er vist (og dermed er den tidligere aktive fane skjult). Brug event.target og event.relatedTarget til at målrette henholdsvis den forrige aktive fane og den nye aktive fane. |
Inspireret af det fremragende jQuery.tipsy plugin skrevet af Jason Frame; Værktøjstip er en opdateret version, som ikke er afhængig af billeder, bruger CSS3 til animationer og dataattributter til lokal titellagring.
Værktøjstip med titler på nul længde vises aldrig.
Hold markøren over nedenstående links for at se værktøjstip:
Stramme bukser næste niveau keffiyeh du har sikkert ikke hørt om dem. Photo booth skæg rå denim bogtryk vegansk messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie bæredygtige quinoa 8-bit amerikansk beklædning har en frotté richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fire loko mcsweeney's cleanse veganske chambray. En virkelig ironisk håndværker uanset keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin kaffe viral.
Fire muligheder er tilgængelige: top-, højre-, bund- og venstrejusteret.
Af præstationsmæssige årsager er Tooltip og Popover data-api'erne tilvalgte, hvilket betyder, at du selv skal initialisere dem .
En måde at initialisere alle værktøjstip på en side ville være at vælge dem efter deres data-toggle
egenskab:
Værktøjstip-pluginnet genererer indhold og opmærkning efter behov og placerer som standard værktøjstip efter deres udløserelement.
Udløs værktøjstippet via JavaScript:
Den nødvendige markering for et værktøjstip er kun en data
attribut, og title
på HTML-elementet ønsker du at have et værktøjstip. Den genererede markering af et værktøjstip er ret enkel, selvom den kræver en position (som standard indstillet til top
af plugin).
Nogle gange vil du tilføje et værktøjstip til et hyperlink, der ombryder flere linjer. Værktøjstip-plugin'ets standardadfærd er at centrere det vandret og lodret. Tilføj white-space: nowrap;
til dine ankre for at undgå dette.
Når du bruger værktøjstip på elementer i et .btn-group
eller et .input-group
, eller på tabelrelaterede elementer ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), skal du angive muligheden container: 'body'
(dokumenteret nedenfor) for at undgå uønskede bivirkninger (såsom elementet bliver bredere og/ eller mister sine afrundede hjørner, når værktøjstip udløses).
For brugere, der navigerer med et tastatur, og især brugere af hjælpeteknologier, bør du kun tilføje værktøjstip til elementer, der kan fokuseres på tastaturet, såsom links, formularkontrolelementer eller ethvert vilkårligt element med en tabindex="0"
attribut.
For at tilføje et værktøjstip til et disabled
eller .disabled
element skal du placere elementet inde i et <div>
og anvende værktøjstip til det <div>
i stedet.
Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-
, som i data-animation=""
.
Navn | Type | Standard | Beskrivelse |
---|---|---|---|
animation | boolesk | rigtigt | Anvend en CSS-fade-overgang til værktøjstip |
beholder | streng | falsk | falsk | Føjer værktøjstip til et bestemt element. Eksempel: |
forsinke | nummer | objekt | 0 | Forsinket visning og skjulning af værktøjstip (ms) - gælder ikke for manuel triggertype Hvis et nummer er angivet, anvendes forsinkelse på både skjul/show Objektstrukturen er: |
html | boolesk | falsk | Indsæt HTML i værktøjstippet. Hvis falsk, vil jQuerys text metode blive brugt til at indsætte indhold i DOM. Brug tekst, hvis du er bekymret for XSS-angreb. |
placering | streng | fungere | 'top' | Sådan placeres værktøjstip - top | nederst | venstre | højre | auto. Når en funktion bruges til at bestemme placeringen, kaldes den med værktøjstip DOM-knudepunktet som dets første argument og det udløsende element DOM-noden som dets andet. Konteksten |
vælger | snor | falsk | Hvis der er angivet en vælger, vil værktøjstip-objekter blive uddelegeret til de angivne mål. I praksis bruges dette til at give dynamisk HTML-indhold tilføjet værktøjstip. Se dette og et informativt eksempel . |
skabelon | snor | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Base HTML til brug ved oprettelse af værktøjstip. Værktøjstip
Det yderste indpakningselement skal have |
titel | streng | fungere | '' | Standard titelværdi, hvis Hvis en funktion er givet, vil den blive kaldt med dens |
udløser | snor | 'hover fokus' | Hvordan værktøjstip udløses - klik | svæv | fokus | brugervejledning. Du kan passere flere triggere; adskille dem med et mellemrum. manual kan ikke kombineres med nogen anden trigger. |
viewport | streng | objekt | fungere | { selector: 'body', polstring: 0 } | Holder værktøjstip inden for dette elements grænser. Eksempel: Hvis en funktion er givet, kaldes den med det udløsende element DOM node som eneste argument. Konteksten |
Valgmuligheder for individuelle værktøjstip kan alternativt specificeres ved brug af dataattributter, som forklaret ovenfor.
$().tooltip(options)
Vedhæfter en værktøjstip-handler til en elementsamling.
.tooltip('show')
Viser et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip faktisk er blevet vist (dvs. før shown.bs.tooltip
hændelsen indtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip. Værktøjstip med titler på nul længde vises aldrig.
.tooltip('hide')
Skjuler et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip rent faktisk er blevet skjult (dvs. før hidden.bs.tooltip
hændelsen indtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip.
.tooltip('toggle')
Skifter et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.tooltip
eller hidden.bs.tooltip
indtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip.
.tooltip('destroy')
Skjuler og ødelægger et elements værktøjstip. Værktøjstip, der bruger delegering (som oprettes ved hjælp af selector
muligheden ), kan ikke individuelt destrueres på efterkommer-triggerelementer.
Begivenhedstype | Beskrivelse |
---|---|
vis.bs.værktøjstip | Denne hændelse udløses med det samme, når show instansmetoden kaldes. |
vist.bs.værktøjstip | Denne hændelse udløses, når værktøjstippet er gjort synligt for brugeren (vil vente på, at CSS-overgange er fuldført). |
skjule.bs.værktøjstip | Denne hændelse udløses straks, når hide instansmetoden er blevet kaldt. |
skjult.bs.værktøjstip | Denne hændelse udløses, når værktøjstip er færdig med at blive skjult for brugeren (vil vente på, at CSS-overgange er fuldført). |
indsat.bs.værktøjstip | Denne hændelse udløses efter show.bs.tooltip hændelsen, når værktøjstip-skabelonen er blevet tilføjet til DOM. |
Tilføj små overlejringer af indhold, som dem på iPad, til ethvert element for at rumme sekundær information.
Popovers, hvis både titel og indhold er nul-længde, vises aldrig.
Popovers kræver, at værktøjstip-plugin'et er inkluderet i din version af Bootstrap.
Af præstationsmæssige årsager er Tooltip og Popover data-api'erne tilvalgte, hvilket betyder, at du selv skal initialisere dem .
En måde at initialisere alle popovers på en side ville være at vælge dem efter deres data-toggle
egenskab:
Når du bruger popovers på elementer i et .btn-group
eller et .input-group
, eller på tabelrelaterede elementer ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), skal du angive muligheden container: 'body'
(dokumenteret nedenfor) for at undgå uønskede bivirkninger (såsom elementet bliver bredere og/ eller mister sine afrundede hjørner, når popover udløses).
For at tilføje en popover til et disabled
eller .disabled
element, skal du lægge elementet inde i et <div>
og anvende popover på det <div>
i stedet.
Nogle gange vil du tilføje en popover til et hyperlink, der omslutter flere linjer. Popover-pluginnets standardopførsel er at centrere det vandret og lodret. Tilføj white-space: nowrap;
til dine ankre for at undgå dette.
Fire muligheder er tilgængelige: top-, højre-, bund- og venstrejusteret.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Brug focus
triggeren til at afvise popovers ved det næste klik, som brugeren foretager.
For korrekt adfærd på tværs af browsere og på tværs af platforme skal du bruge <a>
tagget, ikke<button>
tagget, og du skal også inkludere role="button"
og tabindex
attributterne.
Aktiver popovers via JavaScript:
Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-
, som i data-animation=""
.
Navn | Type | Standard | Beskrivelse |
---|---|---|---|
animation | boolesk | rigtigt | Anvend en CSS-fade-overgang til popoveren |
beholder | streng | falsk | falsk | Føjer popover til et bestemt element. Eksempel: |
indhold | streng | fungere | '' | Standardindholdsværdi if Hvis en funktion er givet, vil den blive kaldt med dens |
forsinke | nummer | objekt | 0 | Forsinket visning og skjulning af popover (ms) - gælder ikke for manuel triggertype Hvis et nummer er angivet, anvendes forsinkelse på både skjul/show Objektstrukturen er: |
html | boolesk | falsk | Indsæt HTML i popoveren. Hvis falsk, vil jQuerys text metode blive brugt til at indsætte indhold i DOM. Brug tekst, hvis du er bekymret for XSS-angreb. |
placering | streng | fungere | 'ret' | Sådan placeres popover - top | nederst | venstre | højre | auto. Når en funktion bruges til at bestemme placeringen, kaldes den med popover DOM-knuden som dets første argument og det udløsende element DOM-noden som dens anden. Konteksten |
vælger | snor | falsk | Hvis der er angivet en vælger, vil popover-objekter blive uddelegeret til de angivne mål. I praksis bruges dette til at gøre det muligt for dynamisk HTML-indhold at tilføje popovers. Se dette og et informativt eksempel . |
skabelon | snor | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Base HTML til brug ved oprettelse af popover. Popover'erne Popover'erne
Det yderste indpakningselement skal have |
titel | streng | fungere | '' | Standard titelværdi, hvis Hvis en funktion er givet, vil den blive kaldt med dens |
udløser | snor | 'klik' | Hvordan popover udløses - klik | svæv | fokus | brugervejledning. Du kan passere flere triggere; adskille dem med et mellemrum. manual kan ikke kombineres med nogen anden trigger. |
viewport | streng | objekt | fungere | { selector: 'body', polstring: 0 } | Holder popover inden for dette elements grænser. Eksempel: Hvis en funktion er givet, kaldes den med det udløsende element DOM node som eneste argument. Konteksten |
Valgmuligheder for individuelle popovers kan alternativt specificeres ved brug af dataattributter, som forklaret ovenfor.
$().popover(options)
Initialiserer popovers for en elementsamling.
.popover('show')
Afslører et elements popover. Vender tilbage til den, der ringer, før popover-vinduet rent faktisk er blevet vist (dvs. før shown.bs.popover
hændelsen indtræffer). Dette betragtes som en "manuel" udløsning af popover. Popovers, hvis både titel og indhold er nul-længde, vises aldrig.
.popover('hide')
Skjuler et elements popover. Vender tilbage til den, der ringer, før popover faktisk er blevet skjult (dvs. før hidden.bs.popover
hændelsen indtræffer). Dette betragtes som en "manuel" udløsning af popover.
.popover('toggle')
Skifter et elements popover. Vender tilbage til den, der ringer, før pop-over faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.popover
eller hidden.bs.popover
indtræffer). Dette betragtes som en "manuel" udløsning af popover.
.popover('destroy')
Skjuler og ødelægger et elements popover. Popovers, der bruger delegering (som oprettes ved hjælp af selector
muligheden ), kan ikke individuelt destrueres på descendant trigger-elementer.
Begivenhedstype | Beskrivelse |
---|---|
show.bs.popover | Denne hændelse udløses med det samme, når show instansmetoden kaldes. |
vist.bs.popover | Denne hændelse udløses, når popoveren er gjort synlig for brugeren (vil vente på, at CSS-overgange er fuldført). |
hide.bs.popover | Denne hændelse udløses straks, når hide instansmetoden er blevet kaldt. |
skjult.bs.popover | Denne hændelse udløses, når popoveren er færdig med at blive skjult for brugeren (vil vente på, at CSS-overgange er fuldført). |
indsat.bs.popover | Denne hændelse udløses efter show.bs.popover hændelsen, når popover-skabelonen er blevet tilføjet til DOM. |
Tilføj afvisningsfunktionalitet til alle advarselsmeddelelser med dette plugin.
Når du bruger en .close
knap, skal den være det første underordnede af den, .alert-dismissible
og der må ikke komme noget tekstindhold før den i markeringen.
Skift dit og dat og prøv igen. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Du skal bare tilføje data-dismiss="alert"
til din lukkeknap for automatisk at give en alarmlukningsfunktionalitet. Lukning af en alarm fjerner den fra DOM.
For at få dine alarmer til at bruge animation, når de lukker, skal du sørge for, at de har .fade
og.in
klasserne
$().alert()
Får en advarsel til at lytte efter klikhændelser på efterkommerelementer, som har data-dismiss="alert"
attributten. (Ikke nødvendigt, når du bruger data-API's automatiske initialisering.)
$().alert('close')
Lukker en advarsel ved at fjerne den fra DOM. Hvis klasserne .fade
og .in
er til stede på elementet, vil advarslen fade ud, før den fjernes.
Bootstraps advarselsplugin afslører nogle få hændelser for at tilslutte sig advarselsfunktionalitet.
Begivenhedstype | Beskrivelse |
---|---|
close.bs.alert | Denne hændelse udløses med det samme, når close instansmetoden kaldes. |
lukket.bs.alarm | Denne hændelse udløses, når alarmen er blevet lukket (vil vente på, at CSS-overgange er fuldført). |
Gør mere med knapper. Styr knaptilstande eller opret grupper af knapper til flere komponenter som værktøjslinjer.
Firefox fortsætter i form af kontroltilstande (deaktiveret og tjekket) på tværs af sideindlæsninger . En løsning for dette er at bruge autocomplete="off"
. Se Mozilla-fejl #654072 .
Tilføj data-loading-text="Loading..."
for at bruge en indlæsningstilstand på en knap.
Denne funktion er forældet siden v3.3.5 og er blevet fjernet i v4.
Af hensyn til denne demonstration bruger vi data-loading-text
og $().button('loading')
, men det er ikke den eneste tilstand, du kan bruge. Se mere om dette nedenfor i $().button(string)
dokumentationen .
Tilføj data-toggle="button"
for at aktivere skifte på en enkelt knap.
.active
ogaria-pressed="true"
For præ-skiftede knapper skal du tilføje .active
klassen og aria-pressed="true"
attributten til button
dig selv.
Tilføj data-toggle="buttons"
til et .btn-group
indeholdende afkrydsningsfelt eller radioindgange for at aktivere skifte i deres respektive stilarter.
.active
For forudvalgte muligheder skal du selv tilføje .active
klassen til input's label
.
Hvis den afkrydsede tilstand af en afkrydsningsboksknap opdateres uden at udløse en click
hændelse på knappen (f.eks. via <input type="reset">
eller via indstilling af checked
egenskaben for input), skal du selv skifte .active
klassen til inputtet label
.
$().button('toggle')
Skifter push-tilstand. Giver knappen det udseende, at den er blevet aktiveret.
$().button('reset')
Nulstiller knaptilstand - bytter tekst til original tekst. Denne metode er asynkron og vender tilbage, før nulstillingen rent faktisk er fuldført.
$().button(string)
Skifter tekst til enhver datadefineret teksttilstand.
Fleksibelt plugin, der bruger en håndfuld klasser til nem skifteadfærd.
Collapse kræver, at overgangspluginnet er inkluderet i din version af Bootstrap.
Klik på knapperne nedenfor for at vise og skjule et andet element via klasseændringer:
.collapse
skjuler indhold.collapsing
anvendes under overgange.collapse.in
viser indholdDu kan bruge et link med href
attributten eller en knap med data-target
attributten. I begge tilfælde er det data-toggle="collapse"
påkrævet.
Udvid standardsammenbrudsadfærden for at skabe en harmonika med panelkomponenten.
Det er også muligt at bytte .panel-body
s ud med .list-group
s.
Sørg for at tilføje aria-expanded
til kontrolelementet. Denne attribut definerer eksplicit den aktuelle tilstand af det sammenklappelige element til skærmlæsere og lignende hjælpeteknologier. Hvis det sammenklappelige element er lukket som standard, skal det have en værdi på aria-expanded="false"
. Hvis du har indstillet det sammenklappelige element til at være åbent som standard ved hjælp af in
klassen, skal du indstille aria-expanded="true"
på kontrolelementet i stedet. Pluginnet vil automatisk skifte denne egenskab baseret på, om det sammenklappelige element er blevet åbnet eller lukket.
Derudover, hvis dit kontrolelement målretter mod et enkelt sammenklappeligt element - dvs. data-target
attributten peger på en id
vælger - kan du tilføje en yderligere aria-controls
attribut til kontrolelementet, der indeholder id
det sammenklappelige element. Moderne skærmlæsere og lignende hjælpeteknologier gør brug af denne egenskab til at give brugerne yderligere genveje til at navigere direkte til selve det sammenklappelige element.
Collapse-pluginnet bruger et par klasser til at håndtere de tunge løft:
.collapse
skjuler indholdet.collapse.in
viser indholdet.collapsing
tilføjes, når overgangen starter, og fjernes, når den er færdigDisse klasser kan findes i component-animations.less
.
Bare tilføj data-toggle="collapse"
og a data-target
til elementet for automatisk at tildele kontrol over et sammenklappeligt element. Attributten data-target
accepterer en CSS-vælger at anvende sammenbruddet på. Sørg for at tilføje klassen collapse
til det sammenklappelige element. Hvis du vil have den til at åbne som standard, skal du tilføje den ekstra klasse in
.
For at tilføje harmonika-lignende gruppestyring til en sammenklappelig kontrol, skal du tilføje dataattributten data-parent="#selector"
. Se demoen for at se dette i aktion.
Aktiver manuelt med:
Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-
, som i data-parent=""
.
Navn | type | Standard | beskrivelse |
---|---|---|---|
forælder | vælger | falsk | Hvis der er angivet en vælger, vil alle sammenfoldelige elementer under den angivne overordnede blive lukket, når dette sammenklappelige element vises. (svarende til traditionel harmonikaadfærd - dette afhænger af panel klassen) |
skifte | boolesk | rigtigt | Slår det sammenklappelige element til eller fra ved kald |
.collapse(options)
Aktiverer dit indhold som et sammenklappeligt element. Accepterer en valgfri indstilling object
.
.collapse('toggle')
Skifter et sammenklappeligt element til at blive vist eller skjult. Vender tilbage til den, der ringer, før det sammenklappelige element faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.collapse
eller hidden.bs.collapse
indtræffer).
.collapse('show')
Viser et sammenklappeligt element. Vender tilbage til den, der ringer, før det sammenklappelige element faktisk er blevet vist (dvs. før shown.bs.collapse
hændelsen indtræffer).
.collapse('hide')
Skjuler et sammenklappeligt element. Vender tilbage til den, der ringer, før det sammenklappelige element rent faktisk er blevet skjult (dvs. før hidden.bs.collapse
hændelsen indtræffer).
Bootstraps kollapsklasse afslører nogle få hændelser for at tilslutte sig sammenbrudsfunktionalitet.
Begivenhedstype | Beskrivelse |
---|---|
show.bs.kollaps | Denne hændelse udløses med det samme, når show instansmetoden kaldes. |
vist.bs.kollaps | Denne hændelse udløses, når et sammenbrudselement er blevet gjort synligt for brugeren (vil vente på, at CSS-overgange er fuldført). |
skjule.bs.kollapse | Denne hændelse udløses straks, når hide metoden er blevet kaldt. |
skjult.bs.kollaps | Denne hændelse udløses, når et sammenbrudselement er blevet skjult for brugeren (vil vente på, at CSS-overgange er fuldført). |
En slideshow-komponent til at cykle gennem elementer, som en karrusel. Indlejrede karruseller understøttes ikke.
Karruselkomponenten er generelt ikke i overensstemmelse med tilgængelighedsstandarder. Hvis du har brug for at være kompatibel, bedes du overveje andre muligheder for at præsentere dit indhold.
Bootstrap bruger udelukkende CSS3 til sine animationer, men Internet Explorer 8 og 9 understøtter ikke de nødvendige CSS-egenskaber. Der er således ingen slide-overgangsanimationer, når du bruger disse browsere. Vi har med vilje besluttet ikke at inkludere jQuery-baserede fallbacks for overgangene.
Klassen .active
skal tilføjes til en af slides. Ellers vil karrusellen ikke være synlig.
Klasserne .glyphicon .glyphicon-chevron-left
og .glyphicon .glyphicon-chevron-right
er ikke nødvendigvis nødvendige for kontrollerne. Bootstrap giver .icon-prev
og .icon-next
som almindelige unicode-alternativer.
Tilføj nemt billedtekster til dine dias med .carousel-caption
elementet i enhver .item
. Placer næsten enhver valgfri HTML derinde, og den vil automatisk blive justeret og formateret.
Karruseller kræver brug af en id
på den yderste beholder (den .carousel
) for at karruselkontrollerne fungerer korrekt. Når du tilføjer flere karruseller, eller når du ændrer en karrusel id
, skal du sørge for at opdatere de relevante kontroller.
Brug dataattributter til nemt at kontrollere karrusellens position. data-slide
accepterer nøgleordene prev
eller next
, som ændrer diaspositionen i forhold til dens aktuelle position. Alternativt kan du bruge data-slide-to
til at sende et råt diasindeks til karrusellen data-slide-to="2"
, som flytter diaspositionen til et bestemt indeks, der begynder med 0
.
Attributten data-ride="carousel"
bruges til at markere en karrusel som animerende startende ved sideindlæsning. Den kan ikke bruges i kombination med (overflødig og unødvendig) eksplicit JavaScript-initialisering af den samme karrusel.
Kald karrusel manuelt med:
Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-
, som i data-interval=""
.
Navn | type | Standard | beskrivelse |
---|---|---|---|
interval | nummer | 5000 | Mængden af tid, der skal forsinkes mellem automatisk cykling af en vare. Hvis falsk, vil karrusellen ikke automatisk cykle. |
pause | streng | nul | "hover" | Hvis den er indstillet til "hover" , pauser cyklingen af karrusellen på mouseenter og genoptager cyklingen af karrusellen på mouseleave . Hvis den er indstillet til null , vil det ikke sætte den på pause ved at holde markøren over karrusellen. |
indpakning | boolesk | rigtigt | Om karrusellen skal cykle kontinuerligt eller have hårde stop. |
tastatur | boolesk | rigtigt | Om karrusellen skal reagere på tastaturbegivenheder. |
.carousel(options)
Initialiserer karrusellen med valgfrie muligheder object
og begynder at cykle gennem genstande.
.carousel('cycle')
Cykler gennem karruselelementerne fra venstre mod højre.
.carousel('pause')
Stopper karrusellen i at cykle gennem genstande.
.carousel(number)
Cykler karrusellen til en bestemt ramme (0-baseret, svarende til et array).
.carousel('prev')
Skifter til det forrige element.
.carousel('next')
Skifter til næste punkt.
Bootstraps karruselklasse afslører to hændelser for tilslutning til karruselfunktionalitet.
Begge begivenheder har følgende yderligere egenskaber:
direction
: Den retning, karrusellen glider i (enten "left"
eller "right"
).relatedTarget
: DOM-elementet, der skubbes på plads som det aktive element.Alle karruselbegivenheder skydes mod selve karrusellen (dvs. ved <div class="carousel">
).
Begivenhedstype | Beskrivelse |
---|---|
slide.bs.karrusel | Denne hændelse udløses med det samme, når slide instansmetoden påkaldes. |
slid.bs.karrusel | Denne begivenhed udløses, når karrusellen har fuldført sin slide-overgang. |
Affix-plugin'et slår position: fixed;
til og fra og emulerer effekten fundet med position: sticky;
. Undernavigationen til højre er en live demo af affix-pluginnet.
Brug affix-pluginnet via dataattributter eller manuelt med dit eget JavaScript. I begge situationer skal du angive CSS for placeringen og bredden af dit vedhæftede indhold.
Bemærk: Brug ikke affix-pluginnet på et element indeholdt i et relativt placeret element, såsom en trukket eller skubbet kolonne, på grund af en Safari-gengivelsesfejl .
Affix-plugin'et skifter mellem tre klasser, der hver repræsenterer en bestemt tilstand: .affix
, .affix-top
, og .affix-bottom
. Du skal selv angive stilene, med undtagelse af position: fixed;
den .affix
, for disse klasser (uafhængig af dette plugin) for at håndtere de faktiske positioner.
Sådan fungerer affix-pluginnet:
.affix-top
for at angive, at elementet er i sin øverste position. På dette tidspunkt kræves ingen CSS-positionering..affix
erstatter .affix-top
og sætter position: fixed;
(leveret af Bootstraps CSS)..affix
med .affix-bottom
. Da forskydninger er valgfrie, kræver indstilling en, at du indstiller den relevante CSS. I dette tilfælde tilføjes position: absolute;
efter behov. Pluginnet bruger dataattributten eller JavaScript-indstillingen til at bestemme, hvor elementet skal placeres derfra.Følg ovenstående trin for at indstille din CSS til en af nedenstående brugsmuligheder.
For nemt at tilføje affix-adfærd til ethvert element, skal du blot tilføje data-spy="affix"
til det element, du vil spionere på. Brug forskydninger til at definere, hvornår fastgørelsen af et element skal skiftes.
Kald affix-pluginnet via JavaScript:
Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-
, som i data-offset-top="200"
.
Navn | type | Standard | beskrivelse |
---|---|---|---|
offset | nummer | funktion | objekt | 10 | Pixels at forskyde fra skærmen ved beregning af scrollposition. Hvis der angives et enkelt tal, vil forskydningen blive anvendt i både top- og bundretninger. For at give en unik, bund- og topforskydning skal du blot angive et objekt offset: { top: 10 } eller offset: { top: 10, bottom: 5 } . Brug en funktion, når du dynamisk skal beregne en offset. |
mål | vælger | node | jQuery element | window objektet _ |
Angiver målelementet for affikset. |
.affix(options)
Aktiverer dit indhold som vedhæftet indhold. Accepterer en valgfri indstilling object
.
.affix('checkPosition')
Genberegner tilstanden af affikset baseret på dimensioner, position og rulleposition for de relevante elementer. Klasserne .affix
, .affix-top
, og .affix-bottom
føjes til eller fjernes fra det vedhæftede indhold i henhold til den nye tilstand. Denne metode skal kaldes, hver gang dimensionerne af det vedhæftede indhold eller målelementet ændres, for at sikre korrekt placering af det vedhæftede indhold.
Bootstraps affix-plugin afslører nogle få hændelser for tilslutning til affix-funktionalitet.
Begivenhedstype | Beskrivelse |
---|---|
affix.bs.affix | Denne hændelse udløses umiddelbart før elementet er blevet sat på. |
affixed.bs.affix | Denne hændelse udløses, efter at elementet er blevet påsat. |
affix-top.bs.affix | Denne hændelse udløses umiddelbart før elementet er blevet sat på toppen. |
affixed-top.bs.affix | Denne begivenhed udløses, efter at elementet er blevet sat på toppen. |
affix-bottom.bs.affix | Denne hændelse udløses umiddelbart før elementet er blevet anbragt-bunden. |
affixed-bottom.bs.affix | Denne hændelse udløses, efter at elementet er blevet anbragt nederst. |