需要協助建立使用Twitter的引導

我試圖找出如何建立一個佈局像這樣使用HTML（5）和Twitter的引導這種佈局：需要協助建立使用Twitter的引導

Mockup

它並不需要支持在IE < 9（雖然8會很好）或Firefox/Chrome的舊版本。但它應該在移動設備上很好地呈現，儘管我們知道固定左側菜單在非常小的顯示器上是個問題。它的主要用途是在臺式機和平板電腦上使用。

我一直在嘗試修改像這些this,this和this這樣的示例/相似之處，但沒有運氣。

你知道任何例子，我可以找到這樣的佈局，或者你知道如何製作一個嗎？任何幫助將非常感激！

來源

2013-02-14 Tommy Jakobsen

這可能工作：

HTML

<div id="wrapper"> 
    <div id="left-column"></div> 
    <div id="right-column"></div> 
</div> 
<div id="footer"> 
</div>

CSS

body, html {height:100%; padding:0; margin:0;} 
#wrapper {height:100%; padding:0 0 60px 260px; box-sizing:border-box; -moz-box-sizing:border-box;} 
#left-column {width:260px; margin-left:-260px; float:left; height:100%; background-color:red; overflow-y:scroll;} 
#right-column {width:100%; float:left; height:100%; background-color:blue; overflow-y:scroll;} 
#footer {height:60px; position:fixed; bottom:0; left:0; width:100%; background-color:green;}

http://jsfiddle.net/rGBAt/1/

目前它的overflow-y設置爲滾動，但你可能想要添加他使用的jquery，所以它並不總是在Chrome瀏覽器中添加滾動條，我不確定它是否與Twitter引導程序兼容

該版本增加了溢出當內容變得太大：

http://jsfiddle.net/rGBAt/7/

來源

2013-02-14 14:29:59 Pete

美麗。謝謝皮特。使用jQuery顯示/隱藏滾動條並將overflow-y設置爲auto有什麼區別？ – 2013-02-15 08:14:21

有些瀏覽器如chrome會顯示滾動條，即使它們在使用溢出滾動優先級時沒有溢出，使用jquery方式，只會在內容延伸太遠時才顯示它們 – Pete 2013-02-15 08:54:16

非常感謝。我認爲我更關注Jrod的解決方案，不涉及任何JavaScript，但是純HTML/CSS。你在哪裏看到利弊？ – 2013-02-18 07:15:38

以下是一個快速示例，但應滿足您的要求。

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 

     /* Don't include the * reset just for demonstration purposes only */ 
     * { 
      margin: 0; 
      padding: 0; 
     } 

     html, body { 
      height: 100%; 
     } 

     #sidebar { 
      background: green; 
      height: 100%; 
      position: absolute; 
       left: -260px; 
       top: 0; 
      width: 260px; 
     } 

     #container { 
      background: blue; 
      margin: 0 0 0 260px; 
      min-height: 100%; 
      position: relative; 
     } 

     #footer { 
      background: red; 
      height: 60px; 
      position: fixed; 
       bottom: 0; 
      width: 100%; 
     } 


    </style> 

</head> 
<body> 
    <div id="container"> 
     <div id="sidebar"> 
     sidebar 
     </div> 

     container 
    </div> 
    <div id="footer"> 
     I am a footer 
    </div> 

</body> 
</html>

來源

2013-02-14 14:26:36 Jrod

非常感謝Jrod。幾乎在那裏，但是當我向容器中添加內容時，例如一個標題，該元素的頂部邊緣「推」容器，我得到一個垂直滾動條。你可以在這裏看到它，我已經在jsFiddle的h1元素上強制了一個頂部邊距：http://jsfiddle.net/R67wg/1/ – 2013-02-15 08:11:00

這就是所謂的摺疊邊距。如果你添加一些填充到你的'＃content' div，你可以解決這個問題。這裏是一個小提琴http://jsfiddle.net/R67wg/8/，這裏是更多關於摺疊邊緣http://www.w3.org/TR/CSS2/box.html#collapsing-margins – Jrod 2013-02-15 14:21:02

非常感謝你的說明。現在我有點困惑，我應該跟你的（純HTML/CSS）還是Pete的涉及JavaScript的解決方案。你在哪裏看到利弊？ – 2013-02-18 07:14:43

頁腳，你有沒有考慮過使用引導導航欄？您可以使用類navbar-fixed-bottom將其修復到底部。它將始終可見。

<div class="navbar navbar-fixed-bottom"> 
    <div class="navbar-inner"> 
     <ul class="nav"> 
      <li><a href="#">footer</a></li> 
     </ul> 
    </div> 
</div>

由於您使用的引導，你應該考慮爲左格的Affix菜單選項。這將允許您在滾動時保持菜單在屏幕上。

來源

2013-02-14 15:41:55 JayGee

需要協助建立使用Twitter的引導

回答

相關問題