用bootstrap代替iframe

前端之家收集整理的这篇文章主要介绍了用bootstrap代替iframe前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如何用bootstrap代替ifream?

需求:把页面划分成top(顶部导航栏),left(左侧导航栏),central(显示主体)三部分
ifame方案:index页面,写好top,left内容,最后引入ifream,a标签中使用target属性跳转到iframe

  1. <div class="navbar navbar-fixed-top" style="background: #1186CB;">
  2. top内容   
  3. </div>
  4. <div class="span3">
  5.     left内容
  6.     <ul id="main-nav" class="nav nav-tabs nav-stacked">
  7.         <li class="active">
  8.             <a href="./selectfile.html" target="main">
  9.                 <i class="icon-arrow-up"></i>
  10.                 上传excel         
  11.             </a>
  12.         </li>
  13.     </ul>
  14. </div> 
  15. <div class="span12">
  16.     <iframe name="main" scrolling=no frameborder=no>
  17.     </iframe>
  18. </div>

bootstrap方案:写公共的top.jsp, left.jsp 在每个页面中引入

  1. <%@ include file="includetop.jsp" %>

好处:

使用bootsrap模态框,不会出现只遮罩子frame,无法遮罩整个ifream的情况。

作者:ltjxwxz

猜你在找的Bootstrap相关文章