Wie implementiert man ein Karusselldiagramm in Bootstrap? Einführung in die Implementierungsmethode des Bootstrap-Karusselldiagramms-js-Tutorial-php.cn

Wie implementiert man ein Karusselldiagramm in Bootstrap? Einführung in die Implementierungsmethode des Bootstrap-Karusselldiagramms

不言

Freigeben： 2018-10-19 10:23:25

Original

4969 Leute haben es durchsucht

Karussellbilder sind auf jeder Website unverzichtbar und stellen im Grunde die auffälligste Stelle auf der Homepage dar. Im heutigen Artikel stellen wir sie Ihnen vor 🎜>Implementierungsmethode des Bootstrap-Karusselldiagramms Interessierte Freunde können einen Blick darauf werfen.

Werfen wir zunächst einen Blick auf ein Plug-in:

Bootstrap Carousel (Carousel) Plug-in

Bootstrap Carousel (Carousel) Plug-in ist flexibel und reaktionsschnell Add-on zur Site Slider Way. Darüber hinaus ist der Inhalt flexibel genug und kann aus Bildern, Iframes, Videos oder anderen Arten von Inhalten bestehen, die Sie platzieren möchten.

Um das Bootstrap-Karusselldiagramm zu implementieren, müssen wir also das Bootstrap-Karussell-Plug-in verwenden. Schauen wir uns eine bestimmte

Bootstrap-Karusselldiagramm-Implementierung an:

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

Nach dem Login kopieren

Hinweis: Wenn Sie die Funktionen dieses Plug-Ins separat referenzieren möchten, müssen Sie auf carousel.js verweisen. Alternativ können Sie auf bootstrap.js oder eine minimierte Version von bootstrap.min.js verweisen.

Dieser Artikel endet hier. Weitere spannende Inhalte finden Sie in der Spalte

Bootstrap-Tutorial auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWie implementiert man ein Karusselldiagramm in Bootstrap? Einführung in die Implementierungsmethode des Bootstrap-Karusselldiagramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!