Bootstrap 그림 윤 방 효과 상세 설명

3022 단어 Bootstrap사진 윤파
머리말
Bootstrap 윤 방(Carousel)플러그 인 은 유연 한 응답 식 으로 사이트 에 슬라이더 를 추가 하 는 방식 입 니 다.그 밖 에 내용 도 충분히 유연 합 니 다.이미지,내장 프레임 워 크,동 영상 또는 귀하 가 설치 하고 자 하 는 모든 유형의 내용 일 수 있 습 니 다.
예시
그림 의 윤 방 을 보 여 줍 니 다.boottstrap 의 Carousel 을 사용 하여 순환 재생 요소 플러그 인 을 표시 합 니 다.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src="..." alt="...">
   <div class="carousel-caption">
    ...
   </div>
  </div>
  <div class="item">
   <img src="..." alt="...">
   <div class="carousel-caption">
    ...
   </div>
  </div>
  ...
 </div>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</div>
src 에 그림 을 삽입 하여 그림 크기 를 설정 하 였 습 니 다.

제목 도 붙 일 수 있어 요.

<div class="item">
 <img src="..." alt="...">
 <div class="carousel-caption">
 <h3>...</h3>
 <p>...</p>
 </div>
</div>
enter image description here
레 퍼 런 스
1. Bootstrap 홈 페이지 중국어 문서
2. 초보 학당 Bootstrap 튜 토리 얼
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
vue 구성 요소 의 Alert 구현 코드
vue 와 TypeScript 통합 설정 최 단 튜 토리 얼(추천)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage