您的位置: 首页  >  文章  >  使用bootstrap，iframe框架简单布局

使用bootstrap，iframe框架简单布局

分类: 文章 • 2024-02-17 13:19:18

初见bootstrap，比hui框架好用很多，现在还在探索阶段。

iframe框架布局，还有很多地方需要改进。

很多内容还来不及写，后期慢慢补上。

浏览器运行效果大概如下：使用bootstrap，iframe框架简单布局



index页面代码如下：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="renderer" content="webkit|ie-comp|ie-stand">  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />  
  8.     <title>index</title>  
  9.     <meta name="keywords" content="关键词,5个左右,单个8汉字以内">  
  10.     <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">  
  11.   
  12.     <link rel="stylesheet" href="../css/style.css">  
  13.     <link rel="stylesheet" href="../css/bootstrap.min.css">  
  14.     <style type="text/css">  
  15.         body{  
  16.             background-color: #0f0f0f;  
  17.             margin: 20px;  
  18.   
  19.         }  
  20.     </style>  
  21.   
  22.   
  23.   
  24. </head>  
  25. <body>  
  26. <div class="container">  
  27. <header>  
  28.     <div style="background-color: #2b542c">  
  29.         <iframe src="header.html" width="100%" scrolling="no" height="300px"></iframe>  
  30.     </div>  
  31.   
  32. </header>  
  33.   
  34. <div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3 nav">  
  35.     <ul>  
  36.         <li>我的足迹</li>  
  37.         <li>沿途风景</li>  
  38.         <li>旅行攻略</li>  
  39.     </ul>  
  40.     <ul class="nav1">  
  41.         <div> </div>  
  42.         <div class="input-group " style="width: 200px" >  
  43.             <span class="input-group-addon"><span class="glyphicon glyphicon-user hidden-xs hidden-sm"></span> 用户名</span>  
  44.             <input type="text" class="form-control">  
  45.         </div>  
  46.         <div> </div>  
  47.         <div class="input-group " style="width: 200px" >  
  48.             <span class="input-group-addon"><span class="glyphicon glyphicon-certificate hidden-xs hidden-sm"></span> 密码</span>  
  49.             <input type="password" class="form-control">  
  50.         </div>  
  51.     </ul>  
  52. </div>  
  53. <div class=" col-lg-9 col-md-9 col-sm-9 col-xs-9" style="background-color: #fff" >  
  54.     <iframe src="nav.html" id="iframepage" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" onLoad="iFrameHeight()" width="30%"></iframe>  
  55. </div>  
  56.   
  57. <footer>  
  58.     <iframe src="footer.html" width="100%" style="background-color: #0f0f0f"></iframe>  
  59. </footer>  
  60. <script>  
  61.     function iFrameHeight() {  
  62.         var ifm= document.getElementById("iframepage");  
  63.         var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;  
  64.         if(ifm != null && subWeb != null) {  
  65.             ifm.height = subWeb.body.scrollHeight;  
  66.             ifm.width = subWeb.body.scrollWidth;  
  67.         }  
  68.     }  
  69. </script>  
  70. </div>  
  71. </body>  
  72. </html>  

header页面代码如下：
[html] view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="renderer" content="webkit|ie-comp|ie-stand">  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />  
  8.     <title>header</title>  
  9.     <meta name="keywords" content="关键词,5个左右,单个8汉字以内">  
  10.     <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">  
  11.   
  12.     <link rel="stylesheet" href="../css/style.css">  
  13.     <link rel="stylesheet" href="../css/bootstrap.min.css">  
  14.     <style>  
  15.         body{  
  16.   
  17.         }  
  18.     </style>  
  19.   
  20.   
  21.   
  22. </head>  
  23. <body >  
  24.   
  25. <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 header-left">  
  26.     <span class="header-lv"><span class="hidden-xs">旅</span> <span class="glyphicon glyphicon-asterisk hidden-xs hidden-sm"></span> <span class="header-font">行天下</span></span>  
  27. </div>  
  28. <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 header-right">  
  29.     <div class="row header-right-marign">  
  30.         <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">  
  31.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>  
  32.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">关于</div>  
  33.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>  
  34.         </div>  
  35.         <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">  
  36.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">|</div>  
  37.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">服务</div>  
  38.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>  
  39.   
  40.         </div>  
  41.         <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">  
  42.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">|</div>  
  43.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">支持</div>  
  44.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>  
  45.         </div>  
  46.         <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">  
  47.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">|</div>  
  48.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">联系</div>  
  49.             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>  
  50.         </div>  
  51.     </div>  
  52. </div>  
  53. <div><img src="../images/3.jpg" class="img-responsive" alt="Responsive image"></div>  
  54.   
  55. </body>  
  56. </html>  

nav页面代码如下：

[html] view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="renderer" content="webkit|ie-comp|ie-stand">  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />  
  8.     <title>nav</title>  
  9.     <meta name="keywords" content="关键词,5个左右,单个8汉字以内">  
  10.     <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">  
  11.   
  12.     <link rel="stylesheet" href="../css/style.css">  
  13.     <link rel="stylesheet" href="../css/bootstrap.min.css">  
  14.     <script src="../js/bootstrap.min.js"></script>  
  15.     <style>  
  16.         body{  
  17.   
  18.         }  
  19.     </style>  
  20.   
  21.   
  22.   
  23. </head>  
  24. <body >  
  25.   
  26. Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。  
  27. Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。  
  28. [1]  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。  
  29. Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。  
  30. Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。  
  31. [2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。[3  
  32. Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。  
  33. Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。  
  34. [1]  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。  
  35. Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。  
  36. Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）  
  37. </body>  
  38. </html>  

footer页面如下：

[html] view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="renderer" content="webkit|ie-comp|ie-stand">  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />  
  8.     <title>footer</title>  
  9.     <meta name="keywords" content="关键词,5个左右,单个8汉字以内">  
  10.     <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">  
  11.   
  12.     <link rel="stylesheet" href="../css/style.css">  
  13.   
  14.   
  15. </head>  
  16. <body>  
  17. <p>版权所有@Anna</p>  
  18. </body>  
  19. </html>  

相关推荐