如何使用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？）？

回答

相關問題