1

購入したBootstrapテーマを所有しているRailsアプリケーションに適用しようとしています。レイアウトはかなり複雑なようで、複数のコンテナがあり、そのうちのいくつかはナビゲーションバー内にあります。全くわかりません。このレイアウトが正しい方法であることを確認したいのですが、購入したからといって正しいとは信じていません。

次に例を示します。

<div class="span2">

  <!-- Top navigation bar -->
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a class="menu" href="/item1">Item1</a></li>
                <li><a class="menu" href="/item2">Item2</a></li>
                <li><a class="menu" href="/item3">Item3</a></li>
              </ul>
            </li>
            <li><a href="#">Help</a></li>  
          </ul> <!-- nav -->
        </div><!-- nav-collapse -->
      </div> <!-- container -->
    </div> <!-- navbar-inner -->
  </div> <!-- navbar -->
</div> <!-- span2 -->

<!-- Main Content -->
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span9">
      <!-- stuff -->
    </div> <!-- span9 -->
  </div> <!-- row-fluid -->

  <div class="row-fluid">
    <div class="footer span12">
      <div class="well">
        <footer>
          &copy; MyCompany, LLC 2013
        </footer>
      </div>
    </div><!-- /span12 -->
  </div> <!-- row-fluid -->

</div> <!-- container-fluid -->

これは奇妙に思えます。

  • まず、作業する列が12あると思いましたが、上記の9+2は11にすぎません。

  • 第二に、span9とはspan2異なるレベルにあります。

  • 第三に、 divcontainerを設定する前にグリッドを確立する必要はありませんか？spanN1つ目span2は宇宙にぶら下がっているだけです。

これを抽出する必要がある場合、私の主な質問は次のようになると思います。TwitterBootstrapのコンテナの主な目的は何ですか。GoogleまたはBootstrapドキュメントを介してその1つの質問に対する答えを見つけることができないようです。それを知っていると、複数のコンテナを持つことが理にかなっているかどうかを判断するのに役立つでしょう。あなたが提供できるどんな助けにも感謝します。

4

1 に答える 1

1

Twitterブートストラップには、htmlでそのクラスを呼び出すことで使用できる事前に作成されたCSSがたくさんあります。ツイッターのブートストラップページにあるいくつかの例を見ると、すべてのdivが理由でそこにあることがわかります。twitterブートストラップで定義されたクラスを使用している場合は、従来とは異なるhtmlラベルを無視してください。

レイアウトチュートリアルをご覧ください

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

複数のdivを必要とするdivを配置するために列をネストする方法を説明します

ナビゲーションチュートリアルはこちら

http://twitter.github.com/bootstrap/components.html#navbar

コンテナに関する質問に答えます。

固定レイアウト一般的な固定幅（およびオプションでレスポンシブ）レイアウトを提供します。

<div class="container"> required.

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

それが役に立てば幸い

于 2013-02-22T15:19:57.417 に答える