如何使用twitter bootstrap制作2（frame？）？

enter image description here 这就是我开始在twitter bootstrap中制作的.. 我是新的使用这个..你能帮我做一个2分割页面里面的HTML ，在向下滚动的标题菜单不会消失.. 我在下面做了html代码谢谢！如何使用twitter bootstrap制作2（frame？）？

<!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>

来源

2014-11-03 Mae Zi

找到更多这方面的文档扩展在上面的回答，我提出了一个小提琴。 http://jsfiddle.net/w7s2o90e/1/

 <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>

如果你想有一个固定的大小和左侧在你的CSS滚动使用

overflow:scroll

。

从上面的两列工作，但直到你添加内容或大小，他们不会出现（见小提琴）。我用

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

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

我没有编辑你的所有代码，但它看起来很像你想要实现的。

来源

2014-11-03 16:36:05

当我更改#right {和#left {到 height：800px;顶部的修复按钮标题不是已经修复..直到class =“col-sm-4”＆class =“col-sm8”结束时才会执行。 – 2014-11-03 17:27:07

class =“col-sm8”was a错字，尝试class =“col-sm-8” 另外，我不太确定你在说什么。你能澄清吗？您正在使用的引导程序布局将导航栏以特定大小折叠。尝试更改浏览器的大小。如果您想更改事物更改的大小，请尝试将类中的“sm”键更改为“xs”，“md”或“lg”，以更改媒体查询的中断点（屏幕大小更改） – 2014-11-03 18:53:54

您可以通过两个网格布局来实现此目的。您可以在 http://getbootstrap.com/2.3.2/scaffolding.html

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

来源

2014-11-03 16:08:16 jsdev

如何使用twitter bootstrap制作2（frame？）？

回答

相关问题