Navs
Dokumentasi lan conto carane nggunakake komponen navigasi sing kalebu Bootstrap.
Pangkalan nav
Navigasi kasedhiya ing Bootstrap nuduhake markup lan gaya umum, saka .nav
kelas dhasar menyang negara aktif lan dipatèni. Ganti kelas modifier kanggo ngalih ing antarane saben gaya.
Komponen dhasar .nav
dibangun nganggo flexbox lan nyedhiyakake dhasar sing kuat kanggo mbangun kabeh jinis komponen navigasi. Iku kalebu sawetara gaya overrides (kanggo nggarap dhaptar), sawetara link padding kanggo wilayah hit luwih gedhe, lan dhasar styling dipatèni.
Komponen dhasar .nav
ora kalebu .active
negara apa wae. Conto ing ngisor iki kalebu kelas, utamané kanggo nduduhake yen kelas tartamtu iki ora micu sembarang noto khusus.
Kelas digunakake ing saindhenging, supaya markup sampeyan bisa super fleksibel. Gunakake <ul>
s kaya ndhuwur, <ol>
yen urutan item penting, utawa muter dhewe karo <nav>
unsur. Amarga .nav
nggunakake display: flex
, pranala nav tumindak padha karo item nav, nanging tanpa markup ekstra.
Gaya kasedhiya
Ngganti gaya .nav
komponen s karo modifiers lan keperluan. Nyampur lan cocog yen perlu, utawa gawe dhewe.
Alignment horisontal
Ngganti keselarasan horisontal saka nav karo keperluan flexbox . Kanthi gawan, navs kiwa-selaras, nanging sampeyan bisa kanthi gampang ngganti menyang tengah utawa tengen didadekake siji.
Pusat karo .justify-content-center
:
Sejajar tengen karo .justify-content-end
:
Vertikal
Tumpukan pandhu arah kanthi ngganti arah item fleksibel karo .flex-column
sarana. Perlu tumpukan ing sawetara viewports nanging ora liyane? Gunakake versi responsif (contone, .flex-sm-column
).
Minangka tansah, pandhu arah vertikal bisa tanpa <ul>
s, banget.
Tab
Njupuk nav dhasar saka ndhuwur lan nambah .nav-tabs
kelas kanggo generate antarmuka tab. Gunakake kanggo nggawe wilayah tabable nganggo plugin JavaScript tab .
Pil
Njupuk HTML sing padha, nanging gunakake .nav-pills
:
Isi lan mbenerake
Meksa .nav
konten sampeyan kanggo ngluwihi jembar sing kasedhiya ing salah siji saka rong kelas modifier. Kanggo ngisi kabeh spasi sing kasedhiya kanthi proporsional karo .nav-item
s sampeyan, gunakake .nav-fill
. Kabar sing kabeh spasi horisontal dikuwasani, nanging ora saben item nav jembaré padha.
Nalika nggunakake <nav>
navigasi adhedhasar, sampeyan bisa ngilangi .nav-item
kanthi aman amarga mung .nav-link
dibutuhake kanggo unsur gaya <a>
.
Kanggo unsur sing padha karo jembaré, gunakake .nav-justified
. Kabeh spasi horisontal bakal dikuwasani dening pranala nav, nanging ora kaya .nav-fill
ndhuwur, saben item nav bakal padha jembaré.
Kaya .nav-fill
conto nggunakake <nav>
pandhu arah basis.
Nggarap utilitas fleksibel
Yen sampeyan mbutuhake variasi nav responsif, nimbang nggunakake seri saka keperluan flexbox . Nalika luwih wicaksana, utilitas iki nawakake kustomisasi sing luwih gedhe ing breakpoints responsif. Ing conto ing ngisor iki, nav kita bakal dibandhingke ing breakpoint paling, banjur ngganti menyang tata horisontal sing ngiseni jembaré kasedhiya miwiti saka breakpoint cilik.
Babagan aksesibilitas
Yen sampeyan nggunakake navs kanggo nyedhiyani garis pandhu arah, dadi manawa kanggo nambah role="navigation"
menyang wadhah induk paling logis saka <ul>
, utawa Lebokake <nav>
unsur sak pandhu arah kabeh. Aja nambahake peran kasebut ing <ul>
awake dhewe, amarga iki bakal nyegah supaya ora diumumake minangka dhaptar nyata dening teknologi bantu.
Elinga yen garis navigasi, sanajan ditata kanthi visual minangka tab karo .nav-tabs
kelas, ora kudu diwenehi role="tablist"
, role="tab"
utawa role="tabpanel"
atribut. Iki mung cocok kanggo antarmuka tab dinamis, kaya sing diterangake ing Praktek Penulisan WAI ARIA . Deleng prilaku JavaScript kanggo antarmuka tab dinamis ing bagean iki kanggo conto.
Nggunakake dropdowns
Tambah menu gulung mudhun kanthi HTML ekstra lan plugin JavaScript gulung mudhun .
Tab karo dropdowns
Pil karo dropdowns
Prilaku JavaScript
Gunakake plugin JavaScript tab-kalebu dhewe utawa liwat bootstrap.js
file sing dikompilasi-kanggo ngluwihi tab navigasi lan pil kanggo nggawe panel tabable isi lokal, sanajan liwat menu gulung mudhun.
Yen sampeyan lagi mbangun JavaScript saka sumber, mbutuhakeutil.js
.
Antarmuka tab dinamis, kaya sing diterangake ing Praktek Penulisan WAI ARIA , mbutuhake role="tablist"
, role="tab"
, role="tabpanel"
, lan atribut tambahan aria-
kanggo ngirim struktur, fungsi lan kahanan saiki marang pangguna teknologi pitulung (kayata pembaca layar).
Elinga yen antarmuka tab dinamis ngirim ora ngemot menu gulung mudhun, amarga iki nyebabake masalah kegunaan lan aksesibilitas. Saka perspektif kegunaan, kasunyatan manawa unsur pemicu tab sing saiki ditampilake ora langsung katon (amarga ana ing menu gulung mudhun sing ditutup) bisa nyebabake kebingungan. Saka sudut pandang aksesibilitas, saiki ora ana cara sing wicaksana kanggo nggawe peta konstruksi iki menyang pola WAI ARIA standar, tegese ora bisa dimangerteni kanthi gampang kanggo pangguna teknologi bantuan.
Denim mentahan sampeyan mbokmenawa durung krungu babagan celana jeans Austin. Nesciunt tahu stumptown aliqua, retro synth master ngresiki. Kumis cliche tempor, williamsburg carles vegan helvetica. Reprehenderit tukang daging retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex cumi. Pilih panggonan ing 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.
Kanggo nyukupi kabutuhan sampeyan, iki bisa digunakake karo <ul>
markup adhedhasar, kaya sing dituduhake ing ndhuwur, utawa nganggo markup "muter dhewe" sing kasepakatan. Elinga yen sampeyan nggunakake <nav>
, sampeyan ora kudu nambah role="tablist"
langsung, amarga iki bakal ngganti peran asli unsur minangka landmark navigasi. Nanging, ngalih menyang unsur alternatif (ing conto ing ngisor iki, prasaja <div>
) lan mbungkus <nav>
watara.
Plugin tab uga bisa digunakake karo pil.
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Aja lali yen sampeyan ora bisa nindakake apa-apa. Ora ana sing luwih apik tinimbang sing ana ing iklan kasebut. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
Lan karo pil vertikal.
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Ora ana sing kudu ditindakake, nanging ora bisa ditindakake. Id id reprehenderit sit est eu aliqua occaecat quis and velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo lan voluptate minimal reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur sing kedadeyan minimal.
Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.
Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.
Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.
Nggunakake atribut data
Sampeyan bisa ngaktifake navigasi tab utawa pil tanpa nulis JavaScript kanthi mung nemtokake data-toggle="tab"
utawa data-toggle="pill"
ing unsur. Gunakake atribut data iki ing .nav-tabs
utawa .nav-pills
.
Liwat JavaScript
Aktifake tab sing bisa tab liwat JavaScript (saben tab kudu diaktifake kanthi individu):
Sampeyan bisa ngaktifake tab individu kanthi sawetara cara:
Efek luntur
Kanggo nggawe tab ilang, tambahake .fade
menyang saben .tab-pane
. Panel tab pisanan uga kudu .show
nggawe konten awal katon.
Metode
Cara lan transisi asinkron
Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .
Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .
$().tab
Ngaktifake unsur tab lan wadhah konten. Tab kudu duwe data-target
utawa href
nargetake simpul wadhah ing DOM.
.tab('show')
Milih tab sing diwenehake lan nuduhake panel sing gegandhengan. Tab liyane sing sadurunge dipilih dadi ora dipilih lan panel sing gegandhengan didhelikake. Bali menyang panelpon sadurunge panel tab bener-bener ditampilake (yaiku sadurunge shown.bs.tab
kedadeyan kasebut).
.tab('buwang')
Numpes tab unsur.
Acara
Nalika nuduhake tab anyar, acara kasebut murub kanthi urutan ing ngisor iki:
hide.bs.tab
(ing tab aktif saiki)show.bs.tab
(ing tab sing bakal ditampilake)hidden.bs.tab
(ing tab aktif sadurunge, padha karohide.bs.tab
acara kasebut)shown.bs.tab
(ing tab sing mentas aktif ditampilake, padha karoshow.bs.tab
acara kasebut)
Yen ora ana tab sing wis aktif, banjur acara hide.bs.tab
lan hidden.bs.tab
ora bakal dipecat.
Jinis Acara | Katrangan |
---|---|
show.bs.tab | Acara iki murub ing tab show, nanging sadurunge tab anyar wis ditampilake. Gunakake event.target lan event.relatedTarget kanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya). |
ditampilake.bs.tab | Acara iki murub ing tab show sawise tab ditampilake. Gunakake event.target lan event.relatedTarget kanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya). |
hide.bs.tab | Acara iki murub nalika tab anyar bakal ditampilake (lan kanthi mangkono tab aktif sadurunge bakal didhelikake). Gunakake event.target lan event.relatedTarget kanggo target tab aktif saiki lan tab anyar sing bakal aktif. |
hidden.bs.tab | Acara iki murub sawise tab anyar ditampilake (lan kanthi mangkono tab aktif sadurunge didhelikake). Gunakake event.target lan event.relatedTarget kanggo target tab aktif sadurunge lan tab aktif anyar, mungguh. |