Twitter Bootstrap Carousel Navigation Display

Question

Я просто тестирую материал Twitter 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.

Что я сделал с ошибкой?

Большое спасибо.

Answer 1

Похоже, они используют следующую самозагрузку таблицу стили в их демо:

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

, заменив его на один в вашей скрипке, вы получите правильно стилизованный код.

jsFiddle

---

ProTip:

Если вы когда-либо хотите, чтобы выяснить, как что-то визуализируется, просто использовать Inspect Element, который даст вам что-то вроде этого:

Оттуда вы можете переключать каждое из свойств, чтобы увидеть живую демонстрацию того, как они влияют дисплей. Вы можете скопировать css и бросить его в свою скрипку. Или вы даже можете посмотреть в верхнем правом углу каждого раздела, чтобы увидеть, откуда этот css, щелкните правой кнопкой мыши, выберите «Копировать ссылку» и получите всю таблицу стилей. Это все, что я сделал, чтобы ответить на этот вопрос. И теперь вы тоже можете! :)

---

Update:

Да, это изменение связано с появлением карусельного по умолчанию от 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