Est-il possible d'utiliser l'image du carrousel bootstrap sans connexion Internet ?-Tutoriel d'amorçage-php.cn

Est-il possible d'utiliser l'image du carrousel bootstrap sans connexion Internet ?

angryTom

Libérer： 2019-07-29 10:18:35

original

2431 Les gens l'ont consulté

Est-il possible d'utiliser l'image du carrousel bootstrap sans connexion Internet ?

Si vous souhaitez en savoir plus sur le bootstrap, vous pouvez cliquer sur : Tutoriel Bootstrap

Quelqu'un a demandé si les images du carrousel bootstrap pouvaient être utilisées sans connexion Internet ? Si vous développez localement, cela est bien sûr possible, car le graphique carrousel est implémenté en utilisant js et css. Il nous suffit de télécharger le package de développement bootstrap, puis de référencer ses fichiers js et css dans les fichiers dont nous avons besoin. Laissez-moi vous présenter comment créer des images d'enregistrement bootstrap.

Un carrousel est un diaporama en boucle :

Comment créer un carrousel

L'exemple suivant crée un effet carrousel d'images simple :

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://img.php.cn/upload/article/000/000/040/5d3e569459bb7121.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://img.php.cn/upload/article/000/000/040/5d3e56afa458d274.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://img.php.cn/upload/article/000/000/040/5d3e56a3e68b7503.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 </div>

Copier après la connexion

Ajouter des descriptions pour carrousel d'images

Ajoutez

de l'image du carrousel :

<div class="carousel-item">
  <img src="https://img.php.cn/upload/article/000/000/040/5d3e569459bb7121.jpg">
  <div class="carousel-caption">
    <h3>第一张图片描述标题</h3>
    <p>描述文字!</p>
  </div></div>

Copier après la connexion

Description de la classe utilisée dans l'exemple ci-dessus

类	描述
`.carousel`	创建一个轮播
`.carousel-indicators`	为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
`.carousel-inner`	添加要切换的图片
`.carousel-item`	指定每个图片的内容
`.carousel-control-prev`	添加左侧的按钮，点击会返回上一张。
`.carousel-control-next`	添加右侧按钮，点击会切换到下一张。
`.carousel-control-prev-icon`	与 .carousel-control-prev 一起使用，设置左侧的按钮
`.carousel-control-next-icon`	与 .carousel-control-next 一起使用，设置右侧的按钮
`.slide`	切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。

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!