13

レイアウトが常にビューポート (ウィンドウの高さ) に収まり、サイドバーとコンテンツ領域が別々にスクロール可能になるように、Twitter Bootstrap を使用して GMail/GoogleGroups のようなレイアウトを作成することは可能ですか?

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

4 に答える 4

47

このレイアウトを作成するために Bootstrap を使用する必要はありません (また、Bootstrap がそれをサポートしているとは思いません。少なくとも大幅な変更は必要ありません)。

もちろん、ページの他のすべてに引き続き Bootstrap を使用できます。本当に Google Apps の外観が必要な場合は、デフォルトの Bootstrap スタイルをいくつか調整する必要があります。

可能なこと

冗談として、以下で説明する基本的なテクニックとさまざまな Bootstrap コンポーネントを使用して、Gmail インターフェースの簡単な模造品を示します。

デモ: http://jsfiddle.net/Ly6wmyr2/1/

ここのコードは間違いなくデモ品質であり、スタック オーバーフローの質問の範囲を超えています。分析するのは読者に任せます。

単純な内訳

デモ: http://jsfiddle.net/vLm26g4g/1/

ノート

  1. 絶対配置を使用しています。
  2. 絶対に配置されているからといって、（必要に応じて）応答できないわけではありません。
  3. コンテナーは、高さ 100% のボディ内の 4 つの側面すべてを使用して配置されます。
  4. このアプローチは、IE 7 以降のすべてのブラウザーで機能します。IE8+ をサポートできる場合は、 を使用box-sizing: border-boxすると寸法計算が簡単になります。
  5. このようなレイアウトは、基本的なサイズを 1 か所で宣言できるため、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;
}
于 2013-04-21T21:09:43.157 に答える
4

すぐに使用できる Bootstrap ソリューションはないと思いますが、Bootstrap CSSをいくつかオーバーライドし、左側のナビゲーションと *ワイド コンテンツposition:absoluteの周りにコンテナーを配置すると、これは機能するはずです。左/右の両方のスパンに独立したスクロール バーがあることがわかります...

Gmail のような Bootstrap レイアウトのデモ

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

いくつかの Bootstrap CSS オーバーライドを追加し、.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 (コンテンツ領域の行とページネーションも含まれます)

于 2013-04-26T20:42:18.173 に答える
2

で足場セクションをチェックしてください

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

具体的には、Fluid Layout/Fixed Layout セクションの下

セクションをスクロール可能にしたい場合は、追加するだけです

overflow-y:auto;

あなたのdivのcssに

于 2013-03-27T18:43:53.910 に答える
1

これは、スクロールスパイを使用して本文の現在の「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」をナビゲーション バーの CSS に追加するだけです。

于 2013-04-23T20:14:20.820 に答える