初见bootstrap，iframe框架简单布局

最新推荐文章于 2024-06-03 23:50:56 发布
最新推荐文章于 2024-06-03 23:50:56 发布
阅读量2.4w 收藏 5
点赞数 5
分类专栏： jQuery 文章标签： bootstrap 框架 布局 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Annaluo/article/details/77338389
版权

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

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

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

浏览器运行效果大概如下：

 

 

index页面代码如下：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>index</title>
    <meta name="keywords" content="关键词,5个左右,单个8汉字以内">
    <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">

    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style type="text/css">
        body{
            background-color: #0f0f0f;
            margin: 20px;

        }
    </style>



</head>
<body>
<div class="container">
<header>
    <div style="background-color: #2b542c">
        <iframe src="header.html" width="100%" scrolling="no" height="300px"></iframe>
    </div>

</header>

<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3 nav">
    <ul>
        <li>我的足迹</li>
        <li>沿途风景</li>
        <li>旅行攻略</li>
    </ul>
    <ul class="nav1">
        <div> </div>
        <div class="input-group " style="width: 200px" >
            <span class="input-group-addon"><span class="glyphicon glyphicon-user hidden-xs hidden-sm"></span> 用户名</span>
            <input type="text" class="form-control">
        </div>
        <div> </div>
        <div class="input-group " style="width: 200px" >
            <span class="input-group-addon"><span class="glyphicon glyphicon-certificate hidden-xs hidden-sm"></span> 密码</span>
            <input type="password" class="form-control">
        </div>
    </ul>
</div>
<div class=" col-lg-9 col-md-9 col-sm-9 col-xs-9" style="background-color: #fff" >
    <iframe src="nav.html" id="iframepage" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" onLoad="iFrameHeight()" width="30%"></iframe>
</div>

<footer>
    <iframe src="footer.html" width="100%" style="background-color: #0f0f0f"></iframe>
</footer>
<script>
    function iFrameHeight() {
        var ifm= document.getElementById("iframepage");
        var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
        if(ifm != null && subWeb != null) {
            ifm.height = subWeb.body.scrollHeight;
            ifm.width = subWeb.body.scrollWidth;
        }
    }
</script>
</div>
</body>
</html>


header页面代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>header</title>
    <meta name="keywords" content="关键词,5个左右,单个8汉字以内">
    <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">

    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        body{

        }
    </style>



</head>
<body >

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 header-left">
    <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>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 header-right">
    <div class="row header-right-marign">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">关于</div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">|</div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">服务</div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>

        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">|</div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">支持</div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">|</div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">联系</div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
        </div>
    </div>
</div>
<div><img src="../images/3.jpg" class="img-responsive" alt="Responsive image"></div>

</body>
</html>

 

 

 

nav页面代码如下：

 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>nav</title>
    <meta name="keywords" content="关键词,5个左右,单个8汉字以内">
    <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">

    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.min.js"></script>
    <style>
        body{

        }
    </style>



