Quels modèles de carrousel peuvent être utilisés dans bootstrap ?-js tutoriel-php.cn

Quels modèles de carrousel peuvent être utilisés dans bootstrap ?

PHPz

Libérer： 2018-10-16 16:14:20

original

1363 Les gens l'ont consulté

Cette fois, je vais vous montrer quels modèles de carrousel peuvent être utilisés en bootstrap, et quelles sont les précautions d'utilisation des modèles de carrousel bootstrap. Voici des cas pratiques, jetons un coup d'œil.

L'exemple de cet article partage le code spécifique pour l'affichage du modèle de carrousel bootstrap pour votre référence. Le contenu spécifique est le suivant

<!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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas. dans cet article, et plus encore. Veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée : Tutoriel Bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!