3

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

我已经采取了这个例子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

通过将其替换为您的小提琴中的那个，您将获得正确风格化的代码。

jsFiddle

专家提示：

如果你想知道某些东西是如何渲染的，只需使用Inspect Element，它会给你这样的东西：

检查

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

更新：

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

2.x Carousel->2.xCarouselDemo

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