Навс
Ҳуҷҷатҳо ва мисолҳо барои чӣ гуна истифода бурдани ҷузъҳои навигатсионии Bootstrap.
Пойгоҳи нав
Навигатсия, ки дар Bootstrap дастрас аст, нишонаҳо ва услубҳои умумиро аз .nav
синфи асосӣ то ҳолати фаъол ва ғайрифаъол тақсим мекунад. Синфҳои тағирдиҳандаро иваз кунед, то байни ҳар як услуб гузаред.
Ҷузъи асосӣ .nav
бо flexbox сохта шудааст ва барои сохтани ҳама намуди ҷузъҳои навигатсия заминаи қавӣ фароҳам меорад. Он дорои баъзе баргардонидани услубҳо (барои кор бо рӯйхатҳо), баъзе замимаи истинод барои минтақаҳои калонтар ва ороиши асосии ғайрифаъол.
Ҷузъи асосӣ .nav
ягон ҳолатро дар бар намегирад .active
. Намунаҳои зерин синфро дар бар мегиранд, асосан барои нишон додани он, ки ин синфи мушаххас ягон услуби махсусро ба вуҷуд намеорад.
Дарсҳо дар саросари ҷаҳон истифода мешаванд, аз ин рӯ аломатгузории шумо метавонад хеле чандир бошад. Агар тартиби ҷузъҳои шумо муҳим бошад, <ul>
s-ро мисли дар боло зикршуда истифода баред , ё худатонро бо элемент гузоред. Азбаски истифодабарии , истинодҳои нав ҳамон тавре рафтор мекунанд, ки ҷузъҳои nav, вале бидуни аломатгузории иловагӣ.<ol>
<nav>
.nav
display: flex
Услубҳои дастрас
Тарзи .nav
ҷузъи s-ро бо тағирдиҳандаҳо ва утилитаҳо тағир диҳед. Агар лозим бошад, омехта кунед ва мувофиқ кунед ё худатон созед.
Ҳамоҳангсозии уфуқӣ
Ҳамоҳангсозии уфуқии navi-и худро бо утилитҳои flexbox тағир диҳед . Бо нобаёнӣ, наворҳо ба тарафи чап ҳамоҳанг карда мешаванд, аммо шумо метавонед онҳоро ба осонӣ ба марказ ё рост ҳамоҳангшуда иваз кунед.
Дар марказ бо .justify-content-center
:
Ба тарафи рост ҳамоҳангшуда бо .justify-content-end
:
Амудӣ
Тавассути тағир додани самти ҷузъҳои тағйирёбанда бо утилит паймоиши худро ҷойгир кунед .flex-column
. Оё лозим аст, ки онҳоро дар баъзе намоишгоҳҳо ҷойгир кунед, аммо дар дигарон не? Версияҳои ҷавобиро истифода баред (масалан, .flex-sm-column
).
Чун ҳамеша, паймоиши амудӣ бидуни <ul>
s низ имконпазир аст.
Ҷадвалҳо
Нави асосиро аз боло мегирад ва .nav-tabs
синфро барои тавлиди интерфейси ҷадвалбандишуда илова мекунад. Онҳоро барои сохтани минтақаҳои ҷадвалбандишаванда бо плагини JavaScript ҷадвали мо истифода баред .
Ҳабҳо
Ҳамон HTML-ро гиред, аммо ба ҷои ин истифода баред .nav-pills
:
Пур кардан ва асоснок кардан
Маҷбур кунед .nav
, ки мундариҷаи худро барои васеъ кардани паҳнои пурраи дастрас яке аз ду синфи тағирдиҳанда. Барои мутаносиб пур кардани тамоми фазои дастрас бо .nav-item
s, истифода баред .nav-fill
. Аҳамият диҳед, ки тамоми фазои уфуқӣ ишғол шудааст, аммо на ҳар як банди нав паҳнои якхела дорад.
Ҳангоми истифодаи <nav>
новбари асоси, боварӣ ҳосил кунед, ки ба .nav-item
лангар дохил кунед.
Барои унсурҳои паҳнои баробар, истифода баред .nav-justified
. Ҳама фазои уфуқӣ бо истинодҳои нав ишғол карда мешавад, аммо бар хилофи дар .nav-fill
боло зикршуда, ҳар як ҷузъи нав як паҳно хоҳад буд.
Монанди .nav-fill
мисоле, ки <nav>
новбари асосиро истифода мебарад, ҳатман ба .nav-item
лангарҳо дохил кунед.
Кор бо утилитаҳои flex
Агар ба шумо вариантҳои навсозии ҷавобгӯ ниёз дошта бошед, дар бораи истифодаи як қатор утилитаҳои flexbox фикр кунед . Дар ҳоле ки муфассалтар, ин утилитҳо мутобиқсозии бештарро дар байни нуқтаҳои қатъшавии ҷавоб пешниҳод мекунанд. Дар мисоли зер, навоварии мо дар нуқтаи пасттарин ҷойгир карда мешавад ва сипас ба тарҳбандии уфуқӣ мутобиқ мешавад, ки паҳнои дастрасро аз нуқтаи хурд сар карда пур мекунад.
Дар бораи дастрасӣ
Агар шумо navs-ро барои таъмин кардани сатри паймоиш истифода баред, боварӣ ҳосил кунед, ки role="navigation"
ба контейнери волидайнии мантиқӣ илова кунед <ul>
ё <nav>
элементро дар атрофи тамоми паймоиш печонед. Нақшро ба худ илова накунед <ul>
, зеро ин имкон намедиҳад, ки он ҳамчун рӯйхати воқеӣ тавассути технологияҳои ёрирасон эълон карда шавад.
Дар хотир доред, ки панҷараҳои паймоиш, ҳатто агар ба таври визуалӣ ҳамчун ҷадвалҳо бо .nav-tabs
синф услубӣ карда шаванд, набояд ,role="tablist"
ё role="tab"
атрибутҳо role="tabpanel"
дода шаванд . Инҳо танҳо барои интерфейсҳои ҷадвалбандии динамикӣ мувофиқанд, тавре ки дар Амалияи Authoring WAI ARIA тавсиф шудааст . Барои мисол ба рафтори JavaScript барои интерфейсҳои ҷадвалбандии динамикӣ дар ин бахш нигаред.
Истифодаи афтандаҳо
Иловаи менюҳои афтанда бо HTML каме иловагӣ ва плагини JavaScript афтанда .
Ҷадвалҳо бо афтандаҳо
Таблетҳо бо афтандаҳо
Рафтори JavaScript
Васлкунаки JavaScript-ро истифода баред - онро ба таври инфиродӣ ё тавассути bootstrap.js
файли тартибдодашуда дохил кунед - барои васеъ кардани ҷадвалҳо ва доруҳои навигатсионӣ барои сохтани панелҳои ҷадвалбандишавандаи мундариҷаи маҳаллӣ, ҳатто тавассути менюҳои афтанда.
Агар шумо JavaScript-и моро аз сарчашма сохта истода бошед, онutil.js
.
Интерфейсҳои ҷадвалбандии динамикӣ, ки дар Амалияҳои Муаллифии WAI ARIArole="tablist"
тавсиф шудаанд, , role="tab"
, role="tabpanel"
, ва атрибутҳои иловагиро талаб мекунанд , aria-
то сохтор, функсия ва ҳолати кунунии онҳоро ба корбарони технологияҳои ёрирасон (ба монанди экранхонандагони экран) расонанд.
Дар хотир доред, ки интерфейсҳои ҷадвалбандии динамикӣ набояд менюҳои афтанда дошта бошанд, зеро ин ҳам мушкилоти қобили истифода ва ҳам дастрасиро ба вуҷуд меорад. Аз нуқтаи назари қобили истифода, далели он, ки унсури триггери ҷадвали ҳозира нишон додашуда фавран намоён нест (чунон ки он дар дохили менюи афтанда пӯшида аст) метавонад боиси нофаҳмиҳо гардад. Аз нуқтаи назари дастрасӣ, дар айни замон роҳи оқилонаи харитаи ин гуна сохтмон ба намунаи стандартии WAI ARIA вуҷуд надорад, ки онро ба осонӣ барои корбарони технологияҳои ёрирасон фаҳмо кардан мумкин нест.
Ҷинси хом шумо эҳтимол дар бораи онҳо шортҳои ҷинс Остин нашунидаед. Nesciunt tofu stumptown aliqua, retro synth усто пок. Мӯйлаб клише tempor, Williamsburg Carles vegan helvetica. Reprehenderit қассоб ретро keffiyeh dreamcatcher synth. Косби свитер eu Banh mi, qui irure Терри Ричардсон собиқ калмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan либоси амрикоӣ, қассоб ихтиёрӣ аст.
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.
Барои мувофиқ кардани эҳтиёҷоти шумо, ин бо <ul>
аломатгузории -асоси, тавре ки дар боло нишон дода шудааст, ё бо ягон аломати худсаронаи "меғелонидани худ" кор мекунад. Дар хотир доред, ки агар шумо -ро истифода баред <nav>
, шумо набояд role="tablist"
мустақиман ба он илова кунед, зеро ин нақши аслии элементро ҳамчун аломати навигатсия бекор мекунад. Ба ҷои ин, ба унсури алтернативӣ гузаред (дар мисоли дар поён овардашуда, оддӣ <div>
) ва <nav>
гирди онро печонед.
Васлкунаки ҷадвалҳо инчунин бо доруҳо кор мекунад.
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in Veniaam ad. Eiusmod consequat eu adipisicing minimum 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.
Ва бо доруҳои амудӣ.
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Вениам дар ин ҷо ягон чизи бузурге ба даст намеояд. Id id reprehenderit est est eu aliqua occaecat quis and electeur exteur workum mollit dolor eiusmod. Ipsum dolor дар як Commodo яксон ва ихтиёрӣ ҳадди ақал бозмегардонад ғамхорӣ. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minimum occaecat.
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.
Истифодаи атрибутҳои маълумот
Шумо метавонед новбари ҷадвал ё ҳабҳоро бидуни навиштани ягон JavaScript бо танҳо нишон data-toggle="tab"
додан ё data-toggle="pill"
дар элемент фаъол созед. Ин атрибутҳои маълумотро дар .nav-tabs
ё .nav-pills
.
Тавассути JavaScript
Ҷадвалҳои ҷадвалбандишавандаро тавассути JavaScript фаъол созед (ҳар як ҷадвал бояд алоҳида фаъол карда шавад):
Шумо метавонед ҷадвалҳои инфиродиро бо чанд роҳ фаъол созед:
Таъсири пажмурда
Барои пажмурда шудани ҷадвалҳо, .fade
ба ҳар як .tab-pane
. Панели ҷадвали аввал низ бояд .show
мундариҷаи ибтидоиро намоён гардонад.
Усулҳо
Усулҳо ва гузаришҳои асинхронӣ
Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.
Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред .
$().таб
Унсури ҷадвал ва контейнери мундариҷаро фаъол мекунад. Ҷадвал бояд data-target
як href
гиреҳи контейнерро дар DOM дошта бошад.
.tab('нишон')
Ҷадвали додашударо интихоб мекунад ва панели алоқаманди онро нишон медиҳад. Ҳар ҷадвали дигаре, ки қаблан интихоб шуда буд, интихоб намешавад ва панели алоқаманди он пинҳон мешавад. Ба зангзананда пеш аз намоиш додани панели ҷадвал бармегардад (яъне пеш аз shown.bs.tab
рух додани ҳодиса).
.tab('дастрас кардан')
Варақаи элеме��тро нест мекунад.
Ҳодисаҳо
Ҳангоми нишон додани ҷадвали нав, рӯйдодҳо бо тартиби зерин оташ мегиранд:
hide.bs.tab
(дар ҷадвали фаъоли ҷорӣ)show.bs.tab
(дар ҷадвали нишон дода мешавад)hidden.bs.tab
(дар ҷадвали фаъоли қаблӣ, ҳамон чизе, ки бароиhide.bs.tab
ҳодиса)shown.bs.tab
(дар ҷадвали нав фаъол, ки ба тозагӣ нишон дода шудааст, ҳамон чизе, ки бароиshow.bs.tab
чорабинӣ)
Агар ягон ҷадвал аллакай фаъол набошад, hide.bs.tab
ва hidden.bs.tab
рӯйдодҳо барканор карда намешаванд.
Навъи ҳодиса | Тавсифи |
---|---|
show.bs.tab | Ин ҳодиса дар намоиши ҷадвалҳо оғоз мешавад, аммо пеш аз он ки ҷадвали нав нишон дода шавад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.target ва истифода баред .event.relatedTarget |
нишон дода шудааст | Ин ҳодиса пас аз нишон додани ҷадвал дар намоиши ҷадвал оташ мегирад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.target ва истифода баред .event.relatedTarget |
hide.bs.tab | Ин ҳодиса ҳангоми намоиш додани ҷадвали нав оғоз меёбад (ва аз ин рӯ, ҷадвали фаъоли қаблӣ пинҳон карда мешавад). Барои мақсаднок кардани ҷадвали фаъоли ҷорӣ ва ҷадвали нави ба зудӣ фаъолшаванда мутаносибан ва истифода event.target баред .event.relatedTarget |
hidden.bs.tab | Ин ҳодиса пас аз нишон додани ҷадвали нав оғоз меёбад (ва ба ин васила ҷадвали фаъоли қаблӣ пинҳон мешавад). Барои ҳадаф кардани ҷадвали фаъоли қаблӣ ва ҷадвали нави фаъол, event.target ва истифода баред .event.relatedTarget |