减小字体
增大字体- ·上一篇文章：Bootstrap 轮播（Carousel）插件
- ·下一篇文章：Bootstrap UI 编辑器
Bootstrap 附加导航（Affix）插件
Bootstrap附加导航（Affix）插件附加导航（Affix）插件允许指定<div>固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该<div>会锁定在某个位置，不会随着页面其他部分一起滚动。如果您想要单独引用该插件的功能，那么您需要引用affix.js。或者，正如Bootstrap插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。用法您可以通过data属性或者通过JavaScript来使用附加导航（Affix）插件。通过data属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加data-spy="affix"即可。请使用偏移来定义何时切换元素的锁定和移动。实例下面的实例演示了通过data属性使用附加导航（Affix）插件的用法：实例<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Bootstrap附加导航（Affix）插件</title><linkrel="stylesheet"href="http://cdn.static.k88.net/libs/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="http://cdn.static.k88.net/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://cdn.static.k88.net/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script><style>/*CustomStyles*/ul.nav-tabs{width:140px;margin-top:20px;border-radius:4px;border:1pxsolid#ddd;box-shadow:01px4pxrgba(0,0,0,0.067);}ul.nav-tabsli{margin:0;border-top:1pxsolid#ddd;}ul.nav-tabsli:first-child{border-top:none;}ul.nav-tabslia{margin:0;padding:8px16px;border-radius:0;}ul.nav-tabsli.activea,ul.nav-tabsli.activea:hover{color:#fff;background:#0088cc;border:1pxsolid#0088cc;}ul.nav-tabsli:first-childa{border-radius:4px4px00;}ul.nav-tabsli:last-childa{border-radius:004px4px;}ul.nav-tabs.affix{top:30px;/*Setthetoppositionofpinnedelement*/}</style></head><bodydata-spy="scroll"data-target="#myScrollspy"><divclass="container"><divclass="jumbotron"><h1>BootstrapAffix</h1></div><divclass="row"><divclass="col-xs-3"id="myScrollspy"><ulclass="navnav-tabsnav-stacked"data-spy="affix"data-offset-top="125"><liclass="active"><ahref="#section-1">第一部分</a></li><li><ahref="#section-2">第二部分</a></li><li><ahref="#section-3">第三部分</a></li><li><ahref="#section-4">第四部分</a></li><li><ahref="#section-5">第五部分</a></li></ul></div><divclass="col-xs-9"><h2id="section-1">第一部分</h2><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Nameusemtempor,variusquamat,luctusdui.Maurismagnametus,dapibusnecturpisvel,sempermalesuadaante.Vestibulumidmetusacnislbibendumscelerisquenonnonpurus.Suspendissevariusnibhnonaliquetsagittis.Intinciduntorcisitametelementumvestibulum.Vivamusfermentuminarcuinaliquam.Quisquealiquamportaodioinfringilla.Vivamusnislleo,blanditatbibendumeu,tristiqueegetrisus.Integeraliquetquamutelitsuscipit,idinterdumnequeporttitor.Integerfaucibusligula.</p><p>Vestibulumquisquamutmagnaconsequatfaucibus.Pellentesqueegetnisiamisuscipittincidunt.Uttempusdictumrisus.Pellentesqueviverrasagittisquamatmattis.Suspendissepotenti.Aliquamsitametgravidanibh,facilisisgravidaodio.Phasellusauctorvelitatlacusblandit,commodoiaculisjustoviverra.Etiamvitaeestarcu.Maurisvelconguedolor.Aliquamegetmimi.Fuscequamtortor,commodoacduiquis,bibendumviverraerat.Maecenasmattislectusenim,quistinciduntduimolestieeuismod.Curabituretdiamtristique,accumsannunceu,hendrerittellus.</p><hr><h2id="section-2">第二部分</h2><p>Nullamhendreritjustononleoaliquetimperdiet.Etiaminsagittislectus.Suspendisseultricesplacerataccumsan.Maurisquisdapibusorci.Indapibusvelitblanditpharetratincidunt.Quisquenonsapienneclacuscondimentumfacilisisutiaculisenim.Sedviverrainterdumbibendum.Donecacsollicitudindolor.Sedfringillavitaelacusatrutrum.Phasellusconguevestibulumligulasedconsequat.</p><p>Vestibulumconsecteturscelerisquelacus,acfermentumloremconvallissed.Namodiotortor,dictumquismalesuadaat,pellentesquevitaeorci.Vivamuselementum,feliseuauctorlobortis,diamvelitegestaslacus,quisfermentummetusantequisurna.Sedatfacilisislibero.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Vestibulumbibendumblanditdolor.Nuncorcidolor,molestienecnibhin,hendrerittinciduntante.Vivamussemaugue,hendreritnonsapienin,mollisornareaugue.</p><hr><h2id="section-3">第三部分</h2><p>Integerpulvinarleoidrisuspellentesquevestibulum.Seddiamlibero,sodalesegetsapienvel,porttitorbibendumenim.Donecsednibhvitaeloremporttitorblanditinnecante.Pellentesquevitaemetusipsum.Phasellussednuncacsemmalesuadacondimentum.Etiaminaliquamlectus.Namvelsapiendiam.Donecpharetraidarcuegetblandit.Proinimperdietmattisaugueinporttitor.Quisquetempusenimidlobortisfeugiat.Suspendissetinciduntrisusquisdolorfringillablandit.Utsedsapienatpuruslaciniaporttitor.Nullamiaculis,felisapretiumornare,dolornislsempertortor,velsagittislacusestconsequateros.Sedidpretiumnisl.Curabiturdolornisl,laoreetvitaealiquamid,tinciduntsitametmauris.</p><p>Phasellusvitaesuscipitjusto.Maurispharetrafeugiatanteidlacinia.Etiamfaucibusmaurisidtemporegestas.Duisluctusturpisataccumsantincidunt.Phasellusrisusrisus,volutpatveltellusac,tinciduntfringillamassa.Etiamhendreritdoloregetanterutrumadipiscing.Crasinterdumipsummattis,tempusmaurisvel,semperipsum.Duisseddolorutenimlobortispellentesqueultriciesacligula.Pellentesqueconvalliselitnisi,idvulputateipsumullamcorperut.Crasacpulvinarpurus,acviverraest.Suspendissepotenti.Integerpellentesquenequeetelementumtempus.Curabiturbibenduminligulautrhoncus.</p><p>Quisquepharetravelitidvelitiaculispretium.Nulla
Bootstrap 附加导航（Affix）插件
