Javascript 如何使用twitter引导程序制作2（帧？）？_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 如何使用twitter引导程序制作2（帧？）？

javascript jquery html css twitter-bootstrap

Javascript 如何使用twitter引导程序制作2（帧？）？,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,这就是我在twitter引导中开始做的。。我是新来用这个的。。你能帮我在html中创建一个2页分割的页面吗当向下滚动时，标题中的菜单不会消失。。我做了下面的html代码谢谢 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta

这就是我在twitter引导中开始做的。。我是新来用这个的。。你能帮我在html中创建一个2页分割的页面吗当向下滚动时，标题中的菜单不会消失。。我做了下面的html代码谢谢

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Teacher</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">`
            /* CSS used here will be applied after bootstrap.css */
            body{
            margin-top: 1px;
            }
            .divide-nav{
            height: 80px;
            background-color: #428bca;
            }
            .divide-text{
            color:#fff;
            line-height: 20px;
            font-size:20px;
            padding: 15px 0;
            }
            .affix {
            top: 1px;
            width:100%;
            }
            .filler{
            min-height: 2000px;
            }
            .navbar-form {
            padding-left: 0;
            }
            .navbar-collapse{
            padding-left:0; 
            }
            #footer {
            height: 60px;
            background-color: #f5f5f5;
            }
        </style>
        <style type="text/css"></style>
    </head>
    <!-- HTML code from Bootply.com editor -->
    <body>
        <div class="divide-nav">
            <div class="container">
                <p class="divide-text"><img src ="musar-logo.png"></p>
            </div>
        </div>
        <nav class="navbar navbar-default navbar-lower affix-top" role="navigation">
            <div class="container">
                <div class="collapse navbar-collapse collapse-buttons">
                    <form class="navbar-form navbar-left" role="search">
                        <button class="btn btn-success">Button</button>
                        <button class="btn btn-default">Button</button>
                        <button class="btn btn-default">Button</button>
                        <button class="btn btn-default">Button</button>
                    </form>
                </div>
            </div>
        </nav>
        <frameset cols="25%,*,25%">
            <frame src="1.html">
            <frame src="it.html">
            <frame src="it.html">
        </frameset>
        <div class="container">
            <div class="row">
                <div class="filler"></div>
            </div>
        </div>
        <div class="modal-body row">
            <div class="col-md-6">
                <!-- Your first column here -->
            </div>
            <div class="col-md-6">
                <!-- Your second column here -->
            </div>
        </div>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <!-- JavaScript jQuery code from Bootply.com editor  -->
        <script type="text/javascript">
            $(document).ready(function() {

                $('.navbar-lower').affix({
            offset: {top: 50}
            });

            });

        </script>
        <div id="footer">
            <div class="container">
                <p class="text-muted credit">Footer Trial</a></p>
            </div>
        </div>
    </body>
</html>


老师
`
/*此处使用的CSS将在bootstrap.CSS之后应用*/
身体{
页边顶部：1px；
}
.除导航{
高度：80px；
背景色：#428bca；
}
.分割文本{
颜色：#fff；
线高：20px；
字体大小：20px；
填充：15px0；
}
.粘贴{
顶部：1px；
宽度：100%；
}
.填料{
最小高度：2000px；
}
.导航栏表格{
左侧填充：0；
}
.导航栏倒塌{
左侧填充：0；
}
#页脚{
高度：60px；
背景色：#F5；
}

按钮
按钮
按钮
按钮
$（文档）.ready（函数（）{
$（'.navbar下部'）。粘贴({
偏移量：{top:50}
});
});
页脚试用版

您可以制作两个网格布局来实现这一点。有关这方面的更多文档，请访问

根据上述答案，我竖起了一把小提琴。

在你的css中

上面的两列可以工作，但在您添加内容或大小之前，它们不会显示（请参阅fiddle）。我曾经

而不是“跨度”，但它应该是类似的

我没有编辑您的所有代码，但它通常看起来像您试图实现的目标。

当我将#right{和#left{更改为height:800px；顶部的fix按钮标题尚未修复..直到class=“col-sm-4”&class=“col-sm8”结束..class=“col-sm8”是一个输入错误时，请尝试class=“col-sm-8”另外，我也不太清楚你在说什么。你能澄清一下吗？你正在使用的引导布局将导航栏折叠到某个大小以下。请尝试更改浏览器的大小。如果你想更改内容更改的大小，请尝试将类中的“sm”键更改为“xs”、“md”或“lg”更改媒体查询的断点（屏幕大小更改）

<div class="container-fluid">
 <div class="row-fluid">
   <div class="span2">
     <!--Sidebar content-->
    </div>
  <div class="span10">
    <!--Body content-->
  </div>
 </div>
</div>

        <title>Teacher</title>
    <!-- HTML code from Bootply.com editor -->
    <body>
        <div class="divide-nav">
            <div class="container">
                <p class="divide-text"><img src ="musar-logo.png"></p>
            </div>
        </div>
        <nav class="navbar navbar-default navbar-lower affix-top" role="navigation">
            <div class="container">
                <div class="collapse navbar-collapse collapse-buttons">
                    <form class="navbar-form navbar-left" role="search">
                        <button class="btn btn-success">Button</button>
                        <button class="btn btn-default">Button</button>
                        <button class="btn btn-default">Button</button>
                        <button class="btn btn-default">Button</button>
                    </form>
                </div>
            </div>
        </nav>
        <frameset cols="25%,*,25%">
            <frame src="1.html">
            <frame src="it.html">
            <frame src="it.html">
        </frameset>
 <div class="row-fluid">
   <div id="left" class="col-sm-4">
     <div id="allYourContent" class= "col-sm-12">
    </div>
     </div>
  <div id="right" class="col-sm-8">
    <!--Body content-->
  </div>
 </div>
</div>
        <div id="footer">
            <div class="container">
                <p class="text-muted credit">Footer Trial</a></p>
            </div>
        </div>
    </body>

overflow:scroll

class="col-sm-4" & class="col-sm-8"