bootstrap如何实现左侧导航栏,右侧网页

方式一:采用iframe,即将网页放入iframe这个容器中。

方式二:采用div的话绑定a或者li的点击事件 阻止a的默认行为,用jquery的load()可以来加载这个div,即将网页放入div中。

方式三:angular的嵌套路由也可以实现。不过本人对angular不是很了解,所以这种方式没有去试。

方式四:采用ajax技术,实现局部刷新。(本人觉得该方式比较麻烦,就不在这细说了)。

二者的实现方式:

采用iframe的话比较简单,  然后再写一个script函数:   

再在${pageContext.request.contextPath}/user/renderr.do')>添加,就可以实现在左侧菜单点击,加载右边网页。

但是他有一个不好的地方就是,iframe的height要限定,这样的话对不同需求的页面来说就使得不能显示最佳效果。(而且iframe现在也是过时了)。

再看看用div的方式来做的话:首先定义一个div

,然后再写一个script函数,

采用该种方式的话就是代码量也很简洁,而且div会根据网页的内容来填充,就不需要将div的height定死,让其自动填充。使得每个网页的内容显示效果更好一点。但是它也有一个不好的方面,就是div的样式它受父级div的影响。不过你也可以对子级div进行自定义样式。

ps(个人觉得还是采用div的方式会好一点,毕竟页面的显示至关重要。)

还有就是bootstrap3.0中它有这个可以缩放的导航栏,具体使用情况可以去它官网查看文档。

此方法我也用过     



效果还是不错的。总之根据自己的需要选择不同的导航栏加载页面方式。

补充一点:用iframe做的话,iframe对应的网页是独立的,不受该页面的样式的影响。

用div做的话,div对应的网页不是独立的,它是嵌入当前页面的,所以div里面的样式会受父级div等的样式的影响。如果div的对应页面和当前页面的css或js都不影响的话,用jquery的load加载div会更好一点。



你可能感兴趣的:(bootstrap如何实现左侧导航栏,右侧网页)