Нужна помощь в создании этого макета с использованием Twitter Bootstrap

Я пытаюсь выяснить, как построить макет, как это с помощью HTML (5) и Twitter Bootstrap:Нужна помощь в создании этого макета с использованием Twitter Bootstrap

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/

В настоящий момент у него есть переполнение-y для прокрутки, но вы можете добавить его с помощью jquery, чтобы он не всегда добавлял полосы прокрутки в браузерах, таких как хром, и я не уверен, совместим ли он с загрузочной загрузкой Twitter

эта версия добавляет переполнение, когда содержание становится слишком большим:

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

источник

2013-02-14 14:29:59 Pete

Красивые. Спасибо, Пит. В чем разница между использованием jQuery для показа/скрытия полосы прокрутки и установки overflow-y в auto? –

Некоторые браузеры, такие как хром, покажут полосы прокрутки, даже если они не переполнены при использовании переполнения переполнения, с помощью jquery, он будет показывать их только в том случае, если содержимое слишком далеко выходит – Pete

Спасибо большое. Я думаю, что я больше разбираюсь в решении Jrod, которое не связано с каким-либо JavaScript, но является простым HTML/CSS. Где вы видите плюсы и минусы? –

Ниже приведен краткий пример, но он должен удовлетворять вашим требованиям.

<!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. Почти там, но когда я добавляю содержимое в контейнер, у которого есть запас, например. заголовок, верхний край этого элемента «толкает» контейнер вниз, и я получаю вертикальную полосу прокрутки. Вы можете увидеть его здесь, где я заставил верхнюю границу элемента h1 в jsFiddle: http://jsfiddle.net/R67wg/1/ –

Это то, что называется коллапсированием полей. Если вы добавите дополнение к вашему '# content' div, вы исправите это. Вот скрипка http://jsfiddle.net/R67wg/8/ и здесь больше о сворачивании полей http://www.w3.org/TR/CSS2/box.html#collapsing-margins – Jrod

Большое спасибо за объяснение. Теперь я немного смущен, должен ли я идти с вашим (простой HTML/CSS) или решением Пита, который включает JavaScript. Где вы видите плюсы и минусы? –

Для колонтитула, вы рассматривали использование начальной загрузки Navbar? Вы можете использовать класс 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 Bootstrap

ответ

Смежные вопросы