Как создать Gmail как макет с Twitter Bootstrap

Можно ли создать макет GMail/GoogleGroups, как, например, с помощью Twitter Bootstrap, так что макет всегда подходит для окна просмотра (высота окна), а боковая панель и область содержимого - отдельно прокручивается?

--------------------------------------------------------------------------
|                                                                        |
|                    Fixed top navbar                                    |
--------------------------------------------------------------------------
|         |                                                              |   
| Sidebar |       Content area scrollable                                |
| scrollable                                                             |
|         |                                                              |
|         |                                                              |
|         |                                                              |
|         |                                                              |
|------------------------------------------------------------------------|

Ответ 1

Вам не нужно использовать Bootstrap для создания этого макета (и я не думаю, что Bootstrap поддерживает его, по крайней мере, без существенных изменений).

Конечно, вы все равно можете использовать Bootstrap для всего остального на странице. Если вы действительно хотите, чтобы Google Apps выглядел, вам нужно настроить некоторые стили Bootstrap по умолчанию.

Что возможно

Для удовольствия, здесь быстрый подрыв интерфейса Gmail, используя основные методы, описанные ниже, и различные компоненты Bootstrap.

Демо: http://jsfiddle.net/Ly6wmyr2/1/

_{Код здесь, безусловно, является демонстрационным качеством и выходит за рамки вопроса о переполнении стека. Я оставлю его читателю, чтобы его рассеять.}

Простая разбивка

Демо: http://jsfiddle.net/vLm26g4g/1/

Примечания

Мы используем абсолютное позиционирование.
Просто потому, что он абсолютно позиционирован, не означает, что он не может быть отзывчивым (при желании).
Контейнеры позиционируются, используя все 4 стороны внутри корпуса высотой 100%.
Этот подход будет работать во всех браузерах IE 7+. Если вы можете поддерживать IE8 +, использование box-sizing: border-box упрощает вычисления размеров.
Макеты, подобные этому, действительно выигрывают от LESS CSS, так как вы можете объявлять базовые размеры в одном месте.

HTML {
    height: 100%;
}
BODY {
    position: relative;
    height: 100%;
}
HEADER {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding: 8px;
    background-color: #ddd;
}
#side {
    position: absolute;
    top: 80px;
    left: 0;
    bottom: 0;
    width: 20%;
    background-color: #eee;
    overflow: auto;
}
#content {
    position: absolute;
    top: 80px;
    left: 20%;
    bottom: 0;
    right: 0;
    overflow: auto;
}

Ответ 2

Я не думаю, что есть готовое решение Bootstrap, но с несколькими переопределениями в Bootstrap CSS и контейнере position:absolute вокруг левой стороны nav и * широкий контент * это должно работать. Вы увидите, что оба левого/правого пролета имеют независимые полосы прокрутки...

Gmail-подобная демонстрация макета загрузочного диска

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">

      <!-- top nav --->

    </div>
  </div>
</div>
<div class="box">
  <div class="row-fluid">
    <div class="column span3">

     <!-- left-side nav --->

    </div>
    <div class="column span9">

     <!-- content area --->

    </div>
  </div>
</div>

Добавьте некоторые CSS-надстройки Bootstrap и настройте контейнеры .box и .column.

html, body {
    height: 100%;
}

.row-fluid {
    height: 100%;
}

.column:before, .column:after {
    content: "";
    display: table;
}

.column:after {
    clear: both;
}

.column {
    height: 100%;
    overflow: auto;
}

.box {
    bottom: 0; /* increase for footer use */
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
}

.span9.full {
    width: 100%;
}

Вот рабочий Bootply: http://bootply.com/60116 (также включает строки области содержимого и разбиение на страницы)

Ответ 3

Ознакомьтесь с разделом лесов в

http://twitter.github.com/bootstrap/scaffolding.html#layouts

В частности, в разделе "Макет среды/Фиксированный макет"

Если вы хотите, чтобы разделы прокручивались, просто добавьте

overflow-y:auto;

для css в ваших divs

Ответ 4

это будет ваш код с помощью scrollspy, чтобы выделить текущий раздел "visibl" в теле

    <body data-spy="scroll" data-target=".bs-docs-sidebar">
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix">
          <li class="active"><a href="#global"><i class="icon-chevron-right"></i> Global styles</a></li>
          <li><a href="#gridSystem"><i class="icon-chevron-right"></i> Grid system</a></li>
          <li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> Fluid grid system</a></li>
          <li><a href="#layouts"><i class="icon-chevron-right"></i> Layouts</a></li>
          <li><a href="#responsive"><i class="icon-chevron-right"></i> Responsive design</a></li>
        </ul>
      </div>
    <div class="span9">
        <section id="global"></section>
        <section id="gridSystem</section>
        <section id="fluidGridSystem"></section>
        <section id="layouts"></section>
        <section id="responsive"></section>
    </div>
  </div>
</div>
</body>

если вы хотите добавить фиксированную навигационную панель, просто добавьте "position: fixed" в navbar css