Welche Karussellvorlagen können in Bootstrap verwendet werden?-js-Tutorial-php.cn

Welche Karussellvorlagen können in Bootstrap verwendet werden?

PHPz

Freigeben： 2018-10-16 16:14:20

Original

1343 Leute haben es durchsucht

Dieses Mal werde ich Ihnen zeigen, welche Karussellvorlagen in Bootstrap verwendet werden können und welche Vorsichtsmaßnahmen für die Verwendung von Bootstrap-Karussellvorlagen gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Das Beispiel in diesem Artikel teilt den spezifischen Code für die Anzeige der Bootstrap-Karussellvorlage als Referenz. Der spezifische Inhalt ist wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
 <style type="text/css">
  .carousel {
   height: 500px;
  }
  .carousel .item {
   height: 500px;
   background-color: #000;
  }
  .carousel .item img {
   width: 100%;
  }
  .carousel-caption {
   z-index: 10;
  }
 </style>
</head>
 <body>
  <!-- 轮播 -->
 <p id="ad-carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
   <li data-slide-to="0" class="active"></li>
   <li data-slide-to="1"></li>
   <li data-slide-to="2"></li>
  </ol>
  <p class="carousel-inner">
   <p class="item active">
    <img src="http://img.glzy8.com/upfiles/www/ppt/jpg/24675.jpg" alt="1 slide">
    <p class="container">
     <p class="carousel-caption">
      文本区域
     </p>
    </p>
   </p>
   <p class="item">
    <img src="2F1-130516091446402.jpg" alt="2 slide">
    <p class="container">
     <p class="carousel-caption">
      文本区域
     </p>
    </p>
   </p>
   <p class="item">
    <img src="-110910214P238.jpg" alt="3 slide">
    <p class="container">
     <p class="carousel-caption">
      文本区域
     </p>
    </p>
   </p>
  </p>
  <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
    class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
    class="glyphicon glyphicon-chevron-right"></span></a>
 </p>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall gelesen haben in diesem Artikel und mehr Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre: Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Karussellvorlagen können in Bootstrap verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!