简单的方法navbar引导 [英] easy way navbar bootstrap

问题描述

我开始使用Bootstrap。现在我在bootstrap 此处寻找导航栏。代码：

代码：

 < ul>< li>第一个菜单< / li> 
< ul>< li>子菜单< li> 
< li>子菜单2< / li> 
< ul> 
< ul> 
  

但在JavaScript中并不清楚。当他滚动
并设计时如何打开并选择活动元素？

我正在寻找一些像jqueryui这样的开源或者项目。

>如果您希望将固定边栏添加为自举文件的引导用途，请点击此处 http：// getbootstrap .com / javascript /＃词缀，试试这个：

添加 id =foodata-spy =affixdata -offset-top =100data-offset-bottom =10到< div> 或

并将JavaScript添加到页面底部：

 < script type =text / javascript> 
 offset：{
 top：100 
，bottom：function（）{
 return（this.bottom = $（'。footer'）。outerHeight（true））
} 
} 
}）
< / script> 
  

从那里开始，您需要调整所需的高度'top'元素。

例如：

 < div id =foodata-spy =affixdata-offset-top =100data-offset-bottom =10> 
 <！ - 这里的所有内容都固定在上面 - > 
< / div> 
 
< script type =text / javascript> 
 offset：{
 top：100 
，bottom：function（）{
 return（this.bottom = $（'。footer'）。outerHeight（true））
} 
} 
}）
< / script> 
  

仅供参考，我会为您的帖子提出一个更新的标题，可能是固定/ 。而不是简单的方式navbar bootstrap（只是我的意见）

I started to use Bootstrap. Right now I am looking for a navbar in bootstrap here. The side navbar html and JavaScript I tried to take (the fixed side navbar see it in the link not the example in the link)

the code:

 <ul><li>first menu</li>
 <ul><li>sub menu<li>
 <li>sub menu 2</li>
 <ul>
 <ul>

But it's not clear in JavaScript. How to open and select active element when he scroll and design?

I am looking some open source or project like jqueryui.

解决方案

If you're looking to add the fixed sidebar like bootstrap uses for their docs, like noted here http://getbootstrap.com/javascript/#affix, try this:

Add id="foo" data-spy="affix" data-offset-top="100" data-offset-bottom="10" to the <div> or <ul> you want to lock in place upon scroll.

and add the javascript at the bottom of your page:

<script type="text/javascript">
 $('#foo').affix({
    offset: {
      top: 100
    , bottom: function () {
        return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })
</script>

From there, you'll want to adjust the height at which you want it to lock by adjusting the 'top' elements.

For example:

<div id="foo" data-spy="affix" data-offset-top="100" data-offset-bottom="10">
  <!-- everything in here is be fixed to top -->
</div>

<script type="text/javascript">
  $('#foo').affix({
    offset: {
      top: 100
        , bottom: function () {
           return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })
</script>

FYI, I would suggest a more new title for your post, perhaps "Fixed/sticky navigation with bootstrap." instead of "easy way navbar bootstrap" (just my opinion)

这篇关于简单的方法navbar引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！