初见bootstrap，iframe框架简单布局

来源：互联网发布：js 换行符编辑：程序博客网时间：2024/06/06 23:55

初见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源码进行性能优化而来。[3Bootstrap，来自 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>

阅读全文

2 0