Navs
Documentation sy ohatra momba ny fampiasana ireo singa fitetezana ao amin'ny Bootstrap.
Base nav
Ny fitetezana hita ao amin'ny Bootstrap dia mizara marika sy fomba ankapobeny, manomboka amin'ny .nav
kilasy fototra ka hatrany amin'ny fanjakana mavitrika sy kilemaina. Ampifamadiho ny kilasy modifier mba hifindra eo amin'ny fomba tsirairay.
Ny .nav
singa fototra dia natsangana tamin'ny flexbox ary manome fototra mafy orina amin'ny fananganana karazana singa rehetra. Ao anatin'izany ny fanodinkodinana fomba sasany (ho an'ny miasa miaraka amin'ny lisitra), ny padding rohy sasany ho an'ny faritra voadona lehibe kokoa, ary ny fanaingoana fototra kilemaina.
Ny .nav
singa fototra dia tsy ahitana .active
fanjakana. Ireto ohatra manaraka ireto dia ahitana ny kilasy, indrindra indrindra mba hampisehoana fa ity kilasy manokana ity dia tsy miteraka fanaingoana manokana.
Ampiasaina manerana ny kilasy ny kilasy, noho izany dia mety ho malefaka be ny marikao. Ampiasao <ul>
ny s toy ny etsy ambony, <ol>
raha zava-dehibe ny filaharan'ireo entanao, na manodina ny anao amin'ny <nav>
singa iray. Satria ny .nav
fampiasana display: flex
, ny rohy nav dia mitovy amin'ny zavatra nav, fa tsy misy marika fanampiny.
Fomba misy
Hanova ny endriky ny .nav
singa s miaraka amin'ny modifiers sy utility. Afangaro ary ampifanaraho araka izay ilaina, na manangana anao manokana.
Fandrindrana marindrano
Ovay ny fampifanarahana marindrano amin'ny nav anao amin'ny fitaovana flexbox . Amin'ny alàlan'ny default, ny navs dia mirindra havia, saingy azonao atao ny manova azy ireo mora foana ho afovoany na havanana.
Foibe miaraka amin'ny .justify-content-center
:
Mifanaraka tsara amin'ny .justify-content-end
:
mijidina
Atsangano ny fitetezanao amin'ny alàlan'ny fanovana ny làlan'ny singa flex miaraka amin'ny .flex-column
fitaovana. Mila manangana azy ireo amin'ny toerana fijery sasany fa tsy ny hafa? Ampiasao ny dikan-teny mamaly (oh, .flex-sm-column
).
Toy ny mahazatra, azo atao ny navigateur mitsangana tsy misy <ul>
s ihany koa.
Tabs
Maka ny nav fototra avy any ambony ary manampy ny .nav-tabs
kilasy hamoronana interface tsara misy tabilao. Ampiasao izy ireo mba hamoronana faritra misy tabilao miaraka amin'ny plugin JavaScript tab .
levitra
Raiso io HTML io ihany, fa ampiasao .nav-pills
kosa:
Fenoy ary manamarina
Manery ny .nav
atiny hanitarana ny sakany feno iray amin'ireo kilasy modifier roa. Mba hamenoana ny habaka rehetra misy amin'ny .nav-item
s anao, ampiasao ny .nav-fill
. Mariho fa ny habaka marindrano rehetra dia mipetraka, fa tsy ny singa nav rehetra dia mitovy ny sakany.
Rehefa mampiasa <nav>
navigateur mifototra, ataovy azo antoka fa ampidirina .nav-item
amin'ny vatofantsika.
Ho an'ny singa mitovy sakany dia ampiasao .nav-justified
. Ny habaka marindrano rehetra dia hofehezin'ny rohy nav, fa tsy toy ny .nav-fill
etsy ambony, ny singa nav rehetra dia hitovy ny sakany.
Tahaka ny .nav-fill
ohatra amin'ny fampiasana <nav>
navigateur mifototra, ataovy azo antoka fa ampidirina .nav-item
amin'ny vatofantsika.
Miasa amin'ny flex utility
Raha mila fiovaovan'ny nav mamaly ianao dia diniho ny fampiasana andiana fitaovana flexbox . Na dia mibaribary kokoa aza, ireo fitaovana ireo dia manolotra fanamboarana lehibe kokoa amin'ireo teboka fiatoana mamaly. Ao amin'ny ohatra etsy ambany, ny nav-ntsika dia hapetraka eo amin'ny teboka farany ambany indrindra, avy eo ampifanaraho amin'ny lamina marindrano izay mameno ny sakany misy manomboka amin'ny teboka kely.
Momba ny accessibility
Raha mampiasa navs ianao mba hanomezana bara fitetezana, aza hadino ny manampy a role="navigation"
amin'ny fitoeran'ny ray aman-dreny lojika indrindra amin'ny <ul>
, na manarona <nav>
singa iray manodidina ny fitetezana manontolo. Aza ampidirina amin'ny <ul>
tenany ny anjara andraikitra, satria izany dia hanakana azy tsy hambara ho lisitra tena izy amin'ny alàlan'ny teknolojia manampy.
Mariho fa ny bar navigation, na dia natao ho toy ny tabilao miaraka amin'ny .nav-tabs
kilasy aza, dia tsy tokony homena role="tablist"
, role="tab"
na role="tabpanel"
toetra. Ireo ihany no mety amin'ny interface dynamic tabbed, araka ny voalaza ao amin'ny WAI ARIA Authoring Practices . Jereo ny fitondran-tena JavaScript ho an'ny seha-pifandraisana mavitrika amin'ity fizarana ity ho ohatra.
Mampiasa dropdowns
Ampio ny menio midina miaraka amin'ny HTML fanampiny kely sy ny plugin JavaScript dropdowns .
Kiheba misy fidinana
Pills misy dropdowns
Fihetsika JavaScript
Ampiasao ny plugin JavaScript kiheba — ampidiro tsirairay izany na amin'ny alàlan'ny bootstrap.js
rakitra natambatra — hanitarana ny tabilao sy ny pilina fitetezana anay mba hamoronana takelaka misy tabilao amin'ny atiny eo an-toerana, na dia amin'ny alàlan'ny menio midina.
Raha manorina JavaScript avy amin'ny loharano ianao dia mitakyutil.js
.
Ny interface dynamic tabbed, araka ny voalaza ao amin'ny WAI ARIA Authoring Practices , dia mitaky role="tablist"
, role="tab"
, role="tabpanel"
, ary aria-
toetra fanampiny mba hampitana ny rafitra, ny fiasany ary ny toetrany amin'izao fotoana izao amin'ireo mpampiasa ny teknolojia manampy (toy ny mpamaky efijery).
Mariho fa ny interface dynamique tabbed dia tsy tokony ahitana menio midina, satria miteraka olana amin'ny fampiasana sy ny fidirana. Avy amin'ny fomba fijery azo ampiasaina, mety hiteraka fisavoritahana ny hoe tsy hita avy hatrany ny singa trigger an'ny kiheba aseho amin'izao fotoana izao (satria ao anatin'ny menio midina mihidy). Amin'ny fomba fijery azo idirana, tsy misy fomba azo saina amin'izao fotoana izao hanoratana an'io karazana fanorenana io amin'ny lamina WAI ARIA mahazatra, midika izany fa tsy mora azo amin'ny mpampiasa ny teknolojia fanampiana izany.
Denim manta angamba mbola tsy henonao ny momba azy ireo pataloha jeans Austin. Nesciunt tofu stumptown aliqua, fanadiovana retro synth master. Ny volombava cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Alefaso toerana amin'ny salvia cillum iphone. Seitan aliquip quis cardigan akanjo amerikana, mpivaro-kena 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.
Mba hanampiana amin'ny zavatra ilainao, ity dia miasa miaraka amin'ny <ul>
marika mifototra, araka ny aseho etsy ambony, na miaraka amin'ny marika "manodina ny anao manokana". Mariho fa raha mampiasa <nav>
, ianao dia tsy tokony hanampy role="tablist"
azy mivantana, satria izany dia hanaisotra ny andraikitry ny teratany ho toy ny mari-pamantarana fitetezana. Fa kosa, miverena amina singa iray hafa (amin'ny ohatra etsy ambany, tsotra <div>
) ary aforeto ny <nav>
manodidina azy.
Ny plugin tabs koa dia miasa miaraka amin'ny pilina.
Ny occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Tsy misy afa-tsy ny fanazaran-tena azo atao. Ire magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. 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.
Ary miaraka amin'ny pilina mitsangana.
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim 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.
Mampiasa ny angona toetra
Azonao atao ny manetsika kiheba na pilule navigation nefa tsy manoratra JavaScript amin'ny alalan'ny famaritana fotsiny data-toggle="tab"
na data-toggle="pill"
amin'ny singa iray. Ampiasao amin'ny .nav-tabs
na .nav-pills
.
Amin'ny JavaScript
Alefaso amin'ny alalan'ny JavaScript ny kiheba azo vakiana (mila ampihetsika tsirairay ny tabilao tsirairay):
Azonao atao ny manetsika ny tabilao tsirairay amin'ny fomba maro:
Fade effect
Mba hahatonga ny tabilao ho levona, ampio .fade
ny tsirairay .tab-pane
. Ny takelaka tabilao voalohany dia tsy maintsy .show
manao ny atiny voalohany ho hita ihany koa.
fomba
Fomba sy fifindrana asynchronous
Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .
Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .
$().tab
Mampihetsika singa kiheba sy fitoeran'ny atiny. Ny tabilao dia tokony hanana na data-target
kendrena href
ny node container ao amin'ny DOM.
.tab('show')
Mifidy ny kiheba nomena ary mampiseho ny tontonana mifandray aminy. Izay kiheba hafa izay nofantenana teo aloha dia lasa tsy voafantina ary nafenina ny tontonana mifandraika aminy. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny takelaka tabilao (izany hoe alohan'ny shown.bs.tab
nitrangan'ny hetsika).
.tab('manary')
Manimba ny tabilao misy singa.
zava-mitranga
Rehefa mampiseho kiheba vaovao dia miredareda toy izao manaraka izao ny hetsika:
hide.bs.tab
(amin'ny tabilao mavitrika ankehitriny)show.bs.tab
(eo amin'ny tabilao haseho)hidden.bs.tab
(eo amin'ny tabilao mavitrika teo aloha, mitovy amin'ny an'nyhide.bs.tab
hetsika)shown.bs.tab
(eo amin'ny tabilao vao naseho vao mavitrika, mitovy amin'ny an'nyshow.bs.tab
hetsika)
Raha tsy misy kiheba efa navitrika dia tsy ho voaroaka ny hetsika ary hide.bs.tab
.hidden.bs.tab
Karazana hetsika | Description |
---|---|
show.bs.tab | Ity hetsika ity dia mirehitra amin'ny seho kiheba, saingy alohan'ny hisehoan'ny kiheba vaovao. Ampiasao event.target sy event.relatedTarget kendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy). |
aseho.bs.tab | Ity hetsika ity dia mirehitra amin'ny seho kiheba rehefa avy naseho ny kiheba iray. Ampiasao event.target sy event.relatedTarget kendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy). |
hide.bs.tab | Mirehitra ity hetsika ity rehefa misy kiheba vaovao haseho (ary noho izany dia afenina ny kiheba mavitrika teo aloha). Ampiasao event.target sy event.relatedTarget kendrena ny tabilao mavitrika ankehitriny sy ny tabilao vaovao tsy ho ela. |
hidden.bs.tab | Mirehitra ity hetsika ity rehefa miseho ny tabilao vaovao (ary noho izany dia afenina ny tabilao mavitrika teo aloha). Ampiasao event.target sy event.relatedTarget ikendrena ny tabilao mavitrika teo aloha sy ny tabilao mavitrika vaovao. |