Heim > Artikel > Web-Frontend > Wie implementiert man ein Karusselldiagramm in Bootstrap? Einführung in die Implementierungsmethode des Bootstrap-Karusselldiagramms

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

不言Original: 2018-10-19 10:23:254905Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist eine benutzerdefinierte Reaktionsdatenvalidierungskomponente in js (ausführliche Erklärung)?Nächster Artikel：Was ist eine benutzerdefinierte Reaktionsdatenvalidierungskomponente in js (ausführliche Erklärung)?

In Verbindung stehende Artikel

Mehr sehen