인터넷 연결 없이 부트스트랩 캐러셀 이미지를 사용할 수 있습니까?-부트스트랩 튜토리얼-php.cn

인터넷 연결 없이 부트스트랩 캐러셀 이미지를 사용할 수 있습니까?

부트스트랩에 대해 더 자세히 알고 싶다면 다음을 클릭하세요. Bootstrap tutorial#🎜 🎜 #

누군가가 인터넷 연결 없이 부트스트랩 캐러셀 이미지를 사용할 수 있는지 물었습니다. 로컬에서 개발하는 경우 캐러셀 차트가 js 및 css를 사용하여 구현되므로 이는 물론 가능합니다. 부트스트랩 개발 패키지를 다운로드한 다음 필요한 파일에서 js 및 css 파일을 참조하기만 하면 됩니다. 부트스트랩 녹화 이미지를 만드는 방법을 소개하겠습니다.

캐러셀은 반복되는 슬라이드쇼입니다.

# 🎜🎜 #

캐러셀을 만드는 방법
다음 예는 다음과 같습니다. 생성됨 간단한 이미지 캐러셀 효과 생성:

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

로그인 후 복사

캐러셀 이미지에 설명 추가#🎜 🎜# 캐러셀 이미지의 설명 텍스트를 설정하려면 각

안에

을 추가하세요.

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

로그인 후 복사

# 🎜🎜#

위 예제에 사용된 클래스 설명

Class 설명 # 🎜🎜#.carousel 캐러셀 만들기 캐러셀 이미지 아래에 있는 작은 점인 표시기를 캐러셀에 추가합니다. 캐러셀 프로세스는 현재 어떤 그림을 표시할 수 있습니다. .carousel-inner


#🎜🎜 #`.carousel-indicators.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`

#🎜🎜#스위치에 사진 추가 #🎜🎜##🎜🎜##🎜 🎜##🎜🎜#.carousel-item#🎜🎜##🎜🎜#각 이미지의 콘텐츠 지정#🎜🎜##🎜🎜##🎜🎜##🎜🎜# .carousel-control-prev#🎜🎜##🎜🎜#왼쪽에 버튼을 추가하면 클릭하면 이전 사진으로 돌아갑니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#.carousel-control-next#🎜🎜##🎜🎜#오른쪽에 버튼을 추가하고 클릭하면 다음 사진. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#.carousel-control-prev-icon#🎜🎜##🎜🎜#.carousel-control-prev와 함께 사용하고 왼쪽의 버튼 #🎜🎜##🎜🎜##🎜🎜##🎜🎜#.carousel-control-next-icon#🎜🎜##🎜🎜# 및 .carousel-control-next 함께 사용하고 오른쪽 #🎜🎜##🎜🎜##🎜🎜##🎜🎜#.slide#🎜🎜##🎜🎜# 버튼을 설정하여 전환 및 애니메이션 효과를 전환하세요. 이미지에서 이 효과가 필요하지 않은 경우 이 클래스를 삭제할 수 있습니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#

위 내용은 인터넷 연결 없이 부트스트랩 캐러셀 이미지를 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!