0

このナビゲーションをiPadとiPhoneで動作させるための標準的なブートストラップ方法が何であるかわかりません。ページを縮小すると、水平スクロールが表示されますが、これは望ましい効果ではないと思います。

<div id="navbar-example" class="navbar navbar-static span8" style="margin-top: 20px;">
<!-- navigation -->
<div class="navbar-inner">
    <div class="container" style="width: auto;">
        <a class="brand" href="#">Animal Types</a>
        <ul class="nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mammals <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="chimpanzee">Chimpanzee</a></li>
                    <li><a href="#" onclick="return false" id="lemur">Lemur</a></li>
                    <li><a href="#" onclick="return false" id="jaguar">Jaguar</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Reptiles <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="cobra">Cobra</a></li>
                    <li><a href="#" onclick="return false" id="eidechse">Eidechse</a></li>
                    <li><a href="#" onclick="return false" id="iguana">Iguana</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav">
            <li id="fat-menu" class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Rodents <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="chipmunk">Chipmunk</a></li>
                    <li><a href="#" onclick="return false" id="beaver">Beaver</a></li>
                    <li><a href="#" onclick="return false" id="hamster">Hamster</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<!-- content pages -->

ライブサンプルはこちら:

http://tonysilvestri.com/examples/twitterBootstrapDropdown/bootstrapDropdownExample.html#

結論:

Twitter ブートストラップを使用して、iPhone/iPad 用のサブレベル メニュー ページを開発するにはどうすればよいですか。

4

1 に答える 1

0

折りたたみレスポンシブ ナビゲーション バーを実装するには、ナビゲーション バーのコンテンツを含む div でラップし、.nav-collapse.collapseナビゲーション バーの切り替えボタン を追加します.btn-navbar。

これを試して

<div id="navbar-example" class="navbar navbar-static span8" style="margin-top: 20px;">
<!-- navigation -->
<div class="navbar-inner">
    <div class="container" style="width: auto;">
        <a class="brand" href="#">Animal Types</a>

 <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <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">Mammals <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="chimpanzee">Chimpanzee</a></li>
                    <li><a href="#" onclick="return false" id="lemur">Lemur</a></li>
                    <li><a href="#" onclick="return false" id="jaguar">Jaguar</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Reptiles <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="cobra">Cobra</a></li>
                    <li><a href="#" onclick="return false" id="eidechse">Eidechse</a></li>
                    <li><a href="#" onclick="return false" id="iguana">Iguana</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav">
            <li id="fat-menu" class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Rodents <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="return false" id="chipmunk">Chipmunk</a></li>
                    <li><a href="#" onclick="return false" id="beaver">Beaver</a></li>
                    <li><a href="#" onclick="return false" id="hamster">Hamster</a></li>
                </ul>
            </li>
        </ul>
  </div>        



    </div>
</div>
</div>
于 2012-09-15T07:31:34.707 に答える