캐러셀 이미지는 모든 웹사이트에 없어서는 안될 요소이며, 기본적으로 웹사이트 홈페이지에서 가장 눈에 띄는 위치입니다. 캐러셀 이미지를 구현하는 방법은 다양합니다. 오늘의 글에서는 캐러셀 차트 구현 방법을 소개합니다. 관심있는 사람은 살펴볼 수 있습니다.
먼저 플러그인을 살펴보겠습니다.Bootstrap Carousel Plugin
Bootstrap Carousel 플러그인은 사이트에 슬라이더를 추가하는 유연하고 반응이 빠른 방법입니다. 그 외에도 콘텐츠는 충분히 유연하며 이미지, iframe, 비디오 또는 배치하려는 기타 유형의 콘텐츠가 될 수 있습니다. 그래서 부트스트랩 캐러셀 차트를 구현하려면 Bootstrap 캐러셀(Carousel) 플러그인을 사용해야 합니다. 구체적인bootstrap 캐러셀 차트 구현을 살펴보겠습니다. 예:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap轮播图</title> <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- 轮播(Carousel)指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播(Carousel)项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div> <!-- 轮播(Carousel)导航 --> <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </body> </html>
부트스트랩 튜토리얼 칼럼을 주목하세요! ! !
위 내용은 부트스트랩에서 회전식 차트를 구현하는 방법은 무엇입니까? 부트스트랩 캐러셀 차트 구현 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!