html - Twitter Bootstrap 轮播导航显示

Question

我只是为一个简单的 Web 应用程序测试一些 Twitter Bootstrap 的东西，我遇到了 Carousel 的问题:导航按钮不像 Bootstrap 网站上的示例和我在 Web 上找到的其他示例那样显示.

我已经拿过这个例子http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=carousel把它放进这个 fiddle 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 中的示例不同，导航按钮只是较大矩形中的普通旧“<”和“>”。

我做错了什么新手？

非常感谢。

Answer 1

看起来他们在演示中使用了以下 Bootstrap 样式表:

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

通过将其替换为您的 fiddle 中的代码，您将获得正确风格化的代码。

jsFiddle

---

专业提示:

如果您想弄清楚某些东西是如何呈现的，只需使用 Inspect Element，它会给您这样的结果:

您可以从那里切换每个属性，以观看有关它们如何影响显示的现场演示。您可以复制 css 并将其放入您自己的 fiddle 中。或者您甚至可以查看每个部分的右上角以查看该 css 的来源，右键单击，选择复制链接地址并获取整个该死的样式表。这就是我为回答这个问题所做的一切。现在您也可以! :)

---

更新:

是的，此更改与从 2.x 到 3.0 的默认轮播外观有关

2.x Carousel ->

3.0 Carousel ->

如果您想使用 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;   
}

New Fiddle