JavaScript
Portate i cumpunenti di Bootstrap à a vita cù più di una decina di plugins jQuery persunalizati. Facilmente includenu tutti, o unu per unu.
Portate i cumpunenti di Bootstrap à a vita cù più di una decina di plugins jQuery persunalizati. Facilmente includenu tutti, o unu per unu.
I plugins ponu esse inclusi individualmente (aduprendu i *.js
schedarii individuali di Bootstrap), o tutti in una volta (usendu bootstrap.js
o minified bootstrap.min.js
).
Tramindui bootstrap.js
è bootstrap.min.js
cuntenenu tutti i plugins in un unicu schedariu. Includite solu unu.
Certi plugins è cumpunenti CSS dipendenu da altri plugins. Se include plugins individualmente, assicuratevi di verificà queste dipendenze in i documenti. Innota ancu chì tutti i plugins dependenu di jQuery (questu significa chì jQuery deve esse inclusu prima di i schedarii di plugin). Cunsultate u nostrubower.json
per vede quali versioni di jQuery sò supportati.
Pudete aduprà tutti i plugins Bootstrap puramente attraversu l'API di marcatura senza scrive una sola linea di JavaScript. Questa hè l'API di prima classe di Bootstrap è deve esse a vostra prima cunsiderazione quandu utilizate un plugin.
Dittu chistu, in certi situazioni pò esse desiderate di disattivà sta funziunalità. Dunque, furnimu ancu a capacità di disattivà l'API di l'attributu di dati unbinding all events on the document namespaced with data-api
. Questu pare cusì:
In alternativa, per destinà un plugin specificu, basta include u nome di u plugin cum'è un spaziu di nome cù u spaziu di nome data-api cum'è questu:
Ùn aduprate micca attributi di dati da parechji plugins nantu à u stessu elementu. Per esempiu, un buttone ùn pò micca avè un tooltip è cambia una modale. Per fà questu, utilizate un elementu di imballaggio.
Cridemu ancu chì duvete esse capace di utilizà tutti i plugins Bootstrap puramente attraversu l'API JavaScript. Tutte l'API pubbliche sò metudi unichi, incatenati, è tornanu a cullezzione attuata.
Tutti i metudi duveranu accettà un oggettu d'opzioni opzionali, una stringa chì mira à un metudu particulari, o nunda (chì inizia un plugin cù un cumpurtamentu predeterminatu):
Ogni plugin espone ancu u so custruttore crudu nantu à una Constructor
pruprietà: $.fn.popover.Constructor
. Se vulete acquistà una istanza di plugin particulari, ricuperà direttamente da un elementu: $('[rel="popover"]').data('popover')
.
Pudete cambià i paràmetri predeterminati per un plugin mudificà l' Constructor.DEFAULTS
ughjettu di u plugin:
A volte hè necessariu di utilizà plugins Bootstrap cù altri frameworks UI. In queste circustanze, i collisioni di u spaziu di nomi ponu accade in ocasioni. Se questu succede, pudete chjamà .noConflict
u plugin chì vulete rinvià u valore.
Bootstrap furnisce avvenimenti persunalizati per a maiò parte di l'azzioni uniche di i plugins. In generale, questi venenu in una forma di participiu infinitu è passatu - induve l'infinitivu (es. show
) hè attivatu à l'iniziu di un avvenimentu, è a so forma di participiu passatu (es. shown
) hè attivatu à a fine di una azione.
Da 3.0.0, tutti l'avvenimenti Bootstrap sò namespaced.
Tutti l'avvenimenti infiniti furnisce preventDefault
funziunalità. Questu furnisce a capacità di piantà l'esekzione di un'azzione prima di principià.
A versione di ognuna di i plugins jQuery di Bootstrap pò esse accessu via a VERSION
pruprietà di u custruttore di u plugin. Per esempiu, per u plugin tooltip:
I plugins di Bootstrap ùn tornanu micca particularmente grazia quandu JavaScript hè disattivatu. Se ti interessa l'esperienza di l'utilizatori in questu casu, aduprate <noscript>
per spiegà a situazione (è cumu riattivate JavaScript) à i vostri utilizatori, è / o aghjunghje i vostri propri fallbacks persunalizati.
Bootstrap ùn sustene micca ufficialmente biblioteche JavaScript di terze parti cum'è Prototype o jQuery UI. Malgradu .noConflict
l'avvenimenti cù spazii di nome, pò esse prublemi di cumpatibilità chì avete bisognu di riparà nantu à u vostru propiu.
Per effetti di transizione simplici, include transition.js
una volta cù l'altri schedari JS. Sè vo aduprate u compilatu (o minificatu) bootstrap.js
, ùn ci hè bisognu di include questu - hè digià quì.
Transition.js hè un aiutu basicu per transitionEnd
l'avvenimenti è ancu un emulatore di transizione CSS. Hè utilizatu da l'altri plugins per verificà u supportu di transizione CSS è per catturà transizioni pendenti.
E transizioni ponu esse disattivate in u mondu aduprendu u frammentu JavaScript seguente, chì deve vene dopu transition.js
(o bootstrap.js
, bootstrap.min.js
secondu u casu) hè stata caricata:
I modali sò simplificati, ma flessibili, i prompt di dialogu cù a funziunalità minima necessaria è i predefiniti intelligenti.
Assicuratevi di ùn apre micca un modale mentre un altru hè sempre visibile. A mostra di più di una modale à u tempu richiede un codice persunalizatu.
Pruvate sempre di mette u codice HTML di un modale in una pusizione di primu livellu in u vostru documentu per evità altri cumpunenti chì affettanu l'apparenza è / o funziunalità di u modale.
Ci sò alcune avvertenze riguardanti l'usu di modali nantu à i dispositi mobili. Vede i nostri documenti di supportu di navigatore per i dettagli.
A causa di a manera chì HTML5 definisce a so semantica, l' autofocus
attributu HTML ùn hà micca effettu in i modali Bootstrap. Per ottene u listessu effettu, utilizate qualchì JavaScript persunalizatu:
Un modale renditu cù l'intestazione, u corpu è l'inseme d'azzioni in u footer.
Cambia un modale via JavaScript clicchendu u buttone sottu. Si scenderà è fade in da a cima di a pagina.
Assicuratevi di aghjunghje role="dialog"
è aria-labelledby="..."
, in riferimentu à u titulu modale, à .modal
, è role="document"
à u .modal-dialog
stessu.
Inoltre, pudete dà una descrizzione di u vostru dialogu modale cù aria-describedby
l' activazione .modal
.
L'incrustazione di i video di YouTube in modali richiede JavaScript addiziale micca in Bootstrap per fermà automaticamente a riproduzione è più. Vede stu utile Stack Overflow post per più infurmazione.
I modali anu duie dimensioni opzionali, dispunibuli via classi di modificatori per esse posti nantu à un .modal-dialog
.
Per i modali chì simpricimenti appariscenu piuttostu chè svanisce per vede, sguassate a .fade
classa da u vostru marcatu modale.
Per prufittà di u sistema di griglia Bootstrap in un modale, basta nidificate .row
s in u sistema di .modal-body
griglia normale è dopu aduprà e classi di sistema di griglia normale.
Avete una mansa di buttone chì tutti attivanu u listessu modale, solu cù un cuntenutu ligeramente sfarente? Aduprate event.relatedTarget
è attributi HTMLdata-*
(possibilmente via jQuery ) per varià u cuntenutu di u modale secondu u buttone hè clicatu. Vede i documenti di Eventi Modali per i dettagli nantu à relatedTarget
,
U plugin modale cambia u vostru cuntenutu oculatu nantu à dumanda, via attributi di dati o JavaScript. Aghjunghje ancu .modal-open
à l' <body>
annullamentu di u cumpurtamentu di scrolling predeterminatu è genera un .modal-backdrop
per furnisce una zona di clic per dismissing modali mostrati quandu cliccate fora di u modale.
Attivate un modale senza scrive JavaScript. Pone data-toggle="modal"
nantu à un elementu di cuntrollu, cum'è un buttone, inseme cù un data-target="#foo"
o href="#foo"
per destinà un modale specificu per cambià.
Chjamate un modale cù id myModal
cù una sola linea di JavaScript:
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-
, cum'è in data-backdrop=""
.
Nome | tipu | predeterminatu | descrizzione |
---|---|---|---|
sfondate | boolean o a stringa'static' |
veru | Include un elementu di fondu modale. In alternativa, specificate static per un sfondate chì ùn chjude micca u modale nantu à cliccà. |
tastiera | booleanu | veru | Chiude u modale quandu si preme a chjave di escape |
mostra | booleanu | veru | Mostra u modale quandu inizializatu. |
luntani | caminu | falsu | Questa opzione hè obsoleta da v3.3.0 è hè stata sguassata in v4. Hè ricumandemu invece d'utilizà un mudellu di clientela o un framework di ubligatoriu di dati, o chjamà jQuery.load sè stessu. Se un URL remoto hè furnitu, u cuntenutu serà caricatu una volta via u |
.modal(options)
Attiva u vostru cuntenutu cum'è modale. Accetta opzioni opzionali object
.
.modal('toggle')
Cambia manualmente un modale. Ritorna à u chjamante prima chì u modale hè statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.modal
o hidden.bs.modal
si faci).
.modal('show')
Apertura manualmente un modale. Ritorna à u chjamante prima chì u modale hè statu veramente mostratu (vale à dì prima chì l' shown.bs.modal
avvenimentu si faci).
.modal('hide')
Oculta manualmente un modale. Ritorna à u chjamante prima chì a modale hè stata oculata (vale à dì prima chì l' hidden.bs.modal
avvenimentu si faci).
.modal('handleUpdate')
Reajusta a pusizione di u modale per contru à una barra di scorrimentu in casu chì unu deve apparisce, chì faria u modale saltà à a manca.
Solu necessariu quandu l'altezza di u modale cambia mentre hè apertu.
A classa modale di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità modale.
Tutti l'avvenimenti modali sò sparati à u modal stessu (vale à dì à u <div class="modal">
).
Tipu d'avvenimentu | Descrizzione |
---|---|
mostra.bs.modale | Questu avvenimentu spara immediatamente quandu u show metudu di istanza hè chjamatu. Sè causatu da un clic, l'elementu clicatu hè dispunibule cum'è a relatedTarget pruprietà di l'avvenimentu. |
mostratu.bs.modale | Questu avvenimentu hè sparatu quandu u modale hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu). Sè causatu da un clic, l'elementu clicatu hè dispunibule cum'è a relatedTarget pruprietà di l'avvenimentu. |
nascondere.bs.modale | Questu avvenimentu hè sparatu immediatamente quandu u hide metudu di istanza hè statu chjamatu. |
hidden.bs.modal | Questu avvenimentu hè sparatu quandu u modale hà finitu di esse oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
caricatu.bs.modale | Questu avvenimentu hè sparatu quandu u modale hà caricatu u cuntenutu utilizendu l' remote opzione. |
Aghjunghjite menu dropdown à quasi tuttu cù stu plugin simplice, cumprese a barra di navigazione, tabulazioni è pillole.
Via attributi di dati o JavaScript, u plugin drop-down cambia u cuntenutu oculatu (menu drop-down) cumminendu a .open
classa nantu à l'elementu di a lista parent.
Nant'à i dispositi mobili, l'apertura di un menu a tendina aghjunghjenu una .dropdown-backdrop
zona di tap per chjude i menu a tendina quandu toccu fora di u menu, un requisitu per un supportu iOS propiu. Questu significa chì per passà da un menu a tendina aperta à un menu a tendina differente richiede un toccu extra in u telefuninu.
Nota: L' data-toggle="dropdown"
attributu hè affidatu per chjude i menu drop-down à u livellu di l'applicazione, cusì hè una bona idea di aduprà sempre.
Aghjunghjite data-toggle="dropdown"
à un ligame o un buttone per commutà un menu dropdown.
Per mantene l'URL intactu cù i buttoni di ligame, utilizate l' data-target
attributu invece di href="#"
.
Chjamate i menu dropdown via JavaScript:
data-toggle="dropdown"
sempre necessariuIndipendentemente da se chjamate u vostru dropdown via JavaScript o invece utilizate l'api di dati, data-toggle="dropdown"
hè sempre necessariu esse presente nantu à l'elementu di attivazione di u dropdown.
Nimu
$().dropdown('toggle')
Commuta u menu a discesa di una determinata barra di navigazione o navigazione a tabulazione.
Tutti l'avvenimenti dropdown sò sparati à l' .dropdown-menu
elementu parent '.
Tutti l'avvenimenti dropdown anu una relatedTarget
pruprietà, chì u valore hè l'elementu di l'ancora basculante.
Tipu d'avvenimentu | Descrizzione |
---|---|
mostra.bs.dropdown | Questu avvenimentu spara immediatamente quandu u metudu di l'istanza di mostra hè chjamatu. |
mostratu.bs.dropdown | Questu avvenimentu hè sparatu quandu u dropdown hè statu resu visibile à l'utilizatore (aspittà per e transizioni CSS, per compie). |
hide.bs.dropdown | Questu avvenimentu hè sparatu immediatamente quandu u metudu di istanza di nasconde hè statu chjamatu. |
hidden.bs.dropdown | Questu avvenimentu hè sparatu quandu u dropdown hà finitu di esse oculatu da l'utilizatore (aspittarà a transizione CSS, per compie). |
U plugin ScrollSpy hè per aghjurnà automaticamente i miri di navigazione basatu nantu à a pusizione di scroll. Scroll the area below the navbar and watch the active class change. I sub-elementi di menu a tendina saranu ancu evidenziati.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi prima ch'elli venduti qui. Tumblr diritti di bicicletta da a fattoria à a tavola qualunque. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 lupu luna irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui probabilmente ùn avete micca intesu parlà di elli è cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatuatu accusamus, credi ironia biodiesel keffiyeh artighjanu ullamco consequat.
Veniam marfa moustache skateboard, adipisicing fugiat velit pitchfork barba. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Camion di cibo tatuatu di maglione cosby, vinile quis non freegan di mcsweeney. Lo-fi wes anderson +1 sartoriale. Carles non esercitazione estetica quis gentrify. Brooklyn adipisicing birra artigianale vice keytar desertu.
Occaecat commodo aliqua delectus. Fap birra artigianale deserunt skateboard ea. Lomo diritti di bicicletta adipisicing banh mi, velit ea sunt next level locavore mono-origine caffè in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS hè adipisicing. Cunsectetur nisi DIY minim messenger bag. 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 ironia, thundercats chì probabilmente ùn avete micca intesu parlà di elli consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan birra artigianale seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
I ligami di Navbar anu da avè target id risolvibili. Per esempiu, un <a href="#home">home</a>
deve currisponde à qualcosa in u DOM cum'è <div id="home"></div>
.
:visible
target ignoratiL'elementi di destinazione chì ùn sò micca :visible
secondu jQuery seranu ignorati è i so elementi di navigazione currispondenti ùn saranu mai evidenziati.
Ùn importa micca u metudu di implementazione, scrollspy richiede l'usu di position: relative;
l'elementu chì spia. In a maiò parte di i casi, questu hè <body>
. Quandu scrollspying nantu à elementi altru ch'è u <body>
, assicuratevi di avè un height
set è overflow-y: scroll;
appiicatu.
Per aghjunghje facilmente u cumpurtamentu scrollspy à a vostra navigazione in cima, aghjunghje data-spy="scroll"
à l'elementu chì vulete spià (a più tipica questu seria u <body>
). Allora aghjunghje l' data-target
attributu cù l'ID o a classa di l'elementu parent di qualsiasi .nav
cumpunente Bootstrap.
Dopu avè aghjustatu position: relative;
in u vostru CSS, chjamate scrollspy via JavaScript:
.scrollspy('refresh')
Quandu si usa scrollspy in cunghjunzione cù l'aghjunzione o l'eliminazione di elementi da u DOM, avete bisognu di chjamà u metudu di rinfrescante cusì:
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-
, cum'è in data-offset=""
.
Nome | tipu | predeterminatu | descrizzione |
---|---|---|---|
offset | numeru | 10 | Pixel per compensà da a cima quandu calcula a pusizione di scroll. |
Tipu d'avvenimentu | Descrizzione |
---|---|
attivate.bs.scrollspy | Questu avvenimentu spara ogni volta chì un novu articulu hè attivatu da u scrollspy. |
Aghjunghjite una funziunalità di tabulazione rapida è dinamica per a transizione attraversu i pannelli di cuntenutu locale, ancu per mezu di menu a tendina. Tabulazioni nidificate ùn sò micca supportate.
Denim crudo chì probabilmente ùn avete micca intesu parlà di elli jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.
Stu plugin estende u cumpunente di navigazione tabulata per aghjunghje zoni tabulabili.
Attivà e tabulazioni tabulabili via JavaScript (ogni tabulazione deve esse attivata individualmente):
Pudete attivà tabulazioni individuali in parechje manere:
Pudete attivà una tabulazione o una navigazione di pillola senza scrivite JavaScript per solu specificà data-toggle="tab"
o data-toggle="pill"
nantu à un elementu. Aghjunghjendu nav
e nav-tabs
classi à a tabulazione ul
applicà u stilu di tabulazione Bootstrap , mentre chì aghjunghje nav
e nav-pills
classi applicà u stilu di pillola .
Per fà chì e tabulazioni svaniscenu, aghjunghje .fade
à ognunu .tab-pane
. U primu pannellu di tabulazione deve ancu .in
fà vede u cuntenutu iniziale.
$().tab
Attiva un elementu di tabulazione è cuntenutu di cuntenutu. A tabulazione deve avè un data-target
o un href
targeting un node di cuntainer in u DOM. In l'esempii sopra, i tabulazioni sò i <a>
s cù data-toggle="tab"
attributi.
.tab('show')
Selezziunate a tabulazione data è mostra u so cuntenutu assuciatu. Qualchese altra tabulazione chì era prima scelta diventa micca selezziunata è u so cuntenutu assuciatu hè oculatu. Ritorna à u chjamante prima chì u pannellu di tabulazione hè statu veramente mostratu (vale à dì prima chì l' shown.bs.tab
avvenimentu si faci).
Quandu mostra una nova tabulazione, l'avvenimenti sparanu in l'ordine seguente:
hide.bs.tab
(nantu à a tabulazione attiva attuale)show.bs.tab
(nantu à a tabulazione da vede)hidden.bs.tab
(nantu à a tabulazione attiva precedente, u listessu cum'è per l' hide.bs.tab
avvenimentu)shown.bs.tab
(nantu à a tabulazione appena attivata appena mostrata, a stessa chì per l' show.bs.tab
avvenimentu)Sì nisuna tabulazione era digià attiva, allora l' hide.bs.tab
eventi hidden.bs.tab
ùn saranu micca sparati.
Tipu d'avvenimentu | Descrizzione |
---|---|
mostra.bs.tab | Questu avvenimentu spara nantu à a tabulazione, ma prima chì a nova tabulazione hè stata mostrata. Aduprate event.target è event.relatedTarget per destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente. |
mostratu.bs.tab | Questu avvenimentu spara nantu à a tabulazione mostra dopu chì una tabulazione hè stata mostrata. Aduprate event.target è event.relatedTarget per destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente. |
nascondere.bs.tab | Questu avvenimentu spara quandu una nova tabulazione deve esse mostrata (è cusì a tabulazione attiva precedente deve esse oculata). Aduprate event.target è event.relatedTarget per destinà a tabulazione attiva attuale è a nova tabulazione attiva prestu, rispettivamente. |
hidden.bs.tab | Questu avvenimentu spara dopu chì una nova tabulazione hè mostrata (è cusì a tabulazione attiva precedente hè oculata). Aduprate event.target è event.relatedTarget per destinà a tabulazione attiva precedente è a nova tabulazione attiva, rispettivamente. |
Ispiratu da l'excellente plugin jQuery.tipsy scrittu da Jason Frame; Tooltips sò una versione aghjurnata, chì ùn si basa micca nantu à l'imaghjini, utilizate CSS3 per animazioni, è attributi di dati per u almacenamentu di titulu lucale.
Tooltips cù tituli di lunghezza zero ùn sò mai affissati.
Passa sopra i ligami sottu per vede tooltips:
Pantaloni stretti u prossimu livellu keffiyeh chì probabilmente ùn avete micca intesu parlà di elli. Photo Booth barba raw denim letterpress vegan messenger bag stumptown. Seitan da fattoria à a tavola, i vestiti americani di quinoa sustenibile fixie di mcsweeney 8-bit anu un chambray di vinile Terry Richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Un artighjanu veramente ironicu qualunque keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim cafè d'origine unica virali.
Quattru opzioni sò dispunibuli: in cima, a diritta, in fondu è a manca allinata.
Per ragioni di rendiment, Tooltip è Popover data-apis sò opt-in, vale à dì chì duvete inizializà da voi stessu .
Una manera di inizializà tutti i tooltips in una pagina seria di selezziunate per u so data-toggle
attributu:
U plugin di tooltip genera cuntenutu è marcatu nantu à a dumanda, è di manera predeterminata mette tooltips dopu u so elementu trigger.
Trigger u tooltip via JavaScript:
U marcatu necessariu per un tooltip hè solu un data
attributu è title
nantu à l'elementu HTML chì vulete avè un tooltip. U marcatu generatu di un tooltip hè piuttostu simplice, ancu s'ellu ci vole una pusizioni (per difettu, stabilitu top
da u plugin).
Calchì volta vulete aghjunghje un tooltip à un hyperlink chì avvolge parechje linee. U cumpurtamentu predeterminatu di u plugin tooltip hè di centru in horizontale è verticalmente. Aghjunghjite white-space: nowrap;
à i vostri ancore per evitari questu.
Quandu aduprate tooltips nantu à elementi in un .btn-group
o un .input-group
, o nantu à elementi ligati à a tavula ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), duverete specificà l'opzione container: 'body'
(documentata quì sottu) per evità effetti secundari indesiderati (cum'è l'elementu chì cresce più largu è/). o perdendu i so anguli arrotondati quandu u tooltip hè attivatu).
Per l'utilizatori chì naviganu cù un teclatu, è in particulare l'utilizatori di tecnulugii d'assistenza, duvete solu aghjunghje tooltips à elementi focalizabili di u teclatu cum'è ligami, cuntrolli di forma, o qualsiasi elementu arbitrariu cù un tabindex="0"
attributu.
Per aghjunghje un tooltip à un disabled
o un .disabled
elementu, mette l'elementu in a <div>
è applicà u tooltip à questu <div>
invece.
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-
, cum'è in data-animation=""
.
Nome | Tipu | Default | Descrizzione |
---|---|---|---|
animazione | booleanu | veru | Applica una transizione di dissolvenza CSS à u tooltip |
cuntainer | stringa | falsu | falsu | Appendi u tooltip à un elementu specificu. Esempiu |
ritardu | numeru | ughjettu | 0 | Ritarda di mostra è nasconde u tooltip (ms) - ùn hè micca applicatu à u tipu di trigger manuale Se un numeru hè furnitu, u ritardu hè appiicatu à tramindui nascondere / mostra A struttura di l'ughjettu hè: |
html | booleanu | falsu | Inserite HTML in u tooltip. Se falsu, u text metudu di jQuery serà utilizatu per inserisce u cuntenutu in u DOM. Aduprate u testu s'è vo site preoccupatu per l'attacchi XSS. |
piazzamentu | stringa | funzione | 'top' | Cumu pusà u tooltip - cima | fondu | manca | drittu | autumàticu. Quandu una funzione hè aduprata per determinà u piazzamentu, hè chjamatu cù u nodu DOM di tooltip cum'è u so primu argumentu è l'elementu triggering DOM node cum'è u so secondu. U |
selettore | stringa | falsu | Se un selettore hè furnitu, l'uggetti tooltip seranu delegati à i miri specificati. In pratica, questu hè utilizatu per attivà u cuntenutu HTML dinamicu per avè l'aghjuntu di tooltips. Vede questu è un esempiu informativu . |
mudellu | stringa | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML di basa à aduprà quandu crea u tooltip. U tooltip
L'elementu wrapper più esterno deve avè a |
titulu | stringa | funzione | '' | Valore di u titulu predeterminatu se Se una funzione hè datu, serà chjamata cù u so |
trigger | stringa | "focus" | Cumu hè attivatu u tooltip - cliccate | sopra | focus | manuale. Pudete passà parechje triggers; separali cù un spaziu. manual ùn pò esse cumminatu cù qualsiasi altru trigger. |
vetru | stringa | ughjettu | funzione | { selector: 'corpu', padding: 0} | Mantene u tooltip in i limiti di questu elementu. Esempiu: Se una funzione hè datu, hè chjamata cù l'elementu triggering DOM node cum'è u so solu argumentu. U |
L'opzioni per i tooltips individuali ponu esse specificati in alternativa attraversu l'usu di l'attributi di dati, cum'è spiegatu sopra.
$().tooltip(options)
Attacca un gestore di tooltip à una cullizzioni di elementi.
.tooltip('show')
Revela u tooltip di l'elementu. Ritorna à u chjamante prima chì u tooltip hè statu veramente mostratu (vale à dì prima chì l' shown.bs.tooltip
avvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip. Tooltips cù tituli di lunghezza zero ùn sò mai affissati.
.tooltip('hide')
Nasconde u tooltip di un elementu. Ritorna à u chjamante prima chì a tooltip hè stata oculata (vale à dì prima chì l' hidden.bs.tooltip
avvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip.
.tooltip('toggle')
Commuta u tooltip di un elementu. Ritorna à u chjamante prima chì u tooltip hè statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.tooltip
o hidden.bs.tooltip
si faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip.
.tooltip('destroy')
Oculta è distrugge u tooltip di un elementu. Tooltips chì utilizanu a delegazione (chì sò creati cù l' selector
opzione ) ùn ponu micca esse distrutte individualmente nantu à elementi di trigger discendenti.
Tipu d'avvenimentu | Descrizzione |
---|---|
mostra.bs.tooltip | Questu avvenimentu spara immediatamente quandu u show metudu di istanza hè chjamatu. |
mostratu.bs.tooltip | Questu avvenimentu hè sparatu quandu u tooltip hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
nascondere.bs.tooltip | Questu avvenimentu hè sparatu immediatamente quandu u hide metudu di istanza hè statu chjamatu. |
hidden.bs.tooltip | Questu avvenimentu hè sparatu quandu u tooltip hà finitu di esse oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
inseritu.bs.tooltip | Questu avvenimentu hè sparatu dopu l' show.bs.tooltip avvenimentu quandu u mudellu di tooltip hè statu aghjuntu à u DOM. |
Aghjunghjite picculi sovrapposizioni di cuntenutu, cum'è quelli nantu à l'iPad, à qualsiasi elementu per l'alloghju di l'infurmazione secundaria.
I popovers chì u titulu è u cuntenutu sò di lunghezza zero ùn sò mai affissati.
Popovers necessitanu u plugin tooltip per esse inclusu in a vostra versione di Bootstrap.
Per ragioni di rendiment, Tooltip è Popover data-apis sò opt-in, vale à dì chì duvete inizializà da voi stessu .
Una manera di inizializà tutti i popovers in una pagina seria di selezziunà per u so data-toggle
attributu:
Quandu aduprate popovers nantu à elementi in un .btn-group
o un .input-group
, o nantu à elementi ligati à a tavola ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), duverete specificà l'opzione container: 'body'
(documentata quì sottu) per evità effetti secundari indesiderati (cum'è l'elementu chì cresce più largu è/). o perdendu i so angoli arrotondati quandu u popover hè attivatu).
Per aghjunghje un popover à a disabled
o .disabled
l'elementu, mette l'elementu in a <div>
è applicà u popover à quellu <div>
invece.
A volte vulete aghjunghje un popover à un hyperlink chì avvolge parechje linee. U cumpurtamentu predeterminatu di u plugin popover hè di centru in horizontale è verticalmente. Aghjunghjite white-space: nowrap;
à i vostri ancore per evitari questu.
Quattru opzioni sò dispunibuli: in cima, a diritta, in fondu è a manca allinata.
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.
Aduprate u focus
trigger per scaccià popovers nantu à u prossimu clic chì l'utilizatore face.
Per un cumpurtamentu propiu cross-browser è cross-platform, duvete aduprà l' <a>
etichetta, micca l' <button>
etichetta, è ancu deve include l' attributi role="button"
è .tabindex
Attivate popovers via JavaScript:
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-
, cum'è in data-animation=""
.
Nome | Tipu | Default | Descrizzione |
---|---|---|---|
animazione | booleanu | veru | Applica una transizione di fade CSS à u popover |
cuntainer | stringa | falsu | falsu | Appendi u popover à un elementu specificu. Esempiu |
cuntenutu | stringa | funzione | '' | Valore di cuntenutu predeterminatu se Se una funzione hè datu, serà chjamata cù u so |
ritardu | numeru | ughjettu | 0 | Ritarda di mostra è nasconde u popover (ms) - ùn hè micca applicatu à u tipu di trigger manuale Se un numeru hè furnitu, u ritardu hè appiicatu à tramindui nascondere / mostra A struttura di l'ughjettu hè: |
html | booleanu | falsu | Inserite HTML in u popover. Se falsu, u text metudu di jQuery serà utilizatu per inserisce u cuntenutu in u DOM. Aduprate u testu s'è vo site preoccupatu per l'attacchi XSS. |
piazzamentu | stringa | funzione | 'diritta' | How to position the popover - top | fondu | manca | drittu | autumàticu. Quandu una funzione hè aduprata per determinà a piazza, hè chjamata cù u popover DOM node cum'è u so primu argumentu è l'elementu triggering DOM node cum'è u so secondu. U |
selettore | stringa | falsu | Se un selettore hè furnitu, l'uggetti popover seranu delegati à i miri specificati. In pratica, questu hè utilizatu per attivà u cuntenutu HTML dinamicu per avè popovers aghjuntu. Vede questu è un esempiu informativu . |
mudellu | stringa | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Base HTML per aduprà quandu crea u popover. U popover U popover
L'elementu wrapper più esterno deve avè a |
titulu | stringa | funzione | '' | Valore di u titulu predeterminatu se Se una funzione hè datu, serà chjamata cù u so |
trigger | stringa | 'cliccate' | Cume popover hè attivatu - cliccate | sopra | focus | manuale. Pudete passà parechje triggers; separali cù un spaziu. manual ùn pò esse cumminatu cù qualsiasi altru trigger. |
vetru | stringa | ughjettu | funzione | { selector: 'corpu', padding: 0} | Mantene u popover in i limiti di questu elementu. Esempiu: Se una funzione hè datu, hè chjamata cù l'elementu triggering DOM node cum'è u so solu argumentu. U |
L'opzioni per popovers individuali ponu esse specificati in alternativa per l'usu di l'attributi di dati, cum'è spiegatu sopra.
$().popover(options)
Inizializza popovers per una cullizzioni di elementi.
.popover('show')
Revela u popover di un elementu. Ritorna à u chjamante prima chì u popover hè statu veramente mostratu (vale à dì prima chì l' shown.bs.popover
avvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u popover. I popovers chì u titulu è u cuntenutu sò di lunghezza zero ùn sò mai affissati.
.popover('hide')
Nasconde u popover di un elementu. Ritorna à u chjamante prima chì u popover sia statu oculatu (vale à dì prima chì l' hidden.bs.popover
avvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u popover.
.popover('toggle')
Commuta u popover di un elementu. Ritorna à u chjamante prima chì u popover sia statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.popover
o hidden.bs.popover
si faci). Questu hè cunsideratu un attivazione "manuale" di u popover.
.popover('destroy')
Oculta è distrugge u popover di un elementu. Popovers chì utilizanu a delegazione (chì sò creati cù l' selector
opzione ) ùn ponu micca esse distrutte individualmente nantu à elementi di trigger discendenti.
Tipu d'avvenimentu | Descrizzione |
---|---|
mostra.bs.popover | Questu avvenimentu spara immediatamente quandu u show metudu di istanza hè chjamatu. |
mostratu.bs.popover | Questu avvenimentu hè sparatu quandu u popover hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
nascondere.bs.popover | Questu avvenimentu hè sparatu immediatamente quandu u hide metudu di istanza hè statu chjamatu. |
hidden.bs.popover | Questu avvenimentu hè sparatu quandu u popover hà finitu di esse oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
inseritu.bs.popover | Questu avvenimentu hè sparatu dopu l' show.bs.popover avvenimentu quandu u mudellu popover hè statu aghjuntu à u DOM. |
Aghjunghjite a funziunalità di licenzià à tutti i missaghji d'alerta cù stu plugin.
Quandu s'utilice un .close
buttone, deve esse u primu figliolu di u .alert-dismissible
cuntenutu di u testu ùn pò esse prima in u marcatu.
Cambia questu è quellu è pruvate di novu. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Basta à aghjunghje data-dismiss="alert"
à u vostru buttone vicinu per dà automaticamente una funziunalità di avvisu vicinu. Chjudendu una alerta elimina da u DOM.
Per avè i vostri alerti utilizanu animazione quandu si chjude, assicuratevi chì anu .fade
e .in
classi già applicate à elli.
$().alert()
Fà una alerta à sente per l'eventi di cliccà nantu à elementi discendenti chì anu l' data-dismiss="alert"
attributu. (Ùn hè necessariu quandu si usa l'inizializazione automatica di l'api di dati).
$().alert('close')
Chiude una alerta rimuovendu da u DOM. Se i classi .fade
è .in
sò prisenti nantu à l'elementu, l'alerta svanisce prima di esse eliminata.
U plugin d'alerta di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità d'alerta.
Tipu d'avvenimentu | Descrizzione |
---|---|
close.bs.alert | Questu avvenimentu spara immediatamente quandu u close metudu di istanza hè chjamatu. |
chjusu.bs.alert | Questu avvenimentu hè sparatu quandu l'alerta hè stata chjusa (aspetterà chì e transizioni CSS finiscinu). |
Fate più cù i buttoni. Cuntrolla i stati di u buttone o crea gruppi di buttoni per più cumpunenti cum'è toolbars.
Firefox persiste i stati di cuntrollu di forma (disabilità è verificazione) à traversu i carichi di pagina . Una soluzione per questu hè di utilizà autocomplete="off"
. Vede u bug Mozilla #654072 .
Aghjunghjite data-loading-text="Loading..."
per utilizà un statu di carica nantu à un buttone.
Questa funzione hè obsoleta da v3.3.5 è hè stata sguassata in v4.
Per questa manifestazione, usemu data-loading-text
è $().button('loading')
, ma questu ùn hè micca l'unicu statu chì pudete aduprà. Vede più nantu à questu quì sottu in a $().button(string)
documentazione .
Aghjunghjite data-toggle="button"
per attivà a basculazione nantu à un unicu buttone.
.active
èaria-pressed="true"
Per i buttoni pre-toggled, duvete aghjunghje a .active
classa è l' aria-pressed="true"
attributu à u button
stessu.
Aghjunghjite data-toggle="buttons"
à una .btn-group
casella di spunta chì cuntene o input di radio per attivà a basculazione in i so stili rispettivi.
.active
Per l'opzioni preselezionate, duvete aghjunghje a .active
classa à l'input di label
voi stessu.
Se u statu verificatu di un buttone di checkbox hè aghjurnatu senza sparà un click
avvenimentu nantu à u buttone (per esempiu, via <input type="reset">
o per stabilisce a checked
pruprietà di l'input), avete bisognu di cambià a .active
classa nantu à l'input di label
sè stessu.
$().button('toggle')
Toggles push state. Dà u buttone l'apparenza chì hè stata attivata.
$().button('reset')
Resetta u statu di u buttone - scambia u testu à u testu originale. Stu metudu hè asincronu è torna prima chì u resetting hè veramente cumpletu.
$().button(string)
Scambià u testu à qualsiasi statu di testu definitu di dati.
Plugin flessibile chì utilizza una manciata di classi per un cumpurtamentu faciule.
Collapse richiede chì u plugin di transizioni sia inclusu in a vostra versione di Bootstrap.
Cliccate i buttoni sottu per vede è ammuccià un altru elementu via cambiamenti di classi:
.collapse
oculta u cuntenutu.collapsing
hè appiicata durante a transizione.collapse.in
mostra u cuntenutuPudete aduprà un ligame cù l' href
attributu, o un buttone cù l' data-target
attributu. In i dui casi, data-toggle="collapse"
hè necessariu.
Estende u cumpurtamentu di colapsu predeterminatu per creà un accordione cù u cumpunente di u pannellu.
Hè ancu pussibule scambià .panel-body
s cù .list-group
s.
Assicuratevi di aghjunghje aria-expanded
à l'elementu di cuntrollu. Questu attributu definisce esplicitamente u statu attuale di l'elementu colapsibile à i lettori di schermu è tecnulugia d'assistenza simili. Se l'elementu colapsibile hè chjusu per automaticamente, deve avè un valore di aria-expanded="false"
. Se avete stabilitu l'elementu colapsibile per esse apertu per automaticamente usendu a in
classa, setaria-expanded="true"
nantu à u cuntrollu invece. U plugin cambia automaticamente stu attributu basatu annantu à se l'elementu colapsibile hè statu apertu o chjusu.
Inoltre, se u vostru elementu di cuntrollu hè destinatu à un unicu elementu colapsibile - vale à dì l' data-target
attributu punta à un id
selettore - pudete aghjunghje un aria-controls
attributu supplementu à l'elementu di cuntrollu, chì cuntene l' id
elementu colapsable. I lettori di schermu muderni è tecnulugii d'assistenza simili facenu usu di questu attributu per furnisce l'utilizatori cù accurtatoghji supplementari per navigà direttamente à l'elementu colapsibile stessu.
U plugin di colapsu utilizeghja uni pochi di classi per trattà a carica pesante:
.collapse
oculta u cuntenutu.collapse.in
mostra u cuntenutu.collapsing
hè aghjuntu quandu a transizione principia, è eliminata quandu finisceQueste classi ponu esse truvate in component-animations.less
.
Basta aghjunghje data-toggle="collapse"
è a data-target
à l'elementu per assignà automaticamente u cuntrollu di un elementu colapsibile. L' data-target
attributu accetta un selettore CSS per applicà u colapsu. Assicuratevi di aghjunghje a classa collapse
à l'elementu colapsable. Se vulete chì l'apertura predefinita, aghjunghje a classa supplementaria in
.
Per aghjunghje una gestione di gruppu cum'è accordioni à un cuntrollu colapsibile, aghjunghje l'attributu di dati data-parent="#selector"
. Consultate a demo per vede questu in azione.
Abilita manualmente cù:
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-
, cum'è in data-parent=""
.
Nome | tipu | predeterminatu | descrizzione |
---|---|---|---|
parenti | selettore | falsu | Se un selettore hè furnitu, allora tutti l'elementi pieghevoli sottu à u parent specificatu seranu chjusi quandu questu articulu pieghevule hè mostratu. (simile à u cumpurtamentu tradiziunale di accordion - questu dipende da a panel classe) |
toggle | booleanu | veru | Commuta l'elementu colapsibile nantu à l'invucazione |
.collapse(options)
Attiva u vostru cuntenutu cum'è un elementu colapsable. Accetta opzioni opzionali object
.
.collapse('toggle')
Cambia un elementu pieghevule per esse mostratu o oculatu. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.collapse
o hidden.bs.collapse
si faci).
.collapse('show')
Mostra un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente mostratu (vale à dì prima chì l' shown.bs.collapse
avvenimentu si faci).
.collapse('hide')
Oculta un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente oculatu (vale à dì prima chì l' hidden.bs.collapse
avvenimentu si faci).
A classa di colapsu di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità di colapsu.
Tipu d'avvenimentu | Descrizzione |
---|---|
mostra.bs.collapse | Questu avvenimentu spara immediatamente quandu u show metudu di istanza hè chjamatu. |
mostratu.bs.collapse | Questu avvenimentu hè sparatu quandu un elementu di colapsu hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
nascondere.bs.collapse | Stu avvenimentu hè sparatu immediatamente quandu u hide metudu hè statu chjamatu. |
hidden.bs.collapse | Questu avvenimentu hè sparatu quandu un elementu di colapsu hè statu oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
Un cumpunente di presentazione per u ciclismu attraversu elementi, cum'è un carrusel. I carrusels nidificati ùn sò micca supportati.
U cumpunente di carousel ùn hè micca in generale in cunfurmità cù i normi di accessibilità. Sè avete bisognu di cunfurmà, cunsiderà altre opzioni per presentà u vostru cuntenutu.
Bootstrap usa solu CSS3 per e so animazioni, ma Internet Explorer 8 è 9 ùn sustene micca e proprietà CSS necessarie. Cusì, ùn ci sò micca animazioni di transizione di slide quandu si usanu sti navigatori. Avemu decisu intenzionalmente di ùn includenu fallbacks basati in jQuery per e transizioni.
A .active
classa deve esse aghjuntu à una di e diapositive. Altrimenti, u carrusel ùn serà micca visibile.
I classi .glyphicon .glyphicon-chevron-left
è .glyphicon .glyphicon-chevron-right
ùn sò micca necessariamente necessarii per i cuntrolli. Bootstrap furnisce .icon-prev
è .icon-next
cum'è l'alternative Unicode simplici.
Aghjunghjite facilmente i sottotitoli à e vostre diapositive cù l' .carousel-caption
elementu in ogni .item
. Pone quasi ogni HTML opzionale in quì è serà automaticamente allinatu è furmatu.
I carrusels necessitanu l'usu di un id
cuntainer più esterno (u .carousel
) per i cuntrolli di carrusel per funzionà bè. Quandu aghjunghje parechje carrusels, o cambiate un carrusel id
, assicuratevi di aghjurnà i cuntrolli pertinenti.
Aduprate l'attributi di dati per cuntrullà facilmente a pusizione di u carrusel. data-slide
accetta e parolle chjave prev
o next
, chì altera a pusizione di slide relative à a so pusizione attuale. In alternativa, aduprate data-slide-to
per passà un indice di diapositiva brutu à u carrusel data-slide-to="2"
, chì cambia a pusizione di diapositiva à un indice particulari chì principia cù 0
.
L' data-ride="carousel"
attributu hè utilizatu per marcà un carrusel cum'è animazione à partesi da a carica di a pagina. Ùn pò micca esse usatu in cumminazione cù l'inizializazione JavaScript esplicita (ridondante è innecessaria) di u stessu carrusel.
Chjamate carousel manualmente cù:
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-
, cum'è in data-interval=""
.
Nome | tipu | predeterminatu | descrizzione |
---|---|---|---|
intervallu | numeru | 5000 | A quantità di tempu per ritardà trà u ciclu automaticamente un articulu. S'ellu hè falsu, u carrusel ùn serà micca automaticamente ciclu. |
pausa | stringa | nulla | "passa" | Se impostate à "hover" , mette in pausa u ciclu di u carrusel mouseenter è ripiglià u ciculu di u carrusel mouseleave . Se hè impostatu à null , u passaghju sopra u carrusel ùn mette micca in pausa. |
avvolgi | booleanu | veru | Sia chì u carrusel duveria ciclu in modu continuu o avè tappe duru. |
tastiera | booleanu | veru | Se u carrusel deve reagisce à l'avvenimenti di u teclatu. |
.carousel(options)
Inizializza u carrusel cù opzioni opzionali object
è principia à ciclu per l'articuli.
.carousel('cycle')
Cicli attraversu l'articuli di carrusel da manca à diritta.
.carousel('pause')
Impedisce à u carrusel di passà in bicicletta attraversu l'articuli.
.carousel(number)
Cicla u carrusel à un quadru particulari (basatu 0, simile à un array).
.carousel('prev')
Cicli à l'articulu precedente.
.carousel('next')
Cicli à u prossimu articulu.
A classa di carrusel di Bootstrap espone dui avvenimenti per attaccà à a funziunalità di carrusel.
I dui avvenimenti anu e seguenti proprietà supplementari:
direction
: A direzzione in quale u carrusel hè sliding (o "left"
o "right"
).relatedTarget
: L'elementu DOM chì hè sbulicatu in u locu cum'è l'elementu attivu.Tutti l'avvenimenti di carrusel sò sparati à u carrusel stessu (vale à dì à u <div class="carousel">
).
Tipu d'avvenimentu | Descrizzione |
---|---|
slide.bs.carousel | Questu avvenimentu spara immediatamente quandu u slide metudu di istanza hè invucatu. |
slid.bs.carousel | Questu avvenimentu hè sparatu quandu u carrusel hà finitu a so transizione di slide. |
L'affix plugin si attiva position: fixed;
è si disattiva, emulendu l'effettu trovu cù position: sticky;
. A subnavigazione à a diritta hè una demo live di u plugin affix.
Aduprate u plugin affissu via attributi di dati o manualmente cù u vostru propiu JavaScript. In e duie situazioni, duvete furnisce CSS per u posizionamentu è a larghezza di u vostru cuntenutu affissu.
Nota: Ùn aduprate micca u plugin affissu nantu à un elementu cuntenutu in un elementu relativamente posizionatu, cum'è una colonna tirata o spinta, per via di un bug di rendering Safari .
U plugin affissu cambia trà trè classi, ognuna chì rapprisenta un statu particulare: .affix
, .affix-top
, è .affix-bottom
. Avete da furnisce i stili, cù l'eccezzioni di position: fixed;
on .affix
, per queste classi voi stessu (indipendente di stu plugin) per trattà e pusizioni attuali.
Eccu cumu funziona u plugin affix:
.affix-top
per indicà chì l'elementu hè in a so pusizioni più altu. À questu puntu ùn hè micca necessariu posizionamentu CSS..affix
rimpiazza .affix-top
è stabilisce position: fixed;
(furnitu da u CSS di Bootstrap)..affix
cù .affix-bottom
. Siccomu l'offsets sò opzionali, l'impostazione di unu richiede di stabilisce u CSS appropritatu. In questu casu, aghjunghje position: absolute;
quandu hè necessariu. U plugin usa l'attributu di dati o l'opzione JavaScript per determinà induve situà l'elementu da quì.Segui i passi sopra per stabilisce u vostru CSS per una di l'opzioni d'utilizazione sottu.
Per aghjunghje facilmente u cumpurtamentu affissu à qualsiasi elementu, aghjunghje solu data-spy="affix"
à l'elementu chì vulete spià. Aduprate l'offsets per definisce quandu si cambia u pinning di un elementu.
Chjamate u plugin affissu via JavaScript:
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-
, cum'è in data-offset-top="200"
.
Nome | tipu | predeterminatu | descrizzione |
---|---|---|---|
offset | numeru | funzione | ughjettu | 10 | Pixel per compensà da u screnu quandu calcula a pusizione di scroll. Se un unicu numeru hè furnitu, l'offset serà appiicatu in direzzione in cima è in fondu. Per furnisce un offset unicu, in fondu è in cima solu furnisce un oggettu offset: { top: 10 } o offset: { top: 10, bottom: 5 } . Aduprate una funzione quandu avete bisognu di calculà dinamicamente un offset. |
mira | selettore | nodu | Elementu jQuery | l' window ughjettu |
Specifica l'elementu di destinazione di l'affissu. |
.affix(options)
Attiva u vostru cuntenutu cum'è cuntenutu affissu. Accetta opzioni opzionali object
.
.affix('checkPosition')
Recalculate u statu di l'affissu basatu annantu à e dimensioni, a pusizione è a pusizione di scorrimentu di l'elementi pertinenti. I classi .affix
, .affix-top
, è .affix-bottom
sò aghjuntu o sguassati da u cuntenutu affissu secondu u novu statu. Stu metudu deve esse chjamatu ogni volta chì e dimensioni di u cuntenutu affissu o l'elementu di destinazione sò cambiati, per assicurà a pusizione curretta di u cuntenutu affissu.
U plugin di l'affissu di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità di l'affissu.
Tipu d'avvenimentu | Descrizzione |
---|---|
affissu.bs.affissu | Questu avvenimentu spara immediatamente prima chì l'elementu hè statu affissu. |
affissu.bs.affissu | Questu avvenimentu hè sparatu dopu chì l'elementu hè statu affissu. |
affix-top.bs.affix | Questu avvenimentu spara immediatamente prima chì l'elementu hè statu appiccicatu in cima. |
affissed-top.bs.affix | Questu avvenimentu hè sparatu dopu chì l'elementu hè statu appiccicatu in cima. |
affix-bottom.bs.affix | Questu avvenimentu spara immediatamente prima chì l'elementu hè statu appiccicatu in fondu. |
affissed-bottom.bs.affix | Questu avvenimentu hè sparatu dopu chì l'elementu hè statu appiccicatu in fondu. |