</head>
<body >

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
[1]  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
[2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。[3
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
[1]  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）
</body>
</html>


footer页面如下：

 

 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>footer</title>
    <meta name="keywords" content="关键词,5个左右,单个8汉字以内">
    <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">

    <link rel="stylesheet" href="../css/style.css">


</head>
<body>
<p>版权所有@Anna</p>
</body>
</html>

 

2020,1,9更新。

真的没有想到当时随便写的东西现在有这么多人在看，有点小意外。

经过热心网友反馈我才发现当初原来没有把css的代码放上来。由于过了这么长的时间了，我电脑也重装过了，所以虽然刚刚在同一个文件夹里面找到了一个疑似的css文件，但我也不能完全确认这是当初的文件。

所以如果这个CSS代码不对，请谅解。

style.css文件，代码如下。

.header-left{
    background-color: #2aabd2;
    height: 50px;

}
.header-lv{
    font-size: 36px;
    color: #fff;
}
.header-font{
    font-family: 方正舒体;
}
.header-right{
    background-color: #efeef0;
    height: 50px;
}

.header-right-marign{
    margin-top: 15px;
}
.nav{
    background-color: #2aabd2;
    height: 230px;
    padding: 0;
}
.nav ul{
    color: #ffffff;
    font-size: 24px;
    line-height: 60px;
    margin-top: 30px;
}
.nav1{
    background-color: #d58512;
    height: 280px;
    margin-right: -100px;

}
.input-group-top{
    margin-top: 100px;
}

 

 

 

Annaluo
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现iframe下的bootstrap的模态框从父页面弹出
赵大土的博客
10-22 1181
1. 父页面 <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div clas...
tab选项卡跳转，在iframe里面新建选项卡和跳转选项卡
q596333033的博客
11-14 4318
第一种以href链接的方式： [javascript] view plain copy function addTab(title, url){               if ($('#tt').tabs('exists', title)){                   $('#tt').tabs('select', title);    
bootstrap在iframe框架中实现由子页面在顶级页面打开模态框（modal）
那些年的代码
09-07 2369
我需要完成的效果： 1.在顶级页面打开模态框，并且遮罩层也要再顶级页面 2.单击遮罩层部分，模态框不关闭 问题描述： 不知为什么，可能是bootstrap前端框架添加遮罩层的一些问题。通过子页面在顶级页面打开模态框（modal），遮罩层竟然只在子页面显示。 如下效果： 1.主页面代码： <!DOCTYPE html> <html> &...
毕设IDEA2019之结合bootstrap3框架iframe标签模态框实现系统嵌套布局
weixin_42356887的博客
04-21 971
当前大部分的管理后台都是左侧菜单栏右侧显示相应的不同页面内容的嵌套布局，好处就是逻辑清晰、界面简洁、易于管理，还有类似于之前清明的时候网页全局变成哀悼灰，采用嵌套布局的话只需要改主界面的css样式就行了。同时使用bootstrap框架简化前端布局，顺便写一下模态框的使用。
Bootstrap框架最新V5 快速入门&直通
最新发布
qingwan_91的博客
06-03 1281
一篇文章直通Bootstrap
Iframe自适应高度
qq_38967576的博客
07-03 367
    最近一直忙于做Echarts图表，整体实现思路是将Echarts需要的Div容器放在Iframe中，然后在页面加载的时候加载Iframe，这样选择不同设备，展示不同的设备对应的报表。    其中涉及到一个Iframe在父页面中自适应的问题，方案：            1. 注意这里我有+150的操作，因为获取的高度不够，所以可以根据实际情况自己添加，这种方法的缺陷就是Bootstrap的...
BootStrap整体框架之基础布局组件
01-19
在12栅格系统上基础上，BootStrap还提供了多种基础布局组件。 CSS组件，总结为8大类型的样式： 基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式 1.1基础样式 基本...
Bootstrap商品图片网格布局代码
07-24
Bootstrap商品图片网格布局代码是利用流行的前端开发框架Bootstrap构建的一种高效、响应式的商品展示方案。在Bootstrap中，网格系统是核心特性之一，它允许开发者轻松地创建多列、响应式的网页布局，尤其适用于购物...
iframe嵌套web纯前端页面，运用Bootstrap(v5.1)技术
09-18
iframe实现左侧菜单右侧页面简单示例。点击左侧菜单，右侧显示不同html内容，并加有css样式，美观实用。很简单的界面，没有多余功能。博文网址：https://blog.csdn.net/LawrenceUyi31?type=blog
bootstrap前端框架教程.zip_bootstrap布局教程
01-11
bootstrap前端框架教程.zip 1.引入Bootstrap CDN 2.最简单的Bootstrap例子 3.可视化拖曳布局，生成HTML代码 4.Container类 5.Bootstrap的网格系统 6.控件 7.插件 8.UI编辑器 9.Bootstrap HTML编码规范 10.CSS编码...
boostrap模态框+iframe实现复杂页面弹出窗口
鲸鱼姐的专栏
09-24 988
之前使用模态框，只能实现表单的显示，一直想实现复杂页面显示，现提供代码给各位 1. 调用菜单 <a id="roleMenu" class="btn btn-default" href="#" onclick="editMenuTree()">分配权限</a> 2.模态框显示，内置iframe <div class="modal fade" id="us...
基于AdminLTE（bootstrap）用iframe实现的局部刷新的案例
01-15
基于AdminLTE（bootstrap）用JS实现的局部刷新的案例，这个是使用js刷新局部页面，以及提交的案例，还有使用js刷新的案例在我另外的资源里
使用iframe实现点击导航无刷新切换页面
10-11
使用iframe实现点击导航页面无刷切换，使用bootstrap布局
bootstarp+iframe 实现局部刷新 后台模板
10-19
这是后台的模板，用bootstarp 和 iframe 实现的局部刷新，还带有选项卡功能，可以自由关闭打开的窗口，关闭其他或者全部关闭
使用bootstrap搭建后台管理系统页面《一》
热门推荐
空空说技术的博客
03-24 5万+
1. 使用bootstrap搭建后台管理系统页面《一》 一般的后台管理系统页面主体包括四个部分，顶部导航栏，左侧菜单栏，中间正文页和底部的页脚。 其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件，主体页面为了演示方便，使用了iframe框架。 1.1 nav组件 接下...
bootstrap5 模态框里调用iframe
gztrljh
01-11 831
记录一波 // //实例化模态框 // var reModal = new bootstrap.Modal(document.getElementById('app-inreply')); // // //点击触发模态框 // $('.replay-btn').on('click', function (e) { // e.preventDefault(); // let url
左侧菜单，右侧内容的布局，使用iframe（常见于系统后台）
weixin_43974281的博客
03-28 6372
这种布局多见于系统后台管理，基本分为三部分，即顶部标、左侧菜单、右侧内容。 基本功能是点击左侧菜单，右侧内容转到相应的界面。点击顶部logo回到首页。 一种方式是用iframe，在内容区里使用框架。 顶部代码 <!-- 作者：offline 时间：2020-03-19 描述：顶部蓝条 --> <div c...
Bootstrap5学习笔记
weixin_48778425的博客
10-20 1029
一、布局 1.1 网格 先div.container，再div.row + div.col，例如col-6，col-md-2代表当宽度大于md≥768px才生效 1.2 列 掌握垂直对齐 + 水平对齐 + offset列偏移 + 独立列的示例（演示图片+环绕文字） 1.3 列填充 写在row上，gx-5 水平方向，gy-5 垂直方向间隙，g-5 水平垂直同时都有列间隙，g-0 是无间隙 二、页面内容 2.1 排版 标题 + 显示标题（比h1-h6还大）+ 内联文本元素（下划线，删除线，斜体等）+ 列

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值