Learning Essentials:
1. Additional Navigation plug-ins
Keynote Teacher: Li Tinghui
In this lesson we mainly learn about the additional navigation plug-ins in Bootstrap.
A Additional navigation
Additional navigation is pasted on the screen to implement the anchor point function.
Basic example
<BodyData-spy= "Scroll"Data-target= "#myScrollspy"> <Divclass= "Container"> <Divclass= "Jumbotron"style= "height:150px"> <H1>Bootstrap Affix</H1> </Div> <Divclass= "Row"> <Divclass= "Col-xs-3"ID= "Myscrollspy"> <ulclass= "Nav nav-pills nav-stacked"Data-spy= "Affix"Data-offset-top= "Max"> <Liclass= "Active"> <ahref= "#section-1">The first part</a> </Li> <Li> <ahref= "#section-2">Part II</a> </Li> <Li> <ahref= "#section-3">Part III</a> </Li> <Li> <ahref= "#section-4">Fourth part</a> </Li> <Li> <ahref= "#section-4">Fifth part</a> </Li> </ul> </Div> <Divclass= "Col-xs-9"> <H2ID= "Section-1">The first part</H2> <P> ... </P> <H2ID= "Section-2">Part II</H2> <P> ... </P> <H2ID= "Section-3">Part III</H2> <P> ... </P> <H2ID= "Section-4">Fourth part</H2> <P> ... </P> <H2ID= "Section-5">Fourth part</H2> <P> ... </P> </Div> </Div> </Div>
CSS part of Navigation
{ width: 200px;} { top: 30px;}
JavaScript instead of data-spy= "affix" data-offset-top= "125"
$ (' #myAffix '). Affix ({ offset: { )})
We use top by default, and of course we can default to the bottom bottom. This positioning method is directly through the CSS positioning.
Set into bottom
{ bottom: 30px;}
Set into bottom
$ (' #myAffix '). Affix ({ offset: { )})
Affix contains several events, as follows:
Other similarities
function () { alert (' Trigger! ‘
19th Chapter additional Navigation plugin