집 >웹 프론트엔드 >JS 튜토리얼 >부트스트랩에서 회전식 차트를 구현하는 방법은 무엇입니까? 부트스트랩 캐러셀 차트 구현 방법 소개

부트스트랩에서 회전식 차트를 구현하는 방법은 무엇입니까? 부트스트랩 캐러셀 차트 구현 방법 소개

不言원래의: 2018-10-19 10:23:254950검색

캐러셀 이미지는 모든 웹사이트에 없어서는 안될 요소이며, 기본적으로 웹사이트 홈페이지에서 가장 눈에 띄는 위치입니다. 캐러셀 이미지를 구현하는 방법은 다양합니다. 오늘의 글에서는 캐러셀 차트 구현 방법을 소개합니다. 관심있는 사람은 살펴볼 수 있습니다.

먼저 플러그인을 살펴보겠습니다.

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>

참고: 인용하고 싶은 경우 별도로 이 플러그인이 작동하려면 carousel.js를 참조해야 합니다. 또는 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.

이 기사는 여기서 끝납니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트

부트스트랩 튜토리얼 칼럼을 주목하세요! ! !

위 내용은 부트스트랩에서 회전식 차트를 구현하는 방법은 무엇입니까? 부트스트랩 캐러셀 차트 구현 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：js의 사용자 정의 반응 데이터 유효성 검사 구성 요소는 무엇입니까(자세한 설명)다음 기사：js의 사용자 정의 반응 데이터 유효성 검사 구성 요소는 무엇입니까(자세한 설명)