3

シンプルな Web アプリ用にいくつかの Twitter Bootstrap をテストしているところですが、カルーセルで問題が発生しました。ブートストラップ サイトの例や Web で見つけた他の例のようにナビゲーション ボタンが表示されません。

この例http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=carouselを取り、このフィドルhttp://jsfiddle.net/a5udW/に入れました 

<div class="bs-example">
<div id="myCarousel" class="carousel slide">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">Slide 1</div>
        <div class="item">Slide 2</div>
        <div class="item">Slide 3</div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"><</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">></a>
</div>

ナビゲーション ボタンは、Code Lab の例とは異なり、大きな長方形の単なる古い "<" と ">" です。

私が間違ったことは何ですか？

どうもありがとう。

4

1 に答える 1

2

デモでは次のブートストラップ スタイルシートを使用しているようです。

http://www.tutorialrepublic.com/examples/css/bootstrap.min.css

それをフィドルのものに置き換えることで、適切にスタイル化されたコードが得られます。

jsフィドル

プロのヒント:

何かがどのようにレンダリングされているかを把握したい場合はInspect Element、 を使用するだけで、次のような結果が得られます。

検査する

そこから、各プロパティを切り替えて、それらがディスプレイにどのように影響しているかのライブ デモを表示できます。CSSをコピーして、独自のフィドルに投げることができます。または、各セクションの右上を見て、その css がどこから来ているかを確認し、右クリックして [リンク アドレスのコピー] を選択し、くそスタイルシート全体を取得することもできます。この質問に答えるために私がしたことはこれだけです。そして今、あなたもできます！:)

アップデート：

はい、この変更は、2.x から 3.0 へのデフォルトのカルーセルの外観に関連しています。

2.x Carousel->2.xカルーセルデモ

3.0 Carousel->3.0カルーセルデモ

Twitter Bootstrap 3を使用したいが、ナビゲーション ボタンを 2.0 のようにスタイル設定する場合は、通常のスタイル シートを使用して次のcssを適用できます。

.carousel-control {
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 60px;
    font-weight: 100;
    line-height: 30px;
    background: #222;
    border: 3px solid #fff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
    margin-top: -20px;   
}

新しいフィドル

于 2013-11-07T03:22:05.167 に答